/* =========================================================
   ASP.NET MENU — Modernized (top bar + dropdowns)
   ========================================================= */


/* THE "YOU ARE HERE" VOCABULARY, ONE SET OF TOKENS (see the block NAV AND BREADCRUMB CURRENT STATE at the end of this file).
   The top bar's underline, the left nav's underline and the item-page breadcrumb's hover/focus underline are the same bar: same thickness,
   same grow/retract timing. Only the colour differs by surface: on the brand bar it is a translucent white, on a light surface it is the brand colour. */
:root {
    --nav-underline-height: 2px;
    --nav-underline-duration: 160ms;
    --nav-underline-ease: ease-out;
    --nav-underline-on-brand: rgba(255,255,255,.45);
    --nav-underline-on-light: var(--brand-primary);
    --nav-current-chip: color-mix(in srgb, var(--brand-primary) 14%, var(--surface));
    --nav-current-chip-hover: color-mix(in srgb, var(--brand-primary) 22%, var(--surface));
}

/* Disable native title tooltip when custom tooltip is used */
.menuBar a[data-tooltip] {
    pointer-events: auto;
}


.appbar {
    background: var(--appbar-bg);
    color: var(--brand-on-primary);
    height: var(--appbar-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-1);
}

    .appbar .menuBar {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Top-level UL */
.menuBar > ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    float: none !important;
    width: auto !important;
}

    /* Top-level LIs */
    .menuBar > ul > li {
        position: relative;
        float: none !important;
    }

/* Dropdown ULs */
.menuBar ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-2);
    min-width: 91px;
    z-index: 2000;
    display: none; /* THIS MUST BE HERE otherwise submenus will be visible on initial render (flash)*/
}

/* Links */
.menuBar a {
    display: inline-flex; /*block;*/
    text-decoration: none;
    font-size: 16px;
}

/* =========================================================
   TOP-LEVEL TABS
   ========================================================= */
.menuBar > ul > li > a {
    position: relative;
    background: none;
    border: 0;
    color: var(--brand-on-primary);
    border-radius: 8px;
    padding: 6px 12px; /*includes extra right padding for chevron */
}

    /* Hover chip for top-level */
    .menuBar > ul > li > a:hover,
    .menuBar > ul > li > a:focus,
    .menuBar > ul > li > a:focus-visible {
        background: rgba(255,255,255,.12);
        border-radius: 8px;
        color: #fff;
        outline: none;
    }

/* Top-level tab is active when a descendant menu item is selected */
.menuBar > ul > li:has(a.selected) > a {
    background: rgba(255,255,255,.18);
    color: var(--brand-on-primary);
    font-weight: 600;
}

    .menuBar > ul > li:has(a.selected) > a:hover {
        background: rgba(255,255,255,.18);
    }

    .menuBar > ul > li:has(a.selected) > a::before {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 2px;
        height: var(--nav-underline-height);
        background: var(--nav-underline-on-brand);
        border-radius: var(--nav-underline-height);
        /* animation setup */
        transform: scaleX(1);
        transform-origin: center;
        transition: transform var(--nav-underline-duration) var(--nav-underline-ease);
    }

.menuBar > ul > li:has(a.selected):hover > a::before,
.menuBar > ul > li:has(a.selected):focus-within > a::before {
    transform: scaleX(0);
}


/*Selected (active page) */
.menuBar > ul > li.menuSelected > a,
.menuBar > ul > li.menuStaticSelected > a {
    background: none;
    border-radius: 8px;
    color: #fff;
}

/*Kill purple visited on top bar */
.appbar .menuBar > ul > li > a:visited {
    color: var(--brand-on-primary);
}


/* =========================
ASP.NET Menu section separators
========================= */

.menuBar img[src*="menu-divider"] {
    display: block;
    width: calc(100% - 12px);
    height: 1px;
    margin: 10px 6px;
    background-color: var(--border);
    opacity: 1;
    border: 0;
}


/*=========================================================
   CHEVRONS FOR ITEMS WITH CHILDREN (structure-based)
   =========================================================*/

/*Top-level items that have children: give room for chevron */
.menuBar > ul > li:has(> ul) > a {
    position: relative;
    padding-right: 2rem; /*more room so text and chevron don’t collide */
}

/* TL-76 2026-10-05: THIS IS THE ONLY RULE THAT SETS THE TOP-LEVEL CHEVRON PADDING, AND IT WORKS BY ITSELF.
   A second rule used to follow it - "#ctl00_LoginView1_menuMain.menuBar > ul > li:has(> ul) > a { padding-right: 2rem }",
   added because this one "didn't work without !important". It could never match: Site.master sets
   ClientIDMode="Static" on the Menu, so it renders as id="menuMain", not the generated ctl00_... id. The padding that
   looked fixed by it was this rule. Removed after measuring all nine top-level items at padding-right 32px with it
   present and again with it gone. (The bar is 72px wider for an Administrator than the old 24px, because nine
   items carry the extra 8px; nav-compact.js measures the bar at run time, so the switch width follows.) */

/*Chevron*/

.menuBar > ul > li:has(> ul) > a::after {
    width: 12px;
    height: 12px;
    background-image: var(--chevron-down);
    background-repeat: no-repeat;
    background-size: 12px 12px;
    opacity: 0.8;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 160ms ease, opacity 120ms ease;
}

.menuBar > ul > li:hover > a::after,
.menuBar > ul > li:focus-within > a::after {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
}

.menuBar li:has(> ul) > a::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--menu-chevron-color);
    opacity: .9;
    transition: color .12s ease, opacity .12s ease;
}

/* Hover — brighten */
.menuBar li:has(> ul) > a:hover::after,
.menuBar li:has(> ul) > a:focus-visible::after {
    color: var(--menu-chevron-color-hover);
    opacity: 1;
}

/*Selected — stay bright */
.menuBar li.menuSelected:has(> ul) > a::after,
.menuBar li.menuStaticSelected:has(> ul) > a::after {
    color: #fff;
    opacity: 1;
}




/*=========================================================
   DROPDOWN PANEL + ITEMS
   ========================================================= */

/* ==========================================================================
   Menu panel styling (applies to all dynamic submenus)
   ========================================================================== */

#menuMain ul.menuDynamic.dynamic {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-left-color: var(--brand-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    white-space: nowrap;
    /* spacing */
    padding: 6px 4px;
    padding-left: 10px; /* compensate for left accent border */
}


    /* Adjust menu panel when it has a single child
   NOTE: :has() is modern; if you support older enterprise browsers, add a non-:has fallback. */
    #menuMain ul.menuDynamic.dynamic:has(> li:only-child) {
        padding: 2px 4px 1px 10px;
        min-width: 150px; /* This is the minimum width of the first submenu with only one child adjust if menu item changes*/
    }

        #menuMain ul.menuDynamic.dynamic:has(> li:only-child) > li > a {
            border-radius: var(--radius);
            padding: 6px 16px;
        }


/* ==========================================================================
   Motion defaults / shared behavior
   ========================================================================== */

/* Tune these once */
#menuMain {
    --menu-ease: cubic-bezier(.2, .8, .2, 1);
    --menu-dur: 140ms;
    --menu-shift: 6px;
    --menu-scale: 0.985;
    --menu-item-height: 36px; /* used by level-4 flip */
}

    /* Only dynamic panels participate in animation */
    #menuMain ul.menuDynamic.dynamic {
        transform-origin: top left;
        backface-visibility: hidden;
        will-change: transform, opacity;
    }

    /* Make level5 open downward under its parent */
    #menuMain ul.level5.menuDynamic.dynamic {
        top: 100% !important; /* move below the Co-op item */
        left: 0 !important; /* align with the Co-op item */
        right: auto !important; /* ensure no right-side anchoring */
        transform: none !important; /* remove any inherited transforms */
    }

    /* ==========================================================================
   Level 4 flip (anchor to bottom) + animation that preserves the flip
   ========================================================================== */
    #menuMain ul.level4.menuDynamic.dynamic {
        /* Removing menu flip because it isn't needed */
        transform: translateX(0); /* no vertical flip */
        /* old menu flip code */
        /*--flipY: calc(-100% + var(--menu-item-height));*/
        /* Base transform includes flip (so there is no "end snap") */
        /*transform: translateX(0) translateY(var(--flipY));*/
    }

    /* Level-4: animate into the *flipped* position (open-only) */
    #menuMain ul.level3 li.has-popup:hover > ul.level4.menuDynamic.dynamic,
    #menuMain ul.level3 li.has-popup:focus-within > ul.level4.menuDynamic.dynamic {
        animation: level4FlipIn var(--menu-dur) var(--menu-ease);
    }

@keyframes level4FlipIn {
    from {
        opacity: 0.92; /* subtle; avoids blink if re-opened rapidly */
        transform: translateX(calc(var(--menu-shift) + 2px)) translateY(var(--flipY)) scale(var(--menu-scale));
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        /* old menu flip code */
        /*transform: translateX(0) translateY(var(--flipY)) scale(1);*/
    }
}


/* ==========================================================================
   Open-only animations for other levels (no transform collisions)
   ========================================================================== */

/* Level 2 opens downward from the bar */
#menuMain > ul.level1 > li.has-popup:hover > ul.level2.menuDynamic.dynamic,
#menuMain > ul.level1 > li.has-popup:focus-within > ul.level2.menuDynamic.dynamic {
    animation: menuDownIn var(--menu-dur) var(--menu-ease);
}

/* Level 3 opens to the right
   IMPORTANT: Level 4 is intentionally NOT included (it uses level4FlipIn) */
#menuMain ul.level2 li.has-popup:hover > ul.level3.menuDynamic.dynamic,
#menuMain ul.level2 li.has-popup:focus-within > ul.level3.menuDynamic.dynamic {
    animation: menuRightIn var(--menu-dur) var(--menu-ease);
}

@keyframes menuDownIn {
    from {
        opacity: 0;
        transform: translateY(var(--menu-shift)) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes menuRightIn {
    from {
        opacity: 0;
        transform: translateX(var(--menu-shift)) scale(var(--menu-scale));
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    #menuMain ul.menuDynamic.dynamic {
        animation: none !important;
    }
}


/* Extra visual anchoring for nested dropdown columns */
.menuBar ul ul ul.menuDynamic {
    border-left-color: color-mix(in srgb, var(--brand-primary) 70%, transparent);
}



/* Dropdown items */
.menuBar ul ul li > a {
    color: var(--ink);
    padding: 8px 12px;
    line-height: 1.25;
    margin: 4px 0;
    border-radius: var(--radius);
    display: block; /* ← REQUIRED for full-width hover */
    width: 100%;
    position: relative;
}

/* Submenu items (with chevron) */
.menuBar ul ul li:has(> ul) > a {
    padding-right: 48px;
    transition: transform 120ms ease;
}

    .menuBar ul ul li:has(> ul) > a::after {
        width: 12px;
        height: 12px;
        background-image: var(--chevron-right);
        background-repeat: no-repeat;
        background-size: 12px 12px;
        opacity: 0.7;
        transition: transform 160ms ease, opacity 120ms ease;
        /*content: "";
        position: absolute;
        right: 2px;
        padding-right: 8px;
        top: 50%;
        transform: translateY(-50%);
        color: #475569;
        pointer-events: none;*/
    }


.menuBar ul ul li:hover > a::after,
.menuBar ul ul li:focus-within > a::after {
    transform: rotate(90deg);
    opacity: 1;
}


/* Hover chip */
.menuBar ul ul li > a:hover,
.menuBar ul ul li > a:focus,
.menuBar ul ul li > a:focus-visible {
    background: var(--menu-hover-bg); /* subtle brand tint */
    color: var(--menu-hover-text);
    border-radius: var(--radius);
    outline: none;
    transform: translate(-3px, -1px);
    font-weight: 500;
}

/* =========================
   SELECTED
   ========================= */

.menuBar li:has(a.selected) > a::after {
    opacity: 1;
}


/* Selected item should not animate or pill on hover */
.menuBar ul ul a.selected:hover {
    border-radius: var(--radius);
    transform: none;
}

.menuBar ul ul a.selected {
    background: var(--menu-hover-bg);
    color: var(--menu-hover-text);
    font-weight: 600;
    border-radius: var(--radius);
    position: relative;
}

    .menuBar ul ul a.selected::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 2px;
        background: var(--brand-primary);
    }


/* Parent of the selected submenu item */
.menuBar ul ul li:has(ul a.selected) > a {
    background: var(--menu-hover-bg);
    color: var(--ink);
    font-weight: 600;
    border-radius: 10px;
}


    .menuBar ul ul li:has(ul a.selected) > a::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 2px;
        background: var(--brand-primary);
    }


    .menuBar ul ul li:has(ul a.selected) > a:hover {
        transform: none;
    }

/*Prevent visited purple */
.menuBar ul ul li > a:visited {
    color: var(--ink);
}

    .menuBar ul ul li > a:visited:hover {
        color: var(--brand-ink);
    }

/*---------------------------------------------------------
   USER PANEL (HEADER RIGHT)
   --------------------------------------------------------- */
.user-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Notifications V2d: a flat, very subtle surface on the bar and a thin light border, so the chip reads as part of the bar and not as a
       grey box on it (developer's design review, 2026-10-12). */
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    padding: 8px 13px;
    border-radius: var(--radius);
    color: #fff;
    font-size: 13px;
    /* When the chip is stretched (the right rail is open above 1100px: appbarAlign.js holds it at the rail card's width) its content is
       RIGHT-aligned: the initials stay at the chip's right edge next to the bell, the name and date end beside them. */
    justify-content: flex-end;
}

.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.15;
}

.user-meta { min-width: 0; } /* lets the lines below shrink and end in an ellipsis when the chip is capped to the rail card's width (appbarAlign.js) */
.user-trigger-wrap { flex: none; }
.user-meta .user-line { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; } /* long names (an email as a user name) end in an ellipsis before they reach the logo */
/* V2d: the name stays white; the entity (first line) and the date (last line) are secondary: white at .72, 5.5:1 on the chip */
.user-meta .user-line:first-child,
.user-meta .user-line:last-child { color: rgba(255,255,255,.72); }

.user-line {
    white-space: nowrap;
    margin-bottom: 3px;
}

.user-trigger-wrap {
    position: relative;
}

.user-trigger {
    width: 44px; /* the avatar: as tall as the two or three text lines beside it */
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: var(--brand-on-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

.user-trigger:hover, .user-trigger:focus-visible {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.4);
}

/* Narrow screens: at 640 px and under the chip is the avatar alone - name, entity and date are hidden. The bell sits OUTSIDE the
   chip now (updates.css) and takes its own room, so the name no longer fits beside the logo below about 640 (at 502 it touched
   the logo, at 480 it overlapped it). The avatar opens the same menu, which is where the name and date are not needed. */
@media (max-width: 640px) {
    .user-meta { display: none; }
    .user-panel { padding: 6px; gap: 0; }
}

.user-flyout {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-3);
    padding: 8px 10px;
    display: none;
    z-index: 2100;
    pointer-events: auto;
    width: max-content; /* Automatically fit content */
}

    .user-flyout a {
        display: block;
        text-decoration: none;
        color: var(--ink);
        padding: 6px 10px;
        border-radius: 8px;
        white-space: nowrap; /* Prevent wrapping */
    }

        .user-flyout a:hover, .user-flyout a:focus-visible {
            background: var(--hover-chip);
            color: var(--ink);
            outline: none;
        }

.flyout-divider {
    border: none;
    border-top: 1px solid var(--border, #e6eaf0); /* Use your existing border color */
    margin: 8px 0;
}

.user-trigger-wrap::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 36px;
    height: 16px;
    pointer-events: auto;
    background: transparent;
}

.user-trigger-wrap:hover .user-flyout, .user-flyout:hover {
    display: block;
}

.user-panel.is-open .user-flyout {
    display: block;
}
/* =========================================================
   COMPACT NAVIGATION — the top bar steps aside when it does not fit
   TL-70 2026-09-20 (built), TL-73 / TL-74 / TL-75 2026-09-20 (colour, chevron, fit switch)
   TL-149 2026-09-29: THE HAMBURGER AND THE DRAWER ARE GONE. Everything below is what remains.
   ---------------------------------------------------------
   WHAT TL-149 REMOVED, AND WHAT IT DID NOT. The drawer - the hamburger button, the backdrop,
   nav-drawer.js and every body.nav-drawer-open rule - is deleted, because the left nav's icon
   rail is now present at every width and carries navigation AND search. The drawer was a second
   way to do the same thing, with its own accordion behaviour and its own colour rules.

   THE COMPACT BEHAVIOUR ITSELF STAYS, and it is the part that matters here: when the bar does not
   fit, #menuMain is hidden and the grid closes the column it occupied. That is TL-70 and TL-75,
   and none of it depended on the drawer - which is why deleting the drawer does not bring the
   collisions back. The top bar simply steps aside now instead of turning into a drawer; the rail
   is what the user navigates with.

   TL-214 2026-10-04: THE LOGO SWAP AND THE USER-CHIP COMPRESSION ARE GONE (they were CBS-35). The
   full logo and the full user chip now show at every width. So body.nav-compact, and the 1100
   query, now do exactly TWO things: hide #menuMain and close its grid column. Anything below that
   says "chrome compression" describes how it used to be.

   TWO THINGS TURN THE COMPACT CHROME ON, and this is deliberate:

     @media (max-width: 1100px)  the FLOOR. Pure CSS, works with no JavaScript at all, and
                                 below 1100 it is unconditional.
     body.nav-compact            what nav-compact.js adds when it MEASURES that the menu bar
                                 does not fit the track it is given - which is how an
                                 Administrator, whose bar is the widest, goes compact at
                                 1440 and 1280 where a franchisee keeps the bar.

   So the compact-chrome rules below are written TWICE, once under each trigger, with the
   same declarations. THE TWO COPIES MUST BE KEPT IDENTICAL. They are not merged into one
   selector list because one of them has to live inside a media query and the other must not.
   ========================================================= */

/* TL-149: the hamburger and its backdrop were removed from this list along with the drawer.
   TL-214 2026-10-04: NOTHING TURNS .brand-logo-icon ON ANY MORE. It used to be the small mark that
   replaced the full logo when the bar did not fit; the logo is now full at every width, so this
   rule is permanent and the icon (BrandLogoIcon in Site.master, MT_Logo_2026_Icon.png) is never
   shown. LEFT IN PLACE rather than deleted, per standing rule 4: whether to drop the element and
   the image is a separate ruling. */
.brand-logo-icon {
    display: none;
}

/* =========================================================
   1a. COMPACT CHROME — measured trigger (nav-compact.js)
   Keep identical to 1b.
   ========================================================= */

body.nav-compact .appbar-center-grid {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}
body.nav-compact .appbar-center-grid > .brand-logo { grid-column: 2; }
body.nav-compact .appbar-center-grid > .appbar-user-container { grid-column: 3; }
body.nav-compact .appbar-center-grid > .user-panel { grid-column: 4; justify-self: end; }

/* TL-214 2026-10-04: THE CHROME COMPRESSION THAT WAS HERE IS GONE - the logo swap to the 40px mark
   (.brand-logo img hidden, .brand-logo-icon shown), .user-meta hidden, and the .user-panel
   padding/gap squeeze. The developer tested the full logo and the full user chip below 400px and
   they fit, so the bar keeps both at every width. body.nav-compact is NOT removed: the grid
   rewrite above and the #menuMain hide below are the measured above-1100 switch that stops an
   Administrator's bar colliding between 1100 and ~1624 (TL-70). */

/* TL-79 2026-09-20: the footer rule that used to be here selected ".footer", and the element is
   <footer class="site-footer"> - it matched nothing and never hid anything. It is now a plain
   width query in layout.css, beside .site-footer, at 768 rather than 1100: the footer is
   ordinary chrome on a narrow laptop, and since TL-75 body.nav-compact can be on at 1440 for an
   Administrator, which would have taken the footer away on a desktop. */

/* Closed, the menu is not in the appbar at all. The selector matches layout.css:184,
   ".appbar-center-grid #menuMain { display: flex !important }" - an id beats .appbar .menuBar
   even with !important on both, so the hide has to be equally specific and later in the
   cascade, which nav.css is (Site.master loads layout.css then nav.css). Measured: a bare
   .appbar .menuBar rule lost and the bar never hid. */
body.nav-compact .appbar-center-grid #menuMain {
    display: none !important;
}

/* =========================================================
   1b. COMPACT CHROME — the 1100 floor, in CSS only
   Keep identical to 1a. If nav-compact.js is missing, fails or never runs, everything below
   1100 still works from this block alone.
   ========================================================= */

@media (max-width: 1100px) {

    .appbar-center-grid {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }
    .appbar-center-grid > .brand-logo { grid-column: 2; }
    .appbar-center-grid > .appbar-user-container { grid-column: 3; }
    .appbar-center-grid > .user-panel { grid-column: 4; justify-self: end; }

    /* TL-214: the logo swap, the .user-meta hide and the .user-panel squeeze were removed from this
       block - see the matching note in 1a. Identical to 1a still means: the grid rewrite above and
       the #menuMain hide below, and nothing else. */

    /* The footer is NOT hidden here - see the note in the body.nav-compact block above. It is
       a plain width query at 768 in layout.css, because it is not part of the compact chrome. */

    .appbar-center-grid #menuMain {
        display: none !important;
    }
}

/* =========================================================
   3. TL-75 2026-09-20 — MEASURING THE BAR
   ---------------------------------------------------------
   nav-compact.js adds .nav-measuring to #menuMain for the length of one synchronous task to
   read the bar's NATURAL width. width: max-content is the whole point: the bar is a flex row
   whose items shrink, so the width it is RENDERING at is the width it was squeezed into and
   says nothing about whether it fits. Out of flow and invisible so the read cannot disturb
   the track it is being compared against, and removed before the browser paints.

   Only ever applied above 1100, where the compact rules are not hiding the bar - below 1100
   the floor decides without measuring anything.
   ========================================================= */

#menuMain.nav-measuring {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: max-content !important;
    max-width: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* .appbar-inner, .layout-body, .footer-inner and .report-shell-main all TRANSITION
   grid-template-columns, so a track measured straight after a class change is the PRE-change
   value - four wrong conclusions in this engagement have come from exactly that. The
   measurement removes body.nav-compact to read the bar-mode track, which is such a change,
   so transitions go off for the duration. */
html.nav-measuring-root .appbar-inner,
html.nav-measuring-root .appbar-center-grid,
html.nav-measuring-root .layout-body,
html.nav-measuring-root .footer-inner,
html.nav-measuring-root .report-shell-main {
    transition: none !important;
}


/* =========================================================================================
   NAV AND BREADCRUMB CURRENT STATE (2026-10-16)
   One visual language for "you are here", on the three places that show it:
     top bar      -> the current group is a tinted chip with a bar underneath; the bar retracts on hover (above in this file; tokens at the top)
     left nav     -> the section holding the current page has the same bar (layout.css) and the current page is a tinted row (controls.css)
     left RAIL    -> (this block) the icon of the current section sits in a tinted rounded chip at full strength; the rail is icons only, so
                     the bar is hidden there (layout.css) and the chip is the only mark
     breadcrumb   -> components.css, same block name: the same bar grows in on hover and focus, the current crumb is plain dark text
   Colour is never the only cue: the chip is a shape, the bar is a shape, the current entry also carries aria-current (Site.master.cs).
   Server side: Site.master.cs NavTargetPath / EnsureLeftNavCurrent make the item pages and the "#" pages current.
   Markup this styles (CSS-friendly TreeView adapter): li.AspNet-TreeView-Selected (the page itself), li.AspNet-TreeView-ChildSelected (the section holding it).
   ========================================================================================= */

/* Full-strength icon for the current section, expanded nav and drawer included. The row's hover lift stays as it was (layout.css). */
.left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > a .nav-icon,
.left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > span .nav-icon,
.left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > a .nav-icon,
.left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > span .nav-icon {
    opacity: 1;
}

/* The rail (collapsed nav): the current section's icon in a chip. Specificity is deliberately above the rail's own centring rule in layout.css
   (body.close-lnav .left-nav .AspNet-TreeView > ul > li > a) and above controls.css's hover chip, so the chip holds while hovering and only darkens. */
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > a,
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > .AspNet-TreeView-ClickableNonLink,
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > .AspNet-TreeView-NonLink,
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > a,
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > .AspNet-TreeView-ClickableNonLink,
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > .AspNet-TreeView-NonLink {
    background: var(--nav-current-chip);
    border-radius: 10px;
    color: var(--brand-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > a:hover,
    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > .AspNet-TreeView-ClickableNonLink:hover,
    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > a:hover,
    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > .AspNet-TreeView-ClickableNonLink:hover {
        background: var(--nav-current-chip-hover);
    }

/* Without this the chip would be inset 0 in a rail whose rows are 56px wide: keep a little air either side so it reads as a chip, not a stripe. */
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected,
body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected {
    padding-left: 6px;
    padding-right: 6px;
}

/* Windows high contrast / forced colours drop background colours, so give the chip a border that survives them. */
@media (forced-colors: active) {
    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > a,
    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-ChildSelected > .AspNet-TreeView-ClickableNonLink,
    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > a,
    body.close-lnav .left-nav .AspNet-TreeView > ul > li.AspNet-TreeView-Selected > .AspNet-TreeView-ClickableNonLink {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
    }
}