/**
 * Desktop sidebar collapse — icons-only rail with hover slide-out.
 *
 * Collapsed state (`html.sidebar_collapsed`, desktop only): the sidebar
 * narrows to an icon rail and the main panel widens to match. Hovering
 * the rail slides the full-width sidebar out OVER the content after a
 * short delay — the main panel never reflows on hover. Nav links keep
 * the same horizontal padding in both states, so icons do not move
 * during the slide-out.
 */
:root {
    --sidebar-width: 250px;
    --sidebar-rail-width: 56px;
    /* Single seam color for every chrome boundary: header bottom,
       logo-block edge, sidebar edge. One color, one geometry.
       0.12 white over #171920 matches the old #30333e seam strength. */
    --chrome-seam: rgba(255, 255, 255, 0.12);
}

/* Sidebar stays scrollable (wheel/trackpad) but the jQuery.scrollbar
   plugin's visual bar is hidden — the theme's 7px light-gray bar adds
   noise with no real affordance here. Scoped to .sidebar. */
.sidebar .scrollbar-inner > .scroll-element {
    display: none !important;
}

/* Rail-only search glyph; shown via the collapsed-rail rules below. */
.sidebar-search-icon {
    display: none;
}

/* Edge toggle is desktop-only; mobile uses the hamburger drawer. */
.sidebar-collapse-toggle {
    display: none;
}

@media (min-width: 992px) {
    /* Transitions */
    .wrapper .sidebar,
    .wrapper .main-panel {
        transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* The logo block and the top bar beside it animate width/padding in
       lockstep with the sidebar, so the logo and the phone icon glide
       between states instead of snapping. */
    .logo-header {
        transition: width 0.25s ease, padding 0.25s ease;
    }

    .navbar-header,
    #topNavBar {
        transition: padding 0.25s ease;
    }

    html.sidebar-no-transition .wrapper .sidebar,
    html.sidebar-no-transition .wrapper .main-panel,
    html.sidebar-no-transition .logo-header,
    html.sidebar-no-transition .navbar-header,
    html.sidebar-no-transition #topNavBar,
    html.sidebar-no-transition .sidebar-collapse-toggle {
        transition: none !important;
    }

    /* Edge toggle: a slim pull-tab fused to the sidebar's outer edge
       at the search row (drawer-handle pattern). It sits entirely
       OUTSIDE the sidebar, so it never overlaps the search or nav.
       It is a SIBLING of .sidebar so hovering it never triggers the
       rail's hover slide-out, and it fades while the menu slides out. */
    /* The tab shares the sidebar's surface color and overlaps its
       border, so it reads as the sidebar's own edge bulging out into
       a pull handle — no joint, the seam just flows around it. */
    .sidebar-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: calc(var(--sidebar-width) - 1px);
        transform: translateY(-50%);
        width: 11px;
        height: 52px;
        padding: 0;
        border: 1px solid var(--chrome-seam);
        border-left: none;
        border-radius: 0 6px 6px 0;
        background: var(--surface-0), #171920;
        color: var(--text-muted);
        cursor: pointer;
        z-index: 1001;
        transition: left 0.25s ease, opacity 0.15s ease,
                    color 0.2s ease,
                    height 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Invisible hit zone extending left over the sidebar's edge: the
       button is a sibling of .sidebar, so pointer events landing here
       belong to the button — approaching the handle does not hover
       the sidebar, so the rail never slides out under the cursor. */
    .sidebar-collapse-toggle::before {
        content: '';
        position: absolute;
        left: -12px;
        top: -10px;
        bottom: -10px;
        width: 16px;
    }

    /* Grip stretches taller and the chevron lights up in the accent
       green with a soft glow — color lives on the glyph, so there is
       no fill and no seam against the sidebar edge. */
    .sidebar-collapse-toggle:hover,
    .sidebar-collapse-toggle:focus {
        height: 76px;
        color: var(--color-green, #34d399);
        outline: none;
    }

    .sidebar-collapse-toggle:hover i,
    .sidebar-collapse-toggle:focus i {
        text-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
    }

    .sidebar-collapse-toggle i {
        font-size: 12px;
        line-height: 1;
        transition: transform 0.25s ease, text-shadow 0.2s ease;
    }

    /* Wide viewports keep the sidebar expanded; the rail toggle is
       meaningless there, so hide it. */
    html.sidebar-auto-expanded .sidebar-collapse-toggle {
        display: none;
    }

    html.sidebar_collapsed .sidebar-collapse-toggle {
        left: calc(var(--sidebar-rail-width) - 1px);
    }

    html.sidebar_collapsed .sidebar-collapse-toggle i {
        transform: rotate(180deg);
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) ~ .sidebar-collapse-toggle {
        opacity: 0;
        pointer-events: none;
    }

    /* Hide overflow only while the toggle animates to prevent a
       scrollbar flash from the main-panel width change. */
    html.sidebar-transitioning,
    html.sidebar-transitioning body {
        overflow: hidden !important;
    }

    /* --- Collapsed rail --- */

    /* Overflow is clipped on the inner wrapper, not the sidebar
       itself, so the edge toggle can protrude past the seam. */
    html.sidebar_collapsed .wrapper .sidebar {
        width: var(--sidebar-rail-width);
    }

    html.sidebar_collapsed .sidebar .sidebar-wrapper {
        overflow-x: hidden;
    }

    html.sidebar_collapsed .wrapper .main-panel {
        width: calc(100% - var(--sidebar-rail-width));
    }

    /* Nav anchors are flex containers: at rail width their children
       would SHRINK (compressing the icon column), then decompress on
       hover — moving the icons. Forbid shrinking so content simply
       overflows and is clipped; icons stay pinned at the same x. */
    html.sidebar_collapsed .sidebar .nav a > i,
    html.sidebar_collapsed .sidebar .nav a .sub-item,
    html.sidebar_collapsed .sidebar .nav a .caret,
    html.sidebar_collapsed .sidebar .nav a .badge {
        flex-shrink: 0;
    }

    /* Labels and chrome fade out in the rail. Rows keep their height
       (opacity, not display) so nothing shifts vertically between the
       rail and the slide-out. */
    html.sidebar_collapsed .sidebar .nav > .nav-item > a .sub-item,
    html.sidebar_collapsed .sidebar .caret,
    html.sidebar_collapsed .sidebar .badge,
    html.sidebar_collapsed .sidebar .nav-section h4.text-section,
    html.sidebar_collapsed .sidebar .input-kbd-hint {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    /* Text must never re-wrap between rail and slide-out widths — a
       wrapped line changes row height and shifts every icon below it. */
    html.sidebar_collapsed .sidebar .sub-item,
    html.sidebar_collapsed .sidebar .nav-section h4.text-section {
        white-space: nowrap;
    }

    /* Search: in the rail the input fades out and a magnifier icon
       takes its place; they crossfade during the slide-out. */
    html.sidebar_collapsed .sidebar #id_navSearch {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    html.sidebar_collapsed .sidebar-search-icon {
        display: block;
        position: absolute;
        top: 50%;
        left: 20.5px;
        transform: translate(-50%, -50%);
        color: var(--text-tertiary);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.15s ease;
    }

    /* --- Hover slide-out (overlay, no content reflow) ---
       `.sidebar-peek` mirrors :hover so JS (Alt+S) can force the
       slide-out without un-collapsing the rail. */

    html.sidebar_collapsed .wrapper .sidebar:is(:hover, .sidebar-peek) {
        width: var(--sidebar-width);
        transition-delay: 0.09s;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.45);
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .nav > .nav-item > a .sub-item,
    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .caret,
    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .badge,
    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .nav-section h4.text-section {
        opacity: 1;
        transition-delay: 0.09s;
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .input-kbd-hint {
        opacity: 0.35;
        transition-delay: 0.09s;
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) #id_navSearch {
        opacity: 1;
        transition-delay: 0.09s;
    }

    html.sidebar_collapsed .sidebar:is(:hover, .sidebar-peek) .sidebar-search-icon {
        opacity: 0;
        transition-delay: 0.09s;
    }

    /* --- Chrome seams ---
       One horizontal seam under the whole top bar; one vertical seam
       at the sidebar edge. Logo block and sidebar use the same real
       border on the same box geometry, so the vertical line is
       continuous and meets the header seam in a clean T-junction. */

    .main-header,
    .navbar-header {
        border: none !important;
        box-shadow: none !important;
    }

    .main-header {
        border-bottom: 1px solid var(--chrome-seam) !important;
    }

    .logo-header {
        position: relative;
        border-right: 1px solid var(--chrome-seam);
    }

    .wrapper .sidebar {
        border-right: 1px solid var(--chrome-seam);
        box-shadow: none;
    }

    /* --- Logo header when collapsed: blend into the top bar --- */

    /* The logo block loses its panel background and edge seam so it
       reads as part of the top bar; the vertical seam continues along
       the rail below the header. It also shrink-fits the logo and hugs
       the left edge (16px, aligning with the rail icon column), so the
       logo and the top bar beside it pull in tight instead of floating
       in a 250px block over the 56px rail. */
    html.sidebar_collapsed .logo-header {
        background: #171920 !important;
        border-right-color: transparent;
        /* Fixed (not auto) so the block width animates: 200px content
           box — identical to expanded (250px − 2×25px) so the logo
           renders the same size — plus 2×16px padding. */
        width: 232px;
        padding-left: 9px;
        padding-right: 16px;
    }

    /* Keep the logo exactly the size it is when expanded. There its
       width is capped by the 200px content box (250px block − 2×25px
       padding); `width: auto` would otherwise free the image to grow to
       its 60px max-height, so re-apply that 200px cap here. */
    html.sidebar_collapsed .logo-header .logo img {
        max-width: 200px;
    }

    /* The top bar flows beside the logo block; its left start is the
       block's right edge PLUS the navbar's own left padding (Bootstrap
       `.navbar` 1rem) and `#topNavBar`'s 18px. Zero those out when
       collapsed so the first top-bar item (the phone launcher) tucks in
       right after the logo instead of sitting ~34px past it. */
    html.sidebar_collapsed .navbar-header {
        padding-left: 0;
    }

    html.sidebar_collapsed #topNavBar {
        padding-left: 0;
    }
}

/**
 * Ultra-wide screens: the content is capped at 1920px, but the navbar
 * centers in the space right of the 250px logo block while the content
 * centers right of the sidebar — their axes drift ~97px apart. Anchor
 * the navbar to the sidebar edge so both center on the same axis.
 */
@media (min-width: 2240px) {
    /* content-box: the 62px children (logo block, navbar) fill the
       content area exactly and the bottom seam stays outside them. */
    body[data-compact-page="true"] .main-header {
        height: 62px;
        box-sizing: content-box;
    }

    /* Auto side margins (ml-auto/mr-auto) center the capped box
       between `left` and `right`. `bottom: 0` keeps the box inside the
       header's content area so it cannot paint over the bottom seam. */
    body[data-compact-page="true"] .navbar-header {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--sidebar-width);
        right: 0;
        min-height: 0;
    }

    html.sidebar_collapsed body[data-compact-page="true"] .navbar-header {
        left: var(--sidebar-rail-width);
    }
}

/**
 * Mobile drawer: the sidebar slides OVER the page behind a dimmed
 * scrim instead of pushing the content sideways (the theme's default
 * translates .main-panel/.main-header, which reflows everything).
 */
@media screen and (max-width: 991.98px) {
    /* Alt+S is keyboard-only — hide the hint on touch layouts */
    .input-kbd-hint {
        display: none;
    }

    .nav_open .main-panel,
    .nav_open .main-header {
        transform: none !important;
    }

    /* The theme's `transition: all .5s` (for the old push animation)
       also animates the scrollbar-compensation padding and gets stuck
       mid-flight. The header no longer moves on mobile — no transition. */
    .main-header {
        transition: none !important;
    }

    /* Lock page scroll while the drawer is open. The theme hides
       overflow on <html> only; body is its own scroll container and
       would still show a scrollbar next to the scrim. */
    html.nav_open body {
        overflow: hidden;
    }

    /* The theme's `overflow-x: hidden` on .wrapper forces overflow-y
       to compute to auto, making .wrapper paint its own scrollbar at
       the right edge while the drawer is open. Nothing overflows
       horizontally anymore (content is no longer pushed), so undo it. */
    .nav_open .wrapper {
        overflow: visible;
    }

    /* Topbar drawer (the ⋮ button) overlays the content instead of
       pushing the whole page down (no flashing reflow). */
    .topbar_open .main-panel,
    .nav_open.topbar_open .main-panel {
        transform: none !important;
    }

    .topbar_open .navbar-header {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        border-bottom: 1px solid var(--chrome-seam);
    }

    .topbar_open .logo-header {
        /*border-bottom: 1px solid var(--chrome-seam) !important;*/
        border-bottom: 0 !important;
    }

    .nav_open .sidebar {
        z-index: 1040;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.45);
        border-right: 1px solid var(--chrome-seam) !important;
    }
}


.sidebar .nav-item:hover:not(.nav-group), .sidebar .nav-item. .submenu .nav-item {
    background-color: #22252a !important;
}

.sidebar .nav-item:hover:not(.nav-group) .sub-item {
    color: white !important;
    font-weight: bold !important;
}

/* Keyboard focus mirrors hover. Focus lands on the inner <a> (not the
   .nav-item li), and :focus-visible keeps this to keyboard tabbing so
   mouse clicks don't trigger it. !important beats the focus-neutralizing
   rule below that sets non-active anchors transparent. */
.sidebar .nav-item:not(.nav-group) > a:focus-visible {
    background-color: #22252a !important;
}

.sidebar .nav-item:not(.nav-group) > a:focus-visible .sub-item {
    color: white !important;
    font-weight: bold !important;
}

/* Nav group header: hover highlights only the clickable header, not the
   expanded children area. */
.sidebar .nav-group > a:hover,
.sidebar .nav-group > a:focus-visible {
    background-color: #22252a !important;
}
.sidebar .nav-group > a:hover .sub-item,
.sidebar .nav-group > a:focus-visible .sub-item {
    color: white !important;
    font-weight: bold !important;
}

/* Suppress the default 4px left-edge blue bar on active items nested in a
   collapse group — the group header already carries an active indicator. */
.sidebar .nav-collapse .nav-item.active > a:before,
.sidebar .nav-collapse .nav-item.active:hover > a:before {
    opacity: 0 !important;
}

/* Active nested item: subtle rounded pill + a brighter bullet instead of
   the redundant edge bar. */
.sidebar .nav-collapse .nav-item.active > a {
    background-color: rgba(21, 114, 232, 0.14) !important;
    border-radius: 4px;
}
.sidebar .nav-collapse .nav-item.active > a .sub-item:before {
    background: #1572e8 !important;
    width: 6px;
    height: 6px;
}

/* Child NavItem icons are kept in the markup so they render cleanly when
   a group collapses to a single standalone item — but inside the collapse
   the bullet marker is the visual cue, so hide the fa icon there. */
.sidebar .nav-collapse .nav-item > a > i.fa {
    display: none;
}

/* Section headers: small uppercase label, non-interactive, chunks the
   nav without hiding anything. Left padding matches the nav item's
   icon column so the label sits flush above the icons below it. A thin
   top border + a little top padding give each section a visual break. */
.sidebar .nav-section {
    list-style: none;
    pointer-events: none;
    padding: 10px 10px 7px 7px !important;
    margin: 8px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar .nav-section h4.text-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(240, 241, 243, 0.4);
    line-height: 1;
    margin: 0 !important;
    padding: 0 0 0 11px !important;
}
.sidebar .nav-section:before {
    content: none !important;
}

/* Theme adds a 4px blue edge bar whenever a collapse is expanded
   (aria-expanded=true) — that looks like a "selected" indicator and
   collides with the truly-active page. Only keep the bar when a child
   inside the group is actually the current page (i.e. the group li
   carries `.active`). */
.sidebar .nav > .nav-group:not(.active) > a[data-toggle=collapse][aria-expanded=true]:before {
    opacity: 0 !important;
}
.sidebar .nav > .nav-group:not(.active) > a[data-toggle=collapse][aria-expanded=true] i {
    color: inherit !important;
}

/* Clicking the group header leaves focus on the <a>, which by default
   paints a background that mimics "selected" and turns the icon blue
   (theme's `.nav-primary > .nav-item a:focus i` rule). Neutralize focus
   styling on nav anchors — the active/expanded state already tells the
   story. */
.sidebar .nav > .nav-item:not(.active) > a:focus,
.sidebar .nav-collapse .nav-item:not(.active) > a:focus {
    background-color: transparent;
    outline: none;
}
.sidebar .nav > .nav-item:not(.active) > a:hover i,
.sidebar .nav > .nav-item:not(.active) > a:focus i,
.sidebar .nav-collapse .nav-item:not(.active) > a:hover i,
.sidebar .nav-collapse .nav-item:not(.active) > a:focus i {
    color: inherit !important;
}

/* Tighten the dead space under an expanded collapse. Theme ships with
   margin-bottom: 15px + padding-bottom: 15px = 30px of empty gap.
   A thin bottom rule visually terminates the expanded list so the
   next nav item doesn't read as another child. */
.sidebar .nav-collapse {
    margin: 0 8px 6px !important;
    padding: 4px 0 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Nested list polish: slightly brighter bullet, tighter rows. */
.sidebar .nav-collapse .nav-item > a {
    margin-bottom: 1px !important;
    padding: 4px 10px !important;
}
.sidebar .nav-collapse .nav-item > a .sub-item:before {
    background: rgba(180, 182, 190, 0.6);
}
/* Make the navbar take up a bit less space. 16px horizontal padding
   centers the 25px icon column inside the 56px collapsed rail. */
.sidebar .nav > .nav-item a, .sidebar[data-background-color="white"] .nav > .nav-item a {
    padding: 1px 8px 1px 16px;
}