/*
 * Shared shell for every interpreter-facing page.
 *
 * The interpreter experience used to be three unrelated pages — a jobs board,
 * a profile, and a live-call dashboard — each with its own inline styles and
 * its own idea of navigation. The dashboard linked nowhere at all. This file
 * plus partials/interpreter-nav.html give them one persistent nav and one set
 * of design tokens, so they read as a single product.
 *
 * Deliberately additive: it namespaces everything under .iterp-* and only
 * offsets the page body, so the existing inline styles on each page keep
 * working untouched.
 */

:root {
    /* Tokens match the jobs page palette so nothing shifts jarringly between
       destinations. Kept here so future pages inherit rather than re-invent. */
    --iterp-bg: #071119;
    --iterp-surface: rgba(255, 255, 255, 0.075);
    --iterp-surface-strong: rgba(255, 255, 255, 0.12);
    --iterp-line: rgba(255, 255, 255, 0.14);
    --iterp-text: #f6fbff;
    /* Lifted from the old #9fb2bf, which sat near the WCAG AA floor on these
       panels — thin contrast is the wrong compromise for an access company. */
    --iterp-muted: #b6c6d2;
    --iterp-blue: #6fc7ff;
    --iterp-green: #63d6a4;
    --iterp-amber: #ffc76f;
    --iterp-red: #ff8d8d;
    --iterp-nav-w: 244px;
}

/* ---------- Layout offset ---------- */

body.iterp-has-nav {
    padding-left: var(--iterp-nav-w);
}

/* The jobs page reuses one document for its signed-out login screen
   (body.auth-mode). Navigation to destinations that all require a session
   would be dead weight there, so hide the shell until sign-in succeeds. */
body.auth-mode .iterp-nav,
body.auth-mode .iterp-nav__toggle {
    display: none;
}

body.auth-mode.iterp-has-nav {
    padding-left: 0;
}

/* ---------- Sidebar ---------- */

.iterp-nav {
    background: linear-gradient(180deg, #0a1a25 0%, #071119 100%);
    border-right: 1px solid var(--iterp-line);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    overflow-y: auto;
    padding: 18px 0 24px;
    position: fixed;
    top: 0;
    width: var(--iterp-nav-w);
    z-index: 900;
}

.iterp-nav__brand {
    align-items: center;
    color: var(--iterp-text);
    display: flex;
    font-size: 15px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0.02em;
    padding: 0 18px 16px;
    text-decoration: none;
}

.iterp-nav__brand span { color: var(--iterp-blue); }

.iterp-nav__group { padding: 10px 0 2px; }

.iterp-nav__label {
    color: var(--iterp-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    padding: 0 18px 6px;
    text-transform: uppercase;
}

.iterp-nav__link {
    align-items: center;
    border-left: 3px solid transparent;
    color: var(--iterp-text);
    display: flex;
    font-size: 14px;
    gap: 10px;
    justify-content: space-between;
    padding: 9px 18px;
    text-decoration: none;
}

.iterp-nav__link:hover { background: var(--iterp-surface); }

.iterp-nav__link[aria-current="page"] {
    background: var(--iterp-surface-strong);
    border-left-color: var(--iterp-blue);
    font-weight: 600;
}

/* Count badge — e.g. pending direct offers. Hidden until given a value, so an
   empty badge never renders as a stray dot. */
.iterp-nav__badge {
    background: var(--iterp-blue);
    border-radius: 999px;
    color: #061018;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 7px;
    text-align: center;
}

.iterp-nav__badge:empty { display: none; }

.iterp-nav__spacer { flex: 1; }

.iterp-nav__foot {
    border-top: 1px solid var(--iterp-line);
    margin-top: 10px;
    padding-top: 10px;
}

/* ---------- Mobile ---------- */

.iterp-nav__toggle {
    background: var(--iterp-surface-strong);
    border: 1px solid var(--iterp-line);
    border-radius: 10px;
    color: var(--iterp-text);
    cursor: pointer;
    display: none;
    font-size: 20px;
    left: 12px;
    min-height: 44px;
    min-width: 44px;
    line-height: 1;
    padding: 9px 13px;
    position: fixed;
    top: 12px;
    transition: left 160ms ease;
    z-index: 1000;
}

/* Once the drawer is open it occupies the toggle's corner, so the button
   would sit on top of the brand. Slide it clear of the panel edge, where it
   reads as the close control for the thing beside it.
   Keyed off a body class the script sets rather than :has(.is-open) — the
   :has() form matched in the CSSOM but did not restyle on class change, and a
   body class also works on browsers without :has() support at all. */
body.iterp-nav-open .iterp-nav__toggle {
    left: calc(var(--iterp-nav-w) + 12px);
}

/* Tap-outside-to-close scrim. Only present while open, so it never
   intercepts taps on the page underneath. */
.iterp-nav__scrim {
    background: rgba(3, 10, 16, 0.55);
    inset: 0;
    position: fixed;
    z-index: 890;
}

@media (max-width: 900px) {
    body.iterp-has-nav { padding-left: 0; }

    .iterp-nav {
        transform: translateX(-100%);
        transition: transform 160ms ease;
    }

    .iterp-nav.is-open { transform: translateX(0); }

    .iterp-nav__toggle { display: block; }

    /* Push page content clear of the fixed toggle button. */
    body.iterp-has-nav .app-shell { padding-top: 58px; }
}

/* Respect users who ask for less motion — the drawer still opens, instantly. */
@media (prefers-reduced-motion: reduce) {
    .iterp-nav, .iterp-nav__toggle { transition: none; }
}