/* Organizer navigation presentation. Registered by OrganizerNavigationAppearanceAsset. */

/* ===== Sidebar Navigation (Account Nav) — Light Theme ===== */
/* All #secondary-nav variants follow the paper surface — both the
   account-hub variant (.account-nav) and the event-setup variant (no
   class). Without this, the event-setup nav stays bright white in dark
   mode while the rest of the chrome flips. */
.ui-refresh #secondary-nav {
    background: var(--bg-page) !important;
    border-right: 1px solid var(--border-default);
    box-shadow: none;      /* align with the 60px navbar bottom */
}
/* Event-level secondary nav: no shadow/border on the column — it should read
   as a flat continuation of the page surface (design cleanup #8). The
   account-hub variant keeps its subtle right-edge border. */
.ui-refresh #secondary-nav:not(.account-nav) {
    border-right-color: transparent;
}
.ui-refresh #secondary-nav .nav > li > a:focus,
.ui-refresh #secondary-nav .nav > li > a:hover,
.ui-refresh #secondary-nav ul li.active.bg > a.kv-toggle {
    /* --bg-muted flips with the ui-refresh surface (dark mode); the #E6E9EB
       fallback keeps the legacy (no-tokens) UI identical. */
    background-color: var(--bg-muted, #E6E9EB);
}
/* Suppress all transitions during pin toggle (page load + click).
   Scoped through body.ui-refresh so it only fires when the feature is active. */
html.pin-no-transition body.ui-refresh #secondary-nav,
html.pin-no-transition body.ui-refresh #icon-nav,
html.pin-no-transition body.ui-refresh #icon-nav * {
    transition: none !important;
}
/* Event-setup secondary-nav (no .account-nav class): make the wrapping panel
   transparent so the column reads as one continuous surface instead of a
   shorter "card" sitting in a wider rail. The dark-mode .panel-default rule
   later in this file otherwise gives it --card and that creates the cut-off
   look at the bottom of the menu. */
.ui-refresh #secondary-nav:not(.account-nav) .panel,
.ui-refresh #secondary-nav:not(.account-nav) .panel-default {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0;
}
.ui-refresh #secondary-nav:not(.account-nav) .panel-heading {
    background: transparent !important;
    border-bottom: 0;
    /* padding-top 11px: on top of the secondary-nav's 16px container padding,
       this lands the heading text's vertical center at ~97px — flush with the
       home icon center in the rail (measured). */
    padding: 11px var(--space-3) var(--space-2) 15px;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.ui-refresh #secondary-nav:not(.account-nav) .panel-title {
    font: inherit;
    color: inherit;
}
/* The expanded sub-menu <ul> under an active parent inherits a hardcoded
   `background-color: white` from navigation.css that reads as a stark
   white block on the cream page bg. Force transparent so it blends with
   the rail. */
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav .active > ul,
.ui-refresh #secondary-nav:not(.account-nav) .nav-pills.nav-stacked {
    background-color: transparent !important;
}
/* Typography: match the design's setup-nav + the primary nav exactly.
   Top-level items (.sn-item): 13px, --ink-2 (dark) — same as the primary
   nav so the two columns read as one type system. Nested sub-items
   (.sn-sub .sn-item) drop to 12.5px / --muted (handled below). */
.ui-refresh #secondary-nav:not(.account-nav) ul li > a {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
}
/* Top-level active/hover leaf links */
.ui-refresh #secondary-nav:not(.account-nav) ul li > a:not(.kv-toggle) {
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}
.ui-refresh #secondary-nav:not(.account-nav) ul li > a:not(.kv-toggle):hover {
    background-color: var(--state-hover);
}
/* Top-level active leaf: ink text + subtle gray fill, same treatment as sub-items. */
.ui-refresh #secondary-nav:not(.account-nav) ul > li.active > a:not(.kv-toggle),
.ui-refresh #secondary-nav:not(.account-nav) ul > li.active div a:not(.kv-toggle) {
    color: var(--ink) !important;
    font-weight: var(--font-weight-semibold);
    background-color: rgba(20, 28, 46, .05) !important;
    border-radius: var(--radius-sm);
}
/* Reports nav parity: each report item wraps its link in a <div data-report-id>
   (for the reorder + visibility-toggle controls), so the link isn't a direct
   child of the <li> and misses the leaf-link styling above. Treat the wrapper
   as the clickable row — full-width hover/active fill + radius — and give the
   link the same 13px/--ink-2 type, so it matches the event-setup nav exactly. */
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav li > div[data-report-id] {
    display: flex;
    align-items: center;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav li > div[data-report-id]:hover {
    background-color: var(--state-hover);
}
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav li > div[data-report-id] > a:not(.kv-toggle) {
    flex: 1 1 auto;
    padding: 0;
    font-size: 13px;
}
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav li > div[data-report-id] > a:not(.kv-toggle):not(.gray-500) {
    color: var(--ink-2);
}
/* Selected report: fill the whole row (the wrapper), and keep the link's own
   fill transparent so the two 5%-alpha layers don't stack into a darker patch. */
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav li.active > div[data-report-id] {
    background-color: rgba(20, 28, 46, .05);
    border-radius: var(--radius-sm);
}
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav li.active > div[data-report-id] > a:not(.kv-toggle) {
    background-color: transparent !important;
    color: var(--ink) !important;
    font-weight: var(--font-weight-semibold);
}
/* Expanded parent of an active child: no resting fill — the active child +
   guide line already convey "you're in this group". */
.ui-refresh #secondary-nav:not(.account-nav) ul li.active.bg > a.kv-toggle {
    background-color: transparent !important;
}
/* Toggles still tint on hover (they're clickable). The .active.bg selector is
   listed first so it out-specifies the transparent resting rule above. */
.ui-refresh #secondary-nav:not(.account-nav) ul li.active.bg > a.kv-toggle:hover,
.ui-refresh #secondary-nav:not(.account-nav) ul li > a.kv-toggle:hover {
    background-color: var(--state-hover) !important;
}
/* Nested sub-items: guide line + accent-text active (same as design's sn-sub).
   navigation.css sets padding-left:39px on .kv-sidenav .nav a — must override. */
.ui-refresh #secondary-nav:not(.account-nav) .kv-sidenav .active > ul,
.ui-refresh #secondary-nav:not(.account-nav) ul ul.nav-pills.nav-stacked {
    position: relative;
    margin-left: 15px;
    padding-left: 6px;
}
.ui-refresh #secondary-nav:not(.account-nav) ul ul li > a:not(.kv-toggle) {
    color: var(--fg-muted) !important;
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    padding-left: 10px !important;
    background-color: transparent !important;
}
/* Hover on nested sub-items. The resting rule above sets a transparent bg with
   !important, so the hover needs :hover (higher specificity) + !important to win. */
.ui-refresh #secondary-nav:not(.account-nav) ul ul li > a:not(.kv-toggle):hover {
    background-color: var(--state-hover) !important;
}
/* Active sub-item: same subtle gray fill as top-level active */
.ui-refresh #secondary-nav:not(.account-nav) ul ul li.active > a:not(.kv-toggle) {
    color: var(--ink) !important;
    font-weight: var(--font-weight-semibold);
    background-color: rgba(20, 28, 46, .05) !important;
    border-radius: var(--radius-sm);
}

/* ── Reports nav — narrower column (#3128) ── the Reports secondary-nav
   reserves 249px (organizer-menu.css's --organizer-secondary-width) that
   most report names never need. Scoped via `:has(#report-menu-pjax)` (the id
   Pjax::begin() wraps around this SideNav in _event-reports.php) so every
   other secondary nav is untouched — no PHP change needed.
   Overriding the custom property, not #secondary-nav's rendered width, is
   what makes this stick: --organizer-secondary-width drives both the
   CSS-grid track that sizes #secondary-nav (organizer-menu.css's
   `.organizer-menu__body { grid-template-columns: var(--organizer-primary-width)
   minmax(0, 1fr) }`) and --organizer-menu-width, which #content-container
   reads for its inset-inline-start offset — one variable, so the rail and
   the content offset can't drift out of sync the way two hand-written
   per-rail-state constants could. A direct `width` on #secondary-nav only
   shrinks the element inside its still-249px grid track, leaving dead space
   before the content — that was tried and measured live before this fix.
   `!important` + the extra `.has-event-icon-nav` qualifier: organizer-menu.css's
   own `.has-event-icon-nav` rule sets this same property at equal
   specificity and loads after this file (OrganizerMenuAsset depends on
   OrganizerNavigationAppearanceAsset), so a plain override would lose the
   cascade tie. */
body.has-organizer-menu.has-event-icon-nav:has(#report-menu-pjax) {
    --organizer-secondary-width: 190px !important;
}

.ui-refresh #secondary-nav.account-nav {
    font-family: var(--font-family);
    padding: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    /* The ::-webkit-scrollbar rules below force a classic (space-consuming)
       scrollbar even on macOS overlay-scrollbar setups. Left unmanaged, that
       6px track eats into the right side only, so content sits ~18px from the
       right edge vs 12px on the left and the column looks off-centre. Reserve
       a matching gutter on BOTH edges so the content stays centred whether or
       not the scrollbar is visible. */
    scrollbar-gutter: stable both-edges;
}
.ui-refresh #secondary-nav.account-nav:hover {
    scrollbar-color: var(--gray-40) transparent;
}
/* Override legacy always-visible scrollbar from account-setup-nav.css */
.ui-refresh #secondary-nav.account-nav::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}
.ui-refresh #secondary-nav.account-nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: var(--radius-full);
}
.ui-refresh #secondary-nav.account-nav:hover::-webkit-scrollbar-thumb {
    background-color: var(--gray-40);
}
.ui-refresh #secondary-nav.account-nav::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-50);
}
.ui-refresh #secondary-nav.account-nav.collapsed {
    padding: 0 !important;
    border-right: none !important;
}
.ui-refresh #secondary-nav.account-nav .panel {
    background: transparent !important;
    margin-bottom: 0 !important;
}
.ui-refresh #secondary-nav.account-nav .panel > .table {
    margin-bottom: 0 !important;
}
.ui-refresh #secondary-nav.account-nav .panel-heading {
    text-transform: uppercase;
    font-size: 11px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 0.12em;
    color: var(--fg-muted) !important;
    background: transparent !important;
    padding: var(--space-2) var(--space-3) var(--space-1) !important;
    margin-top: var(--space-3);
    cursor: default;
}
.ui-refresh #secondary-nav.account-nav .panel-heading h3,
.ui-refresh #secondary-nav.account-nav .panel-heading .panel-title {
    font-family: var(--font-family) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    margin: 0;
    padding: 0;
    line-height: inherit;
    display: block;
}
.ui-refresh #secondary-nav.account-nav .nav > li > a {
    font-family: var(--font-family);
}
/* Hide the divider lines between nav sections */
.ui-refresh #secondary-nav.account-nav .divider {
    display: none !important;
}
.ui-refresh #secondary-nav.account-nav li a,
.ui-refresh #secondary-nav.account-nav .kv-sidenav .indicator {
    color: var(--ink-2) !important;
}
.ui-refresh #secondary-nav.account-nav .nav > li > a {
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-medium);
    padding: 8px var(--space-3);
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    line-height: var(--line-height-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
/* Icon glyph: FA Regular (stroke weight matches the event rail's SVGs), --fg-subtle in an 18px box, 10px gap — same treatment as
   the primary event nav's .nav-k (no opacity hack). */
.ui-refresh #secondary-nav.account-nav .nav > li > a > span {
    font-size: 15px;
    color: var(--fg-subtle);
    margin-right: 10px;
    width: 18px;
    text-align: center;
    transition: color var(--transition-fast);
}
/* Active leaf: filled gray pill + border, dark label, accent icon — matches
   the primary event nav's active item exactly. */
.ui-refresh #secondary-nav.account-nav ul li.active > a:not(.kv-toggle) {
    background-color: var(--bg-muted) !important;
    color: var(--ink-2) !important;
    border-color: var(--border-subtle) !important;
    font-weight: var(--font-weight-medium);
}
/* Remove old pill indicator */
.ui-refresh #secondary-nav.account-nav ul li.active > a:not(.kv-toggle)::before {
    display: none;
}
/* Active icon span: lift to accent color */
.ui-refresh #secondary-nav.account-nav ul li.active > a:not(.kv-toggle) > span {
    color: var(--accent-primary);
}
/* Hover: bg-muted fill (same as primary nav), dark label */
.ui-refresh #secondary-nav.account-nav .nav > li > a:hover,
.ui-refresh #secondary-nav.account-nav .nav > li > a:focus-visible {
    background-color: var(--bg-muted) !important;
    color: var(--ink-2) !important;
}
/* Nested sub-items: smaller text (matches event nav). The vertical guide line
   that used to run alongside expanded sub-items has been removed per design
   cleanup — no separator on the account-hub nav dropdowns. */
.ui-refresh #secondary-nav.account-nav .kv-sidenav .active > ul {
    background: transparent !important;
    position: relative;
    margin-left: 15px;
    padding-left: 6px;
}
.ui-refresh #secondary-nav.account-nav .nav .nav > li > a {
    color: var(--fg-muted) !important;
    font-size: 12.5px;
    padding-left: 10px !important;
}
/* Expanded parent of active child: no resting fill */
.ui-refresh #secondary-nav.account-nav ul li.active.bg > a.kv-toggle {
    background-color: transparent !important;
    color: var(--fg-default) !important;
    border-radius: var(--radius-md);
}
/* Dividers: use token border instead of white opacity */
.ui-refresh #secondary-nav.account-nav .divider {
    border-color: var(--border-subtle) !important;
}
/* Expand/collapse carets: now rendered as Font Awesome `.nav-caret` glyphs
   (fa-caret-right collapsed / fa-caret-down expanded), pixel-matched to the
   event-setup sub-nav's carets — 9px, --ink-2. */
.ui-refresh #secondary-nav.account-nav .nav-caret {
    font-size: 9px;
    color: var(--ink-2) !important;
}
/* Pin control — styled to match the nav items exactly: same padding, rounded
   hover/active pill, transparent-border baseline (so the active border doesn't
   shift it). Sticky-bottom so it stays reachable while the nav scrolls. */
.ui-refresh .account-nav-pin-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}
.ui-refresh .account-nav-pin {
    display: flex;
    align-items: center;
    position: sticky;
    bottom: 0;
    margin: var(--space-2) 0;
    padding: 8px var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--bg-page);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ui-refresh .account-nav-pin:hover,
.ui-refresh .account-nav-pin:focus {
    background: var(--bg-muted);
    color: var(--ink-2);
}
.ui-refresh .account-nav-pin__icon {
    flex-shrink: 0;
    width: 18px;
    margin-right: 10px;
    font-size: 15px;
    color: var(--fg-subtle);
    text-align: center;
    transition: color var(--transition-fast);
}

@media (min-width: 993px) {
    /* --- PINNED STATE: collapse to a 56px icon-only rail --- */
    .ui-refresh #secondary-nav.account-nav.pinned {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Labels collapse via font-size:0 (the label is a bare text node on the <a>);
       the icon <span> carries its own 15px font-size so the glyph survives.
       display:flex + justify-content:center is what actually centers the icon in
       the rail — the account nav's items are inline by default (unlike the event
       nav), so without flex the icon would hug the left edge. */
    /* In the pinned rail there is no "top-level vs sub-item" — it's one flat list
       of icons. So every container (panel, table, every list nested or not, every
       row) is stripped of all horizontal padding/margin, and the inset + centering
       live ENTIRELY on each icon link: a symmetric 8px margin + flex-center. This
       is the exact same recipe the pin uses, so every icon lands on one axis. */
    .ui-refresh #secondary-nav.account-nav.pinned li > a:not(.kv-toggle) {
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        font-size: 0 !important;
        padding: 8px 0 !important;
        border-radius: var(--radius-md) !important;
    }
    .ui-refresh #secondary-nav.account-nav.pinned li > a:not(.kv-toggle) > span {
        margin: 0 !important;
    }
    /* Strip insets from every container — top-level and nested alike. */
    .ui-refresh #secondary-nav.account-nav.pinned .panel,
    .ui-refresh #secondary-nav.account-nav.pinned .panel > .table,
    .ui-refresh #secondary-nav.account-nav.pinned ul,
    .ui-refresh #secondary-nav.account-nav.pinned li {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Hide everything that has no place in an icon-only rail. */
    .ui-refresh #secondary-nav.account-nav.pinned .panel-heading,
    .ui-refresh #secondary-nav.account-nav.pinned .nav-caret {
        display: none !important;
    }
    /* Collapsed rail: the switcher shrinks to its account glyph with the
       compose button stacked under it. Their menus can't render inside the
       56px overflow-hidden rail, so both become fixed flyouts at its right
       edge (fixed escapes the rail's overflow clip). */
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-switcher-row {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        /* Inset hairline separates the account/create cluster from the nav
           icons below it, with symmetric air on both sides of the line */
        margin: var(--space-3) var(--space-2) var(--space-3);
        padding: 0 0 var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
    }
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-switcher-row .ws-acct-switch {
        flex: 0 0 auto;
    }
    .ui-refresh #secondary-nav.account-nav.pinned .ws-acct-switch-trigger {
        padding: 0;
    }
    .ui-refresh #secondary-nav.account-nav.pinned .ws-acct-switch-info,
    .ui-refresh #secondary-nav.account-nav.pinned .ws-acct-chevron {
        display: none;
    }
    .ui-refresh #secondary-nav.account-nav.pinned .ws-acct-menu {
        position: fixed;
        top: calc(var(--organizer-header-height, 60px) + 12px);
        left: 64px;
        right: auto;
        bottom: auto;
        width: 260px;
    }
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-create .dropdown-menu {
        position: fixed;
        /* Aligned with the compose button: 12px row margin + 46px stacked
           glyph trigger + 8px gap below the rail top */
        top: calc(var(--organizer-header-height, 60px) + 66px);
        left: 64px;
        right: auto;
    }
    /* The compose flyout is a real menu, not rail icons — undo the icon-rail
       label collapse (font-size: 0) for its items. */
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-create .dropdown-menu li > a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: var(--space-2);
        font-size: var(--font-size-sm) !important;
        margin: 0 !important;
        padding: 6px 14px !important;
        border-radius: 0 !important;
    }
    /* Flatten the groups: drop the non-clickable parent toggle links and surface
       their children as their own icons (force the sub-menus open, drop the guide
       line). Every child is then styled by the same leaf rule above, so a former
       sub-item is indistinguishable from a former top-level item. */
    .ui-refresh #secondary-nav.account-nav.pinned a.kv-toggle {
        display: none !important;
    }
    .ui-refresh #secondary-nav.account-nav.pinned ul.nav-pills.nav-stacked {
        display: block !important;
    }
    .ui-refresh #secondary-nav.account-nav.pinned ul.nav-pills.nav-stacked::before {
        display: none !important;
    }
    /* Pin control collapses to its icon too. */
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-pin-row {
        flex-direction: column;
        justify-content: center;
    }
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-pin {
        justify-content: center;
        padding: 8px 9px;
        background: var(--bg-muted);
        border-color: var(--border-subtle);
    }
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-pin__label {
        display: none;
    }
    .ui-refresh #secondary-nav.account-nav.pinned .account-nav-pin__icon {
        margin-right: 0;
        color: var(--accent-primary);
    }}

/* Account switcher row at the top of the account nav: the .ws-acct-switch
   (AccountSwitcherAsset) plus a compact create-new icon button. Replaces the
   old full-width .sidebar-create-new button. */
.ui-refresh .account-nav-switcher-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-inline: var(--space-2);
}
.ui-refresh .account-nav-switcher-row .ws-acct-switch {
    flex: 1 1 auto;
    min-width: 0;
}
.ui-refresh .account-nav-create {
    flex: 0 0 auto;
}
/* Inverse accent treatment (tint chip, accent glyph) — same flipping tokens
   as the draft badge, so every surface mode resolves it without overrides */
.ui-refresh .account-nav-create-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--accent-chip-bg);
    border: 1px solid var(--accent-chip-border);
    border-radius: var(--radius-md);
    color: var(--accent-hover);
    cursor: pointer;
    transition: background var(--transition-fast) ease-out;
}
.ui-refresh .account-nav-create-btn:hover,
.ui-refresh .account-nav-create.open .account-nav-create-btn {
    background: var(--accent-chip-bg-hover);
    color: var(--accent-hover);
}
.ui-refresh .account-nav-create .dropdown-menu {
    width: auto;
    min-width: 160px;
}


/* Secondary nav chevrons: tiny filled caret (fa-caret-down/right), same family. */
body.ui-refresh #secondary-nav:not(.account-nav) .kv-toggle .opened i,
body.ui-refresh #secondary-nav:not(.account-nav) .kv-toggle .closed i {
    font-size: 9px;
    opacity: 0.4;
    line-height: 1;
}
/* Nested sub-item indentation is owned by this stylesheet. */


/* Event-page left vertical icon nav (#icon-nav). Legacy CSS sets the
   column and every inactive <a> to white with lavender icons — that
   reads as a glaring white stripe in dark mode. Theme it with paper
   tokens so it follows surface modes, and quiet down the active state
   per v4 nav-item pattern (subtle paper-2 + line border, no solid fill).
   Right edge uses a flat 1px line (matching the account-level #secondary-nav)
   rather than the old drop-shadow.

   `:hover` is grouped in deliberately: legacy `#icon-nav:not(.pinned):hover`
   (navigation.css) sets the `border-right` *shorthand* to `transparent`, which
   resets the style to `none` and drops the separator entirely while the pointer
   is over the rail. Matching the hovered state here keeps the rail's chrome
   identical hovered or not — the separator is defined once and the only thing
   hover changes is the shadow (see the `:hover` rule further down). */
body.ui-refresh #icon-nav,
body.ui-refresh #icon-nav:hover {
    background: var(--bg-page) !important;
    border-right: 1px solid var(--border-default);
    box-shadow: none;
}
body.ui-refresh #icon-nav .panel.panel-default {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Hide the empty <i> Kartik renders when icon='' */
body.ui-refresh #icon-nav .nav > li > a > i {
    display: none !important;
}
/* === Icon nav: design-system SVG icons (v4 prototype spec) ===
   Collapsed (.has-secondary-nav): centered icons, no hover-expand.
   Expanded (.is-expanded, no secondary nav): icons + labels always visible.
   Hover-expand (no class): reveals labels on hover for the in-between state. */

/* Body padding lives on the ul.nav (Kartik renders no .panel-body; the chain
   is .panel > .table > ul.nav > li > a). 18px top, 14px sides matches the
   design's .sidebar padding (18px 14px 24px). Collapsed drops sides to 8px. */
body.ui-refresh #icon-nav .nav.kv-sidenav {
    padding: var(--space-2) !important;
}
body.ui-refresh #icon-nav.is-collapsed .nav.kv-sidenav {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
/* Gap between items: 2px (design spec) */
body.ui-refresh #icon-nav .nav > li {
    margin-bottom: 2px;
}
body.ui-refresh #icon-nav li.event-account-switcher {
    margin-bottom: var(--space-2);
}
body.ui-refresh #icon-nav .event-account-switcher .ws-acct-switch {
    min-width: 0;
}
body.ui-refresh #icon-nav.is-collapsed .event-account-switcher .ws-acct-switch-trigger {
    justify-content: center;
    padding: 4px;
}
body.ui-refresh #icon-nav.is-collapsed .event-account-switcher .ws-acct-switch-info,
body.ui-refresh #icon-nav.is-collapsed .event-account-switcher .ws-acct-chevron {
    display: none;
}
body.ui-refresh #icon-nav.is-collapsed .event-account-switcher .ws-acct-menu {
    position: fixed;
    top: calc(var(--organizer-header-height, 60px) + 12px);
    left: 64px;
    right: auto;
    bottom: auto;
    width: 260px;
}

/* BASE link — collapsed: centered icon.
   color = --ink-2 (design: .nav-item color) drives the label text;
   radius = --radius-md (6px, matches design's --radius-sm=6px). */
body.ui-refresh #icon-nav .nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: transparent !important;
    color: var(--ink-2) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
body.ui-refresh #icon-nav.is-expanded .nav-pills > li > a {
    max-width: none !important;
    width: 100% !important;
}
body.ui-refresh #icon-nav.is-expanded .nav > li > a {
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 8px !important;
}
body.ui-refresh #icon-nav.is-expanded .nav-l {
    max-width: 160px !important;
    opacity: 1 !important;
}
body.ui-refresh #icon-nav.is-collapsed .nav-pills > li > a {
    max-width: none !important;
    width: auto !important;
}
body.ui-refresh #icon-nav.is-collapsed .nav > li > a {
    justify-content: center !important;
    gap: 0 !important;
    padding: 8px 8px !important;
}
body.ui-refresh #icon-nav.is-collapsed .nav-l {
    max-width: 0 !important;
    opacity: 0 !important;
}
/* Block legacy hover expansion when collapsed */
body.ui-refresh #icon-nav.is-collapsed:hover .nav-pills > li > a {
    max-width: none !important;
    width: auto !important;
}
body.ui-refresh #icon-nav.is-collapsed:hover .nav > li > a {
    justify-content: center !important;
    gap: 0 !important;
}
body.ui-refresh #icon-nav.is-collapsed:hover .nav-l {
    max-width: 0 !important;
    opacity: 0 !important;
}
body.ui-refresh #icon-nav.is-collapsed:hover {
    box-shadow: none !important;
}
/* Kill the legacy `#icon-nav:not(.pinned):hover` drop-shadow for BOTH states
   and replace it with a very soft edge shadow. The separator itself is handled
   by the grouped base rule above, so the rail never shifts on hover.
   The expanded state also blocks the legacy max-width hover-expand. */
body.ui-refresh #icon-nav:hover {
    box-shadow: 6px 0 14px -12px rgba(20, 28, 46, .14);
}

body.ui-refresh #icon-nav.is-expanded:not(.is-collapsed):hover .nav-pills > li > a {
    max-width: 100% !important;
    width: 100% !important;
}
/* Collapsed icon size: 17px (design spec for icon-only rail) */
body.ui-refresh #icon-nav.is-collapsed .nav-k svg,
body.ui-refresh #icon-nav.is-expanded .nav-k svg,
body.ui-refresh #icon-nav.has-secondary-nav.pinned .nav-k svg,
body.ui-refresh #icon-nav.is-collapsed .nav-k i,
body.ui-refresh #icon-nav.is-expanded .nav-k i,
body.ui-refresh #icon-nav.has-secondary-nav.pinned .nav-k i {
    width: 17px !important;
    height: 17px !important;
    font-size: 17px !important;
}

/* Pin button visual: accent when nav is collapsed (user clicked to collapse) */
body.ui-refresh #icon-nav.is-collapsed li.pin > a {
    color: var(--accent-primary) !important;
}
body.ui-refresh #icon-nav.is-collapsed li.pin .nav-k {
    color: var(--accent-primary) !important;
}

/* Icon container: 18px box (design spec), subtle color (design: --muted-2) */
body.ui-refresh #icon-nav .nav-k {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--fg-subtle);
    transition: color var(--transition-fast);
}
/* Collapsed: 17px SVG (design: 17px when icon-only) */
body.ui-refresh #icon-nav .nav-k svg {
    display: block;
    width: 17px;
    height: 17px;
}
/* Label: hidden by default. 13.5px/500 (design: .nav-item .l, +0.5 per feedback) */
body.ui-refresh #icon-nav .nav-l {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--transition-normal), opacity var(--transition-fast);
}
/* Hover: neutral ink tint works across all light surface modes */
body.ui-refresh #icon-nav .nav > li > a:hover,
body.ui-refresh #icon-nav .nav > li > a:focus-visible {
    background: rgba(20, 28, 46, .05) !important;
    border-color: transparent !important;
}
/* Active: same neutral tint, no border */
body.ui-refresh #icon-nav .nav > li.active > a {
    background: rgba(20, 28, 46, .05) !important;
    color: var(--ink-2) !important;
    border-color: transparent !important;
}

body.ui-refresh #icon-nav .nav > li.active > a .nav-k {
    color: var(--accent-primary);
}
/* Dividers between groups — navigation.css hardcodes #E6E9EB border-bottom;
   override both background and border so dark mode picks up the correct token. */
body.ui-refresh #icon-nav .nav > li.divider {
    background: var(--border-default) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

/* Sidebar items — match the primary event nav's label color (--ink-2) so the
   account nav and the icon rail read as one type system. */
body.ui-refresh #secondary-nav.account-nav .nav > li > a {
    color: var(--ink-2) !important;
}


/* === Sidebar event-icons: real Font Awesome Light glyphs under ui-refresh ===
   _event.php emits `event-icon fal fa-*` under the flag, so FA renders the glyph
   itself. Kill the legacy background/mask glyph and tint the FA glyph via color.
   The !important reset disables legacy masks while Font Awesome supplies
   the glyph. Superseded per-icon refresh masks have been removed. */
.ui-refresh #icon-nav .event-icon {
    background-image: none !important;
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    color: var(--fg-muted);
    font-size: 18px;
    width: auto;
    height: auto;
    text-indent: 0 !important;
    transition: color var(--transition-fast);
}

.ui-refresh #icon-nav li:hover .event-icon,
.ui-refresh #icon-nav li.active .event-icon {
    color: var(--accent-primary);
}

/* Semantic submenu buttons inherit the appearance of the original anchor
   controls. Leaf links, headings, icons and active states retain their owner. */
body.ui-refresh .organizer-menu #secondary-nav button.kv-toggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 5px 15px;
    border: 0;
    border-radius: 0;
    text-align: start;
    font-family: var(--font-family);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-medium);
    line-height: inherit;
    color: var(--ink-2);
    background: transparent;
}
body.ui-refresh .organizer-menu #secondary-nav.account-nav button.kv-toggle {
    padding: 8px var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    line-height: var(--line-height-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
body.ui-refresh .organizer-menu #secondary-nav button.kv-toggle:hover {
    background: var(--state-hover);
}
body.ui-refresh .organizer-menu #secondary-nav.account-nav button.kv-toggle:hover {
    background: var(--bg-muted);
}
body.ui-refresh .organizer-menu #secondary-nav.account-nav li.active.bg > button.kv-toggle {
    color: var(--fg-default);
    background: transparent;
}
body.ui-refresh .organizer-menu #secondary-nav.account-nav button.kv-toggle > span {
    font-size: 15px;
    color: var(--fg-subtle);
    margin-right: 10px;
    width: 18px;
    text-align: center;
}