/* ── Design tokens ──────────────────────────────────────────────────────────
   Light values live on :root; the dark block only re-points the same names, so
   every rule below is written once and works in both schemes. The sidebar keeps
   its own dark palette in both themes — it is a deliberately dark surface — but
   its text tokens are defined here so nothing falls back to a browser default
   link colour on top of it. */
:root {
    --us-bg: #f4f6fb;
    --us-surface: #ffffff;
    --us-surface-2: #f9fafb;
    --us-border: #eaecf0;
    --us-text: #1b2559;
    --us-text-muted: #667085;
    --us-accent: #4c6ef5;
    --us-danger: #b42318;
    --us-accent-soft: #eef2ff;
    --us-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .05);

    /* Aliases and extras used by the component-scoped stylesheets. These were
       referenced before the palette existed; an undefined custom property makes
       the whole declaration invalid, which is why card text was falling back to
       the inherited body colour on a white card. */
    --us-text-primary: var(--us-text);
    --us-radius: 12px;
    --us-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --us-shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
    --us-ring-track: #eaecf0;
    --us-skeleton-color: #eaecf0;

    /* Sidebar — dark surface, light content */
    --us-side-from: #131a3a;
    --us-side-to: #1e1145;
    --us-side-text: #c4cce4;
    --us-side-text-strong: #ffffff;
    --us-side-muted: #7f8bb0;
    --us-side-hover: rgba(255, 255, 255, .07);
    --us-side-active: rgba(124, 150, 255, .16);
    --us-side-border: rgba(255, 255, 255, .08);
    --us-side-accent: #8ea6ff;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Native widgets — the date picker's calendar, a select's dropdown list,
           scrollbars — are drawn by the browser and stay light unless told. */
        color-scheme: dark;

        --us-bg: #0f1320;
        --us-surface: #171c2c;
        --us-surface-2: #1d2334;
        --us-border: #2a3145;
        --us-text: #e6eaf5;
        --us-text-muted: #99a3bd;
        --us-accent: #8ea6ff;
        --us-danger: #ff9d95;
        --us-accent-soft: #1e2540;
        --us-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
        --us-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
        --us-shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
        --us-ring-track: #2a3145;
        --us-skeleton-color: #232a3d;

        /* Slightly deeper than the light-theme sidebar so it still reads as a
           distinct surface against the darker page background. */
        --us-side-from: #0c1128;
        --us-side-to: #150c30;
        --us-side-border: rgba(255, 255, 255, .06);
    }
}

html, body {
    background: var(--us-bg);
    color: var(--us-text);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ── Sign-in ─────────────────────────────────────────────────────────────── */
.blank-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--us-bg);
    padding: 1.5rem;
}

.login-shell { width: 100%; max-width: 26rem; }

.login-card {
    background: var(--us-surface);
    border-radius: 14px;
    padding: 2.25rem 2rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
}

.login-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--us-text); }
.login-subtitle { margin: .35rem 0 1.75rem; color: var(--us-text-muted); font-size: .95rem; }

.login-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--us-text);
    margin-bottom: .35rem;
}

.login-input {
    width: 100%;
    padding: .6rem .75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--us-border);
    border-radius: 8px;
    font-size: .95rem;
}

.login-input:focus {
    outline: 2px solid #3b5bdb;
    outline-offset: 1px;
    border-color: var(--us-accent);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    font-size: .88rem;
    color: var(--us-text-muted);
}

.login-button {
    width: 100%;
    padding: .65rem 1rem;
    border: 0;
    border-radius: 8px;
    background: var(--us-accent);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
}

.login-button:hover { background: #314bb8; }

.login-error {
    background: #fef3f2;
    border: 1px solid #fda29b;
    color: #b42318;
    padding: .65rem .8rem;
    border-radius: 8px;
    font-size: .88rem;
    margin-bottom: 1.25rem;
}

/* ── Session controls ────────────────────────────────────────────────────── */
.us-user { color: var(--us-text); font-size: .9rem; margin-right: 1rem; }
.us-logout-form { display: inline; }

.us-logout {
    border: 1px solid var(--us-border);
    background: var(--us-surface);
    border-radius: 7px;
    padding: .3rem .8rem;
    font-size: .85rem;
    cursor: pointer;
    color: var(--us-text);
}

.us-logout:hover { background: var(--us-surface-2); }

.access-denied, .access-checking { padding: 2.5rem 1rem; max-width: 34rem; }
.access-denied h1 { font-size: 1.35rem; color: #b42318; }
.access-denied p { color: var(--us-text-muted); }

/* ── School structure admin ──────────────────────────────────────────────── */
.us-page-intro { color: var(--us-text-muted); max-width: 46rem; margin-bottom: 1.5rem; }

.us-alert { padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1.25rem; font-size: .9rem; }
.us-alert-ok { background: #ecfdf3; border: 1px solid #6ce9a6; color: #027a48; }
.us-alert-error { background: #fef3f2; border: 1px solid #fda29b; color: #b42318; }

@media (prefers-color-scheme: dark) {
    .us-alert-error { background: #2b1614; border-color: #7a2f28; color: #ffb4ac; }
}

.us-empty { background: var(--us-surface); border: 1px solid var(--us-border); border-radius: 12px; padding: 2rem; }
.us-empty h2 { font-size: 1.15rem; margin-top: 0; }

.us-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .85rem;
    margin: 1.25rem 0;
}

.us-template-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    text-align: left;
    padding: .9rem 1rem;
    border: 1px solid var(--us-border);
    border-radius: 10px;
    background: var(--us-surface);
    cursor: pointer;
}

.us-template-card:hover { border-color: var(--us-accent); background: var(--us-accent-soft); }
.us-template-card span { font-size: .82rem; color: var(--us-text-muted); }

.us-stage-card {
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    box-shadow: var(--us-shadow);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.1rem;
}

.us-stage-header { display: flex; justify-content: space-between; align-items: flex-start; }
.us-stage-header h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.us-stage-header small { color: var(--us-text-muted); }

.us-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    background: var(--us-surface-2);
    border-radius: 5px;
    padding: .1rem .4rem;
    color: var(--us-text-muted);
}

.us-count { color: var(--us-text-muted); font-size: .85rem; }
.us-muted { color: var(--us-text-muted); font-size: .88rem; }

.us-table { width: 100%; border-collapse: collapse; margin: .9rem 0; font-size: .9rem; }
.us-table th {
    text-align: left;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--us-text-muted);
    border-bottom: 1px solid var(--us-border);
    padding: .45rem .5rem;
}
.us-table td { padding: .5rem; border-bottom: 1px solid var(--us-border); }
.us-row-retired td { opacity: .5; }
.us-row-actions { text-align: right; white-space: nowrap; }

/* Link buttons in a row of actions need separating; without this "Edit" and
   "Set current" run together into one unreadable word. */
.us-row-actions .us-btn-link + .us-btn-link { margin-left: .75rem; }

.us-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.us-inline-form input {
    padding: .45rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 7px;
    font-size: .88rem;
}
.us-stage-form { margin-top: 1rem; }

.us-btn-primary {
    background: var(--us-accent); color: #fff; border: 0; border-radius: 7px;
    padding: .45rem 1rem; font-size: .88rem; cursor: pointer;
}
.us-btn-secondary {
    background: var(--us-surface); color: var(--us-text); border: 1px solid var(--us-border); border-radius: 7px;
    padding: .45rem 1rem; font-size: .88rem; cursor: pointer;
}
.us-btn-link {
    background: none; border: 0; color: var(--us-accent); cursor: pointer;
    font-size: .88rem; padding: .2rem 0;
}
.us-btn-link:hover { text-decoration: underline; }

/* Destructive actions read as destructive before they are clicked, not after. */
.us-btn-link.us-danger { color: var(--us-danger); }

.us-inline-form select {
    padding: .45rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 7px;
    font-size: .88rem;
    background: var(--us-surface);
}

/* ── ERP settings ────────────────────────────────────────────────────────── */
.us-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.us-form-grid label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--us-text);
}

.us-form-grid input, .us-form-grid select {
    padding: .45rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 7px;
    font-size: .88rem;
    font-weight: 400;
}

.us-form-grid .us-form-wide { grid-column: 1 / -1; }
.us-form-grid small { font-weight: 400; }

.us-ok { color: #027a48; }
.us-fail { color: #b42318; }

.us-key-reveal {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    background: var(--us-surface);
    border: 1px dashed #6ce9a6;
    border-radius: 7px;
    padding: .55rem .7rem;
    margin-top: .5rem;
    word-break: break-all;
}

.us-btn-move {
    border: 1px solid var(--us-border);
    background: var(--us-surface);
    border-radius: 6px;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
    font-size: .7rem;
    color: var(--us-text-muted);
    cursor: pointer;
    margin-right: .15rem;
}

.us-btn-move:hover:not(:disabled) { background: var(--us-surface-2); border-color: var(--us-accent); color: var(--us-accent); }
.us-btn-move:disabled { opacity: .3; cursor: default; }


/* ── Sidebar ────────────────────────────────────────────────────────────────
   These classes are used by NavMenu.razor but had no styles at all, so links
   rendered in the browser's default blue on the dark gradient — unreadable.
   Everything here inherits from the sidebar tokens above. */
.us-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    padding: 1rem .75rem 0;
    color: var(--us-side-text);

    /* Two soft light sources over the base gradient give the flat panel some
       depth without needing an image asset. */
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(110, 140, 255, .20), transparent 60%),
        radial-gradient(90% 50% at 100% 100%, rgba(190, 110, 255, .16), transparent 65%),
        linear-gradient(170deg, var(--us-side-from) 0%, var(--us-side-to) 100%);
    border-right: 1px solid var(--us-side-border);
}

.us-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem .5rem 1.15rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--us-side-border);
}

.us-brand-mark {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(140deg, #5b7cfa, #9d5bfa);
    box-shadow: 0 4px 14px rgba(91, 124, 250, .45);
}

.us-brand-mark svg { width: 1.35rem; height: 1.35rem; }

.us-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.us-brand-text strong { color: var(--us-side-text-strong); font-size: 1.02rem; letter-spacing: .01em; }
.us-brand-text small { color: var(--us-side-muted); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }

.us-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.us-nav-section {
    padding: 1.05rem .75rem .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--us-side-muted);
}

/* The colour is set explicitly rather than inherited, because NavLink renders a
   plain <a> that would otherwise pick up the browser's default link colour. */
.us-nav-link,
.us-sidebar a.us-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .58rem .75rem;
    margin-bottom: .15rem;
    border-radius: 9px;
    color: var(--us-side-text);
    text-decoration: none;
    font-size: .9rem;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}

.us-nav-link:hover,
.us-sidebar a.us-nav-link:hover {
    background: var(--us-side-hover);
    color: var(--us-side-text-strong);
}

.us-nav-link:focus-visible {
    outline: 2px solid var(--us-side-accent);
    outline-offset: 1px;
}

.us-nav-link.active,
.us-sidebar a.us-nav-link.active {
    background: var(--us-side-active);
    color: var(--us-side-text-strong);
    font-weight: 600;
}

/* Accent bar marks the current page without relying on colour alone. */
.us-nav-link.active::before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 0 3px 3px 0;
    background: var(--us-side-accent);
}

.us-nav-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    opacity: .82;
}

.us-nav-link.active .us-nav-icon { opacity: 1; color: var(--us-side-accent); }

.us-sidebar-footer {
    padding: .9rem .75rem 1.1rem;
    border-top: 1px solid var(--us-side-border);
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.us-sidebar-footer small { color: var(--us-side-muted); font-size: .72rem; }

.us-role-chip {
    align-self: flex-start;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--us-side-text-strong);
    background: var(--us-side-active);
    border: 1px solid var(--us-side-border);
}

/* ── Shell surfaces follow the theme ────────────────────────────────────── */
.us-user { color: var(--us-text); }

.us-logout {
    background: var(--us-surface);
    color: var(--us-text);
    border-color: var(--us-border);
}

.us-logout:hover { background: var(--us-surface-2); }

/* ── Timetable & rota grids ──────────────────────────────────────────────── */
.us-timetable-scroll {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--us-border);
    border-radius: 12px;
    background: var(--us-surface);
}

.us-timetable {
    border-collapse: collapse;
    width: 100%;
    min-width: 52rem;
    font-size: .86rem;
}

.us-timetable th,
.us-timetable td {
    border: 1px solid var(--us-border);
    padding: .45rem .5rem;
    vertical-align: top;
    text-align: left;
}

.us-timetable thead th {
    background: var(--us-surface-2);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.us-tt-corner { width: 8.5rem; }

.us-tt-day {
    background: var(--us-surface-2);
    white-space: nowrap;
    font-weight: 600;
}

.us-tt-period { display: block; font-weight: 600; }
.us-tt-time   { display: block; font-size: .72rem; color: var(--us-text-muted); font-weight: 400; }

/* Breaks are dimmed so the teaching day reads as the foreground. */
.us-tt-break { background: var(--us-surface-2); }
.us-tt-breaklabel { color: var(--us-text-muted); }

.us-tt-lesson {
    position: relative;
    background: var(--us-accent-soft);
    border-left: 3px solid var(--us-accent);
    border-radius: 6px;
    padding: .35rem .45rem;
    margin-bottom: .3rem;
}

.us-tt-lesson strong { display: block; font-size: .84rem; }
.us-tt-lesson span   { display: block; font-size: .74rem; color: var(--us-text-muted); }
.us-tt-room          { font-style: italic; }

.us-tt-remove {
    position: absolute;
    top: .1rem;
    right: .2rem;
    font-size: .95rem;
    line-height: 1;
    padding: 0;
}

.us-tt-today { outline: 2px solid var(--us-accent); outline-offset: -2px; }

/* An understaffed duty is called out rather than left as an empty cell. */
.us-tt-short { background: rgba(240, 68, 56, .07); }

.us-tt-shortlabel {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: #b42318;
}

.us-day-toggles { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 1rem; }

.us-day-toggle {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border: 1px solid var(--us-border);
    border-radius: 999px;
    font-size: .85rem;
    cursor: pointer;
}

.us-check { display: inline-flex; align-items: center; gap: .35rem; }
.us-subhead { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.us-row-break td { opacity: .65; font-style: italic; }

/* ── Subject chips ───────────────────────────────────────────────────────── */
.us-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }

.us-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border: 1px solid var(--us-border);
    border-radius: 999px;
    background: var(--us-surface-2);
    font-size: .82rem;
    white-space: nowrap;
}

.us-chip small { color: var(--us-text-muted); font-size: .7rem; }

/* Required subjects are visually distinct from options at a glance. */
.us-chip-core {
    background: var(--us-accent-soft);
    border-color: var(--us-accent);
}

.us-chip-remove {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--us-text-muted);
    font-size: .95rem;
    line-height: 1;
    padding: 0 0 0 .1rem;
}

.us-chip-remove:hover { color: #b42318; }

.us-subrow td { background: var(--us-surface-2); }

/* ── Register marking ────────────────────────────────────────────────────── */
.us-mark-row { display: flex; flex-wrap: wrap; gap: .3rem; }

.us-mark {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 999px;
    font-size: .8rem;
    cursor: pointer;
    background: var(--us-surface);
    user-select: none;
}

.us-mark input { position: absolute; opacity: 0; width: 0; height: 0; }

/* The selected mark is colour-coded so a register can be scanned at a glance. */
.us-mark-on { color: #fff; font-weight: 600; border-color: transparent; }
.us-mark-present { background: #12b76a; }
.us-mark-late    { background: #f79009; }
.us-mark-absent  { background: #f04438; }
.us-mark-excused { background: #6172f3; }

.us-warn { color: #b54708; font-weight: 600; }
.us-bad  { color: #b42318; font-weight: 600; }

/* ── Access rights matrix ────────────────────────────────────────────────── */
.us-access-table td span.us-muted { display: block; font-size: .78rem; }
.us-access-role { text-align: center; white-space: nowrap; }
.us-access-cell { text-align: center; }

/* ── Destructive actions ─────────────────────────────────────────────────── */
.us-btn-danger {
    background: #b42318;
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: .35rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.us-btn-danger:hover { background: #912018; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Document numbering preview — the format takes effect before it is saved, so
   the rendered example is the control that actually explains the settings. */
.us-preview-line {
    background: var(--us-surface-2);
    border: 1px solid var(--us-border);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin: 0 0 1rem;
    font-size: .9rem;
}
.us-preview-line .us-code { font-size: 1rem; }

/* Checkboxes sit badly in the labelled column grid, where each cell reserves
   room for a caption above its control. Given their own row they line up. */
.us-check-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .25rem 0 1rem; }

/* ── Form controls ──────────────────────────────────────────────────────────
   A control with no colour of its own renders the browser default — black text
   on whatever background it was given, which on this theme's dark surfaces is
   unreadable. Set once here so every form in the app inherits it rather than
   each page remembering. */
input, select, textarea {
    color: var(--us-text);
    background-color: var(--us-surface);
    font-family: inherit;
}

input::placeholder, textarea::placeholder { color: var(--us-text-muted); }

input:disabled, select:disabled, textarea:disabled {
    background-color: var(--us-surface-2);
    color: var(--us-text-muted);
}

/* Fee setup and fee list ---------------------------------------------------- */

/* Retired rows stay readable — they are history, not noise — but must not read
   as live configuration. */
.us-row-muted td { opacity: .55; }

.us-subhead {
    font-size: .95rem;
    margin: 1.4rem 0 .4rem;
    color: var(--us-text);
}

.us-small { font-size: .78rem; }

/* Money reads far faster right-aligned in a fixed-width figure, since the digits
   line up by place value down the column. */
.us-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Invoice status chips --------------------------------------------------------
   The question a finance clerk is asking of a list of invoices is "is money
   owed?", so the colour answers that before the label is read. */
.us-chip-ok { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.us-chip-bad { background: #fef3f2; border-color: #fda29b; color: #b42318; }
.us-chip-muted { background: var(--us-surface-2); border-color: var(--us-border); color: var(--us-text-muted); }

@media (prefers-color-scheme: dark) {
    .us-chip-ok { background: #10291d; border-color: #1f5b3a; color: #75e0a7; }
    .us-chip-bad { background: #2b1614; border-color: #7a2f28; color: #ffb4ac; }
}

/* Headline figures on a document — total, paid, outstanding, due. */
.us-figure-row { display: flex; flex-wrap: wrap; gap: 2rem; }
.us-figure { display: flex; flex-direction: column; gap: .2rem; }
.us-figure-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--us-text-muted);
}
.us-figure-value { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.us-table tfoot td {
    border-top: 2px solid var(--us-border);
    font-variant-numeric: tabular-nums;
}

/* Email --------------------------------------------------------------------- */

/* A diverted-mail warning must be impossible to miss: someone reading this page
   on the live system needs to know instantly that families are getting nothing. */
.us-alert-warn {
    background: #fffaeb;
    border: 1px solid #fedf89;
    color: #93370d;
    padding: .75rem 1rem;
    border-radius: var(--us-radius);
    margin-bottom: 1rem;
}

@media (prefers-color-scheme: dark) {
    .us-alert-warn { background: #2b2011; border-color: #7a5a1f; color: #fedf89; }
}

.us-template { padding: .8rem 0; border-top: 1px solid var(--us-border); }
.us-template:first-of-type { border-top: none; }

/* Templates are plain text and their line breaks are the message, so they are
   shown as written rather than reflowed. */
.us-template-body {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .85rem;
    color: var(--us-text-muted);
    background: var(--us-surface-2);
    padding: .7rem .9rem;
    border-radius: var(--us-radius);
    margin: .4rem 0;
}

.us-form-grid textarea {
    width: 100%;
    font-family: inherit;
    font-size: .9rem;
    padding: .5rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    background: var(--us-surface);
    color: var(--us-text);
}

/* Parent portal invoices ------------------------------------------------------
   A family reads one bill at a time, so each is a card rather than a table row —
   the amount owed and whether it is late are the two things that must land
   before anything else. */
.us-invoice {
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    padding: .9rem 1rem;
    margin-bottom: .8rem;
    background: var(--us-surface);
}

.us-invoice-overdue { border-color: #fda29b; }

@media (prefers-color-scheme: dark) {
    .us-invoice-overdue { border-color: #7a2f28; }
}

.us-invoice-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.us-invoice-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.us-invoice-amount strong { font-size: 1.2rem; }

.us-invoice-status {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

/* Public school page -----------------------------------------------------------
   This is the one page in the product a visitor sees before they are anyone, so
   it does not use the signed-in chrome at all. */

.us-landing { color: var(--us-text); }

.us-landing-plain {
    max-width: 34rem;
    margin: 6rem auto;
    padding: 0 1.5rem;
    text-align: center;
}

.us-landing-logo { max-height: 5rem; margin-bottom: 1rem; }

.us-landing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--us-border);
    flex-wrap: wrap;
}

.us-landing-brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.us-landing-brand img { max-height: 2.2rem; }

.us-landing-bar nav { display: flex; align-items: center; gap: 1.1rem; }
.us-landing-bar nav a { color: var(--us-text-muted); text-decoration: none; }
.us-landing-bar nav a:hover { color: var(--us-text); }
.us-landing-bar nav a.us-btn-primary { color: #fff; }

/* Hero ------------------------------------------------------------------------
   Slides are stacked and cross-faded rather than moved, so nothing reflows as
   the pictures change and the words never jump. */
.us-hero {
    position: relative;
    height: min(30rem, 62vh);
    overflow: hidden;
    background: var(--us-surface-2);
}

.us-hero-empty { height: auto; padding: 4rem 1.5rem; }

.us-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .8s ease;
}

.us-hero-slide.is-current { opacity: 1; }

.us-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.us-hero-slide figcaption {
    position: absolute;
    bottom: 3.2rem;
    left: 1.5rem;
    color: #fff;
    font-size: .85rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.us-hero-words {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    padding: 3rem 1.5rem;
    color: #fff;
    /* A gradient rather than a flat wash: the words stay readable over a dark or
       a bright photograph without hiding the picture. */
    background: linear-gradient(to right, rgba(0, 0, 0, .65), transparent);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.us-hero-empty .us-hero-words {
    background: none;
    color: var(--us-text);
    margin: 0 auto;
    text-align: center;
}

.us-hero-words h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 .5rem; }
.us-hero-words p { font-size: 1.05rem; margin: 0; opacity: .92; }

.us-hero-dots {
    position: absolute;
    bottom: 1.2rem;
    left: 1.5rem;
    display: flex;
    gap: .5rem;
    z-index: 2;
}

.us-hero-dots button {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.us-hero-dots button.is-current { background: #fff; }

/* Highlights */
.us-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    justify-content: center;
    padding: 1.6rem 1.5rem;
    border-bottom: 1px solid var(--us-border);
}

.us-flag { text-align: center; }
.us-flag strong { display: block; font-size: 1.1rem; }
.us-flag span { font-size: .85rem; color: var(--us-text-muted); }

/* Sections */
.us-landing-section { max-width: 60rem; margin: 0 auto; padding: 3rem 1.5rem; }
.us-landing-alt { background: var(--us-surface-2); max-width: none; }
.us-landing-alt > * { max-width: 60rem; margin-inline: auto; }

.us-prose { line-height: 1.65; color: var(--us-text-muted); }
.us-prose p { margin: 0 0 1rem; }

/* Staff */
.us-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1.5rem;
}

.us-staff-card {
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    padding: 1.1rem;
    background: var(--us-surface);
}

.us-staff-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--us-radius);
    margin-bottom: .7rem;
}

.us-staff-initials {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--us-radius);
    background: var(--us-surface-2);
    color: var(--us-text-muted);
    font-size: 2rem;
    margin-bottom: .7rem;
}

.us-staff-card h3 { margin: 0 0 .2rem; font-size: 1rem; }
.us-staff-role { margin: 0 0 .5rem; font-size: .85rem; color: var(--us-text-muted); }
.us-staff-bio { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--us-text-muted); }

.us-landing-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    padding: 2.5rem 1.5rem;
    border-top: 1px solid var(--us-border);
    font-size: .88rem;
    color: var(--us-text-muted);
}

/* Editor bits */
.us-logo-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.us-logo-preview { max-height: 4rem; max-width: 12rem; }

.us-logo-empty {
    display: grid;
    place-items: center;
    width: 8rem;
    height: 4rem;
    border: 1px dashed var(--us-border);
    border-radius: var(--us-radius);
    color: var(--us-text-muted);
    font-size: .8rem;
}

.us-thumb { width: 5rem; height: 3.2rem; object-fit: cover; border-radius: 4px; display: block; }