/* ══════════════════════════════════════════════════════════════
   Student First — Navigation System (PBI 20406)
   BEM naming: sf-nav / sf-nav__element / sf-nav--modifier
   ══════════════════════════════════════════════════════════════ */

/* ── Root tokens ─────────────────────────────────────────────── */
:root {
    /* Layout — legacy aliases to semantic tokens in app.css */
    --sf-nav-main-expanded:  var(--sf-sidebar-primary-w);
    --sf-nav-main-collapsed: var(--sf-sidebar-primary-w-collapsed);
    --sf-nav-student-width:  var(--sf-sidebar-secondary-w);
    --sf-nav-width: 240px; /* dynamic — set by JS */

    --sf-nav-bg: var(--sf-bg-sidebar); /* slate-700 #334155 (was #475569) */
    --sf-nav-bg-dark: #334155;
    --sf-nav-text: var(--sf-text-on-dark); /* #f1f5f9 slate-100 — 10:1 on sidebar (was translucent white ~7.4:1) */
    --sf-nav-text-muted: rgba(255,255,255,0.6);
    --sf-nav-text-active: #ffffff;
    --sf-nav-hover: rgba(255,255,255,0.08);
    --sf-nav-active: rgba(255,255,255,0.13);
    --sf-nav-border-active: #ffffff;
    --sf-nav-shadow: 2px 0 12px rgba(0,0,0,0.18);

    --sf-nav-student-bg: var(--sf-bg-panel);        /* #e2e8f0 */
    --sf-nav-student-text: var(--sf-color-dark);    /* #334155 */
    --sf-nav-student-text-muted: var(--sf-color-accent);   /* #64748b */
    --sf-nav-student-border-active: var(--sf-color-primary); /* #475569 */

    /* Edge-pill tab tuning — shared between CSS layout and sfNav.registerEdgeTabDrag
       (which reads these via getComputedStyle). Change the value here and both
       the visual position and the JS clamp/reconcile logic follow. */
    --sf-edge-tab-w: 32px;            /* pill width */
    --sf-edge-tab-h: 48px;            /* pill height */
    --sf-edge-tab-bottom: 16px;       /* default bottom + JS clamp floor */
    --sf-edge-tab-gap: 8px;           /* vertical gap when pills stack on main's edge */
    --sf-edge-tab-top-reserve: 80px;  /* JS clamp ceiling — reserve above for logo header */
}

/* ── Outer nav container ─────────────────────────────────────── */
.sf-nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: row;
    z-index: 20; /* --sf-z-main-menu */
    transition: width 200ms ease;
}

/* ── Main panel ──────────────────────────────────────────────── */
.sf-nav__main {
    width: var(--sf-nav-main-expanded);
    background: var(--sf-nav-bg);
    color: var(--sf-nav-text);
    display: flex;
    flex-direction: column;
    box-shadow: var(--sf-nav-shadow);
    overflow: hidden;
    transition: width 200ms ease;
}

.sf-nav--collapsed .sf-nav__main {
    width: var(--sf-nav-main-collapsed);
}

/* ── Logo header ─────────────────────────────────────────────── */
.sf-nav__header {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    flex-shrink: 0;
}

.sf-nav__header-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sf-nav__header-text {
    font: 700 1rem/1 'DM Sans', sans-serif;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
}

.sf-nav--collapsed .sf-nav__header-text {
    display: none;
}

.sf-nav--collapsed .sf-nav__header {
    justify-content: center;
    padding: 10px 0;
}

/* ── Section label ───────────────────────────────────────────── */
.sf-nav__section-label {
    font: 600 0.75rem/1 'DM Sans', sans-serif;
    color: var(--sf-text-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 8px 2px;
    flex-shrink: 0;
}

.sf-nav--collapsed .sf-nav__section-label {
    display: none;
}

/* ── Scrollable items region ─────────────────────────────────── */
.sf-nav__items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0;
}

/* Thin scrollbar */
.sf-nav__items::-webkit-scrollbar { width: 3px; }
.sf-nav__items::-webkit-scrollbar-track { background: transparent; }
.sf-nav__items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

/* ── Parent item (button) ────────────────────────────────────── */
.sf-nav__parent {
    display: flex;
    align-items: center;
    width: calc(100% - 6px);
    margin: 1px 3px;
    min-height: 28px;
    padding: 6px 8px 6px 6px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-text);
    font: 400 1rem/1.3 'DM Sans', sans-serif;
    cursor: pointer;
    gap: 10px;
    text-align: left;
    transition: background-color 100ms;
}

.sf-nav__parent:hover,
.sf-nav__parent:focus {
    background: var(--sf-nav-hover);
    color: var(--sf-nav-text);
    text-decoration: none;
}

.sf-nav__parent[aria-expanded="true"] {
    background: var(--sf-nav-active);
    color: var(--sf-nav-text-active);
    font-weight: 500;
}

.sf-nav__parent:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

/* ── Parent icon ─────────────────────────────────────────────── */
.sf-nav__icon {
    width: 12px;
    font-size: 0.75rem;
    text-align: center;
    flex-shrink: 0;
    /* Don't set color here — let icon color classes (.blue-icon etc.) apply */
}

/* ── Parent label ────────────────────────────────────────────── */
.sf-nav__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.sf-nav--collapsed .sf-nav__label {
    display: none;
}

/* ── Chevron ─────────────────────────────────────────────────── */
.sf-nav__chevron {
    font-size: 1.1em;
    color: inherit; /* matches the nav label */
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.sf-nav__parent[aria-expanded="true"] .sf-nav__chevron {
    transform: rotate(90deg);
}

.sf-nav--collapsed .sf-nav__chevron {
    display: none;
}

/* ── Children container ──────────────────────────────────────── */
.sf-nav__children {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ── Child item (link) ───────────────────────────────────────── */
.sf-nav__child {
    display: block;
    width: calc(100% - 6px);
    margin: 1px 3px;
    min-height: 24px;
    padding: 5px 4px 5px 18px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-text);
    font: 400 0.875rem/1.35 'DM Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
    transition: background-color 100ms;
    border-left: 3px solid transparent;
}

.sf-nav__child:hover {
    background: var(--sf-nav-hover);
    color: var(--sf-nav-text);
    text-decoration: none;
}

.sf-nav__child--active,
.sf-nav__child--active:hover {
    background: var(--sf-nav-active);
    color: var(--sf-nav-text-active);
    font-weight: 500;
    border-left-color: var(--sf-nav-border-active);
}

.sf-nav__child:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

/* ── Collapsed icon-only buttons ─────────────────────────────── */
.sf-nav--collapsed .sf-nav__parent {
    justify-content: center;
    padding: 8px 0;
    min-height: 32px;
}

/* Flyout header — only visible in collapsed mode flyout */
.sf-nav__flyout-header {
    display: none;
}

/* Collapsed mode: parent treeitem is anchor for absolute-positioned flyout */
.sf-nav--collapsed .sf-nav__treeitem {
    position: relative;
}

/* Allow flyout to escape clipping containers in collapsed mode */
.sf-nav--collapsed .sf-nav__main,
.sf-nav--collapsed .sf-nav__items {
    overflow: visible;
}

/* Children render as a hidden flyout, positioned to the right of the icon */
.sf-nav--collapsed .sf-nav__children {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 220px;
    background: var(--sf-nav-bg-dark);
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.3);
    padding: 6px;
    z-index: 100;
}

/* Show flyout on hover or keyboard focus */
.sf-nav--collapsed .sf-nav__treeitem:hover > .sf-nav__children,
.sf-nav--collapsed .sf-nav__treeitem:focus-within > .sf-nav__children {
    display: block;
}

/* Always show flyout for the stuck (clicked) parent */
.sf-nav--collapsed .sf-nav__treeitem--stuck > .sf-nav__children {
    display: block;
}

/* When one parent is stuck, suppress hover flyouts on other parents */
.sf-nav--collapsed .sf-nav__items--has-stuck
    .sf-nav__treeitem:not(.sf-nav__treeitem--stuck):hover > .sf-nav__children {
    display: none;
}

/* Raise collapsed nav above the top-row (z:40) and Telerik-based inner navs
   (e.g., the Settings ConfigurationNavigator cards/splitter) so flyouts aren't clipped */
.sf-nav--collapsed {
    z-index: 500;
}

/* Label-only flyout (direct-nav parents with no children) */
.sf-nav--collapsed .sf-nav__children--label-only {
    min-width: auto;
}

.sf-nav--collapsed .sf-nav__children--label-only .sf-nav__flyout-header {
    border-bottom: none;
    margin-bottom: 0;
    padding: 8px 14px;
    white-space: nowrap;
}

/* Flyout header — title bar with parent name (collapsed mode only) */
.sf-nav--collapsed .sf-nav__flyout-header {
    display: block;
    padding: 6px 10px 8px;
    margin-bottom: 4px;
    font: 600 0.875rem/1.3 'DM Sans', sans-serif;
    color: var(--sf-nav-text-active);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Tighten child link styling inside the flyout for readability */
.sf-nav--collapsed .sf-nav__children .sf-nav__child {
    padding-left: 12px;
}

/* ── Footer ──────────────────────────────────────────────────── */
.sf-nav__footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 4px;
}

.sf-nav__footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 28px;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-text);
    font: 400 0.8125rem/1 'DM Sans', sans-serif;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.sf-nav__footer-link:hover {
    background: var(--sf-nav-hover);
    color: var(--sf-nav-text);
    text-decoration: none;
}

.sf-nav__footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 2px 4px;
}

.sf-nav__footer-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sf-nav__footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    min-height: 28px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-text);
    font: 400 0.8125rem/1 'DM Sans', sans-serif;
    cursor: pointer;
}

.sf-nav__footer-btn:hover {
    background: var(--sf-nav-hover);
}

.sf-nav__footer-btn:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: var(--sf-focus-offset);
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

.sf-nav__footer-btn--active {
    background: var(--sf-bg-card);
    color: var(--sf-text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}

.sf-nav__footer-btn--active:hover {
    background: var(--sf-bg-page);
}

/* ── Primary-color treatment for Org/Institution menu options (22246) ── */
/* Apply .sf-nav__parent--primary (or to footer-link) to distinguish org/institution switchers */
.sf-nav__parent--primary,
.sf-nav__footer-link--primary {
    border-left: 3px solid var(--sf-nav-border-active);
    background: rgba(255,255,255,0.06);
    font-weight: 500;
}

.sf-nav__parent--primary:hover,
.sf-nav__footer-link--primary:hover {
    background: rgba(255,255,255,0.12);
}

/* ── Edge pill tabs for sidebar expand/collapse ─────────────────
   Protruding tab anchored to the right edge of each sidebar. Straddles the
   edge via translateX(-50%) — half inside (visual attachment), half outside
   (discoverable handle). Positioned as a sibling of the sidebars because
   .sf-nav__main and .sf-nav__student both have overflow: hidden which would
   clip an absolutely-positioned tab anchored inside them. Hidden on mobile
   — the hamburger/overlay pattern takes over there. */
.sf-nav__edge-tab {
    position: absolute;
    bottom: var(--sf-edge-tab-bottom);
    left: var(--sf-nav-main-expanded);
    width: var(--sf-edge-tab-w);
    height: var(--sf-edge-tab-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 0 8px 8px 0;
    background: var(--sf-nav-bg);
    color: var(--sf-nav-text);
    cursor: grab;
    touch-action: none; /* pointer events fire cleanly on touch without browser scroll */
    z-index: 5;
    box-shadow: 2px 0 4px rgba(0,0,0,0.18);
    font-size: 0.875rem;
    transition: left 200ms ease, background-color 100ms ease;
}

.sf-nav__edge-tab--dragging {
    cursor: grabbing;
    transition: none;
    z-index: 200; /* above flyouts (100) while dragging so the pill can't get lost */
}

.sf-nav__edge-tab:hover {
    background: var(--sf-nav-bg-dark);
    color: var(--sf-nav-text-active);
}

.sf-nav--collapsed .sf-nav__edge-tab {
    left: var(--sf-nav-main-collapsed);
}

/* Student-panel variant — always visible, light panel colors. Default position
   sits near the main sidebar's right edge (same `left` as main pill), stacked
   above main vertically so the two pills don't overlap. JS collision logic
   refines the stacking if the user drags either pill.
   When the student panel is actually showing (--student-open), the pill jumps
   to the student panel's right edge. Since the panel can now render whether
   main is expanded or collapsed, the --student-open rule has a collapsed
   sibling that adjusts `left` to match main's current width. */
.sf-nav__edge-tab--student {
    left: var(--sf-nav-main-expanded);
    /* Stack above main: main's default bottom + one pill height + gap */
    bottom: calc(var(--sf-edge-tab-bottom) + var(--sf-edge-tab-h) + var(--sf-edge-tab-gap));
    background: var(--sf-nav-student-bg);
    color: var(--sf-nav-student-text);
    box-shadow: 2px 0 4px rgba(0,0,0,0.08);
}

.sf-nav--collapsed .sf-nav__edge-tab--student {
    left: var(--sf-nav-main-collapsed);
}

.sf-nav__edge-tab--student-open {
    left: calc(var(--sf-nav-main-expanded) + var(--sf-nav-student-width));
    bottom: var(--sf-edge-tab-bottom); /* align with main pill at panel's right edge */
}

.sf-nav--collapsed .sf-nav__edge-tab--student-open {
    left: calc(var(--sf-nav-main-collapsed) + var(--sf-nav-student-width));
}

.sf-nav__edge-tab--student:hover {
    background: var(--sf-color-border);
    color: var(--sf-nav-student-text);
}

@media (max-width: 767.98px) {
    .sf-nav__edge-tab { display: none; }
}

/* ── Icon color classes (from MenuService icon assignments) ─── */
.sf-nav .green-icon { color: lightgreen !important; }
.sf-nav .blue-icon { color: #2eb5f0 !important; }
.sf-nav .purple-icon { color: #975aed !important; }
.sf-nav .orange-icon { color: #e68230 !important; }
.sf-nav .cyan-icon { color: #0ee2e6 !important; }
.sf-nav .yellow-icon { color: #ced10d !important; }
.sf-nav .lime-icon { color: #99b551 !important; }
.sf-nav .white-icon { color: silver !important; }
.sf-nav .red-icon { color: #e13929 !important; }

/* Collapsed footer: stack vertically */
.sf-nav--collapsed .sf-nav__footer-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sf-nav--collapsed .sf-nav__footer-link span {
    display: none;
}

.sf-nav--collapsed .sf-nav__footer-actions {
    flex-direction: column;
}

.sf-nav--collapsed .sf-nav__footer-btn span {
    display: none;
}

/* ── Student panel ───────────────────────────────────────────── */
.sf-nav__student {
    width: var(--sf-nav-student-width);
    background: var(--sf-nav-student-bg);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}

.sf-nav__student-header {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.sf-nav__student-name {
    font: 700 0.875rem/1.3 'DM Sans', sans-serif;
    color: var(--sf-nav-student-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-nav__student-id {
    font: 400 0.75rem/1.3 'DM Sans', sans-serif;
    color: var(--sf-nav-student-text-muted);
}

.sf-nav__student-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
}

/* Student nav parent items */
.sf-nav__student-parent {
    display: flex;
    align-items: center;
    width: calc(100% - 12px);
    margin: 1px 6px;
    min-height: 24px;
    padding: 6px 10px 6px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-student-text);
    font: 400 0.875rem/1.3 'DM Sans', sans-serif;
    cursor: pointer;
    gap: 4px;
    text-align: left;
}

.sf-nav__student-parent:hover {
    background: rgba(0,0,0,0.04);
}

.sf-nav__student-parent[aria-expanded="true"] {
    font-weight: 600;
}

/* Student nav child items */
.sf-nav__student-child {
    display: block;
    width: calc(100% - 12px);
    margin: 1px 6px;
    min-height: 20px;
    padding: 5px 6px 5px 18px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-student-text);
    font: 400 0.8125rem/1.35 'DM Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
    border-left: 3px solid transparent;
}

.sf-nav__student-child:hover {
    background: rgba(0,0,0,0.04);
    color: var(--sf-nav-student-text);
    text-decoration: none;
}

.sf-nav__student-child--active,
.sf-nav__student-child--active:hover {
    font-weight: 600;
    border-left-color: var(--sf-nav-student-border-active);
    background: rgba(71,85,105,0.08);
}

/* Student nav search */
.sf-nav__student-search {
    padding: 6px 8px;
    flex-shrink: 0;
}

.sf-nav__student-search input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--sf-border-strong);
    border-radius: 4px;
    font: 400 0.75rem/1.5 'DM Sans', sans-serif;
    background: #ffffff;
    outline: none;
}

.sf-nav__student-search input:focus {
    border-color: var(--sf-nav-student-border-active);
    box-shadow: 0 0 0 2px rgba(71,85,105,0.15);
}

.sf-nav__student-search input::placeholder {
    color: rgb(97, 97, 97); /* ~5.6:1 on white — WCAG AA for placeholder */
    opacity: 1;             /* Firefox default is 0.54 */
}

/* Badge (holds count) */
.sf-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font: 600 0.625rem/1 'DM Sans', sans-serif;
    flex-shrink: 0;
}

/* Student nav chevron */
.sf-nav__student-chevron {
    font-size: 1.1em;
    color: inherit; /* matches the student nav label */
    transition: transform 200ms ease;
    flex-shrink: 0;
    margin-left: auto;
}

.sf-nav__student-parent[aria-expanded="true"] .sf-nav__student-chevron {
    transform: rotate(90deg);
}

/* ══════════════════════════════════════════════════════════════
   Subnav (SimpleNav, ConfigurationNavigator) — matches student
   submenu visual pattern: slate-bg pane, slate-tinted hover/active
   ══════════════════════════════════════════════════════════════ */

.sf-subnav {
    width: 240px;
    flex-shrink: 0;
    background-color: var(--sf-nav-student-bg);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
    font-family: var(--sf-font-family);
}

.sf-subnav__search {
    padding: 6px 8px;
    flex-shrink: 0;
}

.sf-subnav__search input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--sf-border-strong);
    border-radius: 4px;
    font: 400 0.75rem/1.5 var(--sf-font-family);
    background: #ffffff;
    color: var(--sf-nav-student-text);
    outline: none;
}

.sf-subnav__search input:focus {
    border-color: var(--sf-nav-student-border-active);
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.15);
}

.sf-subnav__search input::placeholder {
    color: rgb(97, 97, 97); /* ~5.6:1 on white — WCAG AA for placeholder */
    opacity: 1;             /* Firefox default is 0.54 */
}

/* Group toggle button (category header) */
.sf-subnav__group {
    display: flex;
    align-items: center;
    width: calc(100% - 12px);
    margin: 2px 6px;
    min-height: 28px;
    padding: 6px 12px 6px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-student-text);
    font: 600 0.8125rem/1.3 var(--sf-font-family);
    cursor: pointer;
    gap: 6px;
    text-align: left;
    transition: background-color 100ms ease;
}

.sf-subnav__group:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--sf-nav-student-text);
}

.sf-subnav__group:focus-visible {
    outline: var(--sf-focus-inner-width) solid var(--sf-focus-ring-inner);
    outline-offset: -2px;
    box-shadow: 0 0 0 var(--sf-focus-width) var(--sf-focus-ring-outer);
}

.sf-subnav__group[aria-expanded="true"] {
    background: rgba(71, 85, 105, 0.08);
}

.sf-subnav__group-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-subnav__group-chevron {
    font-size: 1.1em;
    color: inherit; /* matches the subnav group label */
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.sf-subnav__group[aria-expanded="true"] .sf-subnav__group-chevron {
    transform: rotate(90deg);
}

/* Group body (item list) */
.sf-subnav__group-body {
    margin: 0 6px 4px;
    padding: 0;
    list-style: none;
}

.sf-subnav__group-body li {
    list-style: none;
}

/* Item link (matches sf-nav__student-child) */
.sf-subnav__item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 1px 0;
    min-height: 24px;
    padding: 5px 6px 5px 18px;
    border-radius: 6px;
    background: none;
    color: var(--sf-nav-student-text);
    font: 400 0.8125rem/1.35 var(--sf-font-family);
    text-decoration: none;
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
    border-left: 3px solid transparent;
    transition: background-color 100ms ease;
}

.sf-subnav__item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--sf-nav-student-text);
    text-decoration: none;
}

.sf-subnav__item.active,
.sf-subnav__item.active:hover {
    font-weight: 600;
    border-left-color: var(--sf-nav-student-border-active);
    background: rgba(71, 85, 105, 0.08);
    color: var(--sf-nav-student-text);
}

.sf-subnav__item-icon {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.8125rem;
}

/* ── Skip-to-content link ────────────────────────────────────── */
.sf-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--sf-nav-bg);
    color: #ffffff;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font: 600 0.875rem/1 'DM Sans', sans-serif;
}

.sf-skip-link:focus {
    top: 0;
    color: #ffffff;
}

/* ── Mobile backdrop ─────────────────────────────────────────── */
.sf-nav__backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .sf-nav--mobile-open .sf-nav__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: -1;
    }
}

/* ── Hamburger button (mobile only) ──────────────────────────── */
.sf-hamburger {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--sf-nav-bg);
    font-size: 1.25rem;
}

@media (max-width: 767.98px) {
    .sf-hamburger { display: block; }

    .main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sf-nav,
    .sf-nav__main,
    .sf-nav__chevron,
    .sf-nav__student-chevron {
        transition: none !important;
    }
}

/* ── Mobile overlay ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sf-nav {
        display: none;
    }

    .sf-nav--mobile-open {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0,0,0,0.5);
    }

    .sf-nav--mobile-open .sf-nav__main {
        width: 280px;
    }

    .sf-nav__parent,
    .sf-nav__child,
    .sf-nav__footer-link,
    .sf-nav__footer-btn {
        min-height: 44px; /* Touch target */
    }
}