/* ─── CampusHub shared theme ─────────────────────────────────────────────
   Source of truth for the visual chrome shared across every CampusHub app
   (sidebar nav, brand/gold color tokens, collapse behaviour, focus styles).
   Synced into each app's static/css/ via sync-theme.sh — do not edit the
   copies in ChemTrack/PeopleHub/FacultyHub directly, edit here and re-run
   the sync script. App-specific rules (cards, badges, form inputs, the
   FacultyHub watermark, etc.) stay in each app's own main.css/app.css. */

/* ─── Custom properties ─────────────────────────────────────────────────── */
:root {
    --color-brand:       #1a3a6b;
    --color-brand-dark:  #122b52;
    --color-brand-light: #eef2f9;
    --color-gold:        #c9a227;
    --color-gold-light:  #fdf6e3;
    --sidebar-width:     16rem;
}

html {
    background-color: #f5f4f2;
    scroll-behavior: smooth;
}

body {
    background-color: #f5f4f2;
}

/* ─── Sidebar nav link base styles ──────────────────────────────────────── */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.32rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    transition: background-color 0.12s ease, color 0.12s ease;
    text-decoration: none;
}
.sidebar-link:hover {
    background-color: rgba(255,255,255,0.08);
    color: #ffffff;
}
.sidebar-link-active {
    background-color: rgba(255,255,255,0.12);
    color: #ffffff;
    font-weight: 600;
}

/* Staff/gold nav links */
.sidebar-link-staff {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.32rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(201,162,39,0.75);
    transition: background-color 0.12s ease, color 0.12s ease;
    text-decoration: none;
}
.sidebar-link-staff:hover {
    background-color: rgba(201,162,39,0.1);
    color: #c9a227;
}
.sidebar-link-staff-active {
    background-color: rgba(201,162,39,0.12);
    color: #c9a227;
    font-weight: 600;
}

/* ─── Sidebar nav groups ─────────────────────────────────────────────────
   Each group is a header button + a body of .sidebar-link/.sidebar-link-
   staff rows. Expanded by default; JS (sidebar.js) toggles [data-group-
   collapsed] on the group wrapper and persists per-group state in
   localStorage, same pattern as the whole-sidebar collapse below. ───── */
.sidebar-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.32rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* #4d76b3 (text-brand-400, matching the "Main"/"Staff"/"Admin" labels)
       was tried here first but only clears 3.05:1 contrast against the
       #122b52 sidebar background — below WCAG AA's 4.5:1 minimum for
       text, and reported as too dark to comfortably read. brand-200
       clears 7.56:1. (The existing brand-400 labels have this same
       underlying contrast issue — not fixed here, out of scope for this
       change, but worth knowing about.) */
    color: #adbfdf;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.12s ease;
}
.sidebar-group-header:hover {
    color: #ffffff;
}
.sidebar-group-chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
[data-group-collapsed="true"] .sidebar-group-chevron {
    transform: rotate(-90deg);
}
[data-group-collapsed="true"] .sidebar-group-body {
    display: none;
}

/* ─── Collapsible sidebar (desktop only — mobile uses the existing
   off-canvas open/close behaviour and ignores this) ──────────────────── */
@media (min-width: 1024px) {
    #app-sidebar {
        width: var(--sidebar-width);
        transition: width 0.15s ease;
    }
    #app-sidebar.sidebar-collapsed,
    html.sidebar-collapsed-pref #app-sidebar {
        width: 4rem;
    }
    /* Hide text labels, section headers and the home-icon button — keep
       just the nav icons and the collapse toggle itself visible — when
       collapsed. Marked with data-sidebar-label so new sidebar sections
       don't need bespoke selectors here. */
    #app-sidebar.sidebar-collapsed [data-sidebar-label],
    #app-sidebar.sidebar-collapsed .sidebar-brand-text,
    #app-sidebar.sidebar-collapsed .sidebar-home-link,
    html.sidebar-collapsed-pref #app-sidebar [data-sidebar-label],
    html.sidebar-collapsed-pref #app-sidebar .sidebar-brand-text,
    html.sidebar-collapsed-pref #app-sidebar .sidebar-home-link {
        display: none;
    }
    /* The header row (logo + collapse button) and the bottom user strip
       (avatar + logout) are both horizontal flex rows sized for the full
       16rem width — at 4rem there isn't room for that many icons side by
       side, so both switch to a centered vertical stack instead of
       letting `justify-between` push content past the edge. */
    #app-sidebar.sidebar-collapsed .sidebar-header-row,
    html.sidebar-collapsed-pref #app-sidebar .sidebar-header-row {
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
        height: auto;
        padding: 0.75rem 0;
    }
    #app-sidebar.sidebar-collapsed .sidebar-icon-group,
    html.sidebar-collapsed-pref #app-sidebar .sidebar-icon-group {
        flex-direction: column;
    }
    #app-sidebar.sidebar-collapsed .sidebar-user-strip,
    html.sidebar-collapsed-pref #app-sidebar .sidebar-user-strip {
        flex-direction: column;
        gap: 0.5rem;
    }
    #app-sidebar.sidebar-collapsed .sidebar-user-strip > a,
    html.sidebar-collapsed-pref #app-sidebar .sidebar-user-strip > a {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
    }
    #app-sidebar.sidebar-collapsed .sidebar-link,
    #app-sidebar.sidebar-collapsed .sidebar-link-staff,
    html.sidebar-collapsed-pref #app-sidebar .sidebar-link,
    html.sidebar-collapsed-pref #app-sidebar .sidebar-link-staff {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ─── Focus styles — WCAG 2.1 AA ──────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #1a3a6b;
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ─── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── High contrast mode ───────────────────────────────────────────────── */
@media (forced-colors: active) {
    .sidebar-link-active,
    .sidebar-link-staff-active { border: 1px solid Highlight; }
}