/* ===============================================================
   THE RAIL (§9.17) — navy chrome navigation
   ===============================================================
   The chrome is institutional; the canvas is editorial. This file is the
   building the work happens in: deep navy, its own colour scale, and it
   reads IDENTICALLY in light and dark theme. Nothing here branches on the
   theme, because --chrome-* keeps its own ramp in both.

   Fixed measurements from §8.1:
     expanded   232px          collapsed  68px
     wordmark   64px (h-16)    toggle     44px (h-11)

   Anatomy, top to bottom:
     1. Wordmark block   — mark + serif wordmark + 9px caps descriptor
     2. Grouped nav      — 9px caps group headers, scrolling
     3. Countdown widget — the one ticking element (§9.18)
     4. Collapse toggle
     5. User footer
   =============================================================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-rail);
    display: flex;
    flex-direction: column;
    width: var(--rail-w);
    background: var(--chrome);
    border-right: 1px solid var(--chrome-rule);
    color: var(--chrome-text);
}

/* The width transition is SUPPRESSED until hydrated, so adopting the stored
   collapse preference reads as the initial state rather than as an animation
   nobody asked for. `.rail-hydrated` is added on the frame after mount. */
.rail-hydrated .sidebar {
    transition: width 200ms var(--ease-out-editorial);
}

.sidebar.collapsed { width: var(--rail-w-collapsed); }

/* ---- 1. Wordmark block ---- */
.sidebar-header {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    flex-shrink: 0;
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--chrome-rule);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

/* The favicon crest, at the 28px the wordmark block allows. No background
   square: the crest carries its own colour and reads fine straight on the
   chrome. */
.sidebar-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sidebar-mark img { width: 28px; height: 28px; object-fit: contain; }

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.sidebar-wordmark {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    color: var(--chrome-text-strong);
    white-space: nowrap;
}

/* The separator dot in coral — one character of brand, spent well. */
.sidebar-wordmark-dot { color: var(--coral); }

.sidebar-descriptor {
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--chrome-text-mute);
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-brand-text { display: none; }
.sidebar.collapsed .sidebar-header { padding: 0; justify-content: center; }

/* ---- 2. Navigation ---- */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) 0;
}

.nav-section { margin-bottom: var(--space-3); }

/* The group heading IS the disclosure button. It keeps the 9px caps of a
   heading rather than growing into a control: the rail is chrome, and ten
   button-shaped things stacked down its left edge would compete with the
   items they are meant to organise. Only the chevron and a hover tint say
   it is pressable. */
.nav-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-5) 6px;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--dur-colour) var(--ease-out-editorial);
}

.nav-section-title {
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--chrome-text-mute);
    white-space: nowrap;
    margin-right: auto;
    transition: color var(--dur-colour) var(--ease-out-editorial);
}

.nav-section-header:hover .nav-section-title,
.nav-section-header:hover .nav-section-chevron {
    color: var(--chrome-text-strong);
}

/* The chevron points DOWN when the group is open and rotates a quarter turn
   to the right when it folds — the same convention as every other disclosure
   in the product. */
.nav-section-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--chrome-text-mute);
    transition: transform 180ms var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
}

.nav-section.is-folded .nav-section-chevron { transform: rotate(-90deg); }

/* Folded, the counts inside the group would vanish with it. Their sum moves
   onto the header, so the fact that there is work waiting behind a folded
   group survives the fold. Empty (no pending work) it renders nothing. */
.nav-section-count {
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--chrome-alt);
    color: var(--chrome-text-strong);
    font-size: 9px;
    font-weight: var(--font-semibold);
    line-height: 1.4;
    opacity: 0;
    transition: opacity var(--dur-fade) var(--ease-out-editorial);
}

.nav-section-count:empty { display: none; }
.nav-section.is-folded .nav-section-count { opacity: 1; }

/* The fold itself: 1fr → 0fr on a grid row, so it animates to the group's
   own height without anyone hard-coding a max-height that a new menu item
   would silently outgrow. Suppressed until hydrated, like the rail width —
   restoring a stored fold must read as the initial state. */
.nav-section-content {
    display: grid;
    grid-template-rows: 1fr;
}

.nav-section-items { overflow: hidden; min-height: 0; }

.rail-hydrated .nav-section-content {
    transition: grid-template-rows 180ms var(--ease-out-editorial);
}

.nav-section.is-folded .nav-section-content { grid-template-rows: 0fr; }

/* Collapsed, a group heading becomes a hairline rather than truncated text:
   three letters of "RECRUITMENT" says less than a rule does. There is no
   heading left to press, so folding is off and every group shows its icons —
   a 68px rail of unlabelled hairlines with items hidden behind them would be
   navigation you cannot see. */
.sidebar.collapsed .nav-section-header {
    position: relative;
    padding: var(--space-2) var(--space-3);
    pointer-events: none;
}
/* Taken out of the flow to draw it: as a flex item beside the chevron the
   rule would size to its (indented-away) text and come out 0px wide. */
.sidebar.collapsed .nav-section-title {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    top: 50%;
    display: block;
    height: 1px;
    overflow: hidden;
    text-indent: -999em;
    background: var(--chrome-rule);
}
.sidebar.collapsed .nav-section-chevron { display: none; }
.sidebar.collapsed .nav-section-count { opacity: 0; }
.sidebar.collapsed .nav-section-content { grid-template-rows: 1fr; }

.nav-item { position: relative; }

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: var(--font-medium);
    line-height: 1.4;
    color: var(--chrome-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
}

/* size-[17px] in rail nav — a deliberate optical adjustment against 13px
   text, so the glyph column does not read as undersized. */
.nav-link > i,
.nav-link > svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    font-size: 15px;
    text-align: center;
    color: var(--chrome-text-mute);
    transition: color var(--dur-colour) var(--ease-out-editorial);
}

.nav-link:hover {
    background: color-mix(in srgb, var(--chrome-alt) 60%, transparent);
    color: var(--chrome-text-strong);
}

.nav-link.active {
    background: var(--chrome-alt);
    color: var(--chrome-text-strong);
}

.nav-link.active > i,
.nav-link.active > svg { color: var(--coral); }

/* The 2px coral marker, absolutely positioned at -left-2. One element, and
   the only place the base coral appears in the chrome besides the mark. */
.nav-link.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 2px;
    height: 20px;
    margin-top: -10px;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    background: var(--coral);
}

.nav-link-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.collapsed .nav-link-text { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding: var(--space-2); }

/* The count pill: tabular, because it sits in a column of other counts. */
.nav-badge {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--chrome-alt);
    color: var(--chrome-text-strong);
    font-size: 10px;
    font-weight: var(--font-semibold);
    line-height: 1.2;
}

.nav-link.active .nav-badge {
    /* --chrome-text-strong is white in BOTH themes, which is the point: the
       rail keeps its own scale, so its constants are chrome tokens rather
       than literals. */
    background: var(--chrome-text-strong);
    color: var(--coral-strong);
}

/* Collapsed, the pill degrades to a 6px coral dot in the corner — the fact
   that there is something waiting survives; the exact count does not need to. */
.sidebar.collapsed .nav-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 6px;
    height: 6px;
    padding: 0;
    overflow: hidden;
    text-indent: -999em;
    background: var(--coral);
}

/* Collapsed, the label becomes a navy tooltip — chrome, in both themes. */
.sidebar.collapsed .nav-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-tooltip);
    padding: 4px 8px;
    border-radius: var(--radius-md);
    background: var(--chrome);
    border: 1px solid var(--chrome-rule);
    color: var(--chrome-text-strong);
    font-size: var(--text-xs);
    box-shadow: var(--shadow-float);
    white-space: nowrap;
}

/* ---- 3. The countdown (§9.18) ---- */
.rail-countdown {
    flex-shrink: 0;
    padding: var(--space-4);
    border-top: 1px solid var(--chrome-rule);
}

.rail-countdown-label {
    font-size: 9px;
    color: var(--chrome-text-mute);
}

.rail-countdown-name {
    margin-top: 4px;
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: var(--font-medium);
    color: var(--chrome-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-countdown-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: var(--space-3);
}

.rail-tile {
    padding: 6px 0;
    border-radius: var(--radius-md);
    background: var(--chrome-alt);
    text-align: center;
}

.rail-tile-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1;
    font-weight: var(--font-semibold);
    color: var(--chrome-text-strong);
}

.rail-tile-label {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    color: var(--chrome-text-mute);
}

.rail-countdown-capacity { margin-top: var(--space-3); }

.rail-capacity-track {
    height: 4px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--chrome-alt);
}

.rail-capacity-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--coral);
    transition: width 700ms var(--ease-out-editorial);
}

.rail-capacity-read {
    margin-top: 6px;
    text-align: right;
    font-size: 10px;
    color: var(--chrome-text-mute);
}

.sidebar.collapsed .rail-countdown { display: none; }

/* ---- 4. Collapse toggle ---- */
.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: 44px;
    padding: 0 var(--space-5);
    border: 0;
    border-top: 1px solid var(--chrome-rule);
    background: transparent;
    color: var(--chrome-text-mute);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--dur-colour) var(--ease-out-editorial);
}

.sidebar-toggle:hover { color: var(--chrome-text-strong); }
.sidebar-toggle > i { width: 17px; font-size: 12px; }

.sidebar.collapsed .sidebar-toggle {
    justify-content: center;
    padding: 0;
}
.sidebar.collapsed .sidebar-toggle-text { display: none; }
.sidebar.collapsed .sidebar-toggle > i { transform: rotate(180deg); }

/* ---- 5. User footer ---- */
.sidebar-footer {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-top: 1px solid var(--chrome-rule);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px var(--space-2);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur-colour) var(--ease-out-editorial);
}

.sidebar-user:hover { background: var(--chrome-alt); }

/* The rail avatar is a SOLID fill with white text — the exception to the
   tint-avatar rule, because it sits in chrome (§9.13). */
.user-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--coral-strong);
    color: var(--chrome-text-strong);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.user-name {
    font-size: 12px;
    font-weight: var(--font-medium);
    color: var(--chrome-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role {
    font-size: 10px;
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--chrome-text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 6px var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--chrome-text-mute);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
}

/* Destructive intent signalled on hover, so a red control is not sitting
   there permanently. */
.sidebar-logout:hover {
    background: var(--chrome-alt);
    color: var(--coral-strong);
}

.sidebar-logout > i { width: 17px; font-size: 13px; }

.sidebar.collapsed .user-info,
.sidebar.collapsed .sidebar-logout span { display: none; }
.sidebar.collapsed .sidebar-user,
.sidebar.collapsed .sidebar-logout { justify-content: center; }

/* ---- Mobile: the rail becomes an overlay below 1024px (§8.3) ---- */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-rail) - 1);
    background: rgb(var(--ink-rgb) / 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fade) var(--ease-out-editorial),
                visibility var(--dur-fade) var(--ease-out-editorial);
}

.sidebar-overlay.active { opacity: 1; visibility: visible; }

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--dur-slide) var(--ease-out-editorial);
        width: var(--rail-w);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.collapsed { width: var(--rail-w); }
    .sidebar.collapsed .nav-link-text,
    .sidebar.collapsed .user-info,
    .sidebar.collapsed .sidebar-brand-text,
    .sidebar.collapsed .rail-countdown,
    .sidebar.collapsed .nav-section-chevron,
    .sidebar.collapsed .sidebar-toggle-text { display: revert; }

    /* The rail is full width here, so the group headings are real headings
       again and folding comes back with them. */
    .sidebar.collapsed .nav-section-header { pointer-events: auto; }
    .sidebar.collapsed .nav-section-title {
        position: static;
        display: revert;
        height: auto;
        text-indent: 0;
        background: none;
    }
    .sidebar.collapsed .nav-section.is-folded .nav-section-content {
        grid-template-rows: 0fr;
    }
    .sidebar.collapsed .nav-section.is-folded .nav-section-count { opacity: 1; }
}

@media (min-width: 1025px) {
    .sidebar-overlay { display: none; }
}

/* The rail-footer fallback: when no intake clock is running, a compact
   summary stat stands in (§9.18). It does not move — the countdown is the
   only thing in the product allowed to. */
.rail-stat-value {
    margin-top: 4px;
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1;
    font-weight: var(--font-semibold);
    color: var(--chrome-text-strong);
}

.rail-stat-caption {
    margin-top: 4px;
    font-size: 10px;
    color: var(--chrome-text-mute);
}