/* =====================================================================
   School Operations Dashboard — Design System
   Warm school admin, light-mode first, Bootstrap 5 compatible.
   Author: UI/UX overhaul 2026-05-19
   ===================================================================== */

/* Webfont faces live in css/fonts.css — linked alongside this file in
   layouts/app, layouts/guest and layouts/public. */

/* ---------------------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand & semantic colors */
    --color-primary-50:   #fdf4f5;
    --color-primary-100:  #fae0e4;
    --color-primary-200:  #f3bfc6;
    --color-primary-300:  #e294a0;
    --color-primary-400:  #c7606f;
    --color-primary-500:  #a73447;
    --color-primary-600:  #7a1f2b;
    --color-primary-700:  #651823;
    --color-primary-800:  #5a1620;
    --color-primary-900:  #3d0f17;  /* deep brand maroon */

    --color-success-50:   #f0fdf4;
    --color-success-100:  #dcfce7;
    --color-success-500:  #10b981;
    --color-success-600:  #059669;
    --color-success-700:  #166534;

    --color-warning-50:   #fffbeb;
    --color-warning-100:  #fef3c7;
    --color-warning-500:  #f59e0b;
    --color-warning-600:  #d97706;
    --color-warning-700:  #92400e;

    --color-danger-50:    #fef2f2;
    --color-danger-100:   #fee2e2;
    --color-danger-500:   #ef4444;
    --color-danger-600:   #dc2626;
    --color-danger-700:   #991b1b;

    --color-purple-50:    #faf3f5;
    --color-purple-100:   #f1dee4;
    --color-purple-500:   #9a5668;
    --color-purple-600:   #8a3a4a;
    --color-purple-700:   #6b2a38;

    --color-teal-50:      #f3f1ef;
    --color-teal-100:     #e2ddd8;
    --color-teal-500:     #7a706a;
    --color-teal-600:     #5f574f;
    --color-teal-700:     #44403a;

    --color-info-50:      #fdf4f5;
    --color-info-100:     #fae0e4;
    --color-info-500:     #a73447;
    --color-info-700:     #651823;

    /* Neutrals */
    --color-gray-50:      #f8f7f5;
    --color-gray-100:     #f1efec;
    --color-gray-200:     #e5e2dd;
    --color-gray-300:     #d1ccc5;
    --color-gray-400:     #9c968d;
    --color-gray-500:     #6c6560;
    --color-gray-600:     #4e4844;
    --color-gray-700:     #3a3532;
    --color-gray-800:     #231f1e;
    --color-gray-900:     #141211;

    /* Surfaces */
    --bg-app:        #f6f5f3;          /* warm off-white (matches --sc-paper) */
    --bg-canvas:     #ffffff;          /* cards */
    --bg-muted:      var(--color-gray-50);
    --bg-sidebar:    #ffffff;
    --bg-topbar:     #ffffff;

    /* Text */
    --text-strong:   var(--color-primary-900);
    --text-body:     var(--color-gray-700);
    /* Both of the tokens below are measured against the WORST surface they
       actually land on, which is not --bg-app. The body rule paints two
       maroon radial gradients over --bg-app, so the real background under
       page-level text ranges from #f6f5f3 where the gradients have faded
       out to #eae2e1 where they overlap. Checking against the flat token
       alone overstates contrast by about 0.6 of a ratio point.

       Deliberately NOT --color-gray-500/400. gray-400 (#9c968d) is 2.69:1
       on --bg-app before the gradients are even applied; gray-500
       (#6c6560) measures 5.25:1 flat but drops to 4.10:1 where the
       gradients overlap, which is an AA fail. gray-400 and gray-500 stay
       as they are for the borders and non-text uses that reference them.

       Ratios on the worst (both-gradients) surface, then on white:
         --text-muted #5c5651 → 5.66 / 7.23
         --text-faint #6a635e → 4.62 / 5.90
       The gradients were also softened from .08/.06 to .05/.04 to make
       this reachable — see the body rule.

       Note the two tiers are only 1.23:1 apart. The warm grey scale has
       almost no room between "recedes" and "fails AA", so push text
       further back with size and weight, not lightness, and do not add a
       third lighter tier. */
    --text-muted:    #5c5651;
    --text-faint:    #6a635e;
    --text-on-primary: #ffffff;

    /* Borders */
    --border-subtle: var(--color-gray-200);
    --border-strong: var(--color-gray-300);
    --border-focus:  var(--color-primary-500);

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-pill: 999px;

    /* Spacing scale (4px-based) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;

    /* Type scale */
    /* Instrument Sans first so every platform renders the same typeface and
       the tight heading tracking below behaves identically everywhere.
       System fonts remain as the fallback while the webfont loads. */
    --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    /* Serif display stack, matched to landing.css's --lp-font-display and the
       public site's --sc-font-display so page titles across the portal read
       as the same school. Applied only to the main page title, not every
       heading — a form label in serif would read as a mistake. */
    --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

    --fs-xs:   11px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   17px;
    --fs-xl:   19px;
    --fs-2xl:  22px;
    --fs-3xl:  26px;
    --fs-4xl:  32px;
    --fs-5xl:  40px;
    --fs-hero: clamp(2.5rem, 5vw, 4.25rem);

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:  1.1;
    --lh-snug:   1.3;
    --lh-normal: 1.5;
    --lh-loose:  1.65;

    --tracking-tight: -0.03em;
    --tracking-snug:  -0.015em;

    /* Elevation — soft, diffused, Apple-style */
    --shadow-xs: 0 1px 2px rgba(20, 18, 17, 0.04);
    --shadow-sm: 0 2px 8px rgba(20, 18, 17, 0.05), 0 1px 2px rgba(20, 18, 17, 0.04);
    --shadow-md: 0 8px 24px rgba(20, 18, 17, 0.08), 0 2px 6px rgba(20, 18, 17, 0.04);
    --shadow-lg: 0 24px 48px -12px rgba(20, 18, 17, 0.14), 0 8px 16px -8px rgba(20, 18, 17, 0.06);
    --shadow-focus: 0 0 0 4px rgba(167, 52, 71, 0.18);
    --shadow-card-hover: 0 30px 60px -24px rgba(90, 22, 32, 0.28), 0 12px 24px -12px rgba(20, 18, 17, 0.14);

    /* Glass surfaces */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.86);
    --glass-blur: saturate(180%) blur(20px);
    --glass-border: rgba(255, 255, 255, 0.5);

    /* Layout */
    --sidebar-w:        252px;
    --sidebar-w-collapsed: 64px;
    --topbar-h:         64px;
    --content-max:      1280px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms;
    --dur-med:  260ms;
    --dur-slow: 420ms;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    /* Alphas softened from .08/.06. At the old strength the two gradients
       overlapped to #e3d8d7, which pushed --text-muted to 4.10:1 and
       --text-faint to 3.56:1 — both AA fails, and invisible to any audit
       that measures against the flat --bg-app token. .05/.04 keeps the
       warmth while leaving every text token above 4.5:1. If these are ever
       raised again, re-measure both tokens on the overlap, not on
       --bg-app. */
    background:
        radial-gradient(circle at top left, rgba(122, 31, 43, 0.05), transparent 34rem),
        radial-gradient(circle at 90% 12%, rgba(90, 22, 32, 0.04), transparent 28rem),
        var(--bg-app);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-primary-600); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-primary-700); }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    margin: 0 0 var(--space-3) 0;
}
h1 { letter-spacing: var(--tracking-tight); }

p { margin: 0 0 var(--space-3) 0; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-5) 0; }

::selection { background: var(--color-primary-100); color: var(--color-primary-900); }

/* ---------------------------------------------------------------------
   3. App Shell — Sidebar + Topbar + Content
   --------------------------------------------------------------------- */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar content";
}

.app-sidebar {
    grid-area: sidebar;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94)),
        radial-gradient(circle at 25% 0%, rgba(122, 31, 43, 0.08), transparent 16rem);
    border-right: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Above the topbar (300) and its mobile backdrop (310) — see the layer
       scale noted on .app-topbar. */
    z-index: 320;
}

.app-sidebar__brand {
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.app-sidebar__brand-mark {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-900));
    color: var(--text-on-primary);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    box-shadow: 0 10px 18px -12px rgba(122, 31, 43, 0.9);
}
.app-sidebar__brand-text {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    color: var(--text-strong);
    line-height: 1.2;
}
.app-sidebar__brand-sub {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.app-sidebar__nav {
    padding: var(--space-4) var(--space-3);
    flex: 1;
}
.app-sidebar__group {
    margin-bottom: var(--space-5);
}
.app-sidebar__group-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 var(--space-3) var(--space-2);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    margin-bottom: 2px;
    position: relative;
}
.nav-item:hover {
    background: var(--color-gray-100);
    color: var(--text-strong);
}
.nav-item.active {
    background: var(--color-primary-600);
    color: var(--text-on-primary);
    box-shadow: 0 6px 16px -8px rgba(90, 22, 32, 0.55);
}
.nav-item__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: currentColor;
    opacity: 0.85;
}
.nav-item__label { flex: 1; }
.nav-item__pill {
    display: inline-flex;
    align-items: center;
    background: var(--color-warning-500);
    color: white;
    font-size: 10px;
    font-weight: var(--fw-bold);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}
.nav-item__pill--danger { background: var(--color-danger-500); }
.nav-item__pill--success { background: var(--color-success-500); }

.app-sidebar__footer {
    padding: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.app-topbar {
    /* NOT `grid-area: topbar`. A sticky grid item is constrained by its own
       grid area, and the `topbar` area is exactly --topbar-h tall, so
       `position: sticky` there has zero range and the bar scrolls away.
       Spanning both rows in column 2 makes the constraint rectangle the full
       column height, which is what gives sticky somewhere to travel.
       `align-self: start` + an explicit height keep it visually in row 1,
       so it never covers the content below. See the 992px block for the
       single-column override. */
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    height: var(--topbar-h);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    gap: var(--space-4);
    position: sticky;
    top: 0;
    /* Was 20, which lost to the global-search dropdown (200) and the
       fee-assignment typeahead (20, later in tree order). That never showed
       while the bar scrolled away; now that it stays put, a dropdown open
       over the bar would paint through it. Layer scale is now
       topbar 300 < backdrop 310 < sidebar 320 < modals 1000, so content
       overlays sit under the chrome and full-screen modals still cover it. */
    z-index: 300;
}
.app-topbar__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.app-topbar__title small {
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.context-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 10px;
    background: var(--color-gray-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-body);
}
.context-pill__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-success-500);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 4px 8px 4px 4px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.user-menu:hover { background: var(--color-gray-100); }
.user-menu__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary-800);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
}
.user-menu__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-strong);
}
.user-menu__role {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.app-content {
    grid-area: content;
    padding: var(--space-6) var(--space-7);
    min-width: 0;
}
.app-content__inner {
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Sidebar toggle (mobile) */
.sidebar-toggle {
    background: none;
    border: 0;
    padding: 6px;
    color: var(--text-body);
    cursor: pointer;
    display: none;
    border-radius: var(--radius-sm);
}
.sidebar-toggle:hover { background: var(--color-gray-100); }

@media (max-width: 992px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "content";
    }
    /* Single column now, so the topbar's column-2 placement above would
       create a phantom implicit column. Still spans every row for sticky. */
    .app-topbar {
        grid-column: 1;
        grid-row: 1 / -1;
    }
    .app-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform var(--dur-med) var(--ease-out);
        box-shadow: var(--shadow-lg);
    }
    .app-sidebar.is-open { transform: translateX(0); }
    .sidebar-toggle { display: inline-flex; }
    .app-content { padding: var(--space-5) var(--space-4); }
    .sidebar-backdrop {
        position: fixed; inset: 0;
        background: rgba(17, 24, 39, 0.4);
        /* Between topbar (300) and sidebar (320) so the open drawer stays
           lit while everything behind it dims. */
        z-index: 310;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-med) var(--ease-out);
    }
    .sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------------------------------------------------------------------
   4. Page header / breadcrumbs / sub-nav
   --------------------------------------------------------------------- */
.page-header {
    margin-bottom: var(--space-6);
}
.page-header__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.page-header__breadcrumbs a { color: var(--text-muted); }
.page-header__breadcrumbs a:hover { color: var(--color-primary-700); }
.page-header__breadcrumbs__sep { color: var(--text-faint); }

.page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.page-header h1 {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin: 0 0 var(--space-1) 0;
}
.page-header__subtitle {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin: 0;
    max-width: 70ch;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sub-nav {
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-xs);
}
.sub-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
.sub-nav__link:hover {
    background: var(--color-gray-100);
    color: var(--text-strong);
}
.sub-nav__link.active {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

/* ---------------------------------------------------------------------
   5. Cards
   --------------------------------------------------------------------- */
.card {
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
    overflow: hidden;
    transition: box-shadow var(--dur-med) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); border-color: rgba(156, 150, 141, 0.38); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.card-header h2, .card-header h3, .card-header__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}
.card-header__subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 2px 0 0 0;
    font-weight: var(--fw-normal);
}
.card-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.card-body {
    padding: var(--space-5);
}
.card-body--tight { padding: var(--space-4); }
.card-body--flush { padding: 0; }

.card-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   6. KPI + Stat Cards (for dashboards)
   --------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.kpi {
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.kpi:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.kpi__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-2) 0;
}
.kpi__value {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    line-height: 1.1;
    margin: 0;
}
.kpi__value--success { color: var(--color-success-600); }
.kpi__value--warning { color: var(--color-warning-600); }
.kpi__value--danger  { color: var(--color-danger-600); }
.kpi__value--primary { color: var(--color-primary-600); }
.kpi__value--purple  { color: var(--color-purple-600); }
.kpi__sub {
    font-size: var(--fs-xs);
    color: var(--text-faint);
    margin-top: var(--space-1);
}

/* Stat cards (colored, with left border) */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}
.stat-card {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--border-strong);
    background: var(--bg-muted);
}
.stat-card__label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0;
}
.stat-card__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    margin: var(--space-1) 0 0 0;
}
.stat-card--success { background: var(--color-success-50); border-left-color: var(--color-success-500); }
.stat-card--success .stat-card__value { color: var(--color-success-600); }
.stat-card--warning { background: var(--color-warning-100); border-left-color: var(--color-warning-500); }
.stat-card--warning .stat-card__value { color: var(--color-warning-700); }
.stat-card--danger  { background: var(--color-danger-100);  border-left-color: var(--color-danger-500); }
.stat-card--danger  .stat-card__value { color: var(--color-danger-700); }
.stat-card--neutral { background: var(--color-gray-100); border-left-color: var(--color-gray-400); }
.stat-card--neutral .stat-card__value { color: var(--text-body); }
.stat-card--purple  { background: var(--color-purple-100);  border-left-color: var(--color-purple-500); }
.stat-card--purple  .stat-card__value { color: var(--color-purple-700); }
.stat-card--primary { background: var(--color-primary-50);  border-left-color: var(--color-primary-500); }
.stat-card--primary .stat-card__value { color: var(--color-primary-700); }

/* ---------------------------------------------------------------------
   7. Buttons (override Bootstrap)
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn:focus, .btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.btn:disabled, .btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-sm { padding: 6px 10px; font-size: var(--fs-xs); }
.btn-lg { padding: 12px 18px; font-size: var(--fs-md); }

.btn-primary {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--text-on-primary);
}
.btn-primary:hover {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: var(--text-on-primary);
}

.btn-secondary {
    background: var(--bg-canvas);
    border-color: var(--border-strong);
    color: var(--text-body);
}
.btn-secondary:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
    color: var(--text-strong);
}

.btn-outline-secondary {
    background: var(--bg-canvas);
    border-color: var(--border-strong);
    color: var(--text-body);
}
.btn-outline-secondary:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
    color: var(--text-strong);
}

.btn-success {
    background: var(--color-success-500);
    border-color: var(--color-success-500);
    color: white;
}
.btn-success:hover {
    background: var(--color-success-600);
    border-color: var(--color-success-600);
    color: white;
}

.btn-danger {
    background: var(--color-danger-500);
    border-color: var(--color-danger-500);
    color: white;
}
.btn-danger:hover {
    background: var(--color-danger-600);
    border-color: var(--color-danger-600);
    color: white;
}

.btn-warning {
    background: var(--color-warning-500);
    border-color: var(--color-warning-500);
    color: white;
}
.btn-warning:hover {
    background: var(--color-warning-600);
    border-color: var(--color-warning-600);
    color: white;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-body);
}
.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--text-strong);
}

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary-600);
    padding-left: 0;
    padding-right: 0;
}
.btn-link:hover {
    color: var(--color-primary-700);
    background: transparent;
}

.btn-icon { padding: 6px; }

/* ---------------------------------------------------------------------
   8. Badges & Status pills
   --------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge--primary { background: var(--color-primary-50); color: var(--color-primary-700); border-color: var(--color-primary-100); }
.badge--success { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-100); }
.badge--warning { background: var(--color-warning-100); color: var(--color-warning-700); border-color: #fde68a; }
.badge--danger  { background: var(--color-danger-100);  color: var(--color-danger-700);  border-color: #fecaca; }
.badge--purple  { background: var(--color-purple-100);  color: var(--color-purple-700);  border-color: #e8d4da; }
.badge--neutral { background: var(--color-gray-100); color: var(--color-gray-700); border-color: var(--color-gray-200); }
.badge--info    { background: var(--color-info-50); color: var(--color-info-700); border-color: var(--color-info-100); }

.badge--solid-primary { background: var(--color-primary-600); color: white; }
.badge--solid-success { background: var(--color-success-500); color: white; }
.badge--solid-warning { background: var(--color-warning-500); color: white; }
.badge--solid-danger  { background: var(--color-danger-500); color: white; }
.badge--solid-purple  { background: var(--color-purple-600); color: white; }
.badge--solid-neutral { background: var(--color-gray-500); color: white; }

.badge__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

/* ---------------------------------------------------------------------
   9. Tables
   --------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
}

table.table, .data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-canvas);
    margin: 0;
}
.data-table th, .data-table td,
table.table thead th, table.table tbody td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
    font-size: var(--fs-sm);
}
.data-table thead, table.table thead {
    background: var(--bg-muted);
}
.data-table thead th, table.table thead th {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.data-table tbody tr, table.table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-fast) var(--ease-out);
}
.data-table tbody tr:last-child, table.table tbody tr:last-child {
    border-bottom: 0;
}
.data-table tbody tr:hover, table.table tbody tr:hover {
    background: linear-gradient(90deg, rgba(253, 244, 245, 0.72), var(--bg-muted));
}
.data-table tbody td, table.table tbody td {
    color: var(--text-body);
    border-bottom: 1px solid var(--border-subtle);
}
.data-table tbody tr:last-child td, table.table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table--compact th, .data-table--compact td { padding: var(--space-2) var(--space-3); }

.cell-strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.cell-muted  { color: var(--text-muted); }
.cell-number { font-variant-numeric: tabular-nums; text-align: right; }
.cell-actions { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------------
   10. Forms
   --------------------------------------------------------------------- */
.form-group, .mb-3 {
    margin-bottom: var(--space-4);
}

.form-label {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-strong);
    margin-bottom: var(--space-2);
}
.form-label__req { color: var(--color-danger-500); margin-left: 2px; }

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text-body);
    background: var(--bg-canvas);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    line-height: 1.4;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:disabled,
.form-select:disabled {
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

textarea.form-control { min-height: 96px; resize: vertical; }

.is-invalid, .form-control.is-invalid {
    border-color: var(--color-danger-500);
}
.is-invalid:focus, .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.invalid-feedback {
    display: block;
    color: var(--color-danger-700);
    font-size: var(--fs-xs);
    margin-top: var(--space-1);
}
.form-help {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    margin-top: var(--space-1);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-5);
}
.form-grid--1 { grid-template-columns: 1fr; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.form-grid__span { grid-column: 1 / -1; }
@media (max-width: 768px) {
    .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}
.form-actions--start { justify-content: flex-start; }
.form-actions--between { justify-content: space-between; }

/* ---------------------------------------------------------------------
   11. Alerts
   --------------------------------------------------------------------- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.alert__icon { flex-shrink: 0; margin-top: 2px; }
.alert__body { flex: 1; }
.alert strong { color: inherit; }

.alert-success {
    background: var(--color-success-50);
    color: var(--color-success-700);
    border-color: var(--color-success-100);
}
.alert-warning {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
    border-color: #fde68a;
}
.alert-danger {
    background: var(--color-danger-100);
    color: var(--color-danger-700);
    border-color: #fecaca;
}
.alert-info {
    background: var(--color-info-50);
    color: var(--color-info-700);
    border-color: var(--color-info-100);
}
.alert-neutral {
    background: var(--color-gray-50);
    color: var(--text-body);
    border-color: var(--border-subtle);
}

/* Alert strip — horizontal row of dismissible/linked flag chips */
.alert-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.alert-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 9999px;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: opacity 0.15s;
}
.alert-chip:hover { opacity: 0.85; text-decoration: none; }
.alert-chip__icon { font-size: 0.9em; line-height: 1; }

.alert-chip--warning {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
    border-color: #fde68a;
}
.alert-chip--danger {
    background: var(--color-danger-100);
    color: var(--color-danger-700);
    border-color: #fecaca;
}
.alert-chip--info {
    background: var(--color-info-50);
    color: var(--color-info-700);
    border-color: var(--color-info-100);
}

/* ---------------------------------------------------------------------
   12. Empty state
   --------------------------------------------------------------------- */
.empty-state {
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--text-muted);
}
.empty-state__icon {
    width: 48px; height: 48px;
    margin: 0 auto var(--space-3);
    border-radius: 50%;
    background: var(--color-gray-100);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.empty-state__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin: 0 0 var(--space-2);
}
.empty-state__body {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    max-width: 50ch;
    margin: 0 auto var(--space-4);
}

/* ---------------------------------------------------------------------
   13. Progress bar
   --------------------------------------------------------------------- */
.progress {
    width: 100%;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    background: var(--color-primary-500);
    border-radius: inherit;
    transition: width var(--dur-slow) var(--ease-out);
}
.progress__bar--success { background: var(--color-success-500); }
.progress__bar--warning { background: var(--color-warning-500); }
.progress__bar--danger  { background: var(--color-danger-500); }

/* ---------------------------------------------------------------------
   14. Stepper / Wizard
   --------------------------------------------------------------------- */
.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.stepper__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.stepper__step__dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-canvas);
    border: 2px solid var(--border-strong);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
}
.stepper__step--active .stepper__step__dot {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: white;
}
.stepper__step--active { color: var(--text-strong); }
.stepper__step--done .stepper__step__dot {
    background: var(--color-success-500);
    border-color: var(--color-success-500);
    color: white;
}
.stepper__step--done { color: var(--text-strong); }
.stepper__sep {
    flex: 1;
    height: 2px;
    background: var(--border-subtle);
    min-width: 24px;
    margin: 0 var(--space-3);
}
.stepper__step--done + .stepper__sep,
.stepper__step--active + .stepper__sep--filled {
    background: var(--color-success-500);
}

/* ---------------------------------------------------------------------
   15. Profile hero
   --------------------------------------------------------------------- */
.profile-hero {
    background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-700));
    color: var(--text-on-primary);
    padding: var(--space-6) var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.profile-hero__avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: white;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-2xl);
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.2);
}
.profile-hero__title {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    color: white;
}
.profile-hero__meta {
    color: rgba(255,255,255,0.85);
    font-size: var(--fs-sm);
    margin: 0;
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.profile-hero__actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.profile-hero--compact {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
}
.profile-hero--compact .profile-hero__avatar {
    width: 56px;
    height: 56px;
    font-size: var(--fs-xl);
}
.profile-hero--compact .profile-hero__title {
    font-size: var(--fs-2xl);
}
.section-jump {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-4);
    padding: var(--space-2);
    background: rgba(255,255,255,0.82);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.section-jump a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    color: var(--text-body);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
}
.section-jump a:hover {
    color: var(--color-primary-800);
    background: var(--color-primary-50);
}
.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}
.workspace-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding: var(--space-2);
    background: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.workspace-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 var(--space-3);
    color: var(--text-body);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
}
.workspace-tabs a:hover,
.workspace-tabs a:focus {
    color: var(--color-primary-800);
    background: var(--color-primary-50);
}
.workspace-section {
    scroll-margin-top: var(--space-5);
    margin-bottom: var(--space-6);
}
.workspace-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.workspace-section__header h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
}
.workspace-section__header p {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.workspace-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.workspace-grid--sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
}
.workspace-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}
.metric-stack {
    display: grid;
    gap: var(--space-2);
}
.metric-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(249,250,251,0.76);
}
.metric-tile span {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.metric-tile strong {
    color: var(--text-strong);
    font-size: var(--fs-xl);
    line-height: 1;
}
.action-grid {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .workspace-grid--sidebar {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   16. Utilities
   --------------------------------------------------------------------- */
.u-flex   { display: flex; }
.u-iflex  { display: inline-flex; }
.u-grid   { display: grid; }
.u-block  { display: block; }
.u-hidden { display: none; }

.u-items-center  { align-items: center; }
.u-items-start   { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-end   { justify-content: flex-end; }
.u-flex-wrap     { flex-wrap: wrap; }
.u-flex-1        { flex: 1; }

.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }

.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }

.u-text-xs   { font-size: var(--fs-xs); }
.u-text-sm   { font-size: var(--fs-sm); }
.u-text-base { font-size: var(--fs-base); }
.u-text-md   { font-size: var(--fs-md); }
.u-text-lg   { font-size: var(--fs-lg); }
.u-text-xl   { font-size: var(--fs-xl); }
.u-text-2xl  { font-size: var(--fs-2xl); }
.u-text-3xl  { font-size: var(--fs-3xl); }

.u-fw-normal   { font-weight: var(--fw-normal); }
.u-fw-medium   { font-weight: var(--fw-medium); }
.u-fw-semibold { font-weight: var(--fw-semibold); }
.u-fw-bold     { font-weight: var(--fw-bold); }

.u-text-strong { color: var(--text-strong); }
.u-text-body   { color: var(--text-body); }
.u-text-muted  { color: var(--text-muted); }
.u-text-faint  { color: var(--text-faint); }
.u-text-success { color: var(--color-success-600); }
.u-text-warning { color: var(--color-warning-700); }
.u-text-danger  { color: var(--color-danger-600); }
.u-text-primary { color: var(--color-primary-700); }
.u-text-purple  { color: var(--color-purple-600); }

.u-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.u-tabular   { font-variant-numeric: tabular-nums; }

.u-text-right  { text-align: right; }
.u-text-center { text-align: center; }

.u-w-100 { width: 100%; }

/* simple grid helpers (in addition to Bootstrap) */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Hide scrollbar on Webkit when not needed */
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--color-gray-200); border-radius: 3px; }

/* ---------------------------------------------------------------------
   17. Print
   --------------------------------------------------------------------- */
@media print {
    .app-sidebar, .app-topbar, .page-header__actions, .sub-nav, .card-footer { display: none !important; }
    .app-shell { display: block; }
    .app-content { padding: 0; }
    .card { box-shadow: none; border: 1px solid var(--border-subtle); break-inside: avoid; }
    body { background: white; }
}


/* ---------------------------------------------------------------------
   18. Visual polish layer — Phase 9.5 first pass
   --------------------------------------------------------------------- */
.hero-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(42, 38, 40, 0.98), rgba(90, 22, 32, 0.92)),
        radial-gradient(circle at 82% 20%, rgba(122, 31, 43, 0.45), transparent 18rem);
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    box-shadow: 0 22px 45px -28px rgba(42, 38, 40, 0.75);
    margin-bottom: var(--space-6);
}
.hero-panel::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -100px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
.hero-panel__content { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.hero-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.88);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
}
.hero-panel h1 { color: white; font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.04em; margin-bottom: var(--space-2); }
.hero-panel p { color: rgba(255,255,255,0.82); font-size: var(--fs-md); max-width: 64ch; }
.hero-panel__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; position: relative; z-index: 1; }
.hero-panel .btn-secondary { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.24); color: white; }
.hero-panel .btn-secondary:hover { background: rgba(255,255,255,0.18); color: white; }
.hero-panel .btn-primary { background: white; border-color: white; color: var(--color-primary-800); }
.hero-panel .btn-primary:hover { background: var(--color-primary-50); color: var(--color-primary-900); }

.module-card { position: relative; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: rgba(122, 31, 43, 0.22); }
.module-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--color-primary-500), var(--color-teal-500)); opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.module-card:hover::before { opacity: 1; }

.directory-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.directory-chip { background: rgba(255,255,255,0.76); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-xs); }
.directory-chip__label { color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
.directory-chip__value { color: var(--text-strong); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.1; }
.directory-summary--compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.directory-chip--compact {
    padding: var(--space-3);
}
.directory-chip--compact .directory-chip__value {
    font-size: var(--fs-xl);
}

.person-cell { display: flex; align-items: center; gap: var(--space-3); }
.person-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary-800); background: linear-gradient(135deg, var(--color-primary-50), var(--color-primary-100)); border: 1px solid var(--color-primary-100); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.person-avatar--green { color: var(--color-success-700); background: linear-gradient(135deg, var(--color-success-50), var(--color-success-100)); border-color: var(--color-success-100); }
.person-cell__name { color: var(--text-strong); font-weight: var(--fw-semibold); }
.person-cell__meta { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 1px; }

.choice-stack { display: grid; gap: var(--space-3); }
.choice-card { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: linear-gradient(180deg, #fff, rgba(249,250,251,0.7)); transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.choice-card:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.choice-card input { margin-top: 3px; }
.choice-card:has(input:checked) { border-color: var(--color-primary-500); background: linear-gradient(135deg, var(--color-primary-50), #fff); box-shadow: 0 0 0 3px rgba(167, 52, 71, 0.12); }
.choice-card__title { color: var(--text-strong); font-weight: var(--fw-semibold); }
.choice-card__desc { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 1px; }

.kpi { border-radius: var(--radius-lg); }
.kpi:hover { transform: translateY(-1px); }
.stat-card { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); }

@media (max-width: 768px) {
    .hero-panel { padding: var(--space-5); }
    .hero-panel__content { display: block; }
    .hero-panel__actions { margin-top: var(--space-4); }
}

/* ── Timetable grid (Phase 4b) ─────────────────────────────────────────── */
.timetable-grid td { min-width: 120px; vertical-align: top; padding: var(--space-2) var(--space-3); }
.timetable-cell--filled { background: var(--color-primary-50, #fdf4f5); }
.timetable-cell--empty { background: transparent; }
.timetable-cell--selected { outline: 2px solid var(--color-primary-500, #a73447); outline-offset: -2px; background: var(--color-primary-100, #fae0e4) !important; }
.timetable-cell__subject { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.timetable-cell__teacher { font-size: var(--fs-xs); }
.timetable-edit-panel { border-top: 1px solid var(--border-subtle); padding: var(--space-4) var(--space-5); background: var(--bg-muted); margin-top: var(--space-2); }
.timetable-edit-panel__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.timetable-edit-panel__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }

/* ── Tab bar (Phase 11e — Student 360 profile) ─────────────────────────── */
.tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: 2px solid var(--border-subtle);
    padding-bottom: 0;
}
.tab-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
.tab-item:hover { color: var(--text-strong); background: var(--bg-muted); }
.tab-item--active { color: var(--color-primary-700); border-bottom-color: var(--color-primary-500); font-weight: var(--fw-semibold); }
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: var(--fw-bold);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    line-height: 1;
}
.tab-count--danger { background: var(--color-danger-100, #fee2e2); color: var(--color-danger-700, #b91c1c); }
.tab-count--warning { background: var(--color-warning-100, #fef3c7); color: var(--color-warning-700, #b45309); }

[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------------
   17. Reduced motion
   ---------------------------------------------------------------------
   Honours the OS-level "reduce motion" setting (vestibular disorders,
   migraine, motion sickness). This file has ~30 transition/transform
   rules — hover lifts on .kpi, .choice-card, .nav-tile and .module-card,
   the .btn scale(0.97) press, and the mobile sidebar slide-in. (.card
   itself only transitions shadow and border, no transform, so it is not
   listed below.)

   Transitions are collapsed to 1ms rather than 0 so that transitionend
   listeners still fire and nothing waits forever on an event that never
   arrives. Transforms are neutralised outright, which removes the
   translate/scale movement while leaving all colour and shadow feedback
   intact — the interface still responds, it just doesn't move.

   This block MUST stay last in the file: it relies on source order to
   win against the rules above at equal specificity. Any scroll-reveal
   animation added later needs its visible/final state forced here too,
   or reduce-motion users will never see the content.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    /* Loading spinners are the one exception. The wildcard above would
       stop .spin after a single 1ms rotation, freezing it mid-turn, and
       the global-search spinner is the only indication that a query is
       in flight — there is no text alternative. A steady rotation is a
       status indicator, not decoration, so it keeps running (slowed, to
       stay gentle). Anything added later that genuinely communicates
       state rather than decorating belongs in this list too. */
    .spin,
    .spinner,
    .spinner-border {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }

    /* Movement-only effects: drop the motion, keep the colour/shadow cue.
       .demo-login's lift is defined in auth.css, which loads after this
       file — the !important here still wins over its unprefixed rule. */
    .btn:active,
    .kpi:hover,
    .choice-card:hover,
    .demo-login:hover,
    .module-card:hover {
        transform: none !important;
    }

    /* Mobile sidebar: show/hide instantly instead of sliding. */
    .app-sidebar {
        transition: none !important;
    }
}