/*  Sidebar visibility.

    Two things the theme does not do on its own.

    First, there was no state in which the sidebar is actually gone. Collapsing it set
    data-sidebar-size="sm", which is a narrow icon rail - still there, still taking about 70px of
    a laptop screen, still tabbable. "none" below is the state that means gone.

    Second, on a phone the menu is moved off-canvas with margin-left:-100% but stays visible to
    the browser: it can be reached with the tab key and read by a screen reader while it is
    supposedly hidden, and on a narrow screen it can be swiped into view. Making it
    visibility:hidden takes it out of the layout properly, and the transition is kept so it still
    slides rather than blinking.

    Loaded after responsive.css so it wins; the !important flags are there because the theme's own
    rules for .app-menu are themselves !important.
*/

/* --------------------------------------------------------------- gone means gone */

/*  "sm" - the state collapsing used to reach - is a narrow icon rail: still on screen, still
    taking about 70px, still tabbable. This is the state that means gone.

    Expressed with display rather than width or transform. The panel used to be a Syncfusion
    component that rewrote those two as inline styles, and display was the one property it did
    not touch; now that it is plain markup either would work, but display is still the clearest
    way to say "not here" and it takes the menu out of the tab order for free. */

/*  :not(body) IS LOAD-BEARING, AND THIS WAS A BLANK SHOP ON EVERY PHONE.

    "twocolumn-panel" is two different things in this theme. It is the two-column menu's flyout
    panel - which is what this rule means - and it is also a state class app.js puts on <body>
    at 767px and below, on every page, as part of its normal responsive handling.

    Without the guard the second meaning matched: on a phone the shop set data-sidebar-size to
    "none", this rule found body.twocolumn-panel, and display:none took the entire document with
    it. The markup was all there - thirty-nine tiles in the DOM - inside a body with no width and
    no height, so the page rendered white with nothing on it. Only the shop, because the shop is
    the only thing that sets "none", and only on phones, because that is where app.js adds the
    class.

    A panel inside the menu is never the body, so excluding it costs the rule nothing. */
html[data-sidebar-size="none"] .app-menu,
html[data-sidebar-size="none"] .app-menu.navbar-menu,
html[data-sidebar-size="none"] #two-column-menu,
html[data-sidebar-size="none"] .twocolumn-panel:not(body) {
    display: none !important;
}

/*  Everything positioned around the sidebar comes back to the edge, or the page keeps a
    sidebar-shaped gap where the sidebar used to be. */
/*  The theme puts "transition: all .1s ease-out" on .main-content, and that transition is the
    reason the sidebar would not hide.

    Changing the sidebar size changes several properties at once, and the margin-left transition
    that starts then never finishes - it sits in playState "running" indefinitely. A running
    transition supplies the property's value ahead of the cascade, so while it is stuck the
    element keeps its old margin and nothing can shift it: not a more specific rule, not even an
    inline "margin-left: 0 !important". Verified on the live site - calling finish() on the stuck
    transition dropped the margin to 0 that instant.

    It sticks in both directions, so the transition is switched off for these three regardless of
    state rather than only for the hidden one. The cost is a 100ms slide nobody will miss; the
    alternative is a layout that is sometimes simply wrong. The sidebar itself still animates -
    this is only the content, topbar and footer that sit around it. */
.main-content,
#page-topbar,
.footer {
    transition: none !important;
}

html[data-sidebar-size="none"] .main-content,
html[data-sidebar-size="none"] .main-content.mis-main {
    margin-left: 0 !important;
}

html[data-sidebar-size="none"] #page-topbar,
html[data-sidebar-size="none"] .footer {
    left: 0 !important;
}

/* --------------------------------------------------------------- the menu scrolls */

/*  The sidebar stopped scrolling when ejs-sidebar was replaced with a div.

    Syncfusion wrote an explicit height onto that element, and everything below it - .main-menu,
    then #scrollbar with its h-100 - hung off that height. A plain div has no height of its own,
    so the whole chain collapsed: #two-column-menu measured 104px (the height of the logo alone)
    and #scrollbar measured 0. The menu tree then simply overflowed a zero-height box, with no
    scroll region and the items past the fold unreachable.

    Rebuilt as a flex column instead of borrowing a height from a component: the panel is full
    height, the brand box and search keep their natural size, and the tree takes what is left and
    scrolls inside it.

    min-height:0 on the flex children is what makes it work at all - a flex item defaults to
    min-height:auto, which refuses to shrink below its content, so without it the tree would
    push the container taller than the screen instead of scrolling.

    SimpleBar builds its own boxes inside #scrollbar and had cached the zero height from before;
    giving those boxes a full height keeps its scrollbar in step with the region it is scrolling. */

.app-menu > #two-column-menu {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-menu #two-column-menu > .main-menu {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}

/*  The logo and the search box are fixed furniture above the tree. */
.app-menu .main-menu > .table-content,
.app-menu .main-menu > .sidebar-menu-search {
    flex: 0 0 auto;
}

/*  h-100 in the markup would pin this to the parent's height; flex sizing has to win instead. */
.app-menu #scrollbar {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}

.app-menu #scrollbar .simplebar-wrapper,
.app-menu #scrollbar .simplebar-mask,
.app-menu #scrollbar .simplebar-offset,
.app-menu #scrollbar .simplebar-content-wrapper {
    height: 100%;
    max-height: 100%;
}

/* --------------------------------------------------------------- the phone */

/*  responsive.css already slides the menu with transform: translateX(), because this sidebar is
    a Syncfusion component and the theme's own margin-left off-canvas rules never matched it.
    This adds the one thing that was missing rather than introducing a second mechanism: the menu
    was moved off-screen but stayed visible to the browser, so it could be reached with the tab
    key and read by a screen reader while it was supposedly shut.

    The transition carries !important because responsive.css sets one with !important too, and
    the visibility delay has to match the slide - hidden only after it has finished moving out,
    visible immediately on the way in, or it would blink. */
@media (max-width: 767.98px) {

    .app-menu.navbar-menu {
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s !important;
    }

    body.vertical-sidebar-enable .app-menu.navbar-menu {
        visibility: visible;
        transition: transform .2s ease, visibility 0s linear 0s !important;
    }

    /*  The scrim itself is responsive.css's job - it dims the page and is what a tap outside the
        menu lands on. This only stops the page behind it scrolling while it is up. */
    body.vertical-sidebar-enable {
        overflow: hidden;
    }
}

/*  Somebody who has asked for less motion gets the state change without the slide. */
@media (prefers-reduced-motion: reduce) {
    .app-menu.navbar-menu { transition: none !important; }
}

/* ------------------------------------------------------------ the menu's own ground */

/*  A DARK BLUE GROUND WITH LINES CROSSING IT.

    The menu was a flat periwinkle panel - one colour, edge to edge, sitting under a near-black
    logo pill that plainly belonged to a different palette. This puts the two on the same ground.

    Three things are layered here, in the order the browser paints them (last is furthest back):

      1. the ground   a vertical gradient from indigo-deep down to the near-black the rest of the
                      brand is drawn on, so the menu gets darker as it goes and the eye is not
                      asked to read white text off a mid-tone.
      2. the glow     indigo from the top, cyan from the bottom - the same two lights the sign-in
                      page and the shop masthead use.
      3. the lines    three sets of hairlines at 23, 72 and 114 degrees.

    WHY THREE ANGLES AND THREE DIFFERENT SPACINGS. One repeating gradient is a stripe pattern and
    reads as corduroy. Three at angles that share no common factor, with periods that do not
    divide into each other (190, 260, 300), never line up twice down the height of a menu - so the
    crossings fall in different places all the way down and the eye reads it as incidental rather
    than as a texture that repeats.

    Alpha is deliberately low. This sits behind menu text that has to stay readable at a glance;
    anything stronger and the lines start competing with the labels.

    !important throughout because the theme's own .app-menu rules are !important - see the note
    at the top of this file. */

.app-menu,
.app-menu.navbar-menu {
    background-color: #0A0E1A !important;
    background-image:
        repeating-linear-gradient(114deg,
            transparent 0 78px,
            rgba(34, 211, 238, .055) 78px 79px,
            transparent 79px 190px),
        repeating-linear-gradient(23deg,
            transparent 0 120px,
            rgba(129, 140, 248, .05) 120px 121px,
            transparent 121px 260px),
        repeating-linear-gradient(72deg,
            transparent 0 96px,
            rgba(196, 181, 253, .038) 96px 97px,
            transparent 97px 300px),
        radial-gradient(120% 38% at 18% 0%, rgba(99, 102, 241, .30), transparent 62%),
        radial-gradient(120% 34% at 92% 100%, rgba(34, 211, 238, .14), transparent 62%),
        linear-gradient(180deg, #151B3E 0%, #101436 46%, #0A0E1A 100%) !important;

    /*  The lines are drawn once over the whole panel rather than tiling with the scroll, so a
        long menu does not show the pattern restarting halfway down. */
    background-attachment: local, local, local, local, local, local !important;
    border-right: 1px solid rgba(99, 102, 241, .22) !important;
}

/*  Everything stacked inside has to be see-through or it paints over the ground. The theme gives
    several of these their own solid fill. */
.app-menu > #two-column-menu,
.app-menu #two-column-menu > .main-menu,
.app-menu #scrollbar,
.app-menu #scrollbar .simplebar-wrapper,
.app-menu #scrollbar .simplebar-mask,
.app-menu #scrollbar .simplebar-offset,
.app-menu #scrollbar .simplebar-content-wrapper,
.app-menu .main-menu > .table-content,
.app-menu .navbar-nav {
    background: transparent !important;
}

/*  The active item reads as a lit panel against the dark rather than a block of colour, with the
    brand's cyan marking the edge - the same cue the spectrum strip makes everywhere else. */
.app-menu .navbar-nav .nav-link.active,
.app-menu .navbar-nav .nav-link[aria-expanded="true"] {
    background: linear-gradient(90deg, rgba(34, 211, 238, .18), rgba(99, 102, 241, .10)) !important;
    box-shadow: inset 3px 0 0 0 #22D3EE !important;
}

.app-menu .navbar-nav .nav-link:hover {
    background: rgba(224, 242, 254, .07) !important;
}

/* --------------------------------------------------- documents, at the foot of the menu */

/*  A file store belongs at the bottom of a sidebar, the way it does in every application that
    has one. It is furniture rather than a menu item: it sits outside #scrollbar so the tree can
    grow to any length without ever pushing it off, and it never moves when the module ordering
    changes.

    .main-menu is a flex column and #scrollbar above takes the remaining space, so this only has
    to decline to grow. */
.app-menu .sidebar-docs {
    flex: 0 0 auto;
    padding: 10px 14px 16px;
    border-top: 1px solid rgba(99, 102, 241, .22);
}

.app-menu .sidebar-docs-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #C7D2FE;
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease;
}

.app-menu .sidebar-docs-link:hover,
.app-menu .sidebar-docs-link:focus-visible {
    /*  Amber at a tenth strength - the folder's own colour lighting its row, rather than the
        cyan the tree uses. It reads as a different kind of thing, which it is. */
    background: rgba(251, 191, 36, .10);
    color: #F0F9FF;
    text-decoration: none;
}

/*  THE ONE WARM COLOUR IN THE MENU, AND THAT IS THE POINT.

    Everything else here is indigo, cyan and lavender. A folder is amber in every file manager
    anybody has used, and against this ground it is the one thing the eye finds without reading -
    which is exactly what is wanted from the item somebody goes to when they are looking for a
    document rather than a screen. Warm against cool, so it stands out without clashing. */
.app-menu .sidebar-docs-link i {
    font-size: 19px;
    color: #FBBF24;
    flex: 0 0 auto;
}

.app-menu .sidebar-docs-link:hover i { color: #FCD34D; }

/*  On the icon rail the label has nowhere to go; the title attribute in the markup carries it. */
html[data-sidebar-size="sm"] .app-menu .sidebar-docs-label,
html[data-sidebar-size="sm-hover"] .app-menu .sidebar-docs-label {
    display: none;
}
html[data-sidebar-size="sm"] .app-menu .sidebar-docs-link,
html[data-sidebar-size="sm-hover"] .app-menu .sidebar-docs-link {
    justify-content: center;
}

/*  The library list, opening upward.

    Upward because the menu is already full height and there is nothing below this to grow into -
    pushing down would either scroll the item off the bottom or squash the tree. Absolute, so the
    tree keeps its own height while the list is open.

    Capped and scrollable: nineteen libraries is more than fits above a footer on a laptop, and a
    list that runs off the top of the screen is worse than one that scrolls. */
.app-menu .sidebar-docs { position: relative; }

.app-menu .sidebar-docs-link {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.app-menu .sidebar-docs-chev {
    margin-left: auto;
    font-size: 16px;
    color: #818CF8;
    transition: transform .18s ease;
}
.app-menu .sidebar-docs-link.is-open .sidebar-docs-chev { transform: rotate(180deg); }

.app-menu .sidebar-docs-list {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% - 6px);
    z-index: 20;

    max-height: min(58vh, 420px);
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;

    /*  Its own panel rather than the menu's ground showing through, so the list reads as sitting
        above the tree rather than dissolving into it. */
    background: linear-gradient(180deg, #171E45 0%, #0F1330 100%);
    border: 1px solid rgba(99, 102, 241, .30);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);
}

.app-menu .sidebar-docs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #C7D2FE;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.25;
}

.app-menu .sidebar-docs-item i {
    font-size: 16px;
    color: #FBBF24;
    flex: 0 0 auto;
}

.app-menu .sidebar-docs-item:hover,
.app-menu .sidebar-docs-item:focus-visible {
    background: rgba(251, 191, 36, .10);
    color: #F0F9FF;
    text-decoration: none;
}

/*  A thin amber scrollbar so the list looks like part of the folder rather than the browser. */
.app-menu .sidebar-docs-list::-webkit-scrollbar { width: 8px; }
.app-menu .sidebar-docs-list::-webkit-scrollbar-track { background: transparent; }
.app-menu .sidebar-docs-list::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, .28);
    border-radius: 4px;
}
.app-menu .sidebar-docs-list::-webkit-scrollbar-thumb:hover { background: rgba(251, 191, 36, .45); }

/* --------------------------------------------------------------- menu width */
/*  Widened from the theme's 250px to 270px so the longer group labels sit on one line.
    Overriding the token cascades to the panel width, the content margin-left and the fixed
    header/footer offset - they all read from this one variable. Loaded after app.min.css, so
    this :root wins. */
:root { --vz-vertical-menu-width: 270px; }