:root {
    --topbar-h: 52px;
    --sidebar-w: 240px;
}

body {
    padding-top: var(--topbar-h);
    background: #f5f6f8;
}

.app-topbar { height: var(--topbar-h); padding: 0; }
.app-topbar .navbar-brand { font-weight: 600; }

.app-sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    overflow-y: auto;
    padding: .75rem .5rem 2rem;
    z-index: 1030;
    transition: transform .25s ease;
}
.app-sidebar .nav-section {
    color: #adb5bd;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .75rem .75rem .25rem;
}
.app-sidebar .nav-link {
    color: #e9ecef;
    padding: .35rem .75rem;
    border-radius: .375rem;
}
.app-sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); }
.app-sidebar .nav-link.active { background: rgba(255, 255, 255, .18); color: #fff; }
.app-sidebar .nav-children { padding-left: .75rem; }
.app-sidebar .nav-children .nav-link { font-size: .925rem; }

.sidebar-backdrop { display: none; }

@media (min-width: 992px) {
    body.has-sidebar .app-main { margin-left: var(--sidebar-w); width: auto; }
}

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1020;
    }
}

.app-main { max-width: 100%; }

/* kept from the old style.css because pages use them */
.col-tax { min-width: 320px; max-width: 100%; }
.breadcrumb-item + .breadcrumb-item::before { content: var(--bs-breadcrumb-divider, ">"); }