/* RoadCoach -- left sidebar navigation (TICKET-C: flat list, no dropdowns, role-scoped).
   Reuses the :root tokens from site.css; this file adds only the sidebar's own layout +
   components, no new color values.
   THEME-DESIGNER-PLAN Phase A1 / SUP-007: the active-link rule below reads --sidebar-active-bg/-fg
   through the standard var(--token, var(--fallback)) idiom (see site.css TOKEN MAP header comment,
   "TWO KINDS OF TOKEN") -- these tokens are DERIVED (default to the Brand semantic layer's
   --brand-primary-weak/--brand-primary, which [data-accent] blocks keep in lockstep with
   --accent-weak/--accent), so they are deliberately NOT declared in :root; declaring them there
   would freeze them to the compile-time default and break every [data-accent] preview/apply. */

.rc-shell {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.rc-sidebar {
    width: 230px;
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.rc-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 6px;
}

.rc-sidebar__emblem { height: 30px; width: auto; flex: none; }
.rc-sidebar__wordmark { font-weight: 800; font-size: 15.5px; letter-spacing: -0.02em; }

/* TASK-WEB-VER-001: the running-version line, a block sibling directly under the brand row (see
   _Layout.cshtml's comment on why it cannot live INSIDE .rc-sidebar__brand's flex row). Horizontal
   padding matches the brand row above it so both edges line up; the bottom padding replaces the
   18px .rc-sidebar__brand used to carry alone, now split 6px/14px across the two rows. */
.rc-sidebar__version { padding: 0 8px 14px; }

/* PORTAL-SPLIT Phase 2: a school's own name replaces the wordmark for school-scoped users. Long
   names ellipsize inside the fixed sidebar width -- wrapping or overflow would break the brand
   row (the white-on-white/overflow render class the UI standard screenshots for). */
.rc-sidebar__wordmark--school {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 14px;
}

.rc-sidebar__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.rc-sidebar__link:hover { background: var(--surface-2); color: var(--text); }

.rc-sidebar__link--active {
    background: var(--sidebar-active-bg, var(--brand-primary-weak));
    color: var(--sidebar-active-fg, var(--brand-primary));
}

.rc-sidebar__icon {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-sidebar__icon svg { width: 100%; height: 100%; }

.rc-sidebar__divider {
    height: 1px;
    background: var(--border);
    margin: 8px 8px 10px;
}

.rc-sidebar__spacer { flex: 1; }

.rc-sidebar__accent {
    justify-content: center;
    align-self: center;
    margin: 10px 0;
}

.rc-sidebar__user {
    border-top: 1px solid var(--border);
    padding: 14px 8px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rc-sidebar__username {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-sidebar__logout {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 6px;
    flex: none;
}

.rc-sidebar__logout:hover { background: var(--surface-2); color: var(--status-error); }

/* ---- Guest (unauthenticated) top strip -- Login/ForgotPassword/ResetPassword/VerifyEmail/
   InviteAccept keep the simple centered-card layout, no sidebar. ---- */

.rc-topbar-guest {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 28px 0;
}

/* TASK-WEB-VER-001: the running-version line on auth pages (/login etc.) -- stays a child of
   .rc-topbar-guest (an axe landmark-region rule requires it; see _AuthLayout.cshtml's comment).
   flex-basis:100% + the flex-wrap above forces it onto its own new line within the SAME flex
   container instead of sitting beside the wordmark. Horizontal padding matches the row above it
   (28px) so both edges line up. */
.rc-guest-version { flex-basis: 100%; padding: 4px 0 0; }

/* ---- TASK-WEB-RESP-001: off-canvas nav drawer (phone widths, ~<768px) ----
   Additive layer only -- every rule above this comment is untouched, so >=768px renders exactly
   as before. Below 768px the sidebar becomes a fixed off-canvas drawer (transform, not
   display:none, so the transition can animate) opened by a hamburger in a slim mobile top bar;
   a full-screen backdrop closes it. Both the top bar and the backdrop are HIDDEN OUTSIDE the
   media query below (not just "closed") so neither can ever render at a desktop width regardless
   of the JS toggle's class state (mirrors the .rc-hidden-vs-:not(.rc-hidden) specificity idiom
   already used for .rc-feedback-overlay/.rc-feedback-preview in site.css). */

.rc-topbar-mobile { display: none; }
.rc-drawer-backdrop { display: none; }

@media (max-width: 767.98px) {
    .rc-shell {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .rc-topbar-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 52px;
        padding: 0 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .rc-topbar-mobile__brand { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }

    .rc-drawer-toggle {
        flex: none;
        width: 36px;
        height: 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        cursor: pointer;
        padding: 0;
    }

    .rc-drawer-toggle:hover { background: var(--surface-2); }

    .rc-drawer-toggle__bar {
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
    }

    /* The drawer IS the existing sidebar -- fixed + transformed off-canvas by default, slid in
       when roadcoach.js toggles --open. Desktop's sticky/height:100vh sidebar rules above are
       untouched; these are ADDITIONAL properties that only take effect under this max-width. */
    .rc-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 24px rgba(14, 34, 56, .28);
    }

    .rc-sidebar.rc-sidebar--open { transform: translateX(0); }

    /* Same specificity-vs-source-order gotcha as .rc-feedback-overlay in site.css: .rc-hidden
       {display:none} is declared earlier at equal specificity, so a bare "display: block" here
       would lose to it by source order. */
    .rc-drawer-backdrop:not(.rc-hidden) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(14, 34, 56, .45);
    }
}