/* ============================================================================
   PIA SYSTEM — GLOBAL v2
   The shared foundation: reset, design tokens, typography, and every
   component that appears on more than one surface (buttons, form controls,
   cards, badges, modals, toasts).

   Load this FIRST, then a page stylesheet:
       <link rel="stylesheet" href="/styles/global.css">
       <link rel="stylesheet" href="/styles/pages/admin.css">

   House rules enforced throughout:
     * No borders. Anywhere. Separation is surface tone, shadow and spacing.
     * No blue. Every neutral is mixed off a green hue at low saturation.
     * Fixed control heights and reserved message slots, so no state change
       can reflow a layout.
     * Transitions cap at 200ms and animate colour/opacity only — nothing
       scales or moves on hover.
   ==========================================================================*/

/* ---------------------------------------------------------------- 1. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[class],
ol[class] { list-style: none; margin: 0; padding: 0; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

/* Inputs carry a 2px inset UA border by default. .input strips it, but any
   bespoke field class would inherit it and draw a line — so it is zeroed at
   the reset instead of per component. */
input,
textarea,
select { border: 0; }

img,
svg { display: block; max-width: 100%; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

a { color: inherit; text-decoration: none; }

/* Display face for headings and anything that reads as a title. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* --------------------------------------------------------------- 2. TOKENS */
/* ============================================================================
   COLOUR SYSTEM
   ---------------------------------------------------------------------------
   The four specified variables are canonical and hold their exact values:

       --bg-dark        #0F172A     deep navy, dark-mode ground
       --bg-light       #F8FAFC     crisp off-white, light-mode ground
       --color-primary  #22C55E     every primary action, active state, highlight
       --color-danger   #EF4444     errors and destructive actions ONLY
       --text-main                  = --bg-light in dark, --bg-dark in light

   Everything else in the file is either a neutral derived from those grounds
   or an alias, so there is exactly one place to change a colour.

   ONE ACCESSIBILITY ADDITION, and the reason for it.
   #22C55E behind white text measures 2.28:1, and as TEXT on the light ground
   it measures 2.18:1 — both fail AA. As a FILL it is fine in either theme
   provided the label is navy (7.83:1), which is how every button here uses it.
   So the spec value is kept untouched for fills, and a darker shade of the
   same hue (--color-primary-ink) is used only where the green becomes text.
   That is not a new colour in the palette; it is the same green at a legible
   weight. The identical reasoning applies to --color-danger-ink.
   ==========================================================================*/
:root {
    /* --- The specified palette, verbatim --- */
    --bg-dark: #0F172A;
    --bg-light: #F8FAFC;
    --color-primary: #22C55E;
    --color-danger: #EF4444;

    /* --- Dark mode is the default --- */
    --text-main: var(--bg-light);

    /* Green/red as TEXT need no darkening on the navy ground: 7.83 and 4.74. */
    --color-primary-ink: var(--color-primary);
    --color-danger-ink: var(--color-danger);

    /* Labels sitting ON a primary/danger fill. */
    --on-primary: var(--bg-dark);          /* 7.83:1 */
    --on-danger: var(--bg-light);          /* 4.87:1 */

    /* --- Neutrals, derived from the navy ground --- */
    --bg-body: var(--bg-dark);
    --bg-surface: #1B2537;
    --bg-field: #0B1120;
    --bg-surface-hi: #223047;
    --bg-surface-hover: #223046;
    --bg-chip: #263449;
    --bg-chip-hover: #2E3E56;
    --bg-inset-focus: #0D1426;
    --track: #334155;
    --track-hover: #475569;

    /* --- Text --- */
    --text: var(--text-main);
    --text-muted: #94A3B8;                 /* 7.6:1 on the navy ground */
    --text-faint: #64748B;                 /* 4.0:1 — labels and decoration */
    --text-on-solid: var(--bg-light);

    /* --- Aliases, so every existing consumer keeps working --- */
    --accent: var(--color-primary);
    --accent-strong: #16A34A;
    --accent-soft: rgba(34, 197, 94, 0.14);
    --accent-line: rgba(34, 197, 94, 0.32);
    --on-accent: var(--on-primary);

    --danger: var(--color-danger);
    --danger-strong: #DC2626;
    --danger-soft: rgba(239, 68, 68, 0.14);
    --danger-line: rgba(239, 68, 68, 0.32);

    /* Amber, kept strictly for "needs attention" states. */
    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.14);
    --warning-line: rgba(245, 158, 11, 0.30);
    --on-warning: var(--bg-dark);

    /* Translucent surface for glass panels. */
    --glass: rgba(27, 37, 55, 0.72);
    --glass-edge: rgba(248, 250, 252, 0.06);

    /* --- Elevation --- */
    --shadow-edge: 8px 0 24px -20px rgba(2, 6, 23, 0.9);
    --shadow-under: 0 10px 20px -18px rgba(2, 6, 23, 0.9);
    --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.4);
    --shadow-card: 0 1px 2px rgba(2, 6, 23, 0.3), 0 10px 28px -18px rgba(2, 6, 23, 0.7);
    --shadow-md: 0 8px 24px rgba(2, 6, 23, 0.45);
    --shadow-lg: 0 24px 64px rgba(2, 6, 23, 0.65);
    --glow-primary: 0 0 60px -12px rgba(34, 197, 94, 0.55);

    color-scheme: dark;

    /* --- Stacking ladder --- */
    --z-behind: 0;           /* depth typography, sits under the centrepiece */
    --z-page: 1;
    --z-sticky: 30;
    --z-scrim: 39;
    --z-rail: 60;
    --z-overlay: 100;        /* modals + drawers (JS increments per layer) */
    --z-toast: 300;
    --z-banner: 350;
    --z-boot: 400;

    /* --- Radii --- */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-2xl: 28px;
    --r-pill: 999px;

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

    /* --- Control sizing. Fixed on purpose: a control whose height depends on
           its content is the main cause of layout shift. Layout containers
           stay fluid; controls do not. --- */
    --rail-w: 76px;
    --rail-w-open: 264px;
    --rail-pad: 8px;
    --rail-icon: calc(var(--rail-w) - (var(--rail-pad) * 2));
    --topbar-h: 64px;
    --control-h: 38px;
    --control-h-lg: 42px;
    --field-h: 42px;
    --row-h: 56px;
    --icon-btn: 36px;

    /* --- Motion --- */
    /* Bare easing curve. The --t-* tokens below are transition SHORTHANDS
       (duration + curve), so they cannot be dropped into an animation's
       easing slot — var(--ease) is the one to use there. */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-layout: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Typography --- */
    --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font: var(--font-body);            /* alias for existing consumers */

    --scrollbar-w: 0px;
}

/* ------------------------------------------------------------ LIGHT THEME --
   Only colour roles change. Sizing, spacing, radii, motion and the stacking
   ladder are theme-independent and are not repeated. */
:root[data-theme="light"] {
    --text-main: var(--bg-dark);

    /* The green FILL stays the specified value — navy-on-green is 7.83:1 even
       on a light page. Only the green-as-TEXT case needs the deeper shade. */
    --color-primary-ink: #15803D;          /* 4.79:1 on --bg-light */
    --color-danger-ink: #DC2626;           /* 4.62:1 on --bg-light */
    --on-primary: var(--bg-dark);
    --on-danger: var(--bg-light);

    --bg-body: var(--bg-light);
    --bg-surface: #FFFFFF;
    --bg-field: #F1F5F9;
    --bg-surface-hi: #FFFFFF;
    --bg-surface-hover: #F1F5F9;
    --bg-chip: #E2E8F0;
    --bg-chip-hover: #CBD5E1;
    --bg-inset-focus: #FFFFFF;
    --track: #CBD5E1;
    --track-hover: #94A3B8;

    --text: var(--text-main);
    --text-muted: #475569;                 /* 7.5:1 on the light ground */
    --text-faint: #64748B;                 /* 4.8:1 */
    --text-on-solid: var(--bg-light);

    --accent: var(--color-primary);
    --accent-strong: #16A34A;
    --accent-soft: rgba(34, 197, 94, 0.16);
    --accent-line: rgba(21, 128, 61, 0.30);
    --on-accent: var(--on-primary);

    --danger: var(--color-danger);
    --danger-strong: #DC2626;
    --danger-soft: rgba(239, 68, 68, 0.12);
    --danger-line: rgba(220, 38, 38, 0.28);

    --warning: #B45309;
    --warning-soft: rgba(180, 83, 9, 0.12);
    --warning-line: rgba(180, 83, 9, 0.28);
    --on-warning: var(--bg-light);

    --glass: rgba(255, 255, 255, 0.72);
    --glass-edge: rgba(15, 23, 42, 0.06);

    --shadow-edge: 8px 0 24px -20px rgba(15, 23, 42, 0.28);
    --shadow-under: 0 10px 20px -18px rgba(15, 23, 42, 0.30);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 28px -18px rgba(15, 23, 42, 0.20);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.22);
    --glow-primary: 0 0 60px -12px rgba(34, 197, 94, 0.4);

    color-scheme: light;
}

/* ----------------------------------------------------------------- 3. BASE */
body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Numeric columns must not re-flow as digits change. */
.tnum { font-variant-numeric: tabular-nums; }

.icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

.eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.muted { color: var(--text-muted); }
.is-hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Custom scrollbars keep the dark surfaces uninterrupted. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--track) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--track);
    border: 3px solid transparent;
    border-radius: var(--r-pill);
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--track-hover); background-clip: content-box; }

/* --------------------------------------------------------------- 5. BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: var(--control-h);
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

.btn .icon { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
.btn-primary:active:not(:disabled) { background: var(--accent-strong); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22); }

/* Secondary buttons are a raised chip, not an outline. */
.btn-secondary {
    background: var(--bg-chip);
    color: var(--text);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-chip-hover); }
.btn-secondary:active:not(:disabled) { background: var(--bg-chip-hover); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16); }

.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-surface-hover); color: var(--text); }
.btn-ghost:active:not(:disabled) { background: var(--bg-chip); }

.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-strong); }
.btn-danger:active:not(:disabled) { background: var(--danger-strong); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22); }

.btn-danger-soft {
    background: var(--danger-soft);
    color: var(--danger);
}
.btn-danger-soft:hover:not(:disabled) { background: rgba(255, 71, 87, 0.18); }

.btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: 12px; border-radius: var(--r-sm); }
.btn-lg { height: var(--control-h-lg); padding: 0 var(--sp-5); }
.btn-block { width: 100%; }

.btn-icon {
    display: inline-grid;
    place-items: center;
    width: var(--icon-btn);
    height: var(--icon-btn);
    flex: 0 0 var(--icon-btn);
    padding: 0;
    border-radius: var(--r-md);
    color: var(--text-muted);
    transition: background-color var(--t-base), color var(--t-base);
}
.btn-icon:hover { background: var(--bg-surface-hover); color: var(--text); }
.btn-icon:active { background: var(--bg-chip); }
.btn-icon:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-icon.is-bordered { background: var(--bg-chip); }
.btn-icon.is-bordered:hover { }

/* ----------------------------------------------------------------- 6. FORMS */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.label .req { color: var(--danger); margin-left: 2px; }

.input,
.select,
.textarea {
    width: 100%;
    height: var(--field-h);
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    background: var(--bg-field);
    color: var(--text);
    font-size: 13.5px;
    transition: box-shadow var(--t-base), background-color var(--t-base);
}

.textarea { height: auto; min-height: 96px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: 1.55; }

.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }

.input:hover,
.select:hover,
.textarea:hover { }

/* Focus is a soft ring of light around the well — a glow, not an edge. */
.input:focus,
.select:focus,
.textarea:focus {
    background: var(--bg-inset-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.input:disabled,
.select:disabled { color: var(--text-muted); cursor: not-allowed; }

.input.is-invalid,
.select.is-invalid { box-shadow: 0 0 0 3px var(--danger-soft); }

/* Native arrow removed and redrawn so the control keeps a fixed height. */
.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C9691' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
}

/* Error text slot is always reserved: showing a message never shifts a form. */
.field-msg {
    min-height: 16px;
    font-size: 11.5px;
    line-height: 16px;
    color: var(--danger);
}

.search {
    position: relative;
    flex: 0 1 280px;
    min-width: 200px;
}

.search .icon {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    pointer-events: none;
}

.search .input {
    height: var(--control-h);
    padding-left: var(--sp-8);
    font-size: 13px;
}

/* Checkbox — drawn from scratch to a fixed 18px box. */
.check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    cursor: pointer;
    user-select: none;
}

.check input { position: absolute; opacity: 0; width: 0; height: 0; }

.check-box {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    border-radius: var(--r-xs);
    background: var(--bg-chip);
    display: grid;
    place-items: center;
    transition: background-color var(--t-base);
}

.check-box .icon { width: 12px; height: 12px; stroke-width: 3; color: var(--on-accent); opacity: 0; transition: opacity var(--t-base); }
.check input:checked + .check-box { background: var(--accent); }
.check input:checked + .check-box .icon { opacity: 1; }
.check input:focus-visible + .check-box { box-shadow: 0 0 0 3px var(--accent-soft); }

.check-text { font-size: 13px; line-height: 1.45; }
.check-text small { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

/* Toggle switch — 44×24 track, 18px knob, 13px travel. */
.switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
    width: 44px;
    height: 24px;
    border-radius: var(--r-pill);
    background: var(--bg-chip);
    transition: background-color var(--t-base);
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--t-base), background-color var(--t-base);
}

.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(20px); background: var(--on-accent); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ------------------------------------------------------- 7. CARDS & TILES */
/* Cards are separated from the page by ELEVATION, not by an outline. The
   hairline that remains is barely off-surface and only resolves the edge at
   close range; the shadow ramp does the actual work of lifting the card. */
.card {
    background: var(--bg-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}

.card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 68px;
    padding: var(--sp-4) var(--sp-5);
}

.card-head-text { min-width: 0; flex: 1 1 auto; }

.card-title {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.card-body { padding: var(--sp-5); }
.card-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 60px;
    padding: var(--sp-3) var(--sp-5);
}

.card-tools { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* Grids — all children stretch, so cards in a row share one height. */
.grid { display: grid; gap: var(--sp-4); align-items: stretch; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1fr) 360px; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Stat tile: fixed 132px so a loading zero and a four-digit value look alike. */
.stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 132px;
    padding: var(--sp-5);
    background: var(--bg-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    text-align: left;
    transition: background-color var(--t-base);
}

button.stat { cursor: pointer; }
button.stat:hover { background: var(--bg-surface-hover); }
button.stat.is-active { background: var(--accent-soft); }

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-glyph {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--bg-chip);
    color: var(--text-muted);
}

.stat-glyph .icon { width: 15px; height: 15px; }
.stat-glyph.g-accent { background: var(--accent-soft); color: var(--accent); }
.stat-glyph.g-warn { background: var(--warning-soft); color: var(--warning); }
.stat-glyph.g-danger { background: var(--danger-soft); color: var(--danger); }

.stat-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.stat-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 11.5px;
    color: var(--text-muted);
    min-height: 18px;
}

/* Progress bar — fixed 6px rail, width is the only animated property. */
.bar {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--bg-field);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--accent);
    transition: width var(--t-layout);
}

.bar-fill.f-warn { background: var(--warning); }
.bar-fill.f-muted { background: var(--track); }

/* -------------------------------------------------------- 8. BADGES / PILLS */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--bg-chip);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
/* Amber is the ONLY additional hue, and only for "needs attention". */
.badge-warn { background: var(--warning-soft); color: var(--warning); }

/* Segmented filter control */
.segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--bg-field);
}

.segment-btn {
    height: 30px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background-color var(--t-base), color var(--t-base);
}

.segment-btn:hover { color: var(--text); }
.segment-btn.is-active { background: var(--bg-chip); color: var(--text); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------- 11. MODALS */
.overlay {
    position: fixed;
    inset: 0;
    /* Base only. openModal() raises each layer above the one before it, so
       a dialog opened FROM a drawer always lands on top of it. */
    z-index: var(--z-overlay);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    background: rgba(7, 10, 8, 0.74);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--t-base);
}

.overlay.is-mounted { display: flex; }
.overlay.is-open { opacity: 1; }

/* Modal container.
   ---------------------------------------------------------------------------
   Close-button geometry (constraint #4):
     dialog radius .......... 18px  (--r-xl)
     header padding ......... 20px 20px 20px 24px
     close button ........... 36×36, radius 10px, sits IN FLOW at the end of
                              the header row — never absolutely positioned.
   The button's outer edge therefore stops 20px short of the dialog edge,
   which is greater than the 18px corner radius. The rounded corner curve and
   the button box never intersect, so no clipping, no overlap, and
   `overflow: hidden` on the dialog is completely safe.                       */
.modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - var(--sp-9));
    background: var(--bg-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateY(8px);
    transition: transform var(--t-base), opacity var(--t-base);
    opacity: 0;
}

.overlay.is-open .modal { transform: translateY(0); opacity: 1; }

.modal-sm { max-width: 420px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 940px; }

.modal-head {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;                 /* action buttons drop to their own row */
    gap: var(--sp-3) var(--sp-4);
    flex: 0 0 auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-4) var(--sp-6);
}

/* A flex-basis, not `auto`. With `flex: 1 1 auto` plus `min-width: 0` the
   title was free to shrink all the way to zero — which is exactly what it did
   when it shared a row with action buttons, leaving the text overflowing a 0px
   box and rendering underneath them. It now refuses to go below 200px, and the
   row wraps instead of crushing. */
.modal-head-text { flex: 1 1 200px; min-width: 0; padding-top: 2px; order: 1; }

/* Actions living in the HEAD, deliberately NOT .modal-foot-actions: the footer
   variant is allowed to stretch its buttons edge-to-edge on mobile, which is
   wrong for a group sharing a row with a title. */
.modal-head-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
    order: 2;
}

.modal-head > .modal-close { order: 3; }

.modal-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.modal-sub { margin-top: var(--sp-1); font-size: 12.5px; color: var(--text-muted); }

/* The close control: fixed box, subtle bordered surface, nested safely. */
.modal-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--r-md);
    background: var(--bg-chip);
    color: var(--text-muted);
    transition: background-color var(--t-base), color var(--t-base);
}

.modal-close:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.modal-close .icon { width: 16px; height: 16px; }

.modal-body {
    flex: 0 1 auto;          /* may shrink to scroll, must never stretch */
    padding: var(--sp-5) var(--sp-6) var(--sp-4);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.modal-body-flush { padding: 0; }

.modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    flex: 0 0 auto;
    padding: var(--sp-3) var(--sp-6);
    background: var(--bg-surface-hi);
    box-shadow: 0 -12px 20px -20px rgba(0, 0, 0, 0.9);
}

.modal-foot-split { justify-content: space-between; }
.modal-foot-note { font-size: 11.5px; color: var(--text-muted); }
.modal-foot-actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }

/* Narrow screens: the title and the close button keep the first row to
   themselves, and any head actions take a full row beneath, splitting the
   width evenly.

   This lives in global.css, beside the component it governs, rather than in a
   page stylesheet — the modal is defined here, so its responsive behaviour
   belongs here too. Previously every mobile modal rule sat in shell.css, which
   only the admin and teacher consoles load, so the same markup behaved
   differently depending on which page it appeared on. */
@media (max-width: 768px) {
    .modal-head { gap: var(--sp-3); }
    .modal-head > .modal-close { order: 2; margin-left: auto; }
    .modal-head-actions { order: 3; flex: 1 0 100%; }
    .modal-head-actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* Centred confirmation layout */
.modal-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-2) 0; }

.modal-hero-glyph {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: var(--danger-soft);
    color: var(--danger);
}

.modal-hero-glyph.g-accent { background: var(--accent-soft); color: var(--accent); }
.modal-hero-title { font-size: 16px; font-weight: 700; }
.modal-hero-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 44ch; }

/* Form grid inside modals */
.form-grid { display: grid; gap: var(--sp-4); }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-span-2 { grid-column: span 2; }

/* Sections are separated by breathing room, not a rule. */
.form-section + .form-section { margin-top: var(--sp-8); }
.form-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-4); }

/* Radio cards for group assignment */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--bg-field);
    cursor: pointer;
    transition: background-color var(--t-base);
}

.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice:hover { }
.choice-title { font-size: 13px; font-weight: 600; }
.choice-desc { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.choice:has(input:checked) { background: var(--accent-soft); }
.choice:has(input:checked) .choice-title { color: var(--accent); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Selectable list (targeted access) */
.pick-list {
    max-height: 232px;             /* exactly 4 rows + border */
    overflow-y: auto;
    border-radius: var(--r-md);
    background: var(--bg-field);
}

.pick-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    height: 58px;
    padding: 0 var(--sp-4);
    text-align: left;
    transition: background-color var(--t-base);
}

.pick-row:hover { background: var(--bg-surface-hover); }
.pick-row.is-picked { background: var(--accent-soft); }
.pick-row.is-picked .pick-check { opacity: 1; }
.pick-text { flex: 1 1 auto; min-width: 0; }
.pick-check { color: var(--accent); opacity: 0; transition: opacity var(--t-base); }

/* ----------------------------------------------------------------- 13. TOAST */
.toast-stack {
    position: fixed;
    right: var(--sp-6);
    bottom: var(--sp-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: min(340px, calc(100vw - var(--sp-8)));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--bg-surface-hi);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    opacity: 0;
    transition: opacity var(--t-base);
}

.toast.is-open { opacity: 1; }
.toast .icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.toast-accent .icon { color: var(--accent); }
.toast-danger .icon { color: var(--danger); }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 600; }
.toast-desc { margin-top: 2px; font-size: 12px; color: var(--text-muted); }

/* Body lock: the scrollbar width is substituted as padding so opening a
   modal cannot shift the page horizontally. */
body.is-locked { overflow: hidden; padding-right: var(--scrollbar-w); }

/* ------------------------------------------------------- 15. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}