/* =============================================================================
   School Monthly Returns — v2 Design System (Phase 14: Frontend Redesign)
   An institutional records-and-reporting system for the Ministry of
   Education, not a consumer SaaS product. Structural conventions studied
   from shadcn/ui-style admin shells (collapsible icon-rail sidebar, tooltips
   when collapsed, faceted filters, sortable-look tables, soft-tinted status
   badges, windowed pagination) and InApp-style operational dashboards
   (search + export toolbars, KPI/trend cards, top-list cards), re-expressed
   with a restrained institutional palette and typography rather than either
   reference's own branding. Same PHP/CSS/JS stack throughout — no build
   step, no external UI framework.
   ========================================================================== */

/* Self-hosted fonts (Raleway + IBM Plex Mono), not a Google Fonts @import.
   This app must keep working at a school-local install with no internet
   (Blueprint §17.1) — an external font CDN would silently fall back to
   system fonts there, which is a fine degrade but not the intended design.
   These files are vendored once, under OFL, and ship with the codebase. */
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/raleway-400.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/raleway-500.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/raleway-600.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/raleway-700.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/raleway-800.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibmplexmono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibmplexmono-600.woff2') format('woff2'); }

:root {
    /* ---- Brand ---- */
    --color-primary: #0F2A43;
    --color-primary-dark: #0A1D30;
    --color-primary-tint: #E9EEF3;
    --color-accent: #0E7C86;
    --color-accent-dark: #0B646C;
    --color-accent-tint: #E3F2F1;

    /* ---- Surfaces & text ---- */
    --color-bg: #F4F5F7;
    --color-surface: #FFFFFF;
    --color-surface-2: #F7F8FA;
    --color-border: #E2E5EA;
    --color-border-strong: #CBD2DC;
    --color-text: #17212D;
    --color-text-secondary: #5B6472;
    --color-text-faint: #8992A1;
    --color-stripe: #F7F9FB;
    --color-heading: #0F2A43;

    /* ---- Semantic ---- */
    --color-success: #157F3C;
    --color-success-bg: #E3F5E9;
    --color-danger: #B3261E;
    --color-danger-bg: #FBEAE8;
    --color-warning: #9A5B12;
    --color-warning-bg: #FBF0DD;
    --color-info: #0E7C86;
    --color-info-bg: #E3F2F1;
    --color-locked: #0F2A43;
    --color-locked-bg: #E9EDF2;

    /* ---- Sidebar chrome (own tokens: light = branded navy, dark = neutral) ---- */
    --sidebar-bg: var(--color-primary);
    --sidebar-text: #B9C6D6;
    --sidebar-text-hover: #FFFFFF;
    --sidebar-active-bg: rgba(255, 255, 255, .1);
    --sidebar-active-text: #FFFFFF;
    --sidebar-border: rgba(255, 255, 255, .1);
    --sidebar-hover-bg: rgba(255, 255, 255, .06);
    --sidebar-accent: #45D6C6;
    --sidebar-section-label: #7E93AC;

    --font-heading: "Raleway", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: "Raleway", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --radius-sm: 5px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
    --shadow-lg: 0 20px 44px rgba(15, 23, 42, .16);
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
    --transition: 160ms cubic-bezier(.4,0,.2,1);
    --transition-fast: 110ms ease;
    --touch: 44px;
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 72px;
    --topbar-h: 60px;
}

/* System-preference dark mode, applied only when the user has not made an
   explicit choice (the manual toggle always wins once used). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --dark-mode-auto: 1; }
}
:root[data-theme="dark"],
:root:not([data-theme="light"]):is(.system-dark) {
    --color-primary-tint: #17293A;
    --color-heading: #D7E4F0;
    --color-accent: #34C3C0;
    --color-accent-dark: #2AA8A6;
    --color-accent-tint: #123433;
    --color-bg: #0B1520;
    --color-surface: #101B29;
    --color-surface-2: #16222F;
    --color-border: #223244;
    --color-border-strong: #324557;
    --color-text: #E7ECF2;
    --color-text-secondary: #93A1B4;
    --color-text-faint: #66748A;
    --color-stripe: #131F2C;
    --color-success: #4ADE80;
    --color-success-bg: #123822;
    --color-danger: #F27C74;
    --color-danger-bg: #3A1B1B;
    --color-warning: #E0B15C;
    --color-warning-bg: #332A16;
    --color-info: #34C3C0;
    --color-info-bg: #10302F;
    --color-locked: #9FB6CC;
    --color-locked-bg: #1B2939;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 44px rgba(0, 0, 0, .55);

    --sidebar-bg: var(--color-surface);
    --sidebar-text: var(--color-text-secondary);
    --sidebar-text-hover: var(--color-text);
    --sidebar-active-bg: var(--color-surface-2);
    --sidebar-active-text: var(--color-text);
    --sidebar-border: var(--color-border);
    --sidebar-hover-bg: var(--color-surface-2);
    --sidebar-accent: #34C3C0;
    --sidebar-section-label: var(--color-text-faint);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ============ Page-load overlay ============ */
/* Shown by default (visible the instant the HTML parses, before any JS
   runs) and hidden once window.load fires, see layout_header.php — and
   re-shown on every outgoing link click / form submit, see
   layout_footer.php. Traditional multi-page app: a fresh overlay per
   navigation is the whole mechanism, no persisted state across page loads. */
.page-load-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(10, 16, 26, .6); backdrop-filter: blur(1px);
    opacity: 1; transition: opacity .25s ease-in;
}
.page-load-overlay.is-done { opacity: 0; pointer-events: none; }
.page-load-spinner {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--color-accent);
    animation: page-load-spin .7s linear infinite;
}
.page-load-text { color: #fff; font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
@keyframes page-load-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .page-load-overlay { transition: opacity .3s ease-in; }
    .page-load-spinner { animation: none; }
}
body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
}
img, svg { max-width: 100%; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
code, .mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--color-primary-dark); color: #fff;
    padding: 10px 16px; border-radius: 0 0 var(--radius) 0; z-index: 300; text-decoration: none;
}
.skip-link:focus { left: 0; }
.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; }

a { color: var(--color-accent); }

:focus-visible {
    outline: 2.5px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

h1, h2, h3, h4, .brand-text strong, .card-title, legend, .nav-section-label, .kpi-value {
    font-family: var(--font-heading);
}

/* ============ App shell ============ */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; min-height: 100dvh; }

.sidebar {
    width: var(--sidebar-w); flex: none; background: var(--sidebar-bg); color: var(--sidebar-text);
    display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start;
    height: 100vh; height: 100dvh; z-index: 120; border-right: 1px solid var(--sidebar-border);
    transition: width var(--transition);
}
.sidebar-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }

.sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: 14px 16px; border-bottom: 1px solid var(--sidebar-border); flex: none; }
.brand-link { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--radius-sm); transition: opacity var(--transition); }
.brand-link:hover { opacity: .85; }
.brand-mark { width: 30px; height: 30px; flex: none; color: #fff; background: rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 5px; }
:root[data-theme="dark"] .brand-mark { color: var(--color-accent); background: var(--color-accent-tint); }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-text strong { font-size: .98rem; font-weight: 700; color: var(--sidebar-text-hover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { font-size: .74rem; color: var(--sidebar-text); font-weight: 500; font-family: var(--font-sans); white-space: nowrap; }
.sidebar-close { display: none; margin-left: auto; background: transparent; border: none; color: var(--sidebar-text); cursor: pointer; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.sidebar-close svg { width: 20px; height: 20px; }
.sidebar-close:hover { background: var(--sidebar-hover-bg); }

.sidebar-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.nav-section-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--sidebar-section-label); font-weight: 700; padding: 12px 10px 5px; transition: opacity var(--transition); }
.nav-section-label:first-child { padding-top: 2px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 11px; color: var(--sidebar-text); text-decoration: none; padding: 8px 10px;
    border-radius: var(--radius-sm); font-size: .84rem; font-weight: 500; min-height: 38px; position: relative;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-nav a svg:first-child { width: 18px; height: 18px; flex: none; }
.sidebar-nav a span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav a:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-hover); }
.sidebar-nav a.active, .sidebar-nav a[aria-current="page"] {
    background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600;
}
.sidebar-nav a.active::before, .sidebar-nav a[aria-current="page"]::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: var(--radius-full);
    background: var(--sidebar-accent);
}
.sidebar-nav a.locked { color: var(--sidebar-section-label); cursor: default; }
.sidebar-nav a.locked:hover { background: none; color: var(--sidebar-section-label); }
.sidebar-nav a .lock-icon { width: 14px; height: 14px; flex: none; opacity: .8; }
.sidebar-nav a .phase-tag { font-size: .62rem; font-weight: 700; letter-spacing: .03em; background: rgba(255,255,255,.1); color: var(--sidebar-text); padding: 2px 6px; border-radius: var(--radius-full); flex: none; }

/* ---- Collapsed (icon-rail) sidebar, desktop only ---- */
html[data-sidebar="collapsed"] .app-shell .sidebar { width: var(--sidebar-w-collapsed); }
html[data-sidebar="collapsed"] .app-shell .sidebar .brand-text,
html[data-sidebar="collapsed"] .app-shell .sidebar .nav-section-label,
html[data-sidebar="collapsed"] .app-shell .sidebar .sidebar-nav a span,
html[data-sidebar="collapsed"] .app-shell .sidebar .sidebar-nav a .phase-tag,
html[data-sidebar="collapsed"] .app-shell .sidebar .user-menu-text,
html[data-sidebar="collapsed"] .app-shell .sidebar .user-menu-chevron { display: none; }
html[data-sidebar="collapsed"] .app-shell .sidebar-nav a { justify-content: center; padding: 9px; }
html[data-sidebar="collapsed"] .app-shell .sidebar-nav a.active::before,
html[data-sidebar="collapsed"] .app-shell .sidebar-nav a[aria-current="page"]::before { left: -12px; }
html[data-sidebar="collapsed"] .app-shell .sidebar-brand { justify-content: center; padding: 18px 8px; }
html[data-sidebar="collapsed"] .app-shell .user-menu-trigger { justify-content: center; padding: 8px; }
html[data-sidebar="collapsed"] .app-shell [data-tooltip] { position: relative; }
@media (min-width: 961px) {
    html[data-sidebar="collapsed"] .app-shell [data-tooltip]:hover::after,
    html[data-sidebar="collapsed"] .app-shell [data-tooltip]:focus-visible::after {
        content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
        background: var(--color-primary-dark); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap;
        padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 200; pointer-events: none;
    }
}

.sidebar-footer { padding: 10px; border-top: 1px solid var(--sidebar-border); flex: none; position: relative; }
.user-menu-trigger {
    display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; cursor: pointer;
    padding: 8px; border-radius: var(--radius); color: inherit; font-family: inherit; text-align: left;
    transition: background var(--transition-fast);
}
.user-menu-trigger:hover, .user-menu-trigger[aria-expanded="true"] { background: var(--sidebar-hover-bg); }
.user-avatar {
    width: 32px; height: 32px; flex: none; border-radius: var(--radius-full); background: var(--sidebar-accent); color: #04201E;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; font-family: var(--font-heading);
}
.user-avatar.user-avatar-photo { padding: 0; overflow: hidden; background: var(--color-surface-2); }
.user-avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-menu-text { flex: 1; min-width: 0; line-height: 1.25; }
.user-menu-text strong { display: block; font-size: .84rem; font-weight: 600; color: var(--sidebar-text-hover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-text small { display: block; font-size: .74rem; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-chevron { width: 16px; height: 16px; flex: none; color: var(--sidebar-text); }

.user-menu-popover {
    position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); background: var(--color-surface);
    color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 6px; z-index: 250; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.user-menu-popover.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.user-menu-popover a, .user-menu-popover button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm);
    background: none; border: none; text-decoration: none; color: var(--color-text); font-family: inherit; font-size: .86rem;
    font-weight: 500; cursor: pointer; text-align: left;
}
.user-menu-popover a:hover, .user-menu-popover button:hover { background: var(--color-surface-2); }
.user-menu-popover svg { width: 17px; height: 17px; flex: none; color: var(--color-text-secondary); }
.user-menu-popover .divider { height: 1px; background: var(--color-border); margin: 5px 2px; }
.user-menu-popover .danger-item { color: var(--color-danger); }
.user-menu-popover .danger-item svg { color: var(--color-danger); }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }

/* ---- Topbar popovers (notifications + account) — same visual language as
   the sidebar's own popover above, opening downward from the topbar instead
   of upward from the sidebar footer. Two distinct triggers can never both be
   open (footer.php's dropdown script closes the others), and each stays
   anchored to its own trigger via .topbar-popover-wrap. ---- */
.topbar-popover-wrap { position: relative; }
.topbar-popover {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; max-width: min(320px, calc(100vw - 32px));
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 250;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.topbar-popover.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.topbar-popover .menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm);
    background: none; border: none; text-decoration: none; color: var(--color-text); font-family: inherit; font-size: .86rem;
    font-weight: 500; cursor: pointer; text-align: left;
}
.topbar-popover .menu-item:hover { background: var(--color-surface-2); }
.topbar-popover .menu-item svg { width: 17px; height: 17px; flex: none; color: var(--color-text-secondary); }
.topbar-popover .divider { height: 1px; background: var(--color-border); margin: 5px 2px; }
.topbar-popover .danger-item { color: var(--color-danger); }
.topbar-popover .danger-item svg { color: var(--color-danger); }

.topbar-account-header { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; }
.topbar-account-header .user-avatar { width: 36px; height: 36px; font-size: .86rem; flex: none; }
.topbar-account-header strong { display: block; font-size: .86rem; font-weight: 700; color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-account-header .role { display: block; font-size: .74rem; color: var(--color-text-secondary); }
.topbar-account-header .email { display: block; font-size: .72rem; color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; max-width: 170px; }

.topbar-account-trigger { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; height: 38px; padding: 0 6px 0 4px; border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition-fast); }
.topbar-account-trigger:hover, .topbar-account-trigger[aria-expanded="true"] { background: var(--color-surface-2); }
.topbar-account-trigger .user-avatar { width: 28px; height: 28px; font-size: .72rem; background: var(--color-primary); color: #fff; }
:root[data-theme="dark"] .topbar-account-trigger .user-avatar { background: var(--color-accent); color: #04201E; }
.topbar-account-trigger svg.chevron { width: 15px; height: 15px; color: var(--color-text-secondary); flex: none; }

.notif-popover-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); padding: 6px 8px 8px; }
.notif-item { display: flex; gap: 10px; padding: 8px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; align-items: flex-start; }
.notif-item:hover { background: var(--color-surface-2); }
.notif-item-icon { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .notif-item-icon { color: var(--color-accent); }
.notif-item-icon svg { width: 15px; height: 15px; }
.notif-item-body { min-width: 0; }
.notif-item-body strong { display: block; font-size: .82rem; font-weight: 600; color: var(--color-heading); line-height: 1.3; }
.notif-item-body span { display: block; font-size: .76rem; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }
.notif-empty { padding: 22px 12px; text-align: center; font-size: .82rem; color: var(--color-text-secondary); }
.notif-badge {
    position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--radius-full);
    background: var(--color-danger); color: #fff; font-size: .6rem; font-weight: 700; line-height: 15px; text-align: center;
    border: 1.5px solid var(--color-surface);
}

.sidebar-backdrop { display: none; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- Topbar (persistent, all breakpoints) ---- */
.topbar {
    display: flex; align-items: center; gap: var(--space-3); position: sticky; top: 0; background: var(--color-surface);
    border-bottom: 1px solid var(--color-border); padding: 0 var(--space-4); height: var(--topbar-h); z-index: 90; flex: none;
}
.topbar-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; position: relative;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.topbar-btn[aria-expanded="true"] { background: var(--color-surface-2); color: var(--color-heading); }
.topbar-btn:hover { background: var(--color-surface-2); color: var(--color-heading); }
.topbar-btn svg { width: 19px; height: 19px; }
.sidebar-collapse-toggle { display: none; }
@media (min-width: 961px) { .sidebar-collapse-toggle { display: inline-flex; } .sidebar-toggle { display: none; } }
.topbar-title { font-weight: 700; color: var(--color-heading); font-size: .95rem; font-family: var(--font-heading); display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) { .topbar-title { display: block; } }
.topbar-spacer { flex: 1; }

/* ============ Layout ============ */
.content { max-width: 1320px; padding: var(--space-4) clamp(16px, 4vw, 28px) var(--space-6); width: 100%; }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.page-header-text { min-width: 0; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; font-size: .78rem; color: var(--color-text-secondary); }
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--color-heading); font-weight: 600; }
.breadcrumb-home { display: inline-flex; color: var(--color-text-secondary); }
.breadcrumb-home svg { width: 14px; height: 14px; }
.breadcrumb-home:hover { color: var(--color-accent); }
.breadcrumb-sep { width: 12px; height: 12px; flex: none; color: var(--color-text-faint); }
.page-header h1 { margin: 0; font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); }
.page-description { margin: 4px 0 0; color: var(--color-text-secondary); font-size: .85rem; max-width: 68ch; }
.page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: none; }

h1 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); margin: 0 0 var(--space-3); color: var(--color-heading); font-weight: 700; letter-spacing: -.01em; }
h1 .page-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 4px; font-family: var(--font-sans); }
h2 { font-size: 1.05rem; color: var(--color-heading); font-weight: 700; }
h3 { font-size: .98rem; color: var(--color-heading); font-weight: 700; }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); padding: 0 16px; min-height: var(--touch); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; font-family: inherit; font-size: .87rem; font-weight: 600; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.is-loading { opacity: .5; cursor: not-allowed; transform: none; }
.btn.small { min-height: 34px; padding: 0 11px; font-size: .81rem; }
.btn.secondary { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border-strong); }
.btn.secondary:hover { background: var(--color-surface-2); border-color: var(--color-text-faint); }
.btn.danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-bg); }
.btn.danger:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

.profile-avatar-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.profile-avatar-preview .user-avatar { width: 56px; height: 56px; font-size: 1.2rem; background: var(--color-primary); color: #fff; }
:root[data-theme="dark"] .profile-avatar-preview .user-avatar { background: var(--color-accent); color: #04201E; }
.profile-avatar-info { flex: 1; min-width: 160px; }
.profile-avatar-actions { display: flex; gap: 8px; margin-left: auto; }
.profile-avatar-actions form { display: contents; }
@media (max-width: 480px) {
    .profile-avatar-actions { margin-left: 0; width: 100%; }
}
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn.ghost:hover { background: var(--color-surface-2); color: var(--color-heading); border-color: var(--color-border-strong); }
.btn.accent { background: var(--color-accent); border-color: var(--color-accent); }
.btn.accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }

.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--color-text-secondary); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); background: none; border: none; cursor: pointer; }
.icon-link svg { width: 17px; height: 17px; }
.icon-link:hover { background: var(--color-primary-tint); color: var(--color-heading); }
.icon-link.danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* ============ Cards ============ */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: var(--space-4); }
.card-title { font-weight: 700; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-3); }

/* ---- KPI / stat cards (dashboards, reports) ----
   Deliberately flat and compact (per redesign review): border only, no
   shadow, small muted icon, label+icon on one line so the card never needs
   a minimum width for an icon to sit beside the text — it just stays two
   short lines at any column width auto-fit gives it. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px; }
.kpi-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 6px; }
.kpi-label { font-size: .72rem; color: var(--color-text-secondary); font-weight: 600; line-height: 1.3; }
.kpi-icon { width: 24px; height: 24px; flex: none; border-radius: var(--radius-sm); background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .kpi-icon { color: var(--color-accent); }
.kpi-icon svg { width: 14px; height: 14px; }
.kpi-value { font-size: 1.45rem; font-weight: 700; color: var(--color-heading); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-trend { display: flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; margin-top: 4px; }
.kpi-trend svg { width: 12px; height: 12px; }
.kpi-trend.is-up { color: var(--color-success); }
.kpi-trend.is-down { color: var(--color-danger); }
.kpi-trend.is-neutral { color: var(--color-text-secondary); }

/* Legacy stat cards (kept for any page still using them) */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-xs); }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--color-heading); font-family: var(--font-heading); }
.stat-card .stat-label { font-size: .78rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }

/* Dashboard module cards — compact navigation tiles, not feature-marketing
   cards. Column counts are set explicitly per breakpoint tier (not left to
   auto-fill's own math) so it's always exactly 1/2/3-4 columns, never a
   half-filled row of oversized cards on a wide screen. */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
@media (min-width: 1180px) { .module-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 860px) and (max-width: 1179.98px) { .module-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px) and (max-width: 859.98px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559.98px) { .module-grid { grid-template-columns: 1fr; } }
.module-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: border-color var(--transition-fast), background var(--transition-fast); position: relative; }
.module-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
.module-card .module-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .module-card .module-icon { color: var(--color-accent); }
.module-card .module-icon svg { width: 16px; height: 16px; }
.module-card h3 { margin: 0; font-size: .89rem; }
.module-card p { margin: 0; font-size: .78rem; color: var(--color-text-secondary); line-height: 1.45; }
.module-card .module-chevron { position: absolute; top: var(--space-3); right: var(--space-3); width: 14px; height: 14px; color: var(--color-text-faint); transition: transform var(--transition-fast); }
.module-card:hover .module-chevron { transform: translateX(2px); color: var(--color-text-secondary); }
.module-card.is-locked { cursor: default; opacity: .68; }
.module-card.is-locked:hover { border-color: var(--color-border); background: var(--color-surface); }
.module-card.is-locked .module-icon { background: var(--color-locked-bg); color: var(--color-locked); }
.module-card .phase-tag { align-self: flex-start; font-size: .66rem; font-weight: 700; letter-spacing: .03em; background: var(--color-locked-bg); color: var(--color-locked); padding: 2px 8px; border-radius: var(--radius-full); }

/* ---- Simple inline SVG charts (no external chart library — must render
   fully offline at school-local installs) ---- */
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-chart-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: var(--space-3); }
.bar-chart-label { font-size: .82rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-chart-track { background: var(--color-surface-2); border-radius: var(--radius-full); height: 10px; overflow: hidden; }
.bar-chart-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-accent); transition: width 400ms ease; }
.bar-chart-fill.is-secondary { background: var(--color-primary); }
:root[data-theme="dark"] .bar-chart-fill.is-secondary { background: var(--color-locked); }
.bar-chart-value { font-size: .82rem; font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.legend-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); font-size: .8rem; color: var(--color-text-secondary); }
.legend-dot { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot::before { content: ""; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--dot-color, var(--color-accent)); }

/* ---- Dashboard analytics section (2-up, collapsing to 1 column when
   there isn't room for both to be comfortable — not a fixed breakpoint,
   since it's only ever these two cards). ---- */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }

/* ---- Monthly trend (grouped bars) — plain CSS, no chart library, so it
   renders identically offline at a school-local install. ---- */
.trend-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 140px; padding-top: 4px; }
.trend-month { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; height: 100%; }
.trend-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; }
.trend-bar { width: 30%; max-width: 18px; border-radius: 3px 3px 0 0; min-height: 3px; transition: height 300ms ease; }
.trend-bar.is-a { background: var(--color-accent); }
.trend-bar.is-b { background: var(--color-primary); }
:root[data-theme="dark"] .trend-bar.is-b { background: var(--color-locked); }
.trend-month-label { font-size: .7rem; color: var(--color-text-secondary); white-space: nowrap; }

/* ---- Overall Information — a compact icon+label+value list, distinct in
   shape from the KPI cards above it even where a number happens to overlap. ---- */
.info-list { display: flex; flex-direction: column; }
.info-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row:first-child { padding-top: 0; }
.info-row-icon { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .info-row-icon { color: var(--color-accent); }
.info-row-icon svg { width: 15px; height: 15px; }
.info-row-label { flex: 1; font-size: .84rem; color: var(--color-text-secondary); font-weight: 500; min-width: 0; }
.info-row-value { font-size: .95rem; font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; flex: none; }

/* ============ Tables ============ */
.table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; margin-top: var(--space-3); overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 12px 16px; text-align: left; font-size: .87rem; border-bottom: 1px solid var(--color-border); }
.grid thead th { background: var(--color-surface-2); color: var(--color-text-secondary); font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--color-border); }
.grid tbody tr { transition: background var(--transition-fast); }
.grid tbody tr:hover { background: var(--color-stripe); }
.grid tbody tr:last-child td { border-bottom: none; }
.grid .empty-cell { padding: 0; border-bottom: none; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td .mono, .grid td.mono { color: var(--color-text-secondary); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: var(--space-4); }
.pagination-num, .pagination-arrow {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 4px;
    border-radius: var(--radius-sm); text-decoration: none; font-size: .84rem; font-weight: 600; color: var(--color-text-secondary);
    border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast);
}
.pagination-num:hover, .pagination-arrow:hover { background: var(--color-surface-2); color: var(--color-heading); }
.pagination-num.is-current { background: var(--color-primary); color: #fff; }
.pagination-arrow svg { width: 16px; height: 16px; }
.pagination-arrow.is-disabled { opacity: .4; pointer-events: none; }
.pagination-ellipsis { color: var(--color-text-faint); padding: 0 2px; }

@media (max-width: 700px) {
    .table-wrap { box-shadow: none; background: transparent; border-radius: 0; overflow: visible; border: none; }
    .grid, .grid thead, .grid tbody, .grid th, .grid td, .grid tr { display: block; }
    .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .grid tbody tr { background: var(--color-surface) !important; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-3); box-shadow: var(--shadow-xs); overflow: hidden; }
    .grid td { display: flex; align-items: center; justify-content: flex-end; text-align: right; gap: var(--space-2); padding: 10px 14px; min-height: 40px; position: relative; padding-left: 44%; }
    .grid td::before { content: attr(data-label); position: absolute; left: 14px; width: 40%; text-align: left; font-weight: 600; color: var(--color-text-secondary); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
    .grid td[data-label=""]::before, .grid td:not([data-label])::before { content: none; }
    .grid td.no-label { padding-left: 14px; justify-content: flex-end; }
    .row-actions { justify-content: flex-end; }
}

/* ============ Status / role pills ============ */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.pill svg { width: 13px; height: 13px; flex: none; }
.pill-draft { background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.pill-submitted { background: var(--color-info-bg); color: var(--color-info); }
.pill-debs_approved, .pill-provincial_approved { background: #DFF5F1; color: #0F766E; }
:root[data-theme="dark"] .pill-debs_approved, :root[data-theme="dark"] .pill-provincial_approved { background: #123832; color: #6FCBA0; }
.pill-national_approved { background: var(--color-success-bg); color: var(--color-success); }
.pill-locked { background: var(--color-locked-bg); color: var(--color-locked); }
.pill-rejected { background: var(--color-danger-bg); color: var(--color-danger); }
.pill-correction_draft, .pill-send_back { background: var(--color-warning-bg); color: var(--color-warning); }

/* Staff status pills (distinct namespace from the return-workflow pills above) */
.pill-active { background: var(--color-success-bg); color: var(--color-success); }
.pill-on_leave { background: var(--color-warning-bg); color: var(--color-warning); }
.pill-transferred { background: var(--color-info-bg); color: var(--color-info); }
.pill-separated, .pill-deceased, .pill-inactive { background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

.qualification-highest { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--color-heading); }
.qualification-highest svg { width: 15px; height: 15px; color: var(--color-accent); }
.doc-count-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--color-text-secondary); }
.doc-count-badge svg { width: 15px; height: 15px; }
.doc-count-badge.has-docs { color: var(--color-accent); font-weight: 600; }

.profile-header { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); }
.profile-header h1 { margin-bottom: 4px; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.profile-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); flex-wrap: wrap; overflow-x: auto; }
.profile-tabs a { padding: 10px 14px; text-decoration: none; color: var(--color-text-secondary); font-weight: 600; font-size: .86rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); }
.profile-tabs a:hover { color: var(--color-heading); }
.profile-tabs a.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.definition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.definition-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-secondary); margin-bottom: 3px; font-weight: 600; }
.definition-grid dd { margin: 0; font-size: .92rem; font-weight: 500; }
.suggest-panel { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 30; max-height: 260px; overflow-y: auto; display: none; }
.suggest-panel.open { display: block; }
.suggest-panel button { display: block; width: 100%; text-align: left; padding: 9px 14px; background: none; border: none; cursor: pointer; font-size: .85rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.suggest-panel button:last-child { border-bottom: none; }
.suggest-panel button:hover, .suggest-panel button.active { background: var(--color-surface-2); }
.suggest-panel .suggest-meta { color: var(--color-text-secondary); font-size: .76rem; }

.role-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); background: var(--color-primary-tint); color: var(--color-heading); white-space: nowrap; }
.role-badge.role-national { background: var(--color-locked-bg); color: var(--color-locked); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.active { background: var(--color-success); }
.status-dot.inactive { background: var(--color-text-faint); }

/* ============ Toolbar / filters / search ============ */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.filter-bar {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-4);
}
.filter-bar .search-field { flex: 1; min-width: 220px; }
.filter-bar select, .filter-bar input:not([type=checkbox]) { min-width: 150px; width: auto; }
.filter-bar .filter-divider { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 2px; }
.search-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--color-text-faint); pointer-events: none; }
.search-field input { padding-left: 38px; min-width: 240px; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 var(--space-3); }
.filter-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--color-text-secondary);
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 8px 4px 12px;
    text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filter-chip svg { width: 13px; height: 13px; flex: none; }
.filter-chip:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-bg); }

/* ============ Forms ============ */
.form { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4) var(--space-4); }
form label, .field-label { display: block; font-size: .82rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.form-grid > label { margin-bottom: 0; }

/* Required-field indicator. A label wraps BOTH its caption text and its
   control (input/select/textarea/.password-field), so a plain ::after on
   the label would render after the control, not beside the caption — the
   asterisk-under-the-input bug. `order` re-sorts caption+asterisk onto the
   first flex line while every control (and any field-help/field-error)
   gets flex-basis:100%, forcing it onto its own full-width line below —
   with no markup change needed on any page. Scoped to `form label` (not
   just .form/.form-grid) since some dialog forms carry neither class. */
form label.required { display: flex; flex-wrap: wrap; align-items: baseline; }
form label.required::after { content: "*"; color: var(--color-danger); order: 1; margin-left: 3px; }
form label.required > input,
form label.required > select,
form label.required > textarea,
form label.required > .password-field { order: 2; flex: 1 1 100%; }
form label.required > .field-help,
form label.required > .field-error { order: 3; flex: 1 1 100%; }

.field-help { display: block; font-weight: 400; font-size: .78rem; color: var(--color-text-secondary); margin-top: 4px; }
.field-error { display: flex; align-items: center; gap: 5px; font-weight: 500; font-size: .8rem; color: var(--color-danger); margin-top: 5px; }
.field-error svg { width: 14px; height: 14px; flex: none; }
input.has-error, select.has-error { border-color: var(--color-danger); }

input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=password], select, textarea {
    display: block; width: 100%; margin-top: 6px; padding: 0 12px; min-height: var(--touch);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: .89rem; font-family: inherit;
    color: var(--color-text); background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
textarea { padding: 10px 12px; min-height: 80px; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; padding-right: 32px; }
input:hover, select:hover { border-color: var(--color-text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); outline: none; }
input:disabled, select:disabled, textarea:disabled { background: var(--color-surface-2); color: var(--color-text-faint); cursor: not-allowed; opacity: .75; }
.password-field { position: relative; }
.password-toggle { position: absolute; right: 6px; top: 6px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.checkbox-row { display: flex; align-items: center; gap: 10px; min-height: var(--touch); font-weight: 400; color: var(--color-text); }
.checkbox-row input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--color-primary); }

fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); margin: 0 0 var(--space-4); padding: var(--space-4); }
fieldset:last-of-type { margin-bottom: var(--space-5); }
legend { font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); padding: 0 8px; }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-2); align-items: center; }

/* ============ Alerts / toasts ============ */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: .87rem; font-weight: 500; margin-bottom: var(--space-4); border: 1px solid transparent; }
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.alert.success { color: var(--color-success); background: var(--color-success-bg); }
.alert.error { color: var(--color-danger); background: var(--color-danger-bg); }
.alert.info { color: var(--color-info); background: var(--color-info-bg); }

/* ============ Dialog (confirm destructive/scope actions) ============ */
dialog.confirm-dialog { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0; max-width: 440px; width: 92vw; background: var(--color-surface); color: var(--color-text); }
dialog.confirm-dialog::backdrop { background: rgba(10, 16, 26, .55); backdrop-filter: blur(1px); }
dialog.confirm-dialog .dialog-body { padding: var(--space-5); }
dialog.confirm-dialog h2 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
dialog.confirm-dialog p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); font-size: .88rem; }
dialog.confirm-dialog .dialog-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
#sessionWarningDialog .dialog-body { display: flex; gap: 14px; align-items: flex-start; }
#sessionWarningDialog .session-warning-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-warning-bg); color: var(--color-warning); display: flex; align-items: center; justify-content: center; }
#sessionWarningDialog .session-warning-icon svg { width: 22px; height: 22px; }
#sessionWarningDialog .session-warning-text { min-width: 0; }
#sessionWarningCountdown { font-family: var(--font-mono); font-weight: 700; color: var(--color-heading); }

/* ============ Toast (transient, non-blocking notification) ============ */
.toast-stack { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 1000; display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; }
.toast {
    display: flex; align-items: flex-start; gap: 10px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-success); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px 16px;
    animation: toast-in .25s ease-out;
}
.toast svg { width: 20px; height: 20px; flex: none; color: var(--color-success); margin-top: 1px; }
.toast strong { display: block; font-size: .88rem; color: var(--color-heading); }
.toast span { display: block; font-size: .82rem; color: var(--color-text-secondary); margin-top: 2px; }
.toast.toast-hide { animation: toast-out .25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 600px) {
    .toast-stack { left: var(--space-3); right: var(--space-3); top: var(--space-3); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast.toast-hide { animation: none; opacity: 0; }
}

.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-secondary); }
.empty-state svg { width: 42px; height: 42px; color: var(--color-border-strong); margin-bottom: var(--space-3); }
.empty-state p { margin: 0 auto; max-width: 40ch; font-size: .9rem; }
.empty-state .btn { margin-top: var(--space-4); }

/* ---- Full-page error states (403/404/500) ---- */
.error-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--topbar-h) - var(--space-7)); min-height: calc(100dvh - var(--topbar-h) - var(--space-7)); padding: var(--space-6) 0; }
.error-panel { text-align: center; max-width: 440px; }
.error-panel .error-code { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: .08em; color: var(--color-text-faint); text-transform: uppercase; }
.error-panel .error-icon { width: 56px; height: 56px; margin: var(--space-3) auto var(--space-4); color: var(--color-locked); background: var(--color-locked-bg); border-radius: var(--radius-full); padding: 14px; }
.error-panel h1 { margin-bottom: var(--space-2); }
.error-panel p { color: var(--color-text-secondary); font-size: .92rem; line-height: 1.6; margin: 0 auto var(--space-5); }
.error-panel .form-actions { justify-content: center; }

/* ============ Auth pages (login) ============ */
/* Below 900px, .auth-visual (the two-column classroom photo + copy) never
   shows at all — the sign-in form used to sit on a flat, empty background.
   Same photo applies to the page itself here instead, with the form
   promoted to an opaque card so it stays fully legible over it in either
   theme; the >=900px rule below replaces this with the two-column layout,
   at which point the photo moves into .auth-visual and this plain card
   styling is no longer needed (overridden there). */
.auth-layout {
    min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr;
    background:
        linear-gradient(180deg, rgba(10, 20, 34, .55) 0%, rgba(11, 29, 43, .75) 55%, rgba(8, 18, 28, .92) 100%),
        url('../images/pexels-mickael-ange-konan-2156070331-34526414.jpg') center 22% / cover no-repeat;
}

.auth-visual { display: none; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); }
.auth-panel-inner {
    width: 100%; max-width: 380px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5);
}

.auth-panel-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.auth-panel-brand .brand-mark { width: 46px; height: 46px; flex: none; background: var(--color-primary-tint); color: var(--color-heading); border-radius: var(--radius); padding: 10px; }
.auth-panel-brand strong { display: block; font-family: var(--font-heading); font-size: 1rem; color: var(--color-heading); line-height: 1.3; }
.auth-panel-brand small { display: block; color: var(--color-text-secondary); font-size: .8rem; }

.auth-panel-inner h1 { margin: 0 0 var(--space-5); }
.auth-form { background: none; border: none; box-shadow: none; padding: 0; }
.auth-form label:first-of-type { margin-top: 0; }

.auth-footer-note { text-align: left; margin-top: var(--space-5); font-size: .78rem; color: var(--color-text-secondary); line-height: 1.55; }

@media (min-width: 900px) {
    /* The photo moves into .auth-visual's own column at this width — the
       mobile full-bleed-photo-behind-a-card treatment above is reverted
       back to the original plain, flat desktop look. */
    .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--color-bg); }
    .auth-panel-inner { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; }

    .auth-visual {
        display: flex; flex-direction: column; justify-content: space-between;
        position: relative; overflow: hidden; padding: var(--space-6) var(--space-7);
        color: #fff;
        background:
            linear-gradient(175deg, rgba(10, 20, 34, .35) 0%, rgba(11, 29, 43, .68) 55%, rgba(8, 18, 28, .94) 100%),
            url('../images/pexels-mickael-ange-konan-2156070331-34526414.jpg') center 22% / cover no-repeat;
    }
    .auth-visual-brand { display: flex; align-items: center; gap: 12px; }
    .auth-visual-brand .brand-mark { width: 38px; height: 38px; flex: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); padding: 8px; color: #fff; }
    .auth-visual-brand span { font-family: var(--font-heading); font-weight: 700; font-size: .98rem; letter-spacing: .01em; }

    .auth-visual-copy { max-width: 420px; }
    .auth-visual-eyebrow { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FDCD6; margin-bottom: var(--space-3); }
    .auth-visual-copy h2 { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.3; font-weight: 800; margin: 0 0 var(--space-3); color: #fff; }
    .auth-visual-copy p { font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0; max-width: 38ch; }

    .auth-panel-brand { display: none; }
    .auth-panel { padding: var(--space-6); }
}

@media (min-width: 1200px) {
    .auth-visual { padding: var(--space-7) 64px; }
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
    .sidebar { position: fixed; left: 0; top: 0; height: 100vh; height: 100dvh; width: 280px; transform: translateX(-100%); transition: transform 220ms ease; box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: inline-flex; }
    .sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(8, 14, 24, .5); z-index: 110; }
    body.sidebar-locked { overflow: hidden; }
    html[data-sidebar="collapsed"] .app-shell .sidebar { width: 280px; }
    html[data-sidebar="collapsed"] .app-shell .sidebar .brand-text,
    html[data-sidebar="collapsed"] .app-shell .sidebar .nav-section-label,
    html[data-sidebar="collapsed"] .app-shell .sidebar .sidebar-nav a span,
    html[data-sidebar="collapsed"] .app-shell .sidebar .user-menu-text,
    html[data-sidebar="collapsed"] .app-shell .sidebar .user-menu-chevron { display: revert; }
    html[data-sidebar="collapsed"] .app-shell .sidebar-nav a { justify-content: flex-start; padding: 9px 11px; }
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .filter-divider { display: none; }
    .search-form { width: 100%; }
    .search-field input { min-width: 0; width: 100%; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .page-header { flex-direction: column; }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1; }
    .bar-chart-row { grid-template-columns: 90px 1fr auto; }
}
@media (max-width: 400px) {
    .kpi-row { grid-template-columns: 1fr; }
}