/* ── CSS VARIABLES ─────────────────────────────────────────────────────── */
:root {
    --navy: #1B3A6B;
    --blue: #2E6DB4;
    --blue-bg: #E6F1FB;
    --gold: #C8960C;
    --gold-light: #F5E6B8;
    --bg: #F4F6FA;
    --surface: #FFFFFF;
    --surface2: #EEF1F8;
    --surface3: #E4E8F2;
    --border: #DDE1EE;
    --text: #18192A;
    --text2: #52576E;
    --text3: #8A90A8;
    --green: #1A6B3A;
    --green-hover: #145A30;
    --green-bg: #E8F5EE;
    --green-border: #B8DFC8;
    --amber: #7A4800;
    --amber-bg: #FEF3E2;
    --amber-border: #F5D99A;
    --red: #8B1A1A;
    --red-bg: #FCEAEA;
    --red-border: #F0B8B8;
    --purple: #3C3489;
    --purple-bg: #EEEDFE;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 2px 12px rgba(27,58,107,.08);
    --shadow-lg: 0 8px 32px rgba(27,58,107,.14);
}

/* ── Dark theme ──────────────────────────────────────────────────────────────
   Charcoal background, deepened navy header (themes itself via --navy), brighter
   accents so they read on dark, status colors kept legible, shadows softened.
   Applied via [data-theme="dark"] (explicit toggle) OR prefers-color-scheme when
   the user hasn't chosen (data-theme unset). */
:root[data-theme="dark"] {
    --navy: #11233f;          /* deepened so the header reads dark */
    --blue: #5B9BE0;          /* brighter so it pops on charcoal */
    --blue-bg: #1C2A3D;       /* dark "info" surface */
    --gold: #E0B84A;
    --gold-light: #4A3E1C;
    --bg: #16181D;            /* balanced charcoal, not pure black */
    --surface: #1E2128;       /* cards sit slightly above the bg */
    --surface2: #262A33;      /* hover / secondary surface */
    --surface3: #303541;
    --border: #333845;
    --text: #E8EAF0;
    --text2: #AEB4C4;
    --text3: #767D90;
    --green: #5FC98A;
    --green-hover: #4FB87A;
    --green-bg: #16291F;
    --green-border: #2C5A3E;
    --amber: #E0A94A;
    --amber-bg: #2C2310;
    --amber-border: #5A471C;
    --red: #E07070;
    --red-bg: #2C1717;
    --red-border: #5A2C2C;
    --purple: #9189E0;
    --purple-bg: #211E3A;
    --shadow: 0 2px 12px rgba(0,0,0,.35);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* Auto dark when the user hasn't explicitly chosen a theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --navy: #11233f;
        --blue: #5B9BE0;
        --blue-bg: #1C2A3D;
        --gold: #E0B84A;
        --gold-light: #4A3E1C;
        --bg: #16181D;
        --surface: #1E2128;
        --surface2: #262A33;
        --surface3: #303541;
        --border: #333845;
        --text: #E8EAF0;
        --text2: #AEB4C4;
        --text3: #767D90;
        --green: #5FC98A;
        --green-hover: #4FB87A;
        --green-bg: #16291F;
        --green-border: #2C5A3E;
        --amber: #E0A94A;
        --amber-bg: #2C2310;
        --amber-border: #5A471C;
        --red: #E07070;
        --red-bg: #2C1717;
        --red-border: #5A2C2C;
        --purple: #9189E0;
        --purple-bg: #211E3A;
        --shadow: 0 2px 12px rgba(0,0,0,.35);
        --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
    /* Guard: a page must never scroll horizontally, which would also widen
       position:fixed modals off-screen. `clip` doesn't break the sticky header. */
    overflow-x: clip;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── APP SHELL ─────────────────────────────────────────────────────────── */
/* Blazor's <FocusOnNavigate> moves focus to the page <h1> after each navigation
   (so screen readers announce the new page). It adds tabindex="-1" to that
   heading; the focus is programmatic, not user-initiated, so suppress the
   visible focus ring — otherwise the page title shows an odd box on every load. */
[tabindex="-1"]:focus { outline: none; }

.app-root { min-height: 100vh; }
/* Content sits to the right of the fixed left sidebar on desktop. The padding
   is reset to 0 in the ≤1024px media query, where the sidebar is hidden and the
   hamburger menu takes over. */
.app-main { min-height: calc(100vh - 58px); padding-left: var(--sidebar-w, 220px); }
.auth-main { min-height: 100vh; }

/* ── DESKTOP LEFT SIDEBAR NAV ──────────────────────────────────────────────
   Holds the page links (Dashboard, Students, …). Fixed below the 58px header,
   full-height, independently scrollable. Hidden ≤1024px (hamburger instead). */
.app-sidebar {
    position: fixed;
    top: 58px; left: 0; bottom: 0;
    width: var(--sidebar-w, 220px);
    background: var(--surface2);           /* subtle gray nav surface — grounded, not airy white */
    border-right: 1px solid var(--border);
    padding: 14px 10px;
    overflow-y: auto;
    z-index: 150;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
/* Sidebar brand / workspace header — grounds the nav so it doesn't start cold on "Dashboard". */
.sidebar-brand { padding: 2px 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.sidebar-brand-name { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.2; }
.sidebar-brand-sub { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nav section separator + small group label (used in the sidebar AND the mobile menu;
   both are light-surfaced, so border/text3 read correctly in each). Softer line + more air. */
.nav-sep { height: 1px; background: var(--border-subtle); margin: 18px 10px 4px; }
.nav-grouplabel { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); padding: 2px 12px 5px; }
.app-sidebar .nav-link {
    color: var(--text2);
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 6px;                    /* sharper than the shadcn-y 8-12px pill */
}
.app-sidebar .nav-link:hover { background: var(--surface3); color: var(--text); }
/* De-generic active state: dark text with blue only as a LEFT RAIL + icon accent (no blue pill),
   raised on a white surface against the gray nav. Reads "operational", not "SaaS template". */
/* Active: dark text, blue ONLY on the left rail + icon; a thin top/bottom hairline + soft lift
   give it "selected" definition against the gray nav without reading as a card. */
.app-sidebar .nav-link.active { background: var(--surface); color: var(--text); font-weight: 650;
    box-shadow: inset 3px 0 0 var(--blue), inset 0 1px 0 var(--border-subtle),
                inset 0 -1px 0 var(--border-subtle), 0 1px 2px rgba(15,23,42,.07); }
.app-sidebar .nav-link.active .ti { color: var(--blue); }
.app-sidebar .nav-link .ti { font-size: 18px; }

.app-header {
    background: linear-gradient(135deg, var(--navy) 0%, #1E4A8A 100%);
    color: #fff;
    height: 58px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(27,58,107,.3);
}

.header-left { display: flex; align-items: center; gap: 10px; }
.header-logo {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 20px;
}
/* When a custom logo is set, drop the icon "tile" box and let the logo breathe. */
.header-logo.has-logo {
    width: auto; min-width: 0; height: 42px; padding: 0;
    background: transparent; border-radius: 0;
}
.header-logo.has-logo .header-logo-img { max-height: 42px; max-width: 180px; width: auto; }
.header-logo-img { max-width: 100%; max-height: 30px; border-radius: 6px; display: block; object-fit: contain; }
.logo-preview {
    width: 64px; height: 64px; flex: none;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.header-title-block {}

/* ── File drop zone (drag-to-upload) ─────────────────────────────────────── */
/* A transparent <InputFile> fills the zone, so dropping a file onto it (or
   clicking anywhere in it) fires the same OnChange — no JS needed. */
.dropzone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 22px 16px;
    text-align: center;
    color: var(--text2);
    transition: border-color .12s ease, background .12s ease;
}
.dropzone.dragover { border-color: var(--blue); background: var(--blue-bg); }
.dropzone i { font-size: 28px; color: var(--text3); display: block; margin-bottom: 6px; }
.dropzone .dz-main { display: block; font-size: 14px; }
.dropzone .dz-hint { display: block; font-size: 12px; color: var(--text3); margin-top: 4px; }
.dz-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.header-title { font-size: 15px; font-weight: 700; white-space: nowrap; }
/* Small "Beta" tag — theme-aware amber pill so it reads on the dark header, the
   light header, and the login card alike. */
.beta-badge { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); vertical-align: middle; position: relative; top: -1px; }
.beta-badge.login-beta { font-size: 11px; padding: 2px 9px; top: -3px; }
.header-sub { font-size: 11px; opacity: .7; }

.header-nav { display: flex; gap: 4px; }
.nav-link {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    transition: all .15s;
    text-decoration: none;
}
.nav-link:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.nav-link.active { background: rgba(255,255,255,.2); color: #fff; }

.header-right { display: flex; align-items: center; gap: 16px; }
.view-toggle {
    display: flex; align-items: center; gap: 2px;
    background: rgba(0,0,0,.18); border-radius: 20px; padding: 3px;
}
.view-toggle-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500; font-family: inherit;
    padding: 5px 12px; border: none; border-radius: 16px;
    background: transparent; color: rgba(255,255,255,.7);
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.view-toggle-btn:hover { color: #fff; }
.view-toggle-btn.active { background: rgba(255,255,255,.95); color: var(--navy); }
.user-menu { display: flex; align-items: center; gap: 8px; }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
}
.user-name { font-size: 13px; color: rgba(255,255,255,.85); }
.btn-icon {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all .15s;
}
.btn-icon:hover { background: rgba(255,255,255,.2); color: #fff; }
.role-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; }
.role-badge.admin { background: rgba(200,150,12,.35); color: #F5E6B8; }
.role-badge.instructor { background: rgba(46,109,180,.35); color: #B8D4F8; }
.role-badge.student { background: rgba(26,107,58,.35); color: #B8DFC8; }

/* ── USER / ACCOUNT-SETTINGS MENU (click your name) ───────────────────────── */
.user-menu { position: relative; cursor: pointer; }
.user-menu-caret { font-size: 14px; opacity: .7; }
.user-panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    min-width: 290px; padding: 8px; z-index: 300;
}
.user-panel-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.user-panel-header .user-avatar { background: var(--blue-bg); color: var(--blue); }
.user-panel-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-panel-role { font-size: 12px; color: var(--text2); }
.user-panel-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.user-panel-toggle { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.user-panel-toggle-title { font-size: 13px; font-weight: 500; }
.user-panel-toggle-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.user-panel-toggle-err { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--red); padding: 0 10px 8px; }

/* Super-admin tenant cards (responsive — no horizontal scroll) */
.tenant-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tenant-card-main { min-width: 0; flex: 1 1 260px; }
.tenant-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tenant-card-name { font-size: 16px; font-weight: 700; }
.tenant-card-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text2); font-size: 12px; margin-top: 6px; }
.tenant-card-meta .ti { margin-right: 3px; color: var(--text3); }
.tenant-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Super-admin "viewing a tenant" banner (shown across admin pages while scoped) */
.superadmin-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: var(--amber-bg); color: var(--amber);
    border: 1px solid var(--amber-border); border-radius: var(--radius-sm);
    padding: 10px 14px; margin: 1rem 1.5rem 0; font-size: 13px;
}
.user-panel-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 14px; color: var(--text); text-align: left;
    border-radius: var(--radius-sm);
}
.user-panel-item:hover { background: var(--surface2); }
.user-panel-item .ti { font-size: 18px; color: var(--text2); }

/* On/off pill switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; inset: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 24px; transition: .15s; cursor: pointer; }
.switch-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .switch-slider { background: var(--blue); border-color: var(--blue); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }

/* A labeled setting row with a control (e.g. a switch) pinned right */
.course-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); margin-bottom: 1rem; }
.course-setting-title { font-size: 14px; font-weight: 600; }
.course-setting-sub { font-size: 12px; color: var(--text3); margin-top: 2px; max-width: 560px; }

/* % complete on the student My Training course cards */
.course-card-progress { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.course-card-progress .progress-bar-wrap { flex: 1; }
.course-card-progress-label { font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; }

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.app-body { max-width: 820px; margin: 0 auto; padding: 1.5rem; }
/* Wider canvas for table/dashboard/list pages (forms & reading pages stay narrow). */
.app-body.wide { max-width: 1240px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.page-title { font-size: 22px; font-weight: 700; }
.page-sub { font-size: 13px; color: var(--text2); margin-top: 2px; }

/* ── LOGIN ──────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2.25rem; width: 100%; max-width: 420px;
    box-shadow: var(--shadow-lg);
}
.login-logo {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--navy), var(--blue));
    border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem; font-size: 28px; color: #fff;
    box-shadow: 0 4px 16px rgba(27,58,107,.3);
}
.login-title { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.login-sub { text-align: center; font-size: 13px; color: var(--text2); margin-bottom: 2rem; }

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--text); }
.form-hint { font-size: 11px; color: var(--text3); margin-top: 4px; }
.form-input {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; background: var(--surface); color: var(--text);
    outline: none; transition: border .15s, box-shadow .15s;
    font-family: inherit;
}
.form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,109,180,.15); }
.form-input-sm { font-size: 13px; padding: 7px 10px; }
textarea.form-input { resize: vertical; min-height: 80px; line-height: 1.5; }

/* Inline form validation */
.input-error { border-color: var(--red); }
.input-error:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,53,69,.15); }
.field-error { color: var(--red); font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.color-pick { width: 40px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 2px; }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all .15s; font-family: inherit; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--navy), var(--blue)); border-color: var(--navy); color: #fff; }
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #14294d, #235a94); /* darker navy→blue */
    border-color: #14294d;
    color: #fff;
}
.btn-ghost { border-color: transparent; background: transparent; color: var(--text2); }
.btn-ghost:hover { background: var(--surface2); border-color: var(--border); }
.btn-warning { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); }
.btn-warning:hover { background: var(--amber-border); color: var(--amber); border-color: var(--amber); }
/* Stand-out yellow call-to-action (e.g. acknowledge a note). Fixed colours so it reads the
   same friendly yellow in light + dark, with a gentle deepen on hover (no filter washing). */
.btn-ack { background: #f5b301; border-color: #f5b301; color: #2a1d00; font-weight: 600; }
.btn-ack:hover, .btn-ack:focus { background: #e3a400; border-color: #e3a400; color: #2a1d00; }
.btn-danger { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-danger-ghost { border-color: transparent; background: transparent; color: var(--text3); }
.btn-danger-ghost:hover { color: var(--red); background: var(--red-bg); }
.btn-full { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-xs { padding: 4px 8px; font-size: 11px; }
.back-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--text2); cursor: pointer;
    background: none; border: none; padding: 0; margin-bottom: 1rem;
    font-family: inherit; transition: color .15s;
}
.back-btn:hover { color: var(--navy); }

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem 1.375rem; margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.card-title { font-size: 14px; font-weight: 700; margin-bottom: .875rem; display: flex; align-items: center; gap: 6px; }
.card-progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.alert-card { border-left: 3px solid; }
.alert-card.amber { border-left-color: var(--gold); background: var(--amber-bg); }
.alert-card.amber .card-title { color: var(--amber); }

/* ── STATS ──────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-bottom: 1.25rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.125rem 1.25rem; box-shadow: var(--shadow); }
.stat-num { font-size: 30px; font-weight: 800; color: var(--blue); line-height: 1.1; }
.stat-label { font-size: 11px; color: var(--text2); margin-top: 6px; font-weight: 600; }

/* ── PROGRESS BARS ──────────────────────────────────────────────────────── */
.progress-bar-wrap { background: var(--surface2); border-radius: 20px; height: 8px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--navy), var(--blue)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.progress-bar-fill.gold { background: linear-gradient(90deg, var(--gold), #E5A800); }

/* ── TAGS ───────────────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.tag.success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.tag.warning { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.tag.danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.tag.blue { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(46,109,180,.25); }
.tag.navy { background: rgba(27,58,107,.1); color: var(--navy); border: 1px solid rgba(27,58,107,.2); }
.tag.gray { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.tag.purple { background: var(--purple-bg); color: var(--purple); border: 1px solid rgba(60,52,137,.2); }
.tag.amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px; font-weight: 700; padding: 0 4px; }
.badge.amber { background: var(--gold); color: #fff; }

/* ── PHASE BLOCKS ───────────────────────────────────────────────────────── */
.phase-block { margin-bottom: 10px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.phase-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; cursor: pointer; user-select: none; transition: filter .15s; }
.phase-header:hover { filter: brightness(.97); }
.phase-title { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.phase-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.phase-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 10px; }
.phase-count { font-size: 12px; color: var(--text2); white-space: nowrap; font-weight: 500; }
.phase-pb { width: 70px; }
.phase-body { background: var(--surface); padding: 4px 12px 12px; border-top: 1px solid var(--border); }

/* ── ITEMS ──────────────────────────────────────────────────────────────── */
.module-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .07em; padding: 10px 6px 4px; }
.section-cat { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; padding: 6px 6px 2px; }
.item-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); transition: background .1s; }
.item-row:hover { background: var(--surface2); }
.item-row.done .item-text { color: var(--text3); text-decoration: line-through; }
.item-row.flagged { background: var(--amber-bg); }
.item-row.flagged .item-text { color: var(--amber); }
.item-row input[type=checkbox] { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--navy); cursor: pointer; }
.item-content { flex: 1; min-width: 0; }
.item-text { font-size: 13px; color: var(--text); line-height: 1.5; display: block; }
.item-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.item-link { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--blue); padding: 2px 7px; border-radius: 20px; background: rgba(46,109,180,.1); border: 1px solid rgba(46,109,180,.2); transition: all .15s; text-decoration: none; }
.item-link:hover { background: rgba(46,109,180,.2); text-decoration: none; }
.quiz-required-note { font-size: 11px; color: var(--blue); font-weight: 600; margin-left: 4px; }
.quiz-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; border: 1.5px solid var(--blue); background: rgba(46,109,180,.1); color: var(--blue); cursor: pointer; transition: all .15s; font-family: inherit; }
.quiz-btn:hover { background: var(--blue); color: #fff; }
.quiz-btn.passed { border-color: var(--green); background: var(--green-bg); color: var(--green); cursor: default; }
.quiz-btn.passed:hover { background: var(--green-bg); color: var(--green); }
.quiz-attempt-info { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text3); }
.flag-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--border); background: none; cursor: pointer; color: var(--text3); transition: all .15s; font-family: inherit; }
.flag-btn:hover { border-color: var(--amber-border); color: var(--amber); background: var(--amber-bg); }
.flag-btn.active { border-color: var(--amber-border); color: var(--amber); background: var(--amber-bg); }

/* ── VIDEO EMBED ────────────────────────────────────────────────────────── */
.video-embed-toggle { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; margin-top: 6px; }
.video-thumb { width: 48px; height: 36px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-title-small { font-size: 12px; font-weight: 500; flex: 1; min-width: 0; }
.video-embed-wrap { margin-top: 6px; }
.video-iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: var(--radius-sm); }

/* ── STUDENT LIST ───────────────────────────────────────────────────────── */
.student-row { display: flex; align-items: center; gap: 12px; padding: 16px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background .1s; border: 1px solid transparent; }
.student-row:hover { background: var(--surface2); border-color: var(--border); }
.student-row.archived { opacity: .6; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.student-info { flex: 1; min-width: 0; }
.student-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.student-name { font-size: 14px; font-weight: 700; }
.student-course { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* Simple data grid (waitlist, and reusable) */
.wl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wl-table th { text-align: left; padding: 8px 12px; color: var(--text2); font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.wl-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.wl-table tbody tr:hover { background: var(--surface2); }
.wl-table th.sortable { cursor: pointer; user-select: none; }
.wl-table th.sortable:hover { color: var(--text); }

/* Course-builder "how it works" guide (shown when a course has no phases yet) */
.builder-guide { background: var(--blue-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.builder-guide-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.builder-guide p { font-size: 13px; color: var(--text); margin: 6px 0; }
.builder-guide ul { margin: 6px 0; padding-left: 20px; }
.builder-guide li { font-size: 13px; color: var(--text2); margin: 4px 0; }
.builder-guide-foot { color: var(--text2); }

/* "Not yet enrolled" rows on the instructor dashboard: avatar + name (flex, ellipsis)
   on the left, enroll control + Archive pinned right. Dedicated layout so the select
   (which is .form-input width:100%) can't expand and crush the name. */
.enroll-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 6px; }
.enroll-row .student-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enroll-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.enroll-select { width: auto; min-width: 200px; }
.enroll-hint { font-size: 12px; color: var(--text3); }
@media (max-width: 560px) {
    .enroll-row { flex-wrap: wrap; }
    .enroll-controls { width: 100%; margin-left: 52px; }
    .enroll-select { flex: 1; min-width: 0; }
}
.student-meta-small { font-size: 12px; color: var(--text2); }
.student-last-active { font-size: 11px; color: var(--text3); margin-top: 2px; }
.progress-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.progress-text { font-size: 12px; color: var(--text2); font-weight: 500; }
.attention-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--amber-border); font-size: 13px; cursor: pointer; }
.attention-item > span:first-child { min-width: 0; }
.attention-item .tag, .attention-item .badge { flex-shrink: 0; }

/* ── STUDENT DETAIL ─────────────────────────────────────────────────────── */
.student-detail-header .student-header-content { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.student-header-info { flex: 1; min-width: 0; }
.student-header-info h2 { font-size: 18px; font-weight: 700; }
.student-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.student-header-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.manage-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.manage-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.manage-toggle .control-label { cursor: pointer; }
.manage-toggle .ti-chevron-down { color: var(--text3); transition: transform .15s; }
.manage-body { margin-top: 1.25rem; padding-bottom: 6px; display: flex; flex-direction: column; gap: 14px; }
.checkride-date { font-size: 13px; color: var(--text2); margin-top: 4px; display: flex; align-items: center; gap: 4px; }

.detail-tabs { display: flex; gap: 4px; background: var(--surface2); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid var(--border); }
.detail-tab { flex: 1; text-align: center; padding: 8px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text2); background: none; border: none; transition: all .15s; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 5px; }
.detail-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px; font-weight: 700; background: var(--blue); color: #fff; padding: 0 4px; }
/* Muted count (not a "new"/unread signal) — e.g. instructor's total lesson-note count. */
.tab-badge.muted { background: var(--surface3); color: var(--text2); }

.detail-phase { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.detail-phase-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; transition: background .1s; }
.detail-phase-header:hover { background: var(--surface2); }
.detail-phase-body { padding: 8px 14px 12px; border-top: 1px solid var(--border); }
.detail-module-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .07em; padding: 8px 0 2px; }
.detail-cat { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0 2px; }
.detail-item { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; }
.detail-item-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-size: 10px; }
.detail-item-icon.done { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.detail-item-icon.todo { background: var(--surface2); color: var(--text3); border: 1px solid var(--border); }
.detail-item-icon.flagged { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.detail-item-text { font-size: 13px; line-height: 1.5; color: var(--text); }
.detail-item-text.done { color: var(--text3); }
.flagged-item { padding: 5px 0; border-bottom: 1px solid var(--amber-border); font-size: 13px; display: flex; align-items: center; gap: 6px; }

/* ── FLIGHT NOTES ───────────────────────────────────────────────────────── */
.note-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .5rem; overflow: hidden; }
.note-header { display: flex; align-items: center; gap: 10px; padding: .75rem 1rem; cursor: pointer; transition: background .15s; user-select: none; }
.note-header:hover { background: var(--surface3); }
.note-title { font-size: 13px; font-weight: 700; color: var(--text); }
.note-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3); margin-top: 3px; }
.note-body { padding: .5rem 1rem 1rem; font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.note-form { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; }
.ti-chevron-down { transition: transform .2s; }
.ti-chevron-down.open { transform: rotate(180deg); display: inline-block; }

/* ── QUIZ HISTORY ───────────────────────────────────────────────────────── */
.quiz-history-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.quiz-history-row:last-child { border-bottom: none; }
.quiz-history-title { font-size: 13px; font-weight: 600; }
.quiz-history-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }

/* ── QUIZ MODAL ─────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-lg { max-width: 720px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 15px; font-weight: 700; }
.modal-body { padding: 1.25rem; }
/* Report screenshots: attach control (modal) + admin thumbnail. */
.screenshot-attach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.screenshot-thumb { max-width: 100%; max-height: 160px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: block; }
.report-shot-thumb { max-width: 180px; max-height: 130px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; display: block; cursor: zoom-in; }

/* Inline help tooltip (HelpTip.razor): hover on desktop, tap/focus on mobile. */
.help-tip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; color: var(--text3); cursor: help; outline: none; }
.help-tip .ti { font-size: 15px; }
.help-tip:hover, .help-tip:focus-visible { color: var(--blue); }
.help-tip-bubble {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--text); color: var(--bg);
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left;
    text-transform: none; letter-spacing: normal;
    width: max-content; max-width: 240px;
    box-shadow: var(--shadow-lg); z-index: 300;
    opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.help-tip:hover .help-tip-bubble, .help-tip:focus-within .help-tip-bubble { opacity: 1; visibility: visible; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.quiz-header { background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; padding: 1.25rem 1.5rem; border-radius: var(--radius) var(--radius) 0 0; }
.quiz-header-title { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.quiz-progress-bar { height: 4px; background: rgba(255,255,255,.25); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.quiz-progress-bar div { height: 100%; background: #fff; border-radius: 2px; transition: width .3s; }
.quiz-body { padding: 1.5rem; }
.quiz-q-num { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.quiz-q-text { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 1.25rem; }
.quiz-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: all .15s; }
.quiz-option:hover { border-color: var(--blue); background: rgba(46,109,180,.05); }
.quiz-option.selected { border-color: var(--blue); background: rgba(46,109,180,.1); }
.quiz-option.correct { border-color: var(--green); background: var(--green-bg); cursor: default; }
.quiz-option.incorrect { border-color: var(--red); background: var(--red-bg); cursor: default; }
.quiz-option.faded { opacity: .5; cursor: default; }
.quiz-option-letter { width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--text2); }
.quiz-option.selected .quiz-option-letter { background: var(--blue); border-color: var(--blue); color: #fff; }
.quiz-option.correct .quiz-option-letter { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-option.incorrect .quiz-option-letter { background: var(--red); border-color: var(--red); color: #fff; }
.quiz-option-text { font-size: 14px; color: var(--text); line-height: 1.4; padding-top: 2px; }
.quiz-explanation { background: var(--gold-light); border: 1px solid rgba(200,150,12,.3); border-radius: var(--radius-sm); padding: .875rem 1rem; margin-top: 1rem; font-size: 13px; color: var(--amber); line-height: 1.6; display: none; }
.quiz-explanation.show { display: block; }
.quiz-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--border); gap: 10px; }
.quiz-score-screen { padding: 2rem 1.5rem; text-align: center; }
.quiz-score-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 4px solid; }
.quiz-score-circle.pass { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.quiz-score-circle.fail { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.score-pct { font-size: 28px; font-weight: 800; }
.score-fraction { font-size: 12px; font-weight: 500; }
.quiz-result-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.quiz-result-msg { font-size: 13px; color: var(--text2); max-width: 380px; margin: 0 auto; line-height: 1.6; }
.xp-earned { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-light); border: 1px solid rgba(200,150,12,.3); border-radius: 20px; padding: 5px 14px; font-size: 14px; font-weight: 700; color: var(--amber); margin-bottom: 12px; }

/* ── GAMIFICATION ───────────────────────────────────────────────────────── */
.xp-row { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.streak-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #FF6B2B, #FF9A3C); color: #fff; border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(255,107,43,.3); }
.xp-block { flex: 1; min-width: 180px; }
.xp-meta { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text2); }
.level-name { font-size: 12px; color: var(--text3); }
.xp-to-next { font-size: 11px; color: var(--text3); margin-top: 3px; }
.milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: .75rem; }
.milestone { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .6rem; display: flex; align-items: center; gap: 8px; }
.milestone.earned { background: var(--gold-light); border-color: rgba(200,150,12,.35); }
.milestone-icon { font-size: 16px; flex-shrink: 0; filter: grayscale(1); opacity: .4; }
.milestone.earned .milestone-icon { filter: none; opacity: 1; }
.milestone-name { font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.milestone.earned .milestone-name { color: var(--amber); }
.milestone-check { margin-left: auto; font-size: 14px; color: var(--gold); flex-shrink: 0; }

/* ── COURSE CARDS ───────────────────────────────────────────────────────── */
.course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: .75rem; cursor: pointer; transition: all .15s; box-shadow: var(--shadow); }
.course-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.course-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.course-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.course-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.course-description { font-size: 13px; color: var(--text2); margin-top: 8px; }
.course-tabs { display: flex; gap: 4px; margin-bottom: 1rem; }
.course-tab { flex: 1; padding: 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text2); background: var(--surface); border: 1px solid var(--border); transition: all .15s; font-family: inherit; }
.course-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.course-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.course-row:last-child { border-bottom: none; }

/* ── CURRICULUM EDITOR ──────────────────────────────────────────────────── */
.curriculum-editor {}
.editor-phase { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow); }
.editor-phase-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface2); }
.editor-phase-title { font-size: 14px; font-weight: 700; }
.builder-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
/* Collapsible card section header (caret + title + count), full-width clickable. */
.section-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font-family: inherit; text-align: left; }
.section-toggle .ti-chevron-down { color: var(--text3); font-size: 16px; }
.section-toggle .tag { margin-left: auto; }

/* Phase color picker: preset swatches + custom input below. */
.color-palette { display: flex; flex-direction: column; gap: 8px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.color-swatch { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; transition: transform .1s; }
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.sel { outline: 2px solid var(--text); outline-offset: 2px; }
.color-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); cursor: pointer; }
/* Stacked phase editors so the title, palette, and actions sit on their own rows. */
.phase-edit { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: flex-start; }
.add-phase-form.stacked { flex-direction: column; align-items: stretch; }
.phase-collapse-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font-family: inherit; text-align: left; }
.phase-collapse-btn .ti-chevron-down { font-size: 16px; color: var(--text3); }
.editor-module { margin: 4px 0 14px; }
.editor-module-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; }
.module-label-edit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); }
/* Module contents step in from the module heading so the hierarchy is legible. */
.editor-module-body { padding: 0 12px 0 28px; }
.editor-section { margin: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.editor-section-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--surface2); }
.section-cat-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.section-cat-badge.reading { background: var(--blue-bg); color: var(--blue); }
.section-cat-badge.video { background: var(--red-bg); color: var(--red); }
.section-cat-badge.practice { background: var(--green-bg); color: var(--green); }
.section-cat-badge.document { background: var(--purple-bg); color: var(--purple); }
.editor-item { padding: 4px 8px; border-radius: var(--radius-sm); }
.editor-item:hover { background: var(--surface2); }
.item-display { display: flex; align-items: center; gap: 8px; }
/* ── Groups (containers) vs content (checkable leaves) ── */
/* Builder: a group is a clean heading with a softly-indented body (not a filled
   pill-row — that read as a file tree). */
.editor-group { margin: 8px 0 2px; }
.editor-group-header { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); }
.editor-group-header:hover { background: var(--surface2); }
.editor-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text2); }
.editor-group-header.top { border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.editor-group-header.top .editor-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); }
.editor-group-count { font-size: 11px; font-weight: 500; color: var(--text3); }
.editor-group-body { margin-left: 14px; padding-left: 0; }
/* Add affordances recede until hovered, so they don't dominate the structure. */
.add-item-row { display: flex; gap: 2px; padding: 2px 6px 6px; flex-wrap: wrap; }
.add-item-row .btn { color: var(--text3); font-size: 11px; }
.add-item-row .btn:hover { color: var(--blue); background: var(--blue-bg); }

/* Student view / preview: a module's contents step in from its heading, and a
   group's children step in again — so it's clear what sits under what. */
.module-items { padding-left: 16px; }
.item-children { margin-left: 16px; }
.course-group { margin: 14px 0 2px; }
.course-group-header { display: flex; align-items: center; gap: 8px; padding: 2px 2px 5px; }
.course-group-header.top { border-bottom: 1px solid var(--border); }
.course-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text2); }
.course-group-header.top .course-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); }
.course-group-count { font-size: 11px; font-weight: 500; color: var(--text3); background: var(--surface2); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }

/* Instructor read-only progress view: group heading. */
.detail-group { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text2); padding: 6px 0 2px; }
.item-type-icon { font-size: 14px; flex-shrink: 0; }
.item-title { font-size: 13px; flex: 1; min-width: 0; }
.item-edit-form { padding: 8px 0; }
.editor-actions { display: flex; align-items: center; gap: 6px; }
.editor-actions-sm { display: flex; align-items: center; gap: 4px; }
.add-module-btn, .add-section-btn { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--blue); background: none; border: 1px dashed rgba(46,109,180,.3); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; width: 100%; margin: 6px 16px; width: calc(100% - 32px); font-family: inherit; transition: all .15s; }
.add-module-btn:hover, .add-section-btn:hover { background: rgba(46,109,180,.05); border-color: var(--blue); }
.add-phase-form, .add-module-form, .add-section-form { padding: 12px 16px; background: var(--surface2); border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-edit { font-size: 14px; font-weight: 700; border: 1px solid var(--blue); border-radius: 4px; padding: 4px 8px; background: var(--surface); color: var(--text); font-family: inherit; flex: 1; }
.course-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 1.25rem; flex-wrap: wrap; }
.course-title-input { font-size: 20px; font-weight: 700; border: none; border-bottom: 2px solid var(--border); background: transparent; color: var(--text); font-family: inherit; padding: 4px 0; outline: none; width: 100%; }
.course-title-input:focus { border-bottom-color: var(--blue); }
.editor-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.settings-panel { background: var(--surface2); }

/* ── Mobile sweep: course builder + waitlist filters ─────────────────────── */
@media (max-width: 640px) {
    /* Curriculum editor: stack each header's label and its action buttons so
       titles aren't crushed to one-word-per-line by the move/edit/delete cluster. */
    .editor-phase-header,
    .editor-module-header,
    .editor-section-header { flex-wrap: wrap; gap: 8px; }
    .editor-phase-title,
    .module-label-edit { flex: 1 1 auto; min-width: 0; }
    .editor-actions-sm { margin-left: auto; flex-shrink: 0; }

    /* Item rows: title on its own line, actions beneath aligned right. */
    .item-display { flex-wrap: wrap; }
    .item-title { flex: 1 1 100%; }
    .item-display .editor-actions-sm { width: 100%; justify-content: flex-end; }

    /* Top editor header + its action cluster wrap to full width. */
    .course-editor-header > div:first-child { flex: 1 1 100%; }
    /* Constrain the actions to full width so the inner buttons actually wrap
       (flex-wrap alone doesn't, since flex-shrink:0 sizes it to max-content). */
    .editor-actions { flex-wrap: wrap; flex-basis: 100%; }

    /* Add/edit forms stack; inline rename input goes full width. */
    .add-phase-form, .add-module-form, .add-section-form { flex-direction: column; align-items: stretch; }
    .inline-edit { flex: 1 1 100%; width: 100%; }

    /* Trim nested indentation so deeply nested items keep usable width. */
    .editor-module { margin: 8px; }
    .editor-section { margin: 6px; }
    .add-module-btn, .add-section-btn { width: calc(100% - 16px); margin: 6px 8px; }

    /* Waitlist filter toolbar: stack the cert/search/export controls full-width. */
    .wl-filters { gap: 8px; }
    .wl-filters .form-group { min-width: 0 !important; flex: 1 1 100%; }
    .wl-filters > .btn { margin-left: 0 !important; width: 100%; }
}

/* ── QUIZ EDITOR ────────────────────────────────────────────────────────── */
.quiz-question-editor { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; }
.quiz-q-num-editor { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 8px; }
.option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.option-row input[type=radio] { flex-shrink: 0; accent-color: var(--green); }

/* ── ALERTS ─────────────────────────────────────────────────────────────── */
.alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 1rem; }
.alert-danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.alert-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.info-box { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .875rem 1rem; font-size: 13px; color: var(--text2); line-height: 1.6; }

/* ── LOADING ────────────────────────────────────────────────────────────── */
.loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 1rem; color: var(--text2); font-size: 14px; }
.loading-state { display: flex; justify-content: center; padding: 3rem; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; }
.spinner-sm { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Blazor reconnect overlay — hidden until Blazor adds a state class to the modal. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; inset: 0; z-index: 99999;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.45);
}
.reconnect-box { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 220px; padding: 24px 28px; background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow); }
.reconnect-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.reconnect-text { font-size: 14px; color: var(--text2); }
.reconnect-failed-text { display: none; font-size: 13px; color: var(--text2); }
#components-reconnect-modal.components-reconnect-failed .reconnect-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-text { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-text { display: block; }

/* ── ARCHIVED ───────────────────────────────────────────────────────────── */
.archived-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; }
.archived-section summary { font-size: 13px; color: var(--text2); cursor: pointer; font-weight: 500; }

/* ── EMPTY STATES ───────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 2rem; color: var(--text2); font-size: 13px; }
.empty-state i { font-size: 32px; color: var(--text3); display: block; margin-bottom: .5rem; }
.empty-state-large { text-align: center; padding: 4rem 2rem; }
.empty-state-large i { font-size: 48px; color: var(--text3); display: block; margin-bottom: 1rem; }
.empty-state-large h2 { font-size: 20px; font-weight: 700; margin-bottom: .5rem; }
.empty-state-large p { color: var(--text2); margin-bottom: 1.5rem; }
.not-found { text-align: center; padding: 4rem; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
/* Mobile shell (hidden on desktop) */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* ── Top bar → hamburger ──────────────────────────────────────────────────
   The desktop right-cluster (feedback + workspace pill + name + buttons) is
   heavy, so the bar needs to collapse to a hamburger well before phone widths
   to avoid cramming. Everything secondary moves into the slide-down menu. */
@media (max-width: 1024px) {
    .app-header { padding: 0 1rem; }   /* clear the right-edge gutter; align with .app-body */
    .header-left { gap: 6px; min-width: 0; }
    .app-sidebar { display: none; }           /* sidebar → hamburger menu */
    .app-main { padding-left: 0; }            /* reclaim the sidebar gutter */
    .nav-toggle { display: flex; }            /* hamburger */
    .header-title-block { display: none; }    /* logo carries identity */
    .header-nav { display: none; }            /* desktop tabs → into the menu */
    .header-right { gap: 6px; min-width: 0; }
    .header-right .btn-feedback { display: none; }   /* → menu (specificity beats later base rule) */
    .header-right .ws-switcher { display: none; }    /* → menu */
    .user-info { display: none; }
    .user-menu .btn-icon { display: none; }   /* change-pw + sign out → menu */
    .btn-icon { width: 40px; height: 40px; }  /* ≥44px-ish touch targets */

    /* The slide-down menu */
    /* Full-height fixed panel so only the menu scrolls — the page behind doesn't
       scroll under it (was position:absolute + max-height, which let both scroll). */
    .mobile-menu {
        display: none;
        position: fixed; top: 58px; left: 0; right: 0; bottom: 0;
        background: var(--surface);
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
        padding: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 250;
    }
    .app-header.menu-open .mobile-menu { display: block; }
    .mobile-menu-nav { display: flex; flex-direction: column; gap: 2px; }
    .mobile-menu .nav-link { color: var(--text); padding: 12px 14px; font-size: 15px; }
    .mobile-menu .nav-link:hover,
    .mobile-menu .nav-link.active { background: var(--surface2); color: var(--text); }
    .mobile-menu-sep { height: 1px; background: var(--border); margin: 8px 4px; }
    .mobile-menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); padding: 6px 14px 2px; }
    .mobile-menu-item {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 12px 14px; border: none; background: none; cursor: pointer;
        font-family: inherit; font-size: 15px; color: var(--text); text-align: left;
        border-radius: var(--radius-sm);
    }
    .mobile-menu-item:hover, .mobile-menu-item.active { background: var(--surface2); }
    .mobile-menu-item .ti { font-size: 18px; color: var(--text2); }

    /* Keep the notifications panel on-screen instead of overflowing off the right */
    .notif-panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-width: none; }
    /* Same for the account dropdown */
    .user-panel { position: fixed; top: 58px; left: 8px; right: 8px; min-width: 0; }
    .user-menu-caret { display: none; }
}

/* ── Phone content/layout ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-num { font-size: 20px; }
    .app-body { padding: 1rem; }
    .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
    .view-toggle { display: none; }
    .modal-overlay { padding: .5rem; }   /* box is width:100%; gutter via overlay padding (not box margin → no overflow) */
    /* Prevent iOS zoom-on-focus — form fields must be ≥16px on mobile */
    .form-input, .form-input-sm { font-size: 16px; }

    /* Student-detail header: tidy the crammed card on phones.
       Actions become an even 2-col grid; the per-course instructor select goes
       full width with its label stacked above it. */
    .student-header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .student-header-actions .btn { width: 100%; justify-content: center; }
    .course-instructor-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .course-instructor-row .form-input { max-width: none !important; width: 100%; }

    /* Tabs stay on one line (no "Lesson notes" wrap). */
    .detail-tabs { gap: 2px; }
    .detail-tab { padding: 8px 4px; font-size: 12px; gap: 4px; white-space: nowrap; }
    .detail-tab .ti { font-size: 14px; }
}

/* ── Note acknowledgment ─────────────────────────────────────────────────── */
.note-ack-row { display: flex; align-items: center; padding: 8px 14px 12px; border-top: 0.5px solid var(--border); margin-top: 4px; }
.note-ack-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green); font-weight: 500; }
.note-ack-done .ti { font-size: 14px; }

/* ── Notification bell + panel ───────────────────────────────────────────── */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--radius-sm); background: var(--red); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.notif-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
    width: 340px; max-height: 420px; overflow-y: auto;
    background: var(--surface); color: var(--text);
    border: 0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
/* Keep the notifications panel on-screen on mobile. This re-asserts the fixed,
   full-width panel AFTER the base rule above (which otherwise wins by source order
   over the same override inside the earlier max-width:1024px block). */
@media (max-width: 1024px) {
    .notif-panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-width: none; }
}
.notif-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 0.5px solid var(--border);
    font-weight: 600; font-size: 14px; position: sticky; top: 0; background: var(--surface);
}
.notif-mark-all { background: none; border: none; color: var(--blue); font-size: 12px; cursor: pointer; font-family: inherit; }
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { display: flex; flex-direction: column; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--text3); font-size: 13px; }
.notif-item { padding: 10px 14px; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: background .12s; }
.notif-item:hover { background: var(--surface2); }
.notif-item.unread { background: var(--blue-bg); }
.notif-item.unread:hover { background: rgba(46,109,180,.14); }
.notif-item-title { font-size: 13px; font-weight: 500; color: var(--text); }
.notif-item-body { font-size: 12px; color: var(--text2); margin-top: 2px; line-height: 1.4; }
/* One change per line, stacked tight — bold label pops (full text color), value stays muted,
   no inter-line margin so several lines (Now / Previously / Aircraft / Instructor / Reason)
   don't make the notification tall. */
.notif-item-body > div { margin: 0; }
.notif-item-body strong { color: var(--text); font-weight: 600; }
/* The "Previously:" reference line is de-emphasized (smaller + muted, label included) so the new
   value reads first. Placed after the strong rule so it overrides the label color. */
.notif-line-prev { font-size: 11px; }
.notif-line-prev, .notif-line-prev strong { color: var(--text3); }
/* Booking modal: pair select fields (student/instructor, aircraft/purpose) into an auto-fit grid
   so they sit 2-up and the form fits without scrolling; a lone field spans the full width. */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
/* Toggle switch (pill slider) — used for on/off settings instead of a bare checkbox. */
.setting-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; cursor: pointer; }
.setting-toggle-row.disabled { cursor: not-allowed; opacity: .6; }
.setting-toggle-text { flex: 1; min-width: 0; }
.toggle { position: relative; display: inline-flex; flex-shrink: 0; margin-top: 2px; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.toggle-track { width: 40px; height: 22px; border-radius: 999px; background: var(--border); transition: background .15s; position: relative; }
.toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.toggle input:checked + .toggle-track { background: var(--blue); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--blue-bg); }
.bk-grid > .form-group { margin-bottom: 0; }
/* Flight action bar (lifecycle actions, separated from the dialog's Close/Save). */
.bk-actionbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0 12px; margin-bottom: 12px; border-bottom: 0.5px solid var(--border); }
.bk-actionbar .bk-actions-label { font-size: 12px; color: var(--text3); margin-right: 2px; }
.notif-item-time { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* ── Nav badge (Notes tab) ───────────────────────────────────────────────── */
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
    border-radius: 9px; background: #f5b301; color: #2a1d00;
    font-size: 11px; font-weight: 700; line-height: 18px;
}
/* Dark mode: keep the notes badge the original gold, and deepen the acknowledge-button
   hover a touch beyond its light-mode hover. */
:root[data-theme="dark"] .nav-badge { background: var(--gold); color: #1B3A6B; }
:root[data-theme="dark"] .btn-ack:hover,
:root[data-theme="dark"] .btn-ack:focus { background: #cf9600; border-color: #cf9600; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .nav-badge { background: var(--gold); color: #1B3A6B; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .btn-ack:hover,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .btn-ack:focus { background: #cf9600; border-color: #cf9600; }
}

/* ── Dashboard notes nudge ───────────────────────────────────────────────── */
.notes-nudge {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.notes-nudge:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.notes-nudge-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.notes-nudge-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--blue); white-space: nowrap; }

/* ── Notes master-detail layout ──────────────────────────────────────────── */
.notes-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.notes-list {
    background: var(--surface); border: 0.5px solid var(--border);
    border-radius: var(--radius); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.notes-list-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px; border-bottom: 0.5px solid var(--border);
    cursor: pointer; transition: background .12s;
}
.notes-list-item:last-child { border-bottom: none; }
.notes-list-item:hover { background: var(--surface2); }
.notes-list-item.active { background: var(--blue-bg); }
.notes-list-dot { width: 10px; flex: 0 0 10px; padding-top: 5px; }
.notes-list-dot .dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #C8920F); }
.notes-list-main { min-width: 0; }
.notes-list-title { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-list-item.unacked .notes-list-title { font-weight: 600; }
.notes-list-meta { font-size: 12px; color: var(--text3); margin-top: 2px; }
.notes-reader {
    background: var(--surface); border: 0.5px solid var(--border);
    border-radius: var(--radius); padding: 20px; min-height: 240px;
}
.notes-reader-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text3); min-height: 200px; }
.notes-reader-back { display: none; margin-bottom: 12px; }
.notes-reader-head h2 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.notes-reader-body { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

/* Responsive: collapse to single column, list-then-reader */
@media (max-width: 720px) {
    .notes-layout { grid-template-columns: 1fr; }
    .notes-layout.reading .notes-list { display: none; }
    .notes-layout:not(.reading) .notes-reader { display: none; }
    .notes-reader-back { display: inline-flex; }
    .notes-list { max-height: none; }
}

/* ── Theme transition & toggle ───────────────────────────────────────────── */
body, .card, .app-header, .login-box, .notes-list, .notes-reader,
.notif-panel, .stat, .student-row, .modal-box {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.theme-toggle .ti { font-size: 18px; }

/* Dark-mode foreground fixes: a few elements use --navy as a text/accent color,
   which is intentionally dark for the header but unreadable on dark surfaces.
   Override just those to a readable tone in dark mode. */
:root[data-theme="dark"] .back-btn:hover { color: var(--blue); }
:root[data-theme="dark"] .tag.navy {
    background: rgba(91,155,224,.14); color: var(--blue); border-color: rgba(91,155,224,.3);
}
:root[data-theme="dark"] .item-row input[type=checkbox] { accent-color: var(--blue); }
:root[data-theme="dark"] .spinner { border-top-color: var(--blue); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .back-btn:hover { color: var(--blue); }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .tag.navy {
        background: rgba(91,155,224,.14); color: var(--blue); border-color: rgba(91,155,224,.3);
    }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .item-row input[type=checkbox] { accent-color: var(--blue); }
    :root:not([data-theme="light"]):not([data-theme="dark"]) .spinner { border-top-color: var(--blue); }
}

/* ── Segmented toggle (invite vs manual, etc.) ───────────────────────────── */
.seg-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface2); }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; background: transparent; border: none; color: var(--text2); cursor: pointer; transition: background .15s, color .15s; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--blue); color: #fff; }
.seg-btn:not(:last-child) { border-right: 1px solid var(--border); }

/* ── Document lists (course resources) ───────────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.doc-row-btn { width: 100%; text-align: left; cursor: pointer; transition: background .15s; font: inherit; color: inherit; }
.doc-row-btn:hover { background: var(--surface3); }
.doc-icon { font-size: 22px; color: var(--blue); flex-shrink: 0; }
.doc-meta { flex: 1; min-width: 0; }
.doc-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { font-size: 12px; color: var(--text2); margin-top: 1px; }

/* ── Problem report cards ────────────────────────────────────────────────── */
.report-card.resolved { opacity: .6; }
.report-card.resolved:hover { opacity: 1; }

/* ── Student courses home + completion ───────────────────────────────────── */
.section-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 14px;
}
.course-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.course-home-card {
    width: 100%;
    text-align: left;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 140px;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}
.course-home-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--blue);
}
.course-home-card.completed::before { background: var(--green); }
.course-home-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    border-color: var(--blue);
}
.course-home-card.completed:hover { border-color: var(--green); }
.course-home-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.course-home-card-top > i { font-size: 26px; color: var(--blue); }
.course-home-card.completed .course-home-card-top > i { color: var(--green); }
.course-home-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    flex: 1;
}
.course-home-card-meta {
    font-size: 13px;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.course-home-card:hover .course-home-card-meta { color: var(--blue); }
.course-home-card.completed:hover .course-home-card-meta { color: var(--green); }

/* Enrollment chips on the admin/instructor students list */
.enroll-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.enroll-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
    max-width: 240px;
}
.enroll-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enroll-chip:hover { border-color: var(--blue); background: var(--blue-bg); }
.enroll-chip.completed { background: var(--green-bg); border-color: var(--green-border); }
.enroll-chip.completed > i { color: var(--green); }

/* Success button */
.btn-success { background: var(--success-btn, var(--green)); color: #fff; border: 1px solid var(--success-btn, var(--green)); }
.btn-success:hover { background: var(--success-btn-hover, var(--green-hover)); border-color: var(--success-btn-hover, var(--green-hover)); color: #fff; }

/* ── Admin/instructor manage-student card (stacked) ──────────────────────── */
/* ── Shared list row (Team / Instructors / Students etc.) ─────────────────── */
.list-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
    transition: border-color .12s ease;
}
.list-row.clickable { cursor: pointer; }
.list-row.clickable:hover { border-color: var(--blue); }
.list-row-main { flex: 1; min-width: 0; }
.list-row-name { font-weight: 600; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-row-sub { font-size: 12px; color: var(--text3); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.list-row-chevron { color: var(--text3); flex-shrink: 0; font-size: 18px; }
.list-section-title { font-size: 13px; font-weight: 600; color: var(--text2); margin: 1.25rem 0 .5rem; display: flex; align-items: center; gap: 6px; }
.list-search { position: relative; max-width: 360px; margin-bottom: 1rem; }
.list-search > .ti { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 16px; pointer-events: none; }
.list-search .form-input { padding-left: 32px; }

/* Clickwrap gate + legal pages */
.agree-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 2.5rem 1rem; min-height: 100vh; }
.agree-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text2); cursor: pointer; }
.agree-check input { margin-top: 3px; flex-shrink: 0; }
.legal-doc { max-width: 800px; margin: 0 auto; line-height: 1.65; color: var(--text); }
.legal-doc h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.legal-doc h2 { font-size: 16px; font-weight: 700; margin: 1.4rem 0 .4rem; }
.legal-doc p, .legal-doc li { font-size: 14px; color: var(--text2); }
.legal-doc ul { margin: .3rem 0 .3rem 1.25rem; }
.legal-doc .legal-meta { font-size: 12px; color: var(--text3); margin-bottom: 1rem; }
.legal-doc .legal-check { margin-top: 1.25rem; padding: 12px 14px; background: var(--surface2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); }

.student-manage-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--surface);
    transition: border-color .12s ease;
}
.student-manage-card:hover { border-color: var(--border-strong, var(--border)); }
.student-manage-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.student-manage-top .student-info { flex: 1; min-width: 0; }
.student-manage-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.control-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    flex: 1;
    max-width: 280px;
}
.control-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text3);
}

/* ── Instructor dashboard: grouped student rows ──────────────────────────── */
.student-group {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--surface);
}
.student-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.student-group-head .student-info { flex: 1; min-width: 0; }
/* Compact avatars in roster rows (the 64px profile-header avatar is inline-sized). */
.student-group-head .avatar, .enroll-row .avatar { width: 34px; height: 34px; font-size: 13px; }
.student-course-list { display: flex; flex-direction: column; gap: 6px; }
.course-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    cursor: pointer;
    transition: background .1s ease;
}
.course-progress-row:hover { background: var(--blue-bg); }
.course-progress-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.course-progress-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-progress-main .tag { flex-shrink: 0; }
/* Mobile: stack the course row so the title isn't crushed to one-word-per-line. */
@media (max-width: 640px) {
    .course-progress-row { flex-wrap: wrap; }
    .course-progress-row .course-progress-main { flex: 1 1 100%; }
    .course-progress-row .progress-row { flex: 1 1 100%; margin-top: 8px; }
    .course-progress-row > .ti-chevron-right { display: none; }
    .course-progress-title { white-space: normal; overflow: visible; }
    .course-progress-row .progress-bar-wrap { max-width: none !important; }
}
.course-instructor-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Notes: course grouping + flight meta ────────────────────────────────── */
.notes-course-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text3);
    padding: 12px 12px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.notes-reader-course { font-size: 13px; color: var(--blue); font-weight: 600; margin: 2px 0 8px; display: flex; align-items: center; gap: 6px; }
.flight-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text2);
    padding: 8px 1rem;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.flight-meta span { display: flex; align-items: center; gap: 5px; }
.note-footer { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 0 1rem .75rem; }
.note-delete-confirm { font-size: 12px; color: var(--text2); margin-right: auto; }
.note-delete-btn { color: var(--text3); }
.note-delete-btn:hover { color: var(--red); }

/* ── In-course notes (student dashboard) ─────────────────────────────────── */
.course-notes-list { display: flex; flex-direction: column; gap: 8px; }
.course-note { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.course-note.unacked { border-color: var(--blue); }
.course-note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; transition: background .1s; flex-wrap: wrap; }
.course-note-head:hover { background: var(--surface2); }
.course-note-title-row { display: flex; align-items: center; gap: 8px; }
.course-note-title { font-weight: 600; font-size: 14px; color: var(--text); }
.course-note-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); flex-wrap: wrap; }
.course-note-body { padding: 0 14px 12px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--text); }

/* ── Form validation ─────────────────────────────────────────────────────── */
.required-mark { color: var(--red); font-weight: 700; }
.input-error { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(220,53,69,.12); }

/* ── Course builder: student preview ─────────────────────────────────────── */
.preview-banner {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--blue-bg); color: var(--blue);
    border-radius: var(--radius-sm);
    padding: 10px 14px; margin-bottom: 1rem; font-size: 13px; line-height: 1.5;
}
.preview-banner .ti { flex-shrink: 0; margin-top: 1px; }
.student-preview { }
.preview-module { padding: 10px 14px; }
.preview-module-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); margin-bottom: 8px; }
.preview-section { margin-bottom: 12px; }
.preview-section-title { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 6px; }
.preview-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--surface);
}
.preview-item-icon { color: var(--text3); }
.preview-item-title { flex: 1; font-size: 14px; color: var(--text); }

/* ── Feedback button (prominent during early rollout) ────────────────────── */
.btn-feedback {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--amber-bg); color: var(--amber);
    border: 1px solid var(--amber-border);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.btn-feedback:hover { background: var(--amber-border); border-color: var(--amber); }
.btn-feedback i { font-size: 15px; }
@media (max-width: 640px) {
    .btn-feedback-text { display: none; }
    .btn-feedback { padding: 7px 10px; }
}

/* ── Flag notes ──────────────────────────────────────────────────────────── */
.flag-note-display {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 6px; padding: 6px 10px;
    background: var(--amber-bg); color: var(--amber);
    border-radius: var(--radius-sm); font-size: 13px; font-style: italic;
}
.flagged-item-content { display: flex; flex-direction: column; gap: 2px; }
.flagged-item-title { font-weight: 500; }
.flagged-item-note { font-size: 13px; color: var(--text2); font-style: italic; }

/* ── Workspace / tenant switcher ─────────────────────────────────────────── */
.ws-switcher {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    background: rgba(255,255,255,.08); color: var(--text);
    border: 1px solid rgba(255,255,255,.15);
    font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.ws-switcher:hover { background: rgba(255,255,255,.14); }
.ws-switcher-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ws-switcher-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); min-width: 280px; padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 100;
}
.ws-menu-header {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text3);
    padding: 6px 10px 8px;
}
.ws-menu-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
    background: transparent; border: 0; cursor: pointer;
    color: var(--text); text-align: left;
}
.ws-menu-item:hover { background: var(--surface2); }
.ws-menu-item.active { background: var(--blue-bg); color: var(--blue); }
.ws-menu-item-main { display: flex; flex-direction: column; gap: 2px; }
.ws-menu-role { font-weight: 600; font-size: 14px; }
.ws-menu-tenant { font-size: 12px; color: var(--text3); }
.ws-menu-item.active .ws-menu-tenant { color: var(--blue); opacity: .8; }
/* Group the switcher by tenant with a labeled divider between schools. */
.ws-menu-group + .ws-menu-group { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.ws-menu-group-label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); padding: 6px 12px 2px; }
.ws-menu-group-label .ti { font-size: 13px; }
/* Super-admin (cross-tenant) set clearly apart from the schools. */
.ws-menu-group.platform { margin-top: 8px; border-top: 2px solid var(--border); padding-top: 8px; }
.ws-menu-group.platform .ws-menu-group-label { color: var(--blue); }
.mobile-menu-sublabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); padding: 8px 14px 2px; }
.mobile-menu-sublabel.platform { color: var(--blue); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   THEME v2 — "warm neutral" identity (2026-06-04)
   ---------------------------------------------------------------------------
   A self-contained re-skin appended LAST so it overrides the original tokens
   above (same selectors, later wins). To FULLY REVERT: delete this whole block
   AND remove the IBM Plex <link> in Components/App.razor. Nothing else changes.
   Levers: warm-grey neutrals (not cool slate), IBM Plex Sans + Mono (mono for
   the domain's numbers), hairline borders, tighter radius, one muted accent.
   Want fully monochrome? set --blue to a graphite like #3A3733. Different accent?
   change --blue (light) and the --blue under the two dark scopes.
   ═══════════════════════════════════════════════════════════════════════════ */
/* OPTION 6 · MUI X-inspired light (ACTIVE) — white cards on a cool light-grey canvas,
   blue-grey hairline borders, near-black navy text, azure accent.
   Saved: Tailwind/indigo light = git f70b146; Option 1 (cool indigo) = git 40ecd38. */
:root {
    --navy: #1C2025;          /* near-black navy — headings + gradient base */
    --blue: #0072E5;          /* azure — primary, links, active (MUI primary) */
    --blue-bg: #F0F7FF;       /* pale azure highlight (nav-active, selected) */
    --sky: #3399FF;
    --gold: #B45309; --gold-light: #FEF3C7;
    --bg: #F6F8FA;            /* cool light-grey canvas (slight blue) */
    --surface: #FFFFFF;
    --surface2: #F3F6F9;      /* cool inset */
    --surface3: #E7EBF0;
    --border: #DAE2ED;        /* cool blue-grey hairline (MUI divider) */
    --text: #1C2025;          /* near-black, slight cool */
    --text2: #3E5060;         /* blue-grey secondary (MUI) */
    --text3: #8A9BAD;         /* muted blue-grey */
    --green: #059669; --green-hover: #047857; --green-bg: #ECFDF5; --green-border: #A7F3D0;   /* emerald */
    --amber: #B45309; --amber-bg: #FFFBEB; --amber-border: #FDE68A;                            /* amber */
    --red: #DC2626; --red-bg: #FEF2F2; --red-border: #FECACA;                                  /* red */
    --purple: #0072E5; --purple-bg: #F0F7FF;
    --primary-btn: #0072E5; --primary-btn-hover: #005FC4;       /* azure 600 → 700 */
    --success-btn: #059669; --success-btn-hover: #047857;       /* emerald 600 → 700 (white-text safe) */
    --radius: 4px;            /* tighter, crisper corners */
    --radius-sm: 4px;
    --shadow: 0 2px 1px -1px rgba(0,0,0,.07), 0 1px 1px 0 rgba(0,0,0,.05), 0 1px 3px 0 rgba(0,0,0,.05);  /* crisp Material-style layered elevation */
    --shadow-lg: 0 3px 5px -1px rgba(0,0,0,.10), 0 6px 10px 0 rgba(0,0,0,.06), 0 1px 18px 0 rgba(0,0,0,.05);
}
:root[data-theme="dark"] {
    /* Prod neutral zinc dark, with the indigo/violet accent swapped to blue. */
    --navy: #18181B;          /* zinc-900 header */
    --blue: #3B82F6;          /* blue accent (was indigo violet) */
    --blue-bg: #12345A;       /* dark blue highlight (was violet) */
    --sky: #38BDF8;
    --gold: #FBBF24; --gold-light: #2E2611;
    --bg: #101012;            /* near zinc-950, neutral */
    --surface: #19191C;
    --surface2: #232327;
    --surface3: #2E2E33;
    --border: #2C2C31;
    --text: #ECECEE;
    --text2: #A1A1AA;         /* zinc-400 */
    --text3: #71717A;         /* zinc-500 */
    --green: #34D399; --green-hover: #2BBE87; --green-bg: #0E2A20; --green-border: #2A5642;
    --amber: #FBBF24; --amber-bg: #2A2410; --amber-border: #574716;
    --red: #F87171; --red-bg: #2C1717; --red-border: #5A2C2C;
    --purple: #3B82F6; --purple-bg: #12345A;
    --primary-btn: #2563EB; --primary-btn-hover: #1D4ED8;   /* blue 600 → 700 (was indigo) */
    --success-btn: #15803D; --success-btn-hover: #166534;   /* deeper green so white text reads on dark */
    --shadow: 0 2px 12px rgba(0,0,0,.5); --shadow-lg: 0 10px 34px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        /* Prod neutral zinc dark + blue accent (mirrors :root[data-theme="dark"]). */
        --navy: #18181B;
        --blue: #3B82F6;
        --blue-bg: #12345A;
        --sky: #38BDF8;
        --gold: #FBBF24; --gold-light: #2E2611;
        --bg: #101012;
        --surface: #19191C;
        --surface2: #232327;
        --surface3: #2E2E33;
        --border: #2C2C31;
        --text: #ECECEE;
        --text2: #A1A1AA;
        --text3: #71717A;
        --green: #34D399; --green-hover: #2BBE87; --green-bg: #0E2A20; --green-border: #2A5642;
        --amber: #FBBF24; --amber-bg: #2A2410; --amber-border: #574716;
        --red: #F87171; --red-bg: #2C1717; --red-border: #5A2C2C;
        --purple: #3B82F6; --purple-bg: #12345A;
        --primary-btn: #2563EB; --primary-btn-hover: #1D4ED8;
        --success-btn: #15803D; --success-btn-hover: #166534;
        --shadow: 0 2px 12px rgba(0,0,0,.6); --shadow-lg: 0 10px 34px rgba(0,0,0,.7);
    }
}

/* Typeface: Hanken Grotesk everywhere (everything else uses font: inherit). */
body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Tabular (aligned) figures for the domain's numbers — clean, Stripe-style. */
.stat-num, .progress-text, .course-card-progress-label,
.score-pct, .score-fraction, .card-progress-header span:last-child {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Cockpit-style micro-labels: small, uppercase, tracked. */
.stat-label, .control-label {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
}

/* Squarer buttons + inputs (crisper than the rounded default). */
.btn, .form-input, .form-input-sm, .seg-toggle, .seg-btn { border-radius: 4px; }
.seg-toggle { overflow: hidden; }

/* No underlines on links (color is the affordance). */
a, a:hover { text-decoration: none; }

/* Flatten the old navy→blue gradients to solid fills (Stripe is flat, not gradient). */
.app-header { background: var(--navy); }
.progress-bar-fill { background: var(--blue); }
.quiz-header { background: var(--blue); }
.login-logo { background: var(--blue); }

/* Squarer header controls (workspace switcher + feedback) to match the buttons. */
.btn-feedback, .ws-switcher { border-radius: 4px; }

/* Header adapts to the theme — light header (surface + border) on light, dark on dark —
   instead of a fixed dark bar that floats on the light app. */
.app-header { background: var(--surface2); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.header-title { color: var(--text); }
.header-logo { background: var(--surface2); }
.nav-link { color: var(--text2); }
.nav-link:hover { background: var(--surface2); color: var(--text); }
.nav-link.active { background: var(--blue-bg); color: var(--blue); }
.user-avatar { background: var(--blue-bg); color: var(--blue); }    /* accent avatar pops on the grey header */
.user-name { color: var(--text2); }
.btn-icon { background: var(--surface); border-color: var(--border); color: var(--text2); }   /* white chips on the grey header */
.btn-icon:hover { background: var(--surface3); color: var(--text); }
.ws-switcher { background: var(--surface); color: var(--text); border-color: var(--border); }
.ws-switcher:hover { background: var(--surface3); }
.role-badge.admin { background: var(--amber-bg); color: var(--amber); }
.role-badge.instructor { background: var(--blue-bg); color: var(--blue); }
.role-badge.student { background: var(--green-bg); color: var(--green); }
/* Super admin: neon-green glowing badge. Dark chip so the neon reads on any header. */
.role-badge.super_admin {
    background: #07140B;
    color: #4CFF8F;
    border: 1px solid rgba(64,255,140,.55);
    font-weight: 700; letter-spacing: .02em;
    text-shadow: 0 0 6px rgba(64,255,140,.9);
    box-shadow: 0 0 8px rgba(64,255,140,.45), inset 0 0 5px rgba(64,255,140,.20);
    animation: superGlow 2.2s ease-in-out infinite;
}
@keyframes superGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(64,255,140,.30), inset 0 0 4px rgba(64,255,140,.12); }
    50%      { box-shadow: 0 0 13px rgba(64,255,140,.65), inset 0 0 7px rgba(64,255,140,.24); }
}
.view-toggle { background: var(--surface2); }
.view-toggle-btn { color: var(--text2); }
.view-toggle-btn.active { background: var(--blue); color: #fff; }

/* Square the labels/tags/badges/chips to match the buttons (were pill-shaped). */
.tag, .role-badge, .section-cat-badge, .item-link, .quiz-btn, .flag-btn,
.xp-earned, .streak-badge, .enroll-chip { border-radius: 4px; }
.badge, .tab-badge, .nav-badge { border-radius: 4px; }

/* Crisp "floating" cards — drop the 1px outline in light and let the layered shadow
   define them (the MudBlazor look). Keep a hairline in dark, where shadows don't read. */
.card, .stat, .settings-panel { border-color: transparent; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .settings-panel { border-color: var(--border); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .card,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .stat,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .settings-panel { border-color: var(--border); }
}

/* Primary buttons use --primary-btn (Stripe blurple) with a subtle Stripe-style lift. */
.btn-primary {
    background: var(--primary-btn); border-color: var(--primary-btn); color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 2px 4px rgba(50,50,93,.16);
}
.btn-primary:hover { background: var(--primary-btn-hover); border-color: var(--primary-btn-hover); }

/* ============================================================
   Weather Trainer (METAR/TAF practice) — /student/practice/weather
   ============================================================ */
.nav-section {
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text3); padding: 16px 14px 5px; font-weight: 600; opacity: .85;
}
.nav-new {
    margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
    background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border);
}

.wx-levels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.wx-level-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 9px 11px; min-width: 0; min-height: 92px; cursor: pointer; touch-action: manipulation;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); text-align: left;
}
.wx-level-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.wx-level-btn.locked { opacity: .55; cursor: not-allowed; }
.wx-level-btn.mastered:not(.active) { border-color: var(--green-border); }
.wx-level-num { font-size: 11px; opacity: .7; }
.wx-level-btn.mastered:not(.active) .wx-level-num { color: var(--green); opacity: 1; }
/* Reserve two lines so cards with 1-line names align with wrapping ones. */
.wx-level-name { font-size: 14px; font-weight: 600; line-height: 1.2; min-height: 2.4em; white-space: normal; }
.wx-level-kind { font-size: 10px; letter-spacing: .04em; opacity: .65; }
/* Footer pinned to the card bottom so every progress bar lines up across cards. */
.wx-level-foot { margin-top: auto; width: 100%; padding-top: 8px; }
.wx-level-prog { width: 100%; height: 5px; background: var(--surface3); border-radius: 999px; overflow: hidden; }
.wx-level-prog-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width .3s ease; }
.wx-level-btn.active .wx-level-prog { background: rgba(255,255,255,.3); }
.wx-level-btn.active .wx-level-prog-fill { background: #fff; }
.wx-level-btn.mastered .wx-level-prog-fill { background: var(--green); }
.wx-level-prog-txt { display: block; font-size: 10px; opacity: .7; margin-top: 3px; }
.wx-level-btn.mastered:not(.active) .wx-level-prog-txt { color: var(--green); opacity: 1; }
.wx-level-desc { color: var(--text2); font-size: 14px; margin: 0 0 16px; }
.wx-unlock-hint { color: var(--text3); }

.wx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wx-mode { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.wx-mode button {
    border: none; background: var(--surface); color: var(--text);
    padding: 8px 16px; font-size: 14px; cursor: pointer; touch-action: manipulation; display: inline-flex; align-items: center; gap: 6px;
}
.wx-mode button.active { background: var(--blue); color: #fff; }
.wx-stats { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text2); }
.wx-stat strong { color: var(--text); }
.wx-stat-hint { color: var(--text3); font-size: 13px; }

.wx-line {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 18px 20px; background: var(--surface2); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; margin-bottom: 14px;
}
.wx-break { flex-basis: 100%; height: 0; }
.wx-indent { width: 16px; }
.wx-chip {
    font-family: inherit; font-size: 17px; padding: 4px 10px; cursor: pointer; touch-action: manipulation;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
}
.wx-chip:active { background: var(--surface2); border-color: var(--blue); }
.wx-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.wx-chip.correct { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.wx-chip.wrong { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }

.wx-panel {
    min-height: 92px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px;
}
.wx-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wx-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 600; }
.wx-code-inline { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; }
.wx-cat-badge { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--blue-bg); color: var(--blue); }
.wx-verdict-tag { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.wx-verdict-tag.ok { color: var(--green); }
.wx-verdict-tag.no { color: var(--red); }
.wx-meaning { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.wx-missed-note { margin: 10px 0 0; font-size: 13px; color: var(--text2); }
.wx-hint { margin: 0; color: var(--text3); font-size: 14px; display: flex; align-items: center; gap: 6px; }

.wx-explain-btn, .wx-choice, .wx-cat-btn {
    cursor: pointer; touch-action: manipulation; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-size: 14px;
}
.wx-explain-btn { padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px; }
.wx-question { font-size: 14px; color: var(--text2); margin-bottom: 10px; }
.wx-choices { display: flex; flex-direction: column; gap: 8px; }
.wx-choice { text-align: left; padding: 10px 12px; line-height: 1.4; }
.wx-choice:disabled { cursor: default; }
.wx-choice.dim { opacity: .5; }
.wx-choice.picked-correct { background: var(--green-bg); border-color: var(--green-border); color: var(--green); opacity: 1; }
.wx-choice.picked-wrong { background: var(--red-bg); border-color: var(--red-border); color: var(--red); opacity: 1; }

.wx-result-missed { font-size: 14px; color: var(--text2); margin-bottom: 6px; }

.wx-deep {
    margin-top: 0; padding: 12px 14px; background: var(--surface2);
    border-radius: var(--radius-sm); font-size: 14px; line-height: 1.7;
}
.wx-term { color: var(--blue); border-bottom: 1px dotted var(--blue); cursor: help; }
.wx-termdef {
    margin-top: 10px; padding: 10px 14px; background: var(--blue-bg);
    border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; color: var(--text);
}
.wx-refgrid {
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.wx-refgrid-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text2); margin-bottom: 6px;
}
.wx-refgrid table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wx-refgrid td {
    padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top;
}
.wx-refgrid tr:last-child td { border-bottom: none; }
.wx-refdigit {
    font-family: var(--mono, ui-monospace, monospace); font-weight: 700;
    width: 2.5em; text-align: center; color: var(--blue);
}
.wx-refrow-active td { background: var(--blue-bg); font-weight: 700; color: var(--text); }
.wx-refrow-active td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.wx-refrow-active .wx-refdigit { color: var(--blue); }

.wx-verdict-prompt {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 20px; margin-bottom: 14px;
}
.wx-verdict-q { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.wx-cat-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.wx-cat-btn { padding: 8px 18px; font-weight: 600; }

.wx-result { border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; }
.wx-result.perfect { background: var(--green-bg); border: 1px solid var(--green-border); }
.wx-result.imperfect { background: var(--amber-bg); border: 1px solid var(--amber-border); }
.wx-result-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.wx-result.perfect .wx-result-head { color: var(--green); }
.wx-result.imperfect .wx-result-head { color: var(--amber); }
.wx-result-cat { font-size: 14px; line-height: 1.6; color: var(--text2); }
.wx-result-cat strong { color: var(--text); }

.wx-actions { display: flex; gap: 10px; }

/* Hover styles only on devices that truly hover (desktop). On touch, sticky :hover
   was overriding the .active highlight on level/mode buttons until a second tap. */
@media (hover: hover) {
    .wx-level-btn:hover:not(:disabled):not(.active) { background: var(--surface2); }
    .wx-mode button:hover:not(.active) { background: var(--surface2); }
    .wx-chip:hover:not(.active):not(.correct):not(.wrong) { border-color: var(--blue); }
    .wx-explain-btn:hover { background: var(--surface2); }
    .wx-choice:hover:not(:disabled) { background: var(--surface2); border-color: var(--blue); }
    .wx-cat-btn:hover { background: var(--surface2); border-color: var(--blue); }
    .settings-card-head:hover .card-title { color: var(--blue); }
}

/* Weather trainer progress card on the student profile (instructor view) */
.wx-prof-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 16px; }
.wx-prof-stat { background: var(--surface2); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.wx-prof-num { font-size: 20px; font-weight: 600; }
.wx-prof-lbl { font-size: 11px; color: var(--text3); }
.wx-prof-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 16px; }
.wx-prof-level-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; color: var(--text2); }
.wx-prof-mastered { color: var(--green); font-weight: 600; }
.progress-bar-fill.is-mastered { background: var(--green); }
.wx-prof-weak { margin-top: 14px; font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 6px; }

/* Online-presence dot (rosters). Green = connected now; faint grey = offline. */
.presence-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.presence-dot.online { background: var(--green); box-shadow: 0 0 0 2px rgba(26,107,58,.18); }
.presence-dot.offline { background: var(--border); }

/* Per-level mastery-goal inputs on School Settings */
.wx-goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* Collapsible settings cards */
.settings-card-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; padding: 0; cursor: pointer; color: var(--text); text-align: left;
}
.settings-card-head { touch-action: manipulation; }
.settings-card-head .ti { color: var(--text3); font-size: 18px; }
.settings-card-body { margin-top: 14px; }
@media (max-width: 560px) { .wx-prof-summary { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 860px) {
    .wx-levels { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .wx-levels { grid-template-columns: repeat(3, 1fr); }
    .wx-line { padding: 14px; font-size: 15px; }
    .wx-chip { font-size: 15px; }
}

/* ---- VOR trainer ---- */
.vor-page { padding: 12px; }
.vor-stage { display: flex; gap: 16px; align-items: stretch; position: relative; }
/* "Flying" running indicator — top-centre of the stage, only while unpaused */
.vor-flying { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: none; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px;
  background: var(--green-bg, #d7f0d7); color: var(--green, #2ea043); border: 1px solid var(--green, #2ea043);
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); pointer-events: none; }
.vor-flying::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: vorPulse 1s ease-in-out infinite; }
@keyframes vorPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } }
.vor-map-wrap { position: relative; flex: 1 1 auto; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
/* Absolutely positioned so the viewBox SVG contributes NO intrinsic size to the flex row —
   otherwise its width:100% implies a square intrinsic height that Edge/Firefox blow up the
   map with. The wrap stretches to the instrument-column height; the SVG just fills it. */
.vor-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.vor-side { flex: 0 0 320px; display: flex; flex-direction: column; gap: 12px; }
.vor-cdi { width: 100%; max-width: 320px; height: auto; touch-action: none; }
.vor-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* standalone icon buttons (turn / pause / radials / reset) — match the app .btn theme */
.vor-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 17px; font-weight: 600; cursor: pointer; transition: all .15s; }
.vor-btn:hover { background: var(--surface2); }
.vor-btn:active { transform: scale(.96); }
.vor-btn.vor-active { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }  /* paused */
/* each ±-stepper is a boxed pill so the groups don't run together */
.vor-speed, .vor-obs, .vor-bug { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.vor-speed .vor-btn, .vor-obs .vor-btn, .vor-bug .vor-btn { width: 30px; height: 30px; border: none; background: transparent; }
.vor-speed .vor-btn:hover, .vor-obs .vor-btn:hover, .vor-bug .vor-btn:hover { background: var(--surface); }
.vor-obs-label { font-size: 12px; color: var(--text2); white-space: nowrap; }

/* Phone / narrow (Practice): a map band on top (whole map visible), the two instruments
   side-by-side at EQUAL size, and the controls on their own full-width row below — so the
   DG isn't squeezed by the buttons, and it all fits without scrolling. */
@media (max-width: 720px) {
  .vor-stage { flex-direction: column; gap: 8px; }
  .vor-map-wrap { flex: 0 0 auto; height: 34vh; display: flex; align-items: center; justify-content: center; }
  .vor-map { position: static; width: auto; height: 100%; }   /* definite-height band centers the square */
  .vor-page:not(.vor-challenge) .vor-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .vor-page:not(.vor-challenge) .vor-inst .vor-cdi,
  .vor-page:not(.vor-challenge) .vor-inst .vor-dg { width: 100%; max-width: none; }
  .vor-page:not(.vor-challenge) .vor-controls { grid-column: 1 / -1; }
}
.vor-dg { width: 100%; max-width: 320px; height: auto; touch-action: none; }
.vor-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
/* Goal/result banner: accent card with a coloured left bar + an uppercase eyebrow label.
   Body text uses --text (high contrast in both themes) — only the accent/eyebrow is coloured,
   so it never reads as blue-on-blue in dark mode. */
.vor-banner { text-align: left; font-size: 15px; font-weight: 700; color: var(--text); margin: 2px 0 12px;
  padding: 10px 14px; background: var(--blue-bg); border: 1px solid var(--blue); border-left: 5px solid var(--blue);
  border-radius: var(--radius-sm); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.vor-banner:empty { display: none; }   /* no text in Practice → no empty bar */
.vor-banner::before { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 3px; }   /* shared eyebrow style; content set per state */
.vor-banner.vor-goal::before { content: "🎯 Goal"; color: var(--blue); }
.vor-banner.vor-ok { border-color: var(--green, #2ea043); border-left-color: var(--green, #2ea043);
  background: var(--green-bg, var(--surface2)); }
.vor-banner.vor-ok::before { content: "✓ Done"; color: var(--green, #2ea043); }
.vor-chal-btn { display: none; }
.vor-challenge .vor-map-wrap { display: none; }
.vor-challenge .vor-chal-btn { display: inline-flex; }
.vor-challenge .vor-side { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding-top: 38px; }  /* room for the "Flying" pill above the instruments */
.vor-challenge .vor-inst { flex: 1 1 320px; max-width: 480px; }
.vor-challenge .vor-inst .vor-cdi, .vor-challenge .vor-inst .vor-dg { max-width: 100%; }
.vor-challenge .vor-controls { flex: 1 1 100%; }
.vor-challenge #vorReset { display: none; }   /* Reset is a Practice concept; use "New challenge" instead */
/* Result view: the frozen map takes over the instrument area as a big, zoom/pan-able panel,
   with the action buttons kept beneath it. */
.vor-challenge.vor-revealed .vor-stage { display: block; }
.vor-challenge.vor-revealed .vor-map-wrap { display: block; height: 68vh; }
.vor-challenge.vor-revealed .vor-map { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.vor-challenge.vor-revealed .vor-inst { display: none; }
.vor-challenge.vor-revealed .vor-side { display: block; margin-top: 10px; padding-top: 0; }
.vor-challenge.vor-revealed .vor-controls { justify-content: center; }
@media (max-width: 720px) {
  .vor-challenge .vor-inst { flex: 1 1 45%; }
}
.vor-inst { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vor-inst-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); font-weight: 600; }
/* per-instrument control row (OBS under the CDI; turn + bug under the DG) */
.vor-inst-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 8px; }
.vor-turn { width: 56px; height: 44px; font-size: 20px; border-color: var(--blue); color: var(--blue); }
.vor-turn:hover { background: var(--blue-bg); }
.vor-startpanel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px;
  background: var(--blue-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); }
.vor-startpanel .btn { margin-left: auto; }

/* ── Syncfusion Tailwind 3 theme → app palette ──────────────────────────────
   The theme's indigo primary is re-pointed at the app's action blue so Syncfusion
   accents (today marker, cell selection tint, active toolbar button, focus rings)
   match our buttons. Loaded AFTER the theme file, so these :root overrides win.
   NOTE the odd `rgba(R, G, B)` shape on --color-sf-primary — that's the shape the
   theme itself uses (it's composed as `rgba(var(--color-sf-primary), alpha)` for
   tints), so overrides must keep it. The rest are plain colors.
   Dark values live in BOTH the [data-theme="dark"] block and the system-dark media
   block, mirroring the app's own three-state theme pattern. */
:root {
    --color-sf-primary: rgba(0, 114, 229);            /* #0072E5 = --primary-btn (light) */
    --color-sf-primary-bg-color: #0072E5;
    --color-sf-primary-bg-color-hover: #005FC4;
    --color-sf-primary-bg-color-focus: #005FC4;
    --color-sf-primary-bg-color-pressed: #004A99;
    --color-sf-primary-bg-color-disabled: #93C5FD;
    --color-sf-primary-border-color: #0072E5;
    --color-sf-primary-border-color-hover: #005FC4;
    --color-sf-primary-border-color-focus: #005FC4;
    --color-sf-primary-border-color-pressed: #004A99;
    --color-sf-primary-border-color-disabled: #93C5FD;
    --color-sf-primary-dark: #005FC4;
    --color-sf-primary-darker: #004A99;
    --color-sf-primary-light: #004A99;
    --color-sf-primary-lighter: #DBEAFE;
    --color-sf-primary-outline: #0072E5;

    /* Calendar readability knobs (owner-tuned 2026-07-04). Light keeps the stock look;
       the dark blocks below lift each one step — the app's zinc surfaces + gray-500 time
       labels sit nearly invisible on the Tailwind-3 dark grid (#111827). */
    --sched-time-text: #6B7280;              /* left time-column labels (theme default) */
    --sched-muted-bg: var(--surface2);       /* completed / canceled / no-show / requested cards */
    --sched-muted-bg-block: var(--surface3); /* block cards */
    --sched-muted-border: var(--border);
    --sched-muted-text: var(--text3);        /* canceled / no-show card text */
    --sched-block-border: #94A3B8;           /* hard slate outline for Block cards (light) — darker edge so the gray card reads crisp like the scheduled card, not a flat hairline */
    --sched-scheduled-bg: #DBEAFE;           /* scheduled card fill (light) — a step deeper than --blue-bg so it doesn't read near-white */
    --sched-completed-bg: #E2E8F0;           /* completed card fill (light) — darker than --surface2 so 'done' cards stay visible */
}
:root[data-theme="dark"] {
    --color-sf-primary: rgba(59, 130, 246);           /* #3B82F6 = --blue (dark accent) */
    --color-sf-primary-bg-color: #2563EB;             /* = --primary-btn (dark) */
    --color-sf-primary-bg-color-hover: #3B82F6;       /* dark theme hovers LIGHTER, like the stock theme */
    --color-sf-primary-bg-color-focus: #3B82F6;
    --color-sf-primary-bg-color-pressed: #1D4ED8;
    --color-sf-primary-bg-color-disabled: #1E3A8A;
    --color-sf-primary-border-color: #2563EB;
    --color-sf-primary-border-color-hover: #3B82F6;
    --color-sf-primary-border-color-focus: #3B82F6;
    --color-sf-primary-border-color-pressed: #1D4ED8;
    --color-sf-primary-border-color-disabled: #1E3A8A;
    --color-sf-primary-dark: #60A5FA;
    --color-sf-primary-darker: #2563EB;
    --color-sf-primary-light: #60A5FA;
    --color-sf-primary-lighter: #172554;
    --color-sf-primary-outline: #3B82F6;

    --sched-time-text: #A1A1AA;
    --sched-muted-bg: #2E2E33;
    --sched-muted-bg-block: #3A3A41;
    --sched-muted-border: #45454C;
    --sched-muted-text: #94949D;
    --sched-block-border: #8A93A6;           /* hard slate outline for Block cards (dark) — pops off the charcoal fill like the scheduled card's blue border */
    --sched-scheduled-bg: #12345A;           /* dark scheduled fill — stays dark so the light card text is readable (light theme keeps #DBEAFE) */
    --sched-completed-bg: #2E2E33;           /* dark completed fill — muted charcoal (light theme keeps #E2E8F0) */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --color-sf-primary: rgba(59, 130, 246);
        --color-sf-primary-bg-color: #2563EB;
        --color-sf-primary-bg-color-hover: #3B82F6;
        --color-sf-primary-bg-color-focus: #3B82F6;
        --color-sf-primary-bg-color-pressed: #1D4ED8;
        --color-sf-primary-bg-color-disabled: #1E3A8A;
        --color-sf-primary-border-color: #2563EB;
        --color-sf-primary-border-color-hover: #3B82F6;
        --color-sf-primary-border-color-focus: #3B82F6;
        --color-sf-primary-border-color-pressed: #1D4ED8;
        --color-sf-primary-border-color-disabled: #1E3A8A;
        --color-sf-primary-dark: #60A5FA;
        --color-sf-primary-darker: #2563EB;
        --color-sf-primary-light: #60A5FA;
        --color-sf-primary-lighter: #172554;
        --color-sf-primary-outline: #3B82F6;

        --sched-time-text: #A1A1AA;
        --sched-muted-bg: #2E2E33;
        --sched-muted-bg-block: #3A3A41;
        --sched-muted-border: #45454C;
        --sched-muted-text: #94949D;
        --sched-block-border: #8A93A6;       /* hard slate outline for Block cards (dark) — pops off the charcoal fill like the scheduled card's blue border */
        --sched-scheduled-bg: #12345A;       /* dark scheduled fill — stays dark so the light card text is readable (light theme keeps #DBEAFE) */
        --sched-completed-bg: #2E2E33;       /* dark completed fill — muted charcoal (light theme keeps #E2E8F0) */
    }
}

/* ── Scheduler ───────────────────────────────────────────────────────────── */
/* Inline conflict / error banner in the booking modal (and the /schedule move-error) */
.sched-banner { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.sched-banner.err  { background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red); }
.sched-banner.warn { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }

/* Status colors for Syncfusion scheduler events (applied via EventRendered → CssClasses).
   Override Syncfusion's default appointment styling; theme-aware via our vars. */
/* Cursor tells you what you can do: locked events (dispatched/terminal) are clickable → hand;
   draggable ones (scheduled/blocks) → crossed-arrows move cursor. */
.e-schedule .e-appointment { cursor: pointer !important; }
.e-schedule .e-appointment.sched-evt-scheduled,
.e-schedule .e-appointment.sched-evt-block { cursor: move !important; }
/* Left time-column (and timeline time-header) labels — brighter in dark via --sched-time-text. */
.e-schedule .e-time-slots span { color: var(--sched-time-text) !important; }

/* Reservation card status palette. LIGHT theme = bold SOLID fills (owner pick 2026-07-03);
   DARK theme keeps the previously-tuned tinted look by pointing the vars back at the existing
   --sched-* / --blue / --amber values. Driving colors through vars is the only clean way to
   restyle light without touching dark, since "light" is BOTH [data-theme=light] and the
   no-attribute default (dark is [data-theme=dark] OR the prefers-color-scheme media query). */
:root {
    --border-subtle:#EEF2F7;
    --sched-group-divider:#D7DEE8;                     /* aircraft ↔ instructor group boundary (soft neutral) */
    --grid-hour:var(--border-subtle); --grid-minor:#F2F4F8; --grid-column:#F2F4F8; --hour-band:rgba(15,23,42,.018);  /* grid lines + hour band (light) */
    --sched-header-bg:var(--surface2); --sched-surface:var(--surface);              /* header / grid surface (light) */
    --sched-gutter-bg:var(--surface); --sched-gutter-text:var(--text3); --sched-done-fade:.72;   /* time gutter + done-fade (light) */
    --sc-title:var(--text); --sc-meta:var(--text2);                                 /* card text tiers (light — unchanged) */
    --sc-sched-fill:#DEEAFB; --sc-sched-acc:#2563EB;   /* scheduled — soft blue   */
    --sc-disp-fill:#FBEFCB;  --sc-disp-acc:#E3900A;    /* dispatched — soft amber */
    --sc-done-fill:#ECEEF2;  --sc-done-acc:#94A3B8;    /* completed — soft gray   */
    --sc-cxl-fill:#ECEEF2;   --sc-cxl-acc:#B91C1C;     /* canceled / no-show — dark-red accent, muted gray fill */
    --sc-block-fill:#E6EBF1; --sc-block-acc:#475569;   /* block — slate           */
    --sc-req-fill:#EADFFB;   --sc-req-acc:#7C3AED;     /* requested — soft purple */
}
/* DARK = a navy/slate "night operations" board (NOT the light theme inverted): near-invisible
   grid lines, layered navy surfaces, and deep tinted booking cards with bright left accents. */
:root[data-theme="dark"] {
    --border-subtle:rgba(148,163,184,.22);
    --sched-group-divider:rgba(148,163,184,.28);
    --grid-hour:rgba(148,163,184,.16); --grid-minor:rgba(148,163,184,.06); --grid-column:rgba(148,163,184,.10); --hour-band:rgba(148,163,184,.035);
    --sched-header-bg:#18202f; --sched-surface:#111a2b; --sched-gutter-bg:#111a2b; --sched-gutter-text:#7f8da3; --sched-done-fade:.9;
    --sc-title:#f8fafc; --sc-meta:#aab6c6;
    --sc-sched-fill:#102a4c; --sc-sched-acc:#3b82f6;
    --sc-disp-fill:rgba(245,158,11,.14);  --sc-disp-acc:#f59e0b;
    --sc-done-fill:#202a3a;  --sc-done-acc:#9aa7b8;
    --sc-cxl-fill:#2a1820;   --sc-cxl-acc:#ef4444;
    --sc-block-fill:#243040; --sc-block-acc:#7688a0;
    --sc-req-fill:#2b1b4d;   --sc-req-acc:#8b5cf6;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --border-subtle:rgba(148,163,184,.22);
        --sched-group-divider:rgba(148,163,184,.28);
        --grid-hour:rgba(148,163,184,.16); --grid-minor:rgba(148,163,184,.06); --grid-column:rgba(148,163,184,.10); --hour-band:rgba(148,163,184,.035);
        --sched-header-bg:#18202f; --sched-surface:#111a2b; --sched-gutter-bg:#111a2b; --sched-gutter-text:#7f8da3; --sched-done-fade:.9;
        --sc-title:#f8fafc; --sc-meta:#aab6c6;
        --sc-sched-fill:#102a4c; --sc-sched-acc:#3b82f6;
        --sc-disp-fill:rgba(245,158,11,.14);  --sc-disp-acc:#f59e0b;
        --sc-done-fill:#202a3a;  --sc-done-acc:#9aa7b8;
        --sc-cxl-fill:#2a1820;   --sc-cxl-acc:#ef4444;
        --sc-block-fill:#243040; --sc-block-acc:#7688a0;
        --sc-req-fill:#2b1b4d;   --sc-req-acc:#8b5cf6;
    }
}
/* Card: a real component — light border + a 3px left accent, rounded, a soft shadow to lift it
   off the grid, and internal padding so text breathes. !important beats the Tailwind-3 theme's
   higher-specificity appointment selector. */
.e-schedule .e-appointment {
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 1px 1px rgba(16,24,40,.04) !important;
}
.e-schedule .e-appointment .e-appointment-details { padding: 2px 8px !important; }
.e-schedule .e-appointment .e-subject { padding: 0 !important; }
.e-schedule .e-appointment.sched-evt-scheduled  { background: var(--sc-sched-fill) !important; border-left-color: var(--sc-sched-acc) !important; }
.e-schedule .e-appointment.sched-evt-dispatched { background: var(--sc-disp-fill)  !important; border-left-color: var(--sc-disp-acc)  !important; }
.e-schedule .e-appointment.sched-evt-completed  { background: var(--sc-done-fill)  !important; border-left-color: var(--sc-done-acc)  !important; }
.e-schedule .e-appointment.sched-evt-canceled,
.e-schedule .e-appointment.sched-evt-no_show    { background: var(--sc-cxl-fill)   !important; border-left-color: var(--sc-cxl-acc)   !important; }
.e-schedule .e-appointment.sched-evt-block      { background: var(--sc-block-fill) !important; border-left-color: var(--sc-block-acc) !important; }
.e-schedule .e-appointment.sched-evt-requested  { background: var(--sc-req-fill)   !important; border-left-color: var(--sc-req-acc)   !important; }
/* Completed reads as "done", not active: muted surface + text, a faint green border, and a ✓
   stamped before the subject so it's unmistakable at a glance. */
/* Completed = done: grey it out (override the lane color) so it recedes from the active bookings. */
/* (completed styling consolidated into the status block above) */
/* ── Ultra-compact appointment card (default Syncfusion rendering + CSS) ───────────────
   The subject is two lines ("Name\nTime · Type · Other"). We get hierarchy WITHOUT a custom
   template (which crashed under grouped resources): the whole subject is small, and
   ::first-line lifts the NAME to bold/larger. Syncfusion's own .e-time is hidden (time is in
   the meta line). Status is read from the card fill + a small colored tick before the name. */
.e-schedule .e-appointment .e-time { display: none !important; }
/* Match the site's card radius (--radius-sm) instead of Syncfusion's default rounding. */
.e-schedule .e-appointment { border-radius: var(--radius-sm) !important; }

/* Status color key — compact but readable: small accent chips, medium-muted labels, no card chrome. */
.sched-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 6px; padding: 0 2px; }
.sched-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text2); }
.sched-legend-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); border-left-width: 3px; flex: 0 0 auto; }

/* Quieter grid: minor/half-hour lines + column dividers use the theme grid vars (near-invisible
   in dark); the hour line stays gently visible so rows are still readable. The whole grid surface
   goes navy in dark via --sched-surface. */
.e-schedule, .e-schedule .e-work-cells { background: var(--sched-surface) !important; }
.e-schedule .e-time-cells-wrap, .e-schedule .e-time-cells, .e-schedule .e-time-slots { background: var(--sched-gutter-bg) !important; }
.e-schedule .e-time-slots span { color: var(--sched-gutter-text) !important; font-size: 11px !important; }
/* Barely-there alternating HOUR band across the GRID columns for spatial orientation — calmer
   than striped lines. Applied per work-cell in OnRenderCell by the cell's ACTUAL clock hour
   (even hours banded), so it's true hourly bands regardless of row structure. The time gutter is
   deliberately left OUT (its cells don't carry a clean hour), so it stays one clean column. */
.e-schedule .e-work-cells.sched-hour-band { background: var(--hour-band) !important; }

/* Dark scrollbars (light keeps the OS default). The bright default scrollbar was the loudest
   thing on the dark board — make it a quiet slate thumb on a navy track. */
:root[data-theme="dark"] { scrollbar-color: #334155 #0f172a; }
:root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; border: 2px solid #0f172a; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) { scrollbar-color: #334155 #0f172a; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) ::-webkit-scrollbar { width: 10px; height: 10px; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) ::-webkit-scrollbar-track { background: #0f172a; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; border: 2px solid #0f172a; }
    :root:not([data-theme="light"]):not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: #475569; }
}
.e-schedule .e-vertical-view .e-work-cells { border-bottom-color: var(--grid-minor) !important; border-right-color: var(--grid-column) !important; }
.e-schedule .e-vertical-view .e-time-cells { border-color: var(--grid-minor) !important; }
.e-schedule .e-vertical-view .e-time-slots { border-bottom-color: var(--grid-hour) !important; }  /* hour rows */
/* DARK only (light stays exactly as-is): empty slots read as calm surface; the cell affordance
   only appears on hover, so the grid isn't a field of always-on rectangles. */
:root[data-theme="dark"] .e-schedule .e-work-cells:hover {
    background: rgba(96,165,250,.07) !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,.30) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .e-schedule .e-work-cells:hover {
        background: rgba(96,165,250,.07) !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,.30) !important; }
}
/* Resource + category header rows: a raised surface just above the grid, not a heavy block. */
.e-schedule .e-resource-cells, .e-schedule .e-resource-cells > div {
    font-weight: 600 !important; color: var(--text) !important; font-size: 12.5px !important; letter-spacing: .1px; }
.e-schedule .e-resource-cells { background: var(--sched-header-bg) !important; border-color: var(--border) !important; }
.e-schedule .e-date-header-wrap, .e-schedule .e-date-header-container { background: var(--sched-header-bg) !important; }
.e-schedule .e-date-header-container { box-shadow: 0 1px 0 var(--border) !important; }
/* Date mini-header: compact — muted small day name over a normal-weight date; today reads as a
   tidy small blue chip instead of a lonely oversized number. */
.e-schedule .e-header-cells { padding: 3px 0 3px 8px !important; line-height: 1.2 !important; }
.e-schedule .e-header-cells .e-header-day { font-size: 10.5px !important; text-transform: uppercase; letter-spacing: .04em; color: var(--text3) !important; }
.e-schedule .e-header-cells .e-header-date { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; }
.e-schedule .e-header-cells .e-header-date.e-current-day,
.e-schedule .e-header-cells.e-current-day .e-header-date {
    background: var(--blue) !important; color: #fff !important; border-radius: 999px !important;
    padding: 0 7px !important; display: inline-block !important; min-width: 20px; }

/* Denser schedule page: tighten the vertical rhythm above the calendar (this page only). */
.sched-page .page-header { margin-bottom: 12px !important; }
/* Current-time indicator: the PILL is the focus; the line is a soft 1px so it doesn't shout across the grid. */
.e-schedule .e-current-timeline { border-top: 1px solid rgba(37,99,235,.55) !important; }
.e-schedule .e-previous-timeline { border-top-color: var(--border-subtle) !important; }
.e-schedule .e-current-time {
    background: var(--blue) !important; color: #fff !important; border-radius: 999px !important;
    padding: 1px 7px !important; font-size: 10px !important; font-weight: 600 !important;
}
/* Toolbar (date nav + view switcher): flat, date prominent, view tabs as a subtle segmented
   control (active = muted surface, not bright blue). */
.e-schedule .e-schedule-toolbar { background: transparent !important; border: none !important; box-shadow: none !important; }
.e-schedule .e-schedule-toolbar .e-date-range .e-tbar-btn-text { font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important; }
.e-schedule .e-schedule-toolbar .e-icon-prev, .e-schedule .e-schedule-toolbar .e-icon-next { color: var(--text2) !important; }
.e-schedule .e-schedule-toolbar .e-views .e-tbar-btn { background: transparent !important; color: var(--text2) !important; border: 1px solid transparent !important; border-radius: var(--radius-sm) !important; }
.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn {
    background: var(--surface) !important; color: var(--text) !important; font-weight: 600 !important;
    border: 1px solid var(--border) !important; box-shadow: 0 1px 2px rgba(15,23,42,.08) !important; }
/* Toolbar actions: one coherent control row — consistent button heights/radius, even spacing.
   New booking stays primary; the rest are ghost buttons; "Canceled" is a ghost toggle. */
.sched-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-actions .btn-ghost.active { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-bg); }

/* Full-width ops board: the schedule page fills the whole content area (the sidebar offset is
   handled by .app-main's padding-left) instead of the centered 1240px cap. Consistent padding. */
.app-body.wide.sched-page { max-width: none; padding: 18px 22px; }

/* Scheduler shell: elevated white card on the gray page bg — subtle border + layered soft shadow,
   generous inner padding, clipped so the grid corners follow the radius. */
.sched-shell { background: var(--sched-surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.05); padding: 6px 6px 10px;
    overflow: hidden; }
.e-schedule .e-appointment .e-subject {
    white-space: pre-line !important; font-size: 11.5px; font-weight: 500; line-height: 1.38;
    color: var(--sc-meta) !important;
}
.e-schedule .e-appointment .e-subject::first-line { font-size: 13px; font-weight: 700; color: var(--sc-title) !important; }
/* Status is carried by the card's own fill + border color (set per sched-evt-* class) — no
   separate marker, like Google Calendar. Fade finished/dead cards so active ones pop. */
.e-schedule .e-appointment.sched-evt-completed,
.e-schedule .e-appointment.sched-evt-canceled,
.e-schedule .e-appointment.sched-evt-no_show { opacity: var(--sched-done-fade); }

/* ── Hover tooltip (EnableTooltip + TooltipTemplate) — re-skin Syncfusion's bubble to an
   app-surface card so it matches the rest of the UI in both themes. */
.e-tooltip-wrap.e-popup { background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: 8px !important; box-shadow: 0 8px 28px rgba(0,0,0,.18) !important; }
.e-tooltip-wrap .e-tip-content { color: var(--text) !important; padding: 9px 11px !important; }
.e-tooltip-wrap .e-arrow-tip-inner { color: var(--surface) !important; background: var(--surface) !important; }
.sa-tip { min-width: 190px; max-width: 280px; }
.sa-tip-name   { font-weight: 700; font-size: 14px; color: var(--text); }
.sa-tip-status { font-size: 11px; font-weight: 600; color: var(--text3); margin: 1px 0 7px; }
.sa-tip-row    { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); margin-top: 3px; }
.sa-tip-row i  { font-size: 14px; width: 15px; text-align: center; opacity: .85; flex: 0 0 auto; }
.sa-tip-notes  { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text2); white-space: pre-wrap; }
/* (dispatched / block / canceled / no-show / requested styling consolidated into the status
   block above — soft fill + left accent, uniform muted text.) */

/* Booking history table + status badges (also used in the summary row). */
.sched-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sched-history-table th { text-align: left; padding: 8px 10px; color: var(--text3); font-weight: 600;
    border-bottom: 1px solid var(--border); white-space: nowrap; }
.sched-history-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.sched-history-table tbody tr { cursor: pointer; }
.sched-history-table tbody tr:hover { background: var(--surface2); }

.sched-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.sched-badge.scheduled { background: var(--blue-bg); color: var(--blue); }
.sched-badge.completed { background: var(--green-bg); color: var(--green); }
.sched-badge.canceled,
.sched-badge.declined  { background: var(--surface3); color: var(--text2); }
.sched-badge.no_show   { background: var(--amber-bg); color: var(--amber); }
.sched-badge.requested { background: var(--surface3); color: var(--text2); }

/* Density pass (FSP-like): shorter time rows so the whole working day fits (less
   "zoomed in"), and full-width appointments — safe because our resource lanes are
   conflict-free (no overlaps to split). Scoped to the scheduler's CssClass. */
.sched-dense.e-schedule { min-height: 520px; }
.sched-dense.e-schedule .e-vertical-view .e-work-cells,
.sched-dense.e-schedule .e-vertical-view .e-time-cells-wrap table td { height: 26px; }
.sched-dense.e-schedule .e-vertical-view .e-appointment { width: 100% !important; }

/* Calendar icon on the date-navigation dropdown ("Jun 28, 2026 ▾") so it reads as a
   clickable date picker. ti-calendar = \ea53 from the Tabler webfont (loaded app-wide). */
.sched-dense .e-schedule-toolbar .e-date-range .e-tbar-btn-text::before {
    font-family: "tabler-icons";
    content: "\ea53";
    margin-right: 6px;
    font-size: 15px;
    vertical-align: -2px;
}

/* ── Dispatch Sheet (/schedule/dispatch/{id}) ────────────────────────────── */
.dispatch-sheet { max-width: 760px; margin: 0 auto; }

/* Header: school name + "Dispatch Sheet" left, ticket id + badge right */
.ds-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 8px; border-bottom: 2px solid var(--border); padding-bottom: 12px; margin-bottom: 12px; }
.ds-header-school { display: flex; align-items: center; gap: 8px; }
.ds-school-name { font-size: 17px; font-weight: 700; color: var(--text); }
.ds-divider { color: var(--text3); }
.ds-label-dispatch { font-size: 14px; font-weight: 600; color: var(--text2); }
.ds-header-meta { display: flex; align-items: center; gap: 8px; }
.ds-ticket-id { font-size: 12px; color: var(--text3); font-family: monospace; }

/* Kind / aircraft row */
.ds-kind-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-kind-pill { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 2px 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.ds-aircraft { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 4px; }

/* Sections */
.ds-section { margin-bottom: 20px; }
.ds-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text3); margin-bottom: 8px; }

/* Label + value grid */
.ds-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; }
.ds-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
    border-bottom: 1px solid var(--border); }
.ds-row:last-child { border-bottom: none; }
.ds-lbl { width: 140px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text3); }
.ds-val { font-size: 13px; color: var(--text); }
.ds-muted { font-size: 12px; color: var(--text3); margin: 6px 0 0 0; }

/* Open squawks list */
.ds-squawk-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ds-squawk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text);
    padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); }
.ds-squawk.grounding { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.ds-grounds-tag { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    background: var(--red); color: #fff; border-radius: 3px; padding: 1px 5px; }

/* Signature lines */
.ds-signatures { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 32px; }
.ds-sig-block { flex: 1; min-width: 180px; }
.ds-sig-line { border-bottom: 1px solid var(--text2); height: 36px; }
.ds-sig-caption { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* Print overrides */
@media print {
    .app-header, .app-sidebar, .nav-toggle, .no-print { display: none !important; }
    .app-body, .app-body.wide { margin: 0 !important; padding: 0 !important; }
    .dispatch-sheet { max-width: none; }
    .ds-header { border-bottom-color: #000; }
    .ds-row { border-bottom-color: #ccc; }
    .ds-grid { border-color: #ccc; }
}