/* ==========================================================================
   Lecture Attendance — design system
   1. Tokens       4. Layout        7. Pages
   2. Reset/base   5. Components    8. Dialogs (SweetAlert2 theme)
   3. Typography   6. Forms         9. Utilities
   Change the look by editing tokens only. Components never use raw colours.
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Palette */
    --c-bg: #f5f6f8;
    --c-surface: #ffffff;
    --c-surface-2: #f0f2f5;
    --c-border: #dfe3e8;
    --c-border-strong: #c5ccd5;
    --c-text: #161b22;
    --c-text-muted: #5a6472;
    --c-primary: #1f4e79;
    --c-primary-hover: #183e61;
    --c-primary-soft: #e7eef6;
    --c-on-primary: #ffffff;
    --c-focus: #e0a100;

    --c-success: #1b7a43;
    --c-success-soft: #e5f4ea;
    --c-warning: #a35a00;
    --c-warning-soft: #fdf1df;
    --c-danger: #b42318;
    --c-danger-soft: #fdeceb;
    --c-info: #1f5fbf;
    --c-info-soft: #e8f0fc;
    --c-neutral: #5a6472;
    --c-neutral-soft: #eceff3;

    /* Type */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --lh-tight: 1.25;
    --lh-body: 1.55;

    /* Space (4px scale) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;

    /* Shape & depth */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
    --shadow: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
    --shadow-lg: 0 12px 32px rgb(16 24 40 / 0.14);

    /* Sizing */
    --tap: 2.75rem;          /* 44px minimum touch target */
    --content-max: 72rem;
    --header-h: 3.75rem;
    --sidebar-w: 16rem;
    --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --c-bg: #0f1318;
        --c-surface: #171c23;
        --c-surface-2: #1e252e;
        --c-border: #2a323d;
        --c-border-strong: #3a4452;
        --c-text: #e8ecf1;
        --c-text-muted: #9aa5b3;
        --c-primary: #6fa8dc;
        --c-primary-hover: #8dbbe5;
        --c-primary-soft: #1c2c3d;
        --c-on-primary: #0d1722;
        --c-success: #4cc27d;
        --c-success-soft: #15291d;
        --c-warning: #f0a54a;
        --c-warning-soft: #2e2213;
        --c-danger: #f2766b;
        --c-danger-soft: #331a18;
        --c-info: #7aa9f0;
        --c-info-soft: #182439;
        --c-neutral: #9aa5b3;
        --c-neutral-soft: #222a34;
        --shadow-sm: none;
        --shadow: 0 0 0 1px var(--c-border);
        --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5);
    }
}

/* 2. Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

a { color: var(--c-primary); text-underline-offset: 0.15em; }
a:hover { color: var(--c-primary-hover); }

:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--c-surface-2);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 3. Typography ---------------------------------------------------------- */
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0; }

.muted { color: var(--c-text-muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }

/* 4. Layout -------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--s-4);
}
@media (min-width: 48rem) { .container { padding-inline: var(--s-6); } }

.page { padding-block: var(--s-6) var(--s-12); }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.stack--sm { --stack-gap: var(--s-2); }
.stack--lg { --stack-gap: var(--s-6); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cluster--between { justify-content: space-between; }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 60rem) {
    .grid--main-side { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--c-text);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.brand:hover { color: var(--c-text); }
.brand__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--c-primary);
    color: var(--c-on-primary);
}
.brand__mark svg { width: 1.2rem; height: 1.2rem; }


/* App shell: sidebar navigation (drawer on small screens) */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    height: 100vh;
    height: 100dvh;
    padding: var(--s-4) var(--s-3) var(--s-3);
    overflow-y: auto;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
}
.sidebar__top { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-2); min-height: 2.75rem; }
.sidebar .sidebar__close { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav__label { margin: var(--s-4) var(--s-3) var(--s-1); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.side-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 2.6rem;
    padding: 0 var(--s-3);
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
    font-weight: 550;
    text-decoration: none;
}
.side-link svg { width: 1.2rem; height: 1.2rem; flex: none; }
.side-link span:first-of-type { flex: 1; }
.side-link:hover { color: var(--c-text); background: var(--c-surface-2); }
.side-link[aria-current="page"] { color: var(--c-primary); background: var(--c-primary-soft); }
.side-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--s-1) 1.55rem; padding-left: var(--s-3); border-left: 2px solid var(--c-border); }
.side-sub__title { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sub__link { padding: var(--s-1) var(--s-2); border-radius: var(--radius-sm); color: var(--c-text-muted); font-size: var(--fs-sm); text-decoration: none; }
.side-sub__link:hover { color: var(--c-text); background: var(--c-surface-2); }
.side-sub__link[aria-current="page"] { color: var(--c-primary); font-weight: 600; background: var(--c-primary-soft); }
.sidebar__foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.sidebar__user { width: 100%; justify-content: flex-start; border-radius: var(--radius); padding: var(--s-2); text-align: left; }
.sidebar__who { display: grid; flex: 1; min-width: 0; }
.sidebar__who .menu__name { display: block; max-width: none; }
.menu__panel--up { top: auto; bottom: calc(100% + var(--s-2)); left: 0; right: 0; }
.app-main { min-width: 0; }
.mobilebar { display: none; }
.scrim { display: none; }

@media (max-width: 63.99rem) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 70;
        width: min(18rem, 86vw);
        transform: translateX(-102%);
        transition: transform 200ms ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: none; }
    .sidebar .sidebar__close { display: inline-flex; }
    .sidebar.is-open + .scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.35); }
    .mobilebar {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: var(--s-2);
        min-height: var(--header-h);
        padding: 0 var(--s-3);
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-border);
    }
    .mobilebar .brand { flex: 1; }
    .mobilebar .avatar { text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Page header */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-3) var(--s-4);
    margin-bottom: var(--s-6);
}
.page-header__meta { margin-top: var(--s-1); color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Centered (sign-in, errors, setup) */
.centered {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--s-8) var(--s-4);
}
.centered__inner { width: 100%; max-width: 26rem; }
.centered__inner--wide { max-width: 38rem; }
.centered__brand { justify-content: center; margin-bottom: var(--s-6); font-size: var(--fs-lg); }

/* 5. Components ---------------------------------------------------------- */

/* Card */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--c-border);
}
.card__title { font-size: var(--fs-md); font-weight: 650; }
.card__body { padding: var(--s-5); }
.card__body--lg { padding: var(--s-6); }
@media (min-width: 30rem) { .card__body--lg { padding: var(--s-8); } }

/* Button */
.btn {
    --btn-bg: var(--c-surface);
    --btn-fg: var(--c-text);
    --btn-border: var(--c-border-strong);
    --btn-hover: var(--c-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-4);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms var(--ease), border-color 120ms var(--ease), transform 80ms var(--ease);
}
.btn:hover { background: var(--btn-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn--primary { --btn-bg: var(--c-primary); --btn-fg: var(--c-on-primary); --btn-border: var(--c-primary); --btn-hover: var(--c-primary-hover); }
.btn--danger { --btn-bg: var(--c-danger); --btn-fg: #fff; --btn-border: var(--c-danger); --btn-hover: var(--c-danger); }
.btn--ghost { --btn-bg: transparent; --btn-border: transparent; }
.btn--lg { min-height: 3.25rem; padding-inline: var(--s-6); font-size: var(--fs-lg); }
.btn--sm { min-height: 2.25rem; padding-inline: var(--s-3); font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: var(--tap); }
.btn svg { width: 1.25rem; height: 1.25rem; flex: none; }

.spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* User menu (behaviour in ui.js) */
.menu { position: relative; }
.menu__button {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-2) 0 var(--s-1);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
}
.menu__button svg { width: 1rem; height: 1rem; flex: none; }
.menu__button:hover, .menu__button[aria-expanded="true"] { background: var(--c-surface-2); }
.menu__name { font-weight: 500; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 30rem) { .menu__name { display: none; } }
.avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
}
.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--s-2));
    min-width: 15rem;
    padding: var(--s-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.menu__header { padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--c-border); margin-bottom: var(--s-2); }
.menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text);
    text-align: left;
    text-decoration: none;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--c-surface-2); color: var(--c-text); outline-offset: -2px; }
.menu__item--danger { color: var(--c-danger); }
.menu__item--danger:hover { color: var(--c-danger); }

/* Badge — always text + dot, never colour alone */
.badge {
    --badge-fg: var(--c-neutral);
    --badge-bg: var(--c-neutral-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.2em 0.65em;
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--badge-fg);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.badge::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.badge--open, .badge--present { --badge-fg: var(--c-success); --badge-bg: var(--c-success-soft); }
.badge--closed, .badge--late { --badge-fg: var(--c-warning); --badge-bg: var(--c-warning-soft); }
.badge--finalized, .badge--excused { --badge-fg: var(--c-info); --badge-bg: var(--c-info-soft); }
.badge--absent { --badge-fg: var(--c-danger); --badge-bg: var(--c-danger-soft); }

/* Alert */
.alert {
    --alert-fg: var(--c-info);
    --alert-bg: var(--c-info-soft);
    padding: var(--s-3) var(--s-4);
    border-left: 4px solid var(--alert-fg);
    border-radius: var(--radius-sm);
    background: var(--alert-bg);
    color: var(--c-text);
    font-size: var(--fs-sm);
}
.alert strong { color: var(--alert-fg); }
.alert--success { --alert-fg: var(--c-success); --alert-bg: var(--c-success-soft); }
.alert--warning { --alert-fg: var(--c-warning); --alert-bg: var(--c-warning-soft); }
.alert--danger { --alert-fg: var(--c-danger); --alert-bg: var(--c-danger-soft); }

/* Data table — rows become labelled cards on narrow screens */
.table { width: 100%; font-size: var(--fs-sm); }
.table th {
    padding: var(--s-3) var(--s-5);
    background: var(--c-surface-2);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}
.table td { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-border); vertical-align: middle; }
.table tbody tr:hover { background: color-mix(in srgb, var(--c-surface-2) 55%, transparent); }
.table .end { text-align: right; }

@media (max-width: 40rem) {
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table--stack tr { display: block; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); }
    .table--stack td { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-1) 0; border: 0; text-align: right; }
    .table--stack td::before { content: attr(data-label); color: var(--c-text-muted); font-weight: 500; text-align: left; }
    .table--stack td[data-label=""]::before { content: none; }
    .table--stack td[data-label=""] { display: block; text-align: left; }
    .table--stack td:first-child { text-align: left; }
}

/* List rows */
.rows { margin: 0; padding: 0; list-style: none; }
.rows > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--c-border);
}
.rows > li:first-child { border-top: 0; }

/* Empty state */
.empty { padding: var(--s-8) var(--s-5); text-align: center; color: var(--c-text-muted); }
.empty__icon { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--s-3); color: var(--c-border-strong); }
.empty__title { color: var(--c-text); font-weight: 600; margin-bottom: var(--s-1); }

/* Callout (instructional panel) */
.callout {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-5);
    border-radius: var(--radius-lg);
    background: var(--c-primary-soft);
}
.callout__icon { flex: none; width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); }

/* Stat */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s-4); }
.stat { padding: var(--s-4) var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.stat__label { color: var(--c-text-muted); font-size: var(--fs-sm); }
.stat__value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }

/* Pre/log */
.log {
    max-height: 14rem;
    overflow: auto;
    margin: 0;
    padding: var(--s-3);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    white-space: pre-wrap;
}

/* 6. Forms --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field__label { font-size: var(--fs-sm); font-weight: 600; }
.field__hint { font-size: var(--fs-xs); color: var(--c-text-muted); }
.field__error { display: none; font-size: var(--fs-sm); color: var(--c-danger); font-weight: 500; }
.field.has-error .field__error { display: block; }

.input {
    width: 100%;
    min-height: var(--tap);
    padding: 0 var(--s-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.input--lg { min-height: 3.25rem; font-size: var(--fs-lg); }
.input::placeholder { color: var(--c-text-muted); opacity: 0.7; }
.input:hover { border-color: var(--c-text-muted); }
.input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent); }
.field.has-error .input { border-color: var(--c-danger); }
.field.has-error .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 25%, transparent); }

/* Input with trailing button (password reveal) */
.input-affix { position: relative; display: flex; }
.input-affix .input { padding-right: 4.5rem; }
.input-affix__btn {
    position: absolute;
    right: var(--s-1);
    top: 50%;
    transform: translateY(-50%);
    min-height: 2.25rem;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.input-affix__btn:hover { background: var(--c-primary-soft); }

.check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--c-primary); flex: none; }

.fieldset { margin: 0; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius); }
.fieldset legend { padding: 0 var(--s-2); font-weight: 600; font-size: var(--fs-sm); }

/* 7. Pages --------------------------------------------------------------- */
.auth-title { font-size: var(--fs-xl); }
.auth-foot { margin-top: var(--s-5); text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); }

.error-code { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--c-border-strong); letter-spacing: -0.03em; }

.course-code { font-weight: 650; }

.privacy { padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: var(--c-surface-2); }
.privacy__list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s-2); color: var(--c-text-muted); }
.privacy__list strong { color: var(--c-text); }

/* 8. Dialogs: SweetAlert2 theme ------------------------------------------ */
div:where(.swal2-container) div:where(.swal2-popup).swal-popup {
    padding: var(--s-6) var(--s-5) var(--s-5);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-sans);
    box-shadow: var(--shadow-lg);
}
div:where(.swal2-container) .swal-popup .swal2-title { padding: var(--s-2) 0 0; color: var(--c-text); font-size: var(--fs-xl); font-weight: 650; }
div:where(.swal2-container) .swal-popup .swal2-html-container { margin: var(--s-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-md); line-height: var(--lh-body); }
div:where(.swal2-container) .swal-popup .swal2-actions { gap: var(--s-3); margin-top: var(--s-6); }
div:where(.swal2-container) .swal-popup .swal2-footer { border-top-color: var(--c-border); color: var(--c-text-muted); font-size: var(--fs-xs); }
div:where(.swal2-container) .swal-popup .swal2-icon { margin-top: var(--s-2); }
div:where(.swal2-container).swal2-backdrop-show { background: rgb(15 20 28 / 0.5); }
div:where(.swal2-container) .swal-toast.swal2-popup {
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
}

/* 9. Utilities ----------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    left: var(--s-2);
    top: -10rem;
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
}
.skip-link:focus { top: var(--s-2); }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.break { overflow-wrap: anywhere; }
.narrow { max-width: 32rem; }
.text-center { text-align: center; }
.select-all { user-select: all; }

/* Setup wizard */
.steps { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-2) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--c-text-muted); }
.steps__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.steps__item.is-current { color: var(--c-text); font-weight: 600; }
.steps__dot { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-surface-2); font-size: var(--fs-xs); font-weight: 700; }
.steps__dot svg { width: 0.9rem; height: 0.9rem; }
.steps__item.is-current .steps__dot { background: var(--c-primary); color: var(--c-on-primary); }
.steps__item.is-done .steps__dot { background: var(--c-success-soft); color: var(--c-success); }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.checklist__item { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: var(--radius-sm); background: var(--c-surface-2); }
.checklist__mark { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-weight: 700; font-size: var(--fs-sm); }
.checklist__item.is-ok .checklist__mark { background: var(--c-success-soft); color: var(--c-success); }
.checklist__item.is-bad .checklist__mark { background: var(--c-danger-soft); color: var(--c-danger); }
.checklist__item.is-warn .checklist__mark { background: var(--c-warning-soft); color: var(--c-warning); }
details > summary { cursor: pointer; }

/* ---- Phase 3 components ---------------------------------------------------- */

/* Tabs (links) */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--c-border); margin-bottom: var(--s-5); overflow-x: auto; }
.tabs__link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--c-text-muted); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tabs__link:hover { color: var(--c-text); }
.tabs__link[aria-current="page"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: var(--c-surface-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* Toolbar above tables */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-border); }
.toolbar .input { min-height: 2.5rem; }
.toolbar__search { flex: 1 1 14rem; }
.select { min-height: var(--tap); padding: 0 2rem 0 var(--s-3); border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); }
.toolbar .select { min-height: 2.5rem; }

/* Segmented status control on the register */
.seg { display: inline-flex; border: 1px solid var(--c-border-strong); border-radius: var(--radius); overflow: hidden; }
.seg__btn { min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--s-2); border: 0; border-left: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted); font-weight: 700; font-size: var(--fs-sm); }
.seg__btn:first-child { border-left: 0; }
.seg__btn:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }
.seg__btn[aria-pressed="true"][data-status="present"] { background: var(--c-success); color: #fff; }
.seg__btn[aria-pressed="true"][data-status="late"] { background: var(--c-warning); color: #fff; }
.seg__btn[aria-pressed="true"][data-status="absent"] { background: var(--c-danger); color: #fff; }
.seg__btn[aria-pressed="true"][data-status="excused"] { background: var(--c-info); color: #fff; }
.seg__btn:disabled { cursor: not-allowed; opacity: 0.55; }
.seg.is-busy { opacity: 0.5; pointer-events: none; }

.register td { vertical-align: middle; }
.register .times { font-variant-numeric: tabular-nums; white-space: nowrap; }
.register tr.is-pinned td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }
.flag { display: inline-flex; align-items: center; gap: 0.3em; color: var(--c-warning); font-size: var(--fs-xs); font-weight: 600; }
.badge--unmarked { --badge-fg: var(--c-text-muted); --badge-bg: transparent; border: 1px dashed var(--c-border-strong); }
.badge--scheduled { --badge-fg: var(--c-neutral); --badge-bg: var(--c-neutral-soft); }
.badge--cancelled { --badge-fg: var(--c-text-muted); --badge-bg: var(--c-surface-2); text-decoration: line-through; }
.badge--pending { --badge-fg: var(--c-warning); --badge-bg: var(--c-warning-soft); }
.badge--active { --badge-fg: var(--c-success); --badge-bg: var(--c-success-soft); }
.badge--dropped { --badge-fg: var(--c-text-muted); --badge-bg: var(--c-surface-2); }

/* Session control bar */
.controlbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.controlbar__state { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-right: auto; }
.window { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--c-surface-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); }
.window::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-border-strong); }
.window.is-live { color: var(--c-success); background: var(--c-success-soft); }
.window.is-live::before { background: var(--c-success); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.stats--compact { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.stats--compact .stat { padding: var(--s-3) var(--s-4); }
.stats--compact .stat__value { font-size: var(--fs-xl); }

/* Upload */
.dropzone { display: grid; place-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-5); border: 2px dashed var(--c-border-strong); border-radius: var(--radius-lg); background: var(--c-surface-2); text-align: center; cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--c-primary); background: var(--c-primary-soft); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.sample { font-family: var(--font-mono); font-size: var(--fs-xs); }
.row-error { color: var(--c-danger); font-size: var(--fs-xs); }
.row-note { color: var(--c-warning); font-size: var(--fs-xs); }

/* Forms in cards */
.form-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-grid .span-all { grid-column: 1 / -1; }
details.disclosure > summary { list-style: none; }
details.disclosure > summary::-webkit-details-marker { display: none; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.breadcrumb a { color: var(--c-text-muted); }
.list-link { color: inherit; text-decoration: none; }
.list-link:hover .course-code { color: var(--c-primary); text-decoration: underline; }

.is-invisible { visibility: hidden; }

/* ---- Phase 4: projector display ------------------------------------------- */
/* Always light and high contrast: QR codes need dark modules on a light ground,
   and projectors wash out low-contrast colours. */
.display-body { background: #ffffff; color: #0b0f14; color-scheme: light; }
.display { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; padding: clamp(0.5rem, 1.5vw, 1.5rem) clamp(0.75rem, 2vw, 2rem); gap: clamp(0.4rem, 1.2vh, 1rem); }
.display__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.display__course { font-size: clamp(1.1rem, 2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.display__course span { font-weight: 500; color: #3b4450; }
.display__meta { font-size: clamp(0.85rem, 1.2vw, 1.15rem); color: #3b4450; }
.display__purpose { justify-self: center; padding: 0.3em 1em; border-radius: 999px; font-size: clamp(1.25rem, 2.6vw, 2.5rem); font-weight: 900; letter-spacing: 0.04em; white-space: nowrap; background: #e9edf2; color: #3b4450; }
.display__purpose.is-in { background: #136c39; color: #fff; }
.display__purpose.is-out { background: #b45309; color: #fff; }
.display__status { justify-self: end; display: grid; justify-items: end; gap: 0.15rem; text-align: right; }
.display__clock { font-size: clamp(1.1rem, 2vw, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.display__closes { font-size: clamp(0.85rem, 1.2vw, 1.15rem); font-weight: 600; color: #3b4450; font-variant-numeric: tabular-nums; }
.display__counts { display: flex; gap: 0.9em; font-size: clamp(0.85rem, 1.2vw, 1.15rem); color: #3b4450; font-variant-numeric: tabular-nums; }
.display__counts strong { color: #0b0f14; font-size: 1.35em; }

/* The QR takes every pixel the other rows leave, as a centred square. */
.display__stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; min-height: 0; gap: clamp(0.25rem, 1vh, 0.75rem); }
.display__qrwrap { position: relative; width: 100%; height: 100%; min-height: 0; container-type: size; display: grid; place-items: center; }
.display__qr, .display__idle { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
.display__qr svg { display: block; width: 100%; height: 100%; }
.display__idle { display: grid; place-content: center; text-align: center; gap: 0.5rem; border: 4px dashed #c5ccd5; border-radius: 1rem; padding: 2rem; font-size: clamp(1rem, 1.6vw, 1.5rem); color: #3b4450; }
.display__idle-title { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 800; color: #0b0f14; }
.display__under { display: grid; justify-items: center; gap: 0.2rem; width: min(100%, 64rem); text-align: center; }
.display__codebox { display: grid; justify-items: center; }
.display__codelabel { font-size: clamp(0.95rem, 1.5vw, 1.4rem); color: #3b4450; }
.display__codelabel > strong:first-child { color: #0b0f14; }
.display__code { font-family: var(--font-mono); font-size: clamp(2rem, min(5vw, 8vh), 5.5rem); font-weight: 800; letter-spacing: 0.12em; line-height: 1.05; }
.display__progress { width: min(100%, 48rem); height: 0.4rem; margin-top: 0.3rem; border-radius: 999px; background: #e9edf2; overflow: hidden; }
.display__progress span { display: block; height: 100%; width: 100%; background: #1f4e79; transform-origin: left; }
.display__offline { position: fixed; left: 50%; top: 1rem; transform: translateX(-50%); padding: 0.75rem 1.25rem; border-radius: 999px; background: #b42318; color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); }
.display__controls { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem clamp(0.75rem, 2vw, 2rem); background: rgba(255,255,255,.96); border-top: 1px solid #e3e7ec; transition: transform 250ms, opacity 250ms; }
/* Room for the controls whenever they stay up (no code on screen). */
.display:not(.is-live) { padding-bottom: 5rem; }
.display.is-live.is-calm .display__controls { transform: translateY(100%); opacity: 0; pointer-events: none; }
.display.is-live.is-calm { cursor: none; }
.display__spacer { flex: 1; }
.display-body .btn { --btn-bg: #fff; --btn-fg: #0b0f14; --btn-border: #c5ccd5; --btn-hover: #f0f2f5; }
.display-body .btn--primary { --btn-bg: #1f4e79; --btn-fg: #fff; --btn-border: #1f4e79; --btn-hover: #183e61; }
.display-body .btn--ghost { --btn-bg: transparent; --btn-border: transparent; }
@media (max-width: 52rem), (orientation: portrait) {
    .display__top { grid-template-columns: 1fr auto; }
    .display__purpose { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- Phase 4: student check-in --------------------------------------------- */
.checkin { max-width: 30rem; margin-inline: auto; }
.scanner { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.scanner video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.scanner__frame { position: absolute; inset: 15% 15% calc(15% + 3.25rem); border: 3px solid rgba(255,255,255,.9); border-radius: 1rem; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.code-entry { display: flex; gap: var(--s-2); }
.code-input { font-family: var(--font-mono); letter-spacing: 0.25em; text-transform: uppercase; text-align: center; }
.result { margin-bottom: var(--s-5); padding: var(--s-8) var(--s-5); border-radius: var(--radius-lg); text-align: center; background: var(--c-surface); border: 1px solid var(--c-border); }
.result__icon { width: 5rem; height: 5rem; margin: 0 auto var(--s-4); border-radius: 50%; display: grid; place-items: center; font-size: 2.5rem; font-weight: 900; }
.result__icon svg { width: 2.75rem; height: 2.75rem; stroke-width: 2.5; }
.result__title { font-size: var(--fs-2xl); }
.result__detail { margin-top: var(--s-2); font-size: var(--fs-lg); }
.result__hint { margin-top: var(--s-3); color: var(--c-text-muted); }
.result.is-ok { background: var(--c-success-soft); border-color: transparent; }
.result.is-ok .result__icon { background: var(--c-success); color: #fff; }
.result.is-warn { background: var(--c-warning-soft); border-color: transparent; }
.result.is-warn .result__icon { background: var(--c-warning); color: #fff; }
.result.is-bad { background: var(--c-danger-soft); border-color: transparent; }
.result.is-bad .result__icon { background: var(--c-danger); color: #fff; }
.result.is-busy .result__icon { background: var(--c-surface-2); }
.display__warning { padding: 0.75rem 1rem; border-radius: 0.75rem; background: #fdeceb; color: #7a1a12; font-size: clamp(0.9rem, 1.2vw, 1.1rem); }
.display__warning code { background: rgba(0,0,0,.06); }

/* ---- Phase 5: reporting ------------------------------------------------------ */
.pct { display: flex; align-items: center; gap: var(--s-3); min-width: 9rem; }
.pct__bar { position: relative; flex: 1; height: 0.5rem; border-radius: 999px; background: var(--c-surface-2); overflow: visible; }
.pct__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--c-success); }
.pct__bar > i { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; background: var(--c-text-muted); opacity: 0.6; }
.pct.is-low .pct__bar > span { background: var(--c-danger); }
.pct.is-low .pct__value { color: var(--c-danger); font-weight: 700; }
.pct__value { min-width: 3.5rem; text-align: right; font-weight: 600; }
.count--alert { background: var(--c-danger); color: #fff; }
.linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 0.2em; }
.linklike:hover { color: var(--c-primary); text-decoration-color: currentColor; }
.course-card { display: grid; gap: var(--s-2); }
.history-list .badge { flex: none; }
.swal-history { margin: 0; padding: 0; list-style: none; text-align: left; display: grid; gap: var(--s-2); max-height: 60vh; overflow: auto; }
.swal-history li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.text-danger { color: var(--c-danger) !important; }

/* ---- Phase 6: system page, paper sheet --------------------------------------- */
.rows > li.check-row { display: flex; align-items: flex-start; gap: var(--s-4); justify-content: flex-start; }
.check-row > .badge { flex: none; min-width: 3.25rem; justify-content: center; margin-top: 0.1rem; }
.check-row__body { display: grid; gap: var(--s-1); min-width: 0; }
.check-row__fix { white-space: pre-line; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--c-surface-2); font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
details > summary { cursor: pointer; }

/* Toggle switch (a styled checkbox; keyboard and screen readers see the checkbox) */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { width: 2.75rem; height: 1.6rem; border-radius: 999px; background: var(--c-border-strong); transition: background 150ms; position: relative; }
.switch__track::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.2)); transition: transform 150ms; }
.switch input:checked + .switch__track { background: var(--c-success); }
.switch input:checked + .switch__track::after { transform: translateX(1.15rem); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: 0.5; }
tr.is-mismatch { background: var(--c-warning-soft); }
tr.is-mismatch:hover { background: var(--c-warning-soft) !important; }

/* Printable sign-in sheet: always black on white, whatever the screen theme */
.print-body { background: #e9edf2; color: #0b0f14; }
.sheet-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); max-width: 52rem; margin: var(--s-5) auto var(--s-3); padding: 0 var(--s-4); }
.sheet { max-width: 52rem; margin: 0 auto var(--s-8); padding: 12mm; background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,.15); font-size: 10.5pt; }
.sheet__head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 3mm; border-bottom: 2px solid #000; }
.sheet__title { font-size: 15pt; margin: 0 0 1mm; color: #000; }
.sheet__head p { margin: 0; }
.sheet__count { text-align: right; white-space: nowrap; }
.sheet__note { margin: 2mm 0 3mm; font-size: 9pt; }
.sheet__table { width: 100%; border-collapse: collapse; }
.sheet__table th, .sheet__table td { border: 1px solid #000; padding: 0 2mm; height: 8.5mm; text-align: left; color: #000; background: #fff; }
.sheet__table th { height: auto; padding: 1.5mm 2mm; font-size: 9pt; background: #f1f1f1; }
.sheet__table thead { display: table-header-group; }
.sheet__table tr { break-inside: avoid; }
.sheet__n { width: 9mm; text-align: right !important; font-variant-numeric: tabular-nums; }
.sheet__sig { width: 25%; }
.sheet__table td:nth-child(2) { white-space: nowrap; }
.sheet__hint { font-size: 8.5pt; color: #444; }
.sheet__foot { margin-top: 5mm; font-size: 9pt; }
@media print {
    @page { size: A4 portrait; margin: 10mm; }
    .no-print { display: none !important; }
    .print-body { background: #fff; }
    .sheet { max-width: none; margin: 0; padding: 0; box-shadow: none; }
}

/* ---- School-wide stage 1: people and departments ------------------------------ */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-border); }
tr.is-inactive td { color: var(--c-text-muted); }
.table-scroll { overflow-x: auto; }
.swal-form { text-align: left; }
.swal-form .field__label { font-size: var(--fs-sm); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.toolbar .select { max-width: 14rem; }
.choice { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border-strong); border-radius: var(--radius); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.choice input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-primary); }
.setup-steps { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: 0; padding: 0; list-style: none; }
.setup-steps li { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.setup-steps li::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--c-border-strong); }
.setup-steps li.is-done::before { background: var(--c-success); }
.setup-steps li.is-todo::before { background: var(--c-danger); }
.telegram-steps ol { margin: 0 0 var(--s-3); padding-left: 1.2rem; display: grid; gap: var(--s-1); }
.chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--s-4); border: 1px solid var(--c-border-strong); border-radius: 999px; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.chip:hover { color: var(--c-text); background: var(--c-surface-2); }
.chip.is-active { color: var(--c-on-primary); background: var(--c-primary); border-color: var(--c-primary); }
.term-row { align-items: flex-start !important; flex-wrap: wrap; }

/* Buttons in a card header stay on one line; the group wraps under the title instead. */
.card__header > .cluster { flex-wrap: nowrap; }
.card__header .btn { white-space: nowrap; }

/* 10. Dashboards ----------------------------------------------------------
   Chart colours are their own tokens: the status set below was checked for
   colour-blind separation as neighbouring fills, in light and dark. */
:root {
    --viz-ok: #1b8a4a;
    --viz-risk: #e9a20b;
    --viz-below: #c8352f;
    --viz-none: #c5ccd5;
    --viz-series: var(--c-primary);
    --viz-wash: rgb(31 78 121 / 0.10);
    --viz-grid: #e6e9ee;
    --viz-axis: #c5ccd5;
    --viz-ink-muted: #6b7380;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --viz-ok: #0c7b60;
        --viz-risk: #b8892d;
        --viz-below: #c13363;
        --viz-none: #3a4452;
        --viz-wash: rgb(111 168 220 / 0.12);
        --viz-grid: #232b35;
        --viz-axis: #3a4452;
        --viz-ink-muted: #8d98a6;
    }
}

.dash { display: flex; flex-direction: column; gap: var(--s-6); }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.dash-head h1 { margin: 0; }
.eyebrow { margin: 0 0 var(--s-1); color: var(--c-text-muted); font-size: var(--fs-sm); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.filters__term { margin: 0; }
.select--sm { min-height: 2.25rem; padding-block: 0; font-size: var(--fs-sm); }
.seg__item {
    display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--s-3);
    border-left: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-muted);
    font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.seg__item:first-child { border-left: 0; }
.seg__item:hover { background: var(--c-surface-2); color: var(--c-text); }
.seg__item[aria-current="true"] { background: var(--c-primary); color: var(--c-on-primary); }

.dash-section { display: flex; flex-direction: column; gap: var(--s-4); }
.dash-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.dash-section__head h2 { margin: 0; font-size: var(--fs-xl); }
.dash-section__head p { margin: 0; }

/* Live lectures */
.live { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-4); }
.live[hidden] { display: none; }
.live-card {
    display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5);
    background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-success);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none;
    animation: rise .4s var(--ease) both;
}
.live-card__head { display: flex; align-items: center; gap: var(--s-3); }
.live-card__head > div { flex: 1; min-width: 0; }
.live-card__nums { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.live-card__nums strong { color: var(--c-text); font-size: var(--fs-lg); }
.live-card--student { flex-direction: row; align-items: center; }
.live-card--student .badge { flex: none; }
.live-card--student:hover { border-color: var(--c-border-strong); }
.live-card__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pulse { position: relative; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--c-success); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-success); animation: pulse 1.8s ease-out infinite; }
.pulse--sm { display: inline-block; width: .5rem; height: .5rem; vertical-align: middle; }
@keyframes pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

.meter { position: relative; display: block; height: .5rem; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: var(--viz-series); transition: width .6s var(--ease); }
.meter--thin { height: .375rem; margin-top: var(--s-2); }
.meter--inline { display: inline-block; width: 3.5rem; height: .375rem; margin-left: var(--s-2); vertical-align: middle; }

/* To-do cards */
.todo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--s-3); }
.todo-card {
    display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
    color: inherit; text-decoration: none; transition: border-color .15s, transform .15s var(--ease);
}
.todo-card:hover { border-color: var(--c-border-strong); transform: translateY(-1px); }
.todo-card__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tone-bg); color: var(--tone-fg); }
.todo-card__icon svg { width: 1.2rem; height: 1.2rem; }
.todo-card__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
.todo-card__text strong { font-size: var(--fs-lg); }
.todo-card__go { display: inline-flex; align-items: center; gap: 2px; color: var(--c-primary); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.todo-card__go svg { width: 1rem; height: 1rem; }
.todo-card--warning { --tone-fg: var(--c-warning); --tone-bg: var(--c-warning-soft); }
.todo-card--info { --tone-fg: var(--c-info); --tone-bg: var(--c-info-soft); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--s-3); }
@media (min-width: 48rem) { .kpis { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-4); } }
.kpis > .kpi--hero:first-child { grid-column: 1 / -1; }
@media (min-width: 48rem) { .kpis > .kpi--hero:first-child { grid-column: auto; } }
.kpi {
    position: relative; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-5);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.kpi p { margin: 0; }
.kpi__label { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.kpi__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; }
.kpi__value-sm { font-size: var(--fs-lg); font-weight: 700; }
.kpi__of { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 500; }
.kpi__note { color: var(--c-text-muted); font-size: var(--fs-xs); }
.kpi--hero .kpi__value { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); }
.kpi__spark { position: relative; height: 2.25rem; margin-top: var(--s-2); }
.kpi--ring { flex-direction: row; align-items: center; gap: var(--s-4); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 600; }
.delta svg { width: .9rem; height: .9rem; }
.delta--up { color: var(--c-success); }
.delta--down { color: var(--c-danger); }
.delta--flat { color: var(--c-text-muted); }

.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.spark__line { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark__area { fill: var(--viz-wash); stroke: none; }
.spark__dot { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--viz-series); box-shadow: 0 0 0 2px var(--c-surface); }

/* Rings */
.ring { position: relative; display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; flex: none; }
.ring--lg { width: 6.5rem; height: 6.5rem; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring__track { fill: none; stroke: var(--c-surface-2); stroke-width: 9; }
.ring__fill {
    fill: none; stroke: var(--ring, var(--viz-none)); stroke-width: 9; stroke-linecap: round;
    stroke-dasharray: var(--fill) var(--len); animation: ring-in 1s var(--ease) both;
}
.ring__tick { stroke: var(--c-text); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.ring__value { position: relative; font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; }
.ring--lg .ring__value { font-size: var(--fs-xl); }
.ring--ok { --ring: var(--viz-ok); }
.ring--risk { --ring: var(--viz-risk); }
.ring--below { --ring: var(--viz-below); }
@keyframes ring-in { from { stroke-dasharray: 0 var(--len); } }

/* Course rail (cards) */
.rail { position: relative; }
.rail__track { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px var(--s-2); }
.rail__track::-webkit-scrollbar { display: none; }
.rail__btn { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); background: var(--c-surface); box-shadow: var(--shadow-lg); border-radius: 50%; }
.rail__btn--prev { left: -0.75rem; }
.rail__btn--next { right: -0.75rem; }
.course-card {
    flex: 0 0 15.5rem; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    color: inherit; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, background .2s;
}
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.course-card__code { font-weight: 700; font-size: var(--fs-lg); }
.course-card__title { color: var(--c-text-muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-card__rings { display: flex; justify-content: space-around; padding: var(--s-2) 0; }
.course-card__foot { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; font-size: var(--fs-xs); color: var(--c-text-muted); }
.course-card.is-selected { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-lg); }
.course-card.is-selected .course-card__title,
.course-card.is-selected .course-card__foot { color: inherit; opacity: .85; }
.course-card.is-selected .ring__track { stroke: rgb(255 255 255 / 0.18); }
.course-card.is-selected .ring__fill { stroke: #fff; }
.course-card.is-selected .ring__tick { stroke: #fff; opacity: .8; }
.course-card.is-selected .chip-stat { background: rgb(255 255 255 / 0.16); color: inherit; }
.stack--xs { display: flex; flex-direction: column; gap: var(--s-1); }
.center { align-items: center; text-align: center; }

.chip-stat { display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--s-2) 1px 4px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--tone-bg); color: var(--tone-fg); }
.chip-stat svg { width: .8rem; height: .8rem; }
.chip-stat--below { --tone-fg: var(--c-danger); --tone-bg: var(--c-danger-soft); }
.chip-stat--risk { --tone-fg: var(--c-warning); --tone-bg: var(--c-warning-soft); }
.chip-stat--ok { --tone-fg: var(--c-success); --tone-bg: var(--c-success-soft); }

/* Chart cards */
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s-4); }
@media (min-width: 64rem) { .viz-grid { grid-template-columns: 2fr 1fr; } .viz-card--wide { grid-column: 1; } }
.viz-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5); min-width: 0; }
.viz-card__head h3 { margin: 0; font-size: var(--fs-md); }
.viz-card__head p { margin: 2px 0 0; }
.viz-card__actions { margin-top: auto; }
.viz-empty { margin: auto 0; padding: var(--s-6) 0; text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); }
.viz-table summary { cursor: pointer; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.viz-table .table { margin-top: var(--s-2); font-size: var(--fs-sm); }
.chart { position: relative; min-height: 13rem; }
.chart.is-empty { min-height: 0; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { fill: var(--viz-ink-muted); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart .c-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .c-base { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .c-line { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-area { fill: var(--viz-wash); }
.chart .c-dot { fill: var(--viz-series); stroke: var(--c-surface); stroke-width: 2; }
.chart .c-bar { fill: var(--viz-series); transition: opacity .15s; }
.chart .c-bar.is-hot, .chart .c-dot.is-hot { opacity: .75; }
.chart .c-rule { stroke: var(--viz-below); stroke-width: 1.5; }
.chart .c-rule-label { fill: var(--viz-below); font-weight: 600; }
.chart .c-rule-label, .chart .c-label { paint-order: stroke; stroke: var(--c-surface); stroke-width: 4px; stroke-linejoin: round; }
.chart .c-label { fill: var(--c-text); font-weight: 600; }
.chart .c-cross { stroke: var(--viz-axis); stroke-width: 1; }
.chart .c-hit { fill: transparent; }
.chart:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

.viz-tip {
    position: fixed; z-index: 50; pointer-events: none; max-width: 16rem; padding: var(--s-2) var(--s-3);
    background: var(--c-text); color: var(--c-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    font-size: var(--fs-xs); line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.viz-tip.is-on { opacity: 1; transform: none; }
.viz-tip strong { display: block; font-size: var(--fs-sm); }

/* Band bar */
.bands { display: flex; flex-direction: column; gap: var(--s-4); }
.bands__bar { display: flex; gap: 2px; height: 1.25rem; border-radius: 4px; overflow: hidden; }
.bands__bar--empty { background: var(--c-surface-2); }
.bands__seg { min-width: 4px; background: var(--seg); transition: opacity .15s; animation: grow .8s var(--ease) both; transform-origin: left; }
.bands__seg:hover, .bands__seg:focus-visible { opacity: .8; outline: none; }
.bands__seg--ok, .key--ok { --seg: var(--viz-ok); }
.bands__seg--risk, .key--risk { --seg: var(--viz-risk); }
.bands__seg--below, .key--below { --seg: var(--viz-below); }
.bands__seg--none, .key--none { --seg: var(--viz-none); }
.bands__legend { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.bands__legend li { display: grid; grid-template-columns: auto 1fr auto 2.5rem; align-items: center; gap: var(--s-2); }
.bands__legend .muted { text-align: right; }
.key { width: .75rem; height: .75rem; border-radius: 3px; background: var(--seg); }
@keyframes grow { from { transform: scaleX(0); } }

/* Attendance grid */
.att-grid-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s-5)); padding: 0 var(--s-5); }
.att-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.att-grid th, .att-grid td { padding: var(--s-2) 4px; border-bottom: 1px solid var(--c-border); text-align: center; white-space: nowrap; }
.att-grid thead th { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.att-grid thead a { color: inherit; text-decoration: none; }
.att-grid thead a:hover { color: var(--c-primary); }
.att-grid tbody tr:last-child > * { border-bottom: 0; }
.att-grid .end { text-align: right; }
.att-grid__who { position: sticky; left: 0; z-index: 1; background: var(--c-surface); text-align: left !important; }
.att-grid tbody .att-grid__who { display: flex; align-items: center; gap: var(--s-2); font-weight: 500; }
.att-grid__who > span:last-child { display: flex; flex-direction: column; }
.att-grid__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
.avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--fs-xs); }
.avatar--lg { width: 3.5rem; height: 3.5rem; font-size: var(--fs-lg); }
.cell > span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cell-bg); color: var(--cell-fg); }
.cell svg { width: .9rem; height: .9rem; stroke-width: 2.5; }
.cell--present { --cell-bg: var(--viz-ok); --cell-fg: #fff; }
.cell--late { --cell-bg: var(--viz-risk); --cell-fg: #161b22; }
.cell--absent { --cell-bg: var(--viz-below); --cell-fg: #fff; }
.cell--excused { --cell-bg: var(--c-surface-2); --cell-fg: var(--c-text-muted); }
.cell--none > span { width: .5rem; height: .5rem; background: var(--c-border); }
td.cell:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.pct-pill { display: inline-block; min-width: 3.25rem; padding: 1px var(--s-2); border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; background: var(--tone-bg, var(--c-surface-2)); color: var(--tone-fg, var(--c-text)); }
.pct-pill--below { --tone-fg: var(--c-danger); --tone-bg: var(--c-danger-soft); }
.pct-pill--risk { --tone-fg: var(--c-warning); --tone-bg: var(--c-warning-soft); }
.pct-pill--ok { --tone-fg: var(--c-success); --tone-bg: var(--c-success-soft); }
.streak { display: block; }
.grid-key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }
.grid-key li { display: inline-flex; align-items: center; gap: var(--s-1); }
.grid-key .cell > span { width: 1.1rem; height: 1.1rem; }
.grid-key .cell svg { width: .7rem; height: .7rem; }
.att-grid--row { width: auto; align-self: flex-start; }
.att-grid--row td { padding: 2px; border: 0; }

/* Recent lectures */
.recent .meter--inline { display: none; }
@media (min-width: 48rem) { .recent .meter--inline { display: inline-block; } }
.recent-list > li { gap: var(--s-3); }

/* Student */
.dash-head--student { align-items: center; }
.who { display: flex; align-items: center; gap: var(--s-4); }
.who p { margin: 2px 0 0; }
.checkin-cta { flex: 1 1 100%; justify-content: center; }
@media (min-width: 48rem) { .checkin-cta { flex: 0 0 auto; } }
.kpis--student { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.kpis--student .kpi--hero { grid-column: 1 / -1; }
@media (min-width: 48rem) { .kpis--student { grid-template-columns: 2fr 1fr 1fr; } .kpis--student .kpi--hero { grid-column: auto; } }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--s-4); }
.student-course { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5); animation: rise .4s var(--ease) both; }
.student-course__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
    .pulse::after, .ring__fill, .bands__seg, .live-card, .student-course { animation: none; }
    .course-card, .todo-card, .meter__fill { transition: none; }
}
@media (forced-colors: active) {
    .bands__seg, .key, .cell > span { forced-color-adjust: none; border: 1px solid CanvasText; }
}

.recent td, .recent th { white-space: nowrap; }
@media (max-width: 40rem) { .hide-sm { display: none; } .recent .btn { padding-inline: var(--s-2); } }

/* 11. Onboarding --------------------------------------------------------- */
.onboard-steps { margin: 0; padding: var(--s-2) var(--s-5) var(--s-4); list-style: none; display: grid; gap: var(--s-1); }
.onboard-step { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--c-border); }
.onboard-step:first-child { border-top: 0; }
.onboard-step__mark {
    display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    border: 2px solid var(--c-border-strong); color: var(--c-text-muted); font-weight: 700; font-size: var(--fs-sm);
}
.onboard-step__mark svg { width: 1rem; height: 1rem; stroke-width: 3; }
.onboard-step.is-done .onboard-step__mark { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.onboard-step.is-next .onboard-step__mark { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); }
.onboard-step__text { flex: 1; min-width: 0; }
.invite-table th[scope="row"] { font-weight: 600; }
.invite-table td, .invite-table th { vertical-align: middle; }
.invite-table .meter { width: 6rem; }
.message-box { width: 100%; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.5; resize: vertical; }

/* 12. Schools ------------------------------------------------------------ */
.unit-setting { display: inline-flex; align-items: center; gap: var(--s-2); }
.schools-upload { max-width: 40rem; }
.invite-table tbody th { text-transform: none; letter-spacing: normal; font-size: var(--fs-sm); color: var(--c-text); background: transparent; }