/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-6ml1klmxcl] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-6ml1klmxcl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Light ("Brand Deep" + "Raised Key", user-selected 2026-08-01): the panel is dark in
   BOTH themes now. Light mode wears the sign-in page's navy — the same gradient, not an
   approximation — so the brand surface carries across the sign-in boundary instead of
   flipping from navy to white the moment you authenticate. The previous white-on-white
   panel gave the nav no edge against the white content area.

   The active item is a "raised key": it lifts off the panel on a pale gradient with a
   1px top highlight and a shadow beneath, rather than being washed a different colour.
   NavMenu reads all of these — custom properties inherit — for its own rules. */
.sidebar[b-6ml1klmxcl] {
    --sb-bg: linear-gradient(160deg, #081c28 0%, #0c2738 55%, #11374e 100%);
    --sb-border: rgba(141, 163, 196, 0.16);
    --sb-text: #9db2c9;
    --sb-text-strong: #eaf3fa;
    /* 4.79:1 against #11374e, the LIGHTEST stop of the gradient. Contrast has to be
       measured there rather than against the mid stop: the panel pales toward the
       bottom, which is exactly where the Administration labels sit. The mid stop
       flatters this by a full point and would have let a failing value through. */
    --sb-section: #8ba3bb;
    --sb-rule: rgba(255, 255, 255, 0.09);
    --sb-hover-bg: rgba(255, 255, 255, 0.06);
    --sb-hover-text: #ffffff;
    --sb-active-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
    --sb-active-text: #ffffff;
    --sb-active-bar: #2db7e6;
    --sb-active-border: rgba(255, 255, 255, 0.11);
    --sb-active-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --sb-brand: #ffffff;
    /* No grid (2026-08-03). The login page's grid works there because it is masked to
       fade out well before the edges — you read it as atmosphere behind a floating card.
       Tiled flat down a 250px column it has no room to fade, so every line meets the
       panel edge at full strength and the whole rail reads as graph paper competing with
       the nav labels. What carries the brand across the sign-in boundary is the navy
       gradient, not the texture, so the gradient stays and the grid goes.
       In its place: the login's two brand glows, softened. They give the panel depth
       that varies down its length (so it doesn't read as flat paint) without any repeating
       structure for the eye to catch on — teal pooling behind the lockup at the top, a
       trace of brand green at the foot. Layered as background-images rather than a
       ::after so the sidebar gains no stacking context its children must climb out of. */
    background:
        radial-gradient(420px 260px at 50% -8%, rgba(0, 138, 192, 0.20), transparent 70%),
        radial-gradient(360px 300px at 0% 108%, rgba(115, 184, 67, 0.10), transparent 65%),
        var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    box-shadow: none;
    transition: width 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Dark ("Graphite", variant F "Green Accent", user-selected 2026-07-16): a warm
   charcoal rail one notch darker than the page, hairline edge, brand-green active
   pill matching the CTA/logo — blue stays for links/focus elsewhere. Keeps its own
   green palette and runs the same raised-key physics as light, so both themes press
   alike; only the accent differs. */
html[data-theme="dark"] .sidebar[b-6ml1klmxcl] {
    --sb-bg: #121316;
    --sb-border: rgba(255, 255, 255, 0.09);
    --sb-text: #a2a8b3;
    --sb-text-strong: #f2f3f5;
    /* Was #767d88, which measured 4.48:1 — a hair under the AA floor for text this
       small. #7e8592 is 5.00:1 and visually indistinguishable. */
    --sb-section: #7e8592;
    --sb-rule: rgba(255, 255, 255, 0.08);
    --sb-hover-bg: rgba(255, 255, 255, 0.06);
    --sb-hover-text: #f2f3f5;
    /* Vertical, like light. The old wash ran 90deg — left to right — which reads as a
       fade across the row, not as a lit surface; no amount of shadow makes a
       horizontally-graded row look raised. Light has to fall from above. */
    --sb-active-bg: linear-gradient(180deg, rgba(120, 190, 32, 0.26), rgba(120, 190, 32, 0.09));
    --sb-active-text: #a5e05c;
    --sb-active-bar: #78be20;
    --sb-active-border: rgba(255, 255, 255, 0.10);
    /* Three parts, and the order matters on a near-black panel: a brighter top
       highlight than light mode needs, a tight contact shadow directly under the row,
       then the soft ambient. The ambient alone does almost nothing here — #121316 is
       already so close to black that darkening it further is nearly invisible, so the
       contact line and the highlight are what actually sell the lift. */
    --sb-active-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 10px 22px -10px rgba(0, 0, 0, 0.85);
    --sb-brand: #ffffff;
    /* Flat: Graphite is a deliberately plain surface, so it takes neither the grid (now
       gone from light too) nor light mode's brand glows — just the solid charcoal. */
    background: var(--sb-bg);
}

.enx-nav-toggle[b-6ml1klmxcl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    border: 1px solid var(--enx-border);
    border-radius: 10px;
    background: transparent;
    color: var(--enx-ink);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.enx-nav-toggle:hover[b-6ml1klmxcl] {
    background: rgba(59, 130, 246, 0.12);
    color: var(--enx-teal-ink);
}

.top-row[b-6ml1klmxcl] {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--enx-border);
    justify-content: flex-end;
    height: 4rem;
    display: flex;
    align-items: center;
    /* backdrop-filter makes this a stacking context; without an explicit z-index the
       later-DOM article cards (stepper is one) would paint OVER the user-menu dropdown. */
    position: relative;
    z-index: 30;
}

html[data-theme="dark"] .top-row[b-6ml1klmxcl] {
    background: rgba(23, 24, 28, 0.82);
}

article.content[b-6ml1klmxcl] {
    padding-top: 1.75rem;
    padding-bottom: 3rem;
    /* 'backwards' (not 'both') so no residual transform remains after the entrance
       animation — a lingering transform would make .content the containing block for
       position:fixed modals/dropdowns, mis-centering them on tall pages. */
    animation: enx-fade-up-b-6ml1klmxcl 0.35s ease backwards;
}

@keyframes enx-fade-up-b-6ml1klmxcl {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640.98px) {
    .top-row[b-6ml1klmxcl] {
        justify-content: space-between;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        gap: 0.5rem;
    }

    /* Mobile has ONE hamburger: the brand bar's (expands the nav list). This one
       collapses the desktop rail — hidden here so the two don't sit stacked. */
    .enx-nav-toggle[b-6ml1klmxcl] {
        display: none;
    }

    /* The desktop "collapsed rail" preference must not hide the brand bar +
       hamburger on phones — the stacked sidebar always shows its top row. */
    .page.enx-nav-collapsed .sidebar[b-6ml1klmxcl] {
        display: block;
    }
}

@media (min-width: 641px) {
    .page[b-6ml1klmxcl] {
        flex-direction: row;
    }

    .sidebar[b-6ml1klmxcl] {
        width: 264px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    /* Desktop: collapse to a thin icon-only rail (labels hidden via app.css). */
    .page.enx-nav-collapsed .sidebar[b-6ml1klmxcl] {
        width: 74px;
        overflow: hidden;
    }

    .top-row[b-6ml1klmxcl] {
        position: sticky;
        top: 0;
    }

    .top-row[b-6ml1klmxcl], article[b-6ml1klmxcl] {
        padding-left: 2.25rem !important;
        padding-right: 2.25rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-5hvtp2yb36] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    color: var(--sb-text-strong);
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar-toggler:hover[b-5hvtp2yb36],
.navbar-toggler:focus-visible[b-5hvtp2yb36] {
    background: var(--sb-hover-bg);
    color: var(--sb-hover-text);
}

.top-row[b-5hvtp2yb36] {
    min-height: 4.25rem;
    background: transparent;
    padding-top: 0.5rem;
}

.navbar-brand[b-5hvtp2yb36] {
    font-size: 1.15rem;
    color: var(--sb-brand);
}

/* The label rides a hairline rather than floating, which gives the list real structure
   instead of three loose runs of links. Inset by the same 1.5rem the label already had,
   so the rule stops short of the panel edges. The collapsed rail hides this element
   outright, taking the rule with it. */
.enx-nav-section[b-5hvtp2yb36] {
    margin: 0 1.5rem 0.45rem;
    padding: 1.4rem 0 0.45rem;
    border-bottom: 1px solid var(--sb-rule);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sb-section);
}

.nav-item[b-5hvtp2yb36] {
    font-size: 0.9rem;
    padding: 0 0.85rem 0.3rem;
}

    .nav-item:last-of-type[b-5hvtp2yb36] {
        padding-bottom: 1rem;
    }

    .nav-item[b-5hvtp2yb36]  a {
        position: relative;
        color: var(--sb-text);
        /* Held transparent on every item so .active's visible border costs no layout —
           with border-box the row keeps its 2.75rem height and the label never shifts. */
        border: 1px solid transparent;
        border-radius: 10px;
        height: 2.75rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0 1rem;
        font-weight: 500;
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .nav-item[b-5hvtp2yb36]  a svg {
        flex-shrink: 0;
        opacity: 0.85;
    }

/* Active item is a "raised key": the pale gradient plus the inset top highlight and the
   shadow beneath (both in --sb-active-shadow) read as a row lifted off the panel, not as
   a row tinted a different colour. The effect belongs to the row itself, so it survives
   the collapsed 74px rail where the label is gone and only the icon remains. */
.nav-item[b-5hvtp2yb36]  a.active {
    background: var(--sb-active-bg);
    color: var(--sb-active-text);
    font-weight: 600;
    border-color: var(--sb-active-border);
    /* The accent is the row's own LEFT BORDER, widened from the transparent 1px the base
       rule already reserves — not a separate bar floating inside the pill.

       It was a ::before: a 3px rectangle with square ends, inset 20% top and bottom, sitting
       against a 10px corner radius. Its flat ends collided with the curve just as it turned,
       so the accent read as a sticker stuck on the pill rather than part of it.

       A real border-left tapers into the thin border on the other three sides natively at
       the rounded corner, so it ends flush with the pill's own curve. This is the same fix
       the settings cards already carry (.enx-set-card in app.css) — worth keeping the two
       consistent, since they are the same visual idea in two places.

       Width is on this rule, not the base one, so the inactive row still reserves exactly
       1px on every side: the label cannot shift by 2px as the active item moves. */
    border-left-width: 3px;
    border-left-color: var(--sb-active-bar);
    /* box-sizing is border-box globally, so the wider border costs no HEIGHT — but it does
       eat 2px from the content box, which would push the icon and label right by 2px on
       whichever row is active. Paying it back out of the left padding keeps every icon on
       one vertical line as the selection moves.

       The collapsed 74px rail overrides this back to 0 in app.css, where the icon is centred
       and a left padding would push it off-centre — that rule has to live in the global sheet
       because `.page.enx-nav-collapsed` is on an ancestor in MainLayout, which Blazor's scoped
       CSS cannot reach from this file. */
    padding-left: calc(1rem - 2px);
    box-shadow: var(--sb-active-shadow);
}

.nav-item[b-5hvtp2yb36]  a.active svg { opacity: 1; }

/* Flat hover, deliberately. The previous translateX(2px) nudged the label on every pass
   of the mouse, so drifting across the nav set the whole list twitching. */
.nav-item[b-5hvtp2yb36]  a:hover:not(.active) {
    background-color: var(--sb-hover-bg);
    color: var(--sb-hover-text);
}

@media (min-width: 641px) {
    .navbar-toggler[b-5hvtp2yb36] {
        display: none;
    }

    .collapse[b-5hvtp2yb36] {
        display: block;
    }

    .nav-scrollable[b-5hvtp2yb36] {
        height: calc(100vh - 4.25rem);
        overflow-y: auto;
    }
}