/* 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;
}

/* UX workflow mockup account block: initials, name and role; a click opens the account menu
   above it (Account and password, What's new, Send feedback, Sign out). */
.rc-sidebar__user {
    position: relative;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.rc-sidebar__me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 9px;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}

.rc-sidebar__me::-webkit-details-marker { display: none; }
.rc-sidebar__me:hover, .rc-sidebar__user[open] .rc-sidebar__me { background: var(--surface-2); }

.rc-sidebar__av {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--sidebar-active-bg, var(--brand-primary-weak));
    color: var(--sidebar-active-fg, var(--brand-primary));
    font-size: 12px;
    font-weight: 700;
}

.rc-sidebar__who { display: grid; min-width: 0; line-height: 1.2; }

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

.rc-sidebar__role { font-size: 11.5px; color: var(--text-dim); }

.rc-sidebar__menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 20;
    display: grid;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 10px 30px rgba(20, 33, 61, .12);
}

.rc-sidebar__menu-who {
    display: grid;
    padding: 6px 8px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    line-height: 1.25;
}

.rc-sidebar__menu-who b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sidebar__menu-who small { font-size: 11.5px; color: var(--text-dim); }

.rc-sidebar__menu form { margin: 0; }

.rc-sidebar__menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

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

/* ---- RC-95: collapsible sidebar (desktop widths) ----
   The "Collapse menu" button looks like a menu link but has its own class, so specs that count
   .rc-sidebar__link still count only menu items. A click (roadcoach.js) puts
   .rc-shell--collapsed on the shell and the sidebar shrinks to an icon rail. Labels stay in the
   accessibility tree (clipped like .rc-sr-only), so every link keeps its accessible name. Phones
   never see the rail: the button is hidden in the drawer media query below and every collapsed
   rule lives under min-width: 768px. */
.rc-sidebar__collapse,
.rc-sidebar__feedback {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 2px;
    border: none;
    border-radius: 9px;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

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

.rc-sidebar__collapse-chevron { transform-box: fill-box; transform-origin: center; }

@media (min-width: 768px) {
    .rc-sidebar { transition: width .15s ease, padding .15s ease; }

    .rc-shell--collapsed .rc-sidebar {
        width: 64px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .rc-shell--collapsed .rc-sidebar__brand { justify-content: center; padding: 4px 0 14px; }
    .rc-shell--collapsed .rc-sidebar__wordmark,
    .rc-shell--collapsed .rc-sidebar__version { display: none; }

    .rc-shell--collapsed .rc-sidebar__link,
    .rc-shell--collapsed .rc-sidebar__collapse,
    .rc-shell--collapsed .rc-sidebar__feedback {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .rc-shell--collapsed .rc-sidebar__label,
    .rc-shell--collapsed .rc-sidebar__who {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .rc-shell--collapsed .rc-sidebar__collapse-chevron { transform: scaleX(-1); }

    .rc-shell--collapsed .rc-sidebar__me { justify-content: center; padding-left: 0; padding-right: 0; }

    /* The account menu opens wider than the rail so its items stay readable. */
    .rc-shell--collapsed .rc-sidebar__menu { right: auto; width: 220px; }
}

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

/* UX workflow mockup sign-in screens: the brand line is centered above the card. */
.rc-topbar-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px 16px 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; text-align: center; }
.rc-topbar-guest .rc-wordmark { text-align: center; }
/* The UX workflow mockup's row of screen tabs under the sign-in card (Pages/Shared/_AuthScreens.cshtml,
   Development only): login, forgot, reset, invite, verified, expired, account. */
.rc-auth-screens-panel { max-width: 440px; margin: 14px auto 0; text-align: center; }
.rc-auth-screens-panel > summary { font-size: 12px; color: var(--text-dim); cursor: pointer; padding: 6px 0; }
.rc-auth-screens-panel__note { border: 1px dashed var(--border); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
@media (max-width: 767.98px) { .rc-auth-screens-panel > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; } }
.rc-auth-screens { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 440px; margin: 8px auto 0; }
.rc-auth-screens a {
    font-size: 12px; color: var(--text-dim); text-decoration: none; border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 9px; display: inline-flex; align-items: center;
}
.rc-auth-screens a:hover { color: var(--text); }
.rc-auth-screens a.rc-auth-screens__on { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-primary-contrast); }
@media (max-width: 767.98px) { .rc-auth-screens a { min-height: 44px; padding: 3px 12px; } }

/* ---- 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; }

/* RC-96: the notification pop-ups (site.css .rc-toasts) pop up at the top centre of the window. Phones (media block below): full width under the 52px top bar, hidden while the menu drawer
   is open. */

@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; }

    /* TASK-WEB-DEMO-013 (TD-275): 44px is the tap-target floor this ticket closes, so the
       hamburger, nav links and logout button all reach it at this breakpoint only -- everything
       at >=768px (the base rules above this media query) is untouched. */
    .rc-drawer-toggle {
        flex: none;
        width: 44px;
        height: 44px;
        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); }

    /* RC-95: the drawer already frees the screen on phones, so no collapse button here. */
    .rc-sidebar__collapse { display: none; }

    /* TASK-WEB-DEMO-013 (TD-275): min-height reaches the 44px floor via extra padding, not a
       redesign -- box-sizing:border-box (site.css:228) means padding is included in that height,
       so no separate height rule is needed. */
    .rc-sidebar__link {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .rc-sidebar__menu-item {
        min-height: 44px;
        min-width: 44px;
    }

    /* 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);
    }

    .rc-shell .rc-toasts { left: 16px; right: 16px; width: auto; top: calc(52px + 8px); max-height: calc(100vh - 52px - 16px); }
    .rc-shell:has(.rc-sidebar--open) .rc-toasts { display: none; }
    .rc-shell .rc-toast:not([hidden]) { left: 16px; right: 16px; width: auto; top: calc(52px + 8px); }
    .rc-shell:has(.rc-sidebar--open) .rc-toast { display: none; }
}