/* App-wide Blazor Server overrides. Per the UI fidelity contract, new CSS goes here only when a
   genuinely new interaction has no prototype equivalent, and each entry must be logged in
   memory-bank/decisions.md. */

/* StudentDetail (and future generated detail drawers): each entity section renders as a .card.
   .detail-list carries a global margin-top:15px that would double-space under the card's <h3>,
   and stacked section cards need vertical rhythm inside the drawer. */
.drawer .card {
    margin-bottom: 12px;
}

.drawer .card .detail-list {
    margin-top: 0;
}

/* Dashboard "School Setup Status" banner (operator direction 2026-09-01). The prototype dashboard has
   no such banner (its dashboard() shows metric cards directly), so these are new classes. Every color
   is from the closed palette: #EEF2FF / #C7D2FE (indigo-50/300 chip), #E2E8F0 track + #4F46E5 fill +
   999px radius (mirrors .v4-progress / .hw423-progress / .c54-progress), #0F172A / #334155 / #64748B
   (slate-900/700/500). CTA reuses the app-wide .btn.primary (#4F46E5, white, rounded) — the operator's
   #1e1b4b is not in the palette and #4f46e5 was given as the alternative. Logged in decisions.md. */
.setup-banner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 16px;
    padding: 20px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 12px;
}

.setup-banner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.setup-banner-top h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
}

.setup-dismiss {
    border: 0;
    background: none;
    padding: 4px 0;
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.setup-dismiss:hover {
    color: #0F172A;
}

.setup-banner-mid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.setup-progress {
    flex: 1;
    min-width: 0;
}

.setup-progress-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.setup-progress-bar {
    height: 8px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
}

.setup-progress-bar i {
    display: block;
    height: 100%;
    background: #4F46E5;
    border-radius: 999px;
}

.setup-next {
    margin: 0;
    font-size: 14px;
    color: #64748B;
}

.setup-banner .btn.primary {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .setup-banner-mid {
        flex-direction: column;
        align-items: stretch;
    }

    .setup-banner .btn.primary {
        width: 100%;
    }
}

/* Setup wizard step 4 — Grade×Subject grid (redesign 2026-09-01). The prototype's step 4 is a flat
   review list; the grid, template toolbar and "Customize per section" drill-down are new, so these
   are new classes. Colors are from the closed slate/indigo palette already used by the setup banner
   (#E2E8F0 border, #F8FAFC background, #64748B muted, #334155 heading, #0F172A summary, #4F46E5
   accent); radii/typography mirror the app-wide .table/.btn tokens. The .table-wrap overflow-x that
   already exists handles narrow viewports. Logged in decisions.md. */
.setup-subject-grid th,
.setup-subject-grid td {
    text-align: center;
    padding: 6px 10px;
}

.setup-subject-grid th.setup-grade-name {
    text-align: left;
    font-weight: 800;
}

.setup-subject-grid td.setup-sections-cell {
    padding: 0;
}

.setup-subject-grid input[type="checkbox"] {
    accent-color: #4F46E5;
}

.setup-section-details summary {
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    color: #0F172A;
    padding: 8px 12px;
    text-align: left;
    user-select: none;
}

.setup-section-list {
    display: grid;
    gap: 8px;
    padding: 8px 12px 12px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    text-align: left;
}

.setup-section-row {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px;
}

.setup-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.setup-section-head strong {
    font-size: 10px;
    color: #334155;
}

.setup-override-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
}

.setup-section-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.setup-section-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 10px;
    color: #344054;
    background: #fff;
    cursor: pointer;
}

.setup-section-cell input[type="checkbox"] {
    margin: 0;
}

.setup-section-cell.inherited {
    opacity: .55;
    background: #F9FAFB;
    cursor: default;
}

@media (max-width: 640px) {
    .setup-section-cells {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Setup wizard stepper: the step cards are navigation (operator direction 2026-09-02) - clicking a
   card jumps to that step. .v315-step is a div, so it has no pointer cursor by default. Scoped to
   .setup-stepper so the School Onboarding stepper (same classes, not clickable) is unaffected.
   Logged in decisions.md. */
.setup-stepper .v315-step {
    cursor: pointer;
}

/* Add Teacher modal checkbox-dropdowns (2026-09-02) - Subjects / Classes / Class Teacher
   Assignment replaced the native <select multiple size="4"> (Ctrl+click) and the class-teacher
   boolean checkbox with expandable checkbox lists. New classes (ss-multiselect-*) - no existing
   CSS equivalent. Palette is the closed slate/indigo token set already used by .field / .form-grid
   (#CBD5E1 border, #E2E8F0 panel border, #F1F5F9 hover, #475569 text, #64748B muted, #4F46E5
   accent); radii/typography mirror the app-wide select/button tokens. Logged in decisions.md. */
.ss-multiselect {
    position: relative;
}

.ss-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    background: #FFF;
    color: #475569;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.ss-multiselect-trigger:hover {
    border-color: #4F46E5;
}

.ss-caret {
    color: #64748B;
    font-size: 12px;
    line-height: 1;
}

.ss-multiselect-panel {
    display: none;
    margin-top: 6px;
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #FFF;
    padding: 4px;
}

.ss-multiselect.open .ss-multiselect-panel {
    display: block;
}

.ss-multiselect-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.ss-multiselect-item:hover {
    background: #F1F5F9;
}

.ss-multiselect-item input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    accent-color: #4F46E5;
}

.ss-multiselect-hint {
    margin-top: 6px;
    padding: 6px 2px 0;
}

/* School Onboarding Medium multi-select (2026-09-05) - the shared ss-multiselect panel expands
   in-flow, which grows the wizard's form-grid row and stretches the neighbouring Board field.
   The onboarding container adds the ss-multiselect-overlay modifier so its panel floats above the
   other fields (absolute under the trigger, raised z-index, standard pop shadow). Scoped to the
   modifier - the Teacher modal's expandable panels keep their in-flow behaviour. Logged in
   decisions.md. */
.ss-multiselect-overlay {
    z-index: 40;
}

.ss-multiselect-overlay .ss-multiselect-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin-top: 0;
    z-index: 41;
    box-shadow: 0 18px 46px rgba(16, 24, 40, .18);
}

/* Sectioned detail drawers (Teacher/Student/Classes/Academic Years View) reuse the v60 profile
   drawer classes. (1) The section head already carries margin-bottom; the rule under the head uses
   the --line token. (2) No card/box per label-value pair inside these drawers - only the
   .v60-section category card keeps its chrome - and the label/value type is slightly larger than
   the Profile drawer's 8/9px so the record fields stay readable. All rules are scoped to
   .v60-section .v60-summary (only these four drawers nest the summary inside a section), so the
   Profile drawer's top .v60-summary boxes and its 8/9px section text are unaffected. Logged in
   decisions.md. */
.v60-section-head {
    border-bottom: 1px solid var(--line);
}

.v60-section .v60-summary>div {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.v60-section .v60-summary small {
    font-size: 10px;
}

.v60-section .v60-summary b {
    font-size: 12px;
}

/* Setup wizard step 1 — Working Days read-out and the Terms section head (operator direction
   2026-09-05, refined 2026-09-05). Weekly Off is the shared ss-multiselect dropdown (classes in
   this file) with the ss-multiselect-overlay modifier, so its panel floats over the Terms section
   instead of growing the row; the dropdown sits beside the Working Days read-out in a nested
   .v4-grid pair. .setup-working-days styles the read-only figure like an input (#E2E8F0 / #F8FAFC
   read-only box, #0F172A value); .setup-ay-section-head gives the Terms head its top rhythm.
   Logged in decisions.md. */
.setup-working-days {
    padding: 8px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    color: #0F172A;
    font-weight: 700;
    font-size: 13px;
    min-height: 40px;
    box-sizing: border-box;
}

.setup-ay-section-head {
    margin-top: 18px;
}


/* Homework page - Parent/Student daily view (operator direction 2026-09-28). The prototype hw4
   stylesheet already drives the card list (.hw4-selflist / .hw4-selfcard / .hw4-selftop /
   .hw4-selfmeta / .hw4-chip / .hw4-sectionhead / .hw4-detailhero / .hw4-kpis); the only element it
   does not define is the short "what to do" summary that every parent/student card now carries, so
   it gets a new class. Colors stay in the closed palette: #F8FAFC (slate-50) panel, #E2E8F0
   (slate-200) border, #334155 (slate-700) body, #64748B (slate-500) label - the same values the
   hw4 drawer uses. The third rule drops the drawer hero's bottom margin where it closes a card,
   and the fourth keeps the date-bucket headings apart from the previous group's list.
   Logged in decisions.md. */
.hwd-whattodo {
    margin: 10px 0 0;
    padding: 9px 10px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #F8FAFC;
    color: #334155;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-line;
}

.hwd-whattodo span {
    display: block;
    margin-bottom: 3px;
    color: #64748B;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hw4 .hw4-selfcard .hw4-detailhero {
    margin-bottom: 0;
}

.hw4 .hw4-selflist+.hw4-sectionhead {
    margin-top: 16px;
}


/* Homework page - staff inline record (operator direction 2026-09-28, with the parent view above).
   Principal / Vice Principal / Teacher now read and act on one homework inside its own row instead
   of a side drawer, reusing the hw4 detail grid. The grid therefore drops the trailing margin it
   carries in the card list, runs two columns once there is width so a long record can be read
   without scrolling, and the detail cell keeps its row's bottom padding tight. Colors unchanged. */
.hw4 .hw4-detailhero.hwd-details {
    margin-bottom: 0;
}

@media (min-width: 1100px) {
    .hw4 .hw4-detailhero.hwd-details {
        grid-template-columns: 1fr 1fr;
    }
}

.hwux .hw-table tr.hw-detail-row>td {
    padding: 4px 11px 11px;
}


/* Students roster QuickGrid (GRID-PAGINATION, D-001/D-002, operator direction 2026-10-05). QuickGrid
   does bring styling, in its package scoped bundle
   (_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css),
   but this app never links that bundle: App.razor loads only css/safeshala.css and css/overrides.css,
   and the project has no .razor.css files. The pilot therefore owns the pieces the prototype never
   had to style: the sortable-header markup QuickGrid renders inside `.table th` (a `.col-title`
   button holding `.col-title-text` and `.sort-indicator`), the pager chrome, and the blank rows
   QuickGrid pads a short page with. The header reset keeps a sortable header reading exactly like the
   prototype's plain `.table th` text. Everything but the pager is scoped to `.quickgrid`, which only
   a converted table carries. Colors are the closed palette (#667085 header text, #CBD5E1 idle caret,
   #4F46E5 accent, #E2E8F0 border, #334155 / #0F172A text). Logged in decisions.md (D-002). */

/* QuickGrid pads a page holding fewer than ItemsPerPage rows with blank rows (one empty cell per
   column) so the last page cannot change the table's height. The prototype's table ends at its last
   data row, so they are hidden. A real row carries `aria-rowindex`; a padding row does not, and its
   cells are unclassed in the installed 10.0.11 package (older packages classed them
   `grid-cell-placeholder`, the class the virtualized placeholder uses). All three selectors are scoped
   to `.quickgrid` (a converted table only) and match only a padding row in either shape, so none of
   them can touch a data row or another list. */
.quickgrid tbody tr:not([aria-rowindex]),
.quickgrid tbody tr.grid-cell-placeholder,
.quickgrid tbody tr:has(> td.grid-cell-placeholder) {
    display: none;
}

/* QuickGrid marks the table `loading` while an items-provider fetch is in flight, so paging and
   sorting show during the round trip (its own bundle would have dimmed the body here). */
.quickgrid.loading>tbody {
    opacity: .55;
    transition: opacity linear 100ms;
}

/* QuickGrid renders a sortable header as `button.col-title > div.col-title-text + div.sort-indicator`
   (a non-sortable column gets a plain `div.col-title`) inside `div.col-header-content`. The reset makes
   that button read exactly like the prototype's plain `.table th` text: no button chrome, the th's
   font/size/letter-spacing/uppercase inherited, label left and the caret beside it. `.quickgrid` is the
   class QuickGrid puts on every table it renders (the page also passes it in `Class`). */
.quickgrid .col-header-content {
    display: flex;
    align-items: center;
}

.quickgrid button.col-title {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    cursor: pointer;
}

.quickgrid .col-title-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.quickgrid button.col-title:hover .col-title-text {
    color: #0F172A;
}

.quickgrid .sort-indicator {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #CBD5E1;
}

.quickgrid th.col-sort-asc .sort-indicator {
    border-top: 0;
    border-bottom: 5px solid #4F46E5;
}

.quickgrid th.col-sort-desc .sort-indicator {
    border-top-color: #4F46E5;
}

/* The pager's row count sits in `.pagination-text` in the installed 10.0.11 package (newer packages
   render the same element as `.summary`) and the four buttons carry an aria-label and no text, so the
   arrows are drawn in CSS. */
.paginator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.paginator .summary,
.paginator .pagination-text {
    font-size: 10px;
    color: #334155;
}

.paginator .summary strong,
.paginator .pagination-text strong {
    color: #0F172A;
    font-weight: 800;
}

.paginator nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.paginator nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    cursor: pointer;
}

.paginator nav button:disabled {
    color: #CBD5E1;
    cursor: default;
}

.paginator nav button:not(:disabled):hover {
    border-color: #4F46E5;
    color: #4F46E5;
}

/* The four pager buttons carry an aria-label and no text, so the arrows are drawn in CSS: one chevron
   for previous/next, two for first/last. */
.paginator nav button::before,
.paginator nav button::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.paginator .go-first::before,
.paginator .go-first::after,
.paginator .go-previous::before {
    border-right: 6px solid currentColor;
}

.paginator .go-last::before,
.paginator .go-last::after,
.paginator .go-next::before {
    border-left: 6px solid currentColor;
}

@media (max-width: 680px) {
    .paginator {
        margin-top: 10px;
    }

    .paginator nav {
        margin-left: 0;
    }
}

/* Add Teacher (Teachers page): the paired Subject + Class assignment grid. Each row pairs one
   subject with one class, so the two selects and the row's remove action stay aligned. */
.assignment-grid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    table-layout: fixed;
}

.assignment-grid th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
    font-weight: 700;
    padding: 0 10px 6px 0;
}

.assignment-grid th:last-child {
    width: 96px;
    padding-right: 0;
}

.assignment-grid td {
    padding: 0 10px 8px 0;
    vertical-align: middle;
}

.assignment-grid td:last-child {
    padding-right: 0;
    text-align: right;
}

.assignment-grid select {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    outline: none;
}

.assignment-grid select:focus {
    border-color: #84adff;
    box-shadow: 0 0 0 3px #eff6ff;
}

/* The values the Add Teacher popup generates (Employee ID, Username) render read-only: the same
   box as an input so the form grid stays aligned, but plain text — never editable. */
.field .readonly-value {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px;
    background: #F1F5F9;
    color: #0F172A;
}

@media (max-width: 680px) {
    .assignment-grid thead {
        display: none;
    }

    .assignment-grid,
    .assignment-grid tbody,
    .assignment-grid tr,
    .assignment-grid td {
        display: block;
        width: 100%;
    }

    .assignment-grid td {
        padding: 0 0 8px;
    }

    .assignment-grid td:last-child {
        text-align: left;
    }
}

/* Calendar (c59) - role-first calendar layout. Copied from the prototype's injected style block
   (reference/prototype-app.js v5.9.0 CALENDAR ROLE-FIRST ENHANCEMENT) so the Blazor page keeps the
   prototype's own geometry (month grid, agenda rows, KPI strip, governance grid, modal). */
.c59 {
    max-width: 1500px;
    margin: 0 auto;
    padding: 2px 0 40px;
    color: #0f172a
}

.c59-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px
}

.c59-eyebrow {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    color: #2563eb;
    margin-bottom: 4px
}

.c59-head h1 {
    margin: 0 0 5px;
    font-size: 25px
}

.c59-head p {
    margin: 0;
    color: #64748b;
    font-size: 11px
}

.c59-head-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.c59-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer
}

.c59-btn.primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff
}

.c59-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px
}

.c59-kpis article,
.c59-card,
.c59-surface {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px
}

.c59-kpis article {
    padding: 13px
}

.c59-kpis small,
.c59-kpis span {
    display: block;
    color: #64748b;
    font-size: 9px
}

.c59-kpis strong {
    display: block;
    font-size: 22px;
    margin: 3px 0
}

.c59-surface {
    overflow: hidden;
    margin-bottom: 12px
}

.c59-filters {
    display: flex;
    gap: 8px;
    align-items: end;
    flex-wrap: wrap;
    padding: 10px;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfc
}

.c59-filters label {
    display: grid;
    gap: 4px;
    color: #64748b;
    font-size: 9px;
    font-weight: 800
}

.c59-filters select {
    min-width: 130px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    color: #0f172a;
    font-size: 10px
}

/* The calendar owns the full width of the module: the agenda and audit cards stack underneath it
   and sit side by side only when there is room, so the month grid is never squeezed. */
.c59-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px
}

.c59-main>aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    align-items: start
}

.c59-main>.c59-card,
.c59-main>aside>.c59-card {
    margin-bottom: 0
}

.c59-card {
    padding: 13px;
    margin-bottom: 12px
}

.c59-cardhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 11px
}

.c59-cardhead h2 {
    font-size: 14px;
    margin: 0 0 3px
}

.c59-cardhead p {
    font-size: 10px;
    color: #64748b;
    margin: 0
}

.c59-scope {
    font-size: 8px;
    font-weight: 900;
    padding: 5px 7px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    white-space: nowrap
}

.c59-monthbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 6px 0 14px
}

.c59-monthbar strong {
    font-size: 19px;
    min-width: 210px;
    text-align: center
}

.c59-weekdays,
.c59-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px
}

.c59-weekdays span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: center;
    padding: 6px
}

.c59-day {
    min-height: 138px;
    border: 1px solid #edf0f4;
    background: #fbfcfe;
    border-radius: 10px;
    padding: 8px;
    overflow: hidden
}

.c59-day>b {
    font-size: 12px;
    color: #475569
}

.c59-day.outside {
    opacity: .42
}

.c59-event {
    display: block;
    width: 100%;
    margin-top: 6px;
    text-align: left;
    border: 0;
    border-left: 4px solid #2563eb;
    background: #fff;
    border-radius: 6px;
    padding: 6px 7px;
    cursor: pointer
}

.c59-event strong,
.c59-event small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.c59-event strong {
    font-size: 11px
}

.c59-event small {
    font-size: 9px;
    color: #64748b
}

.c59-more {
    display: block;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    margin-top: 5px
}

.c59-agenda {
    display: grid
}

.c59-agenda-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 4px;
    cursor: pointer
}

.c59-date {
    width: 54px;
    text-align: center;
    background: #f8fafc;
    border-radius: 7px;
    padding: 6px
}

.c59-date b,
.c59-date small {
    display: block
}

.c59-date b {
    font-size: 10px
}

.c59-date small {
    font-size: 8px;
    color: #64748b
}

.c59-agenda-main {
    flex: 1;
    min-width: 0
}

.c59-agenda-main strong,
.c59-agenda-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.c59-agenda-main strong {
    font-size: 11px
}

.c59-agenda-main small {
    font-size: 9px;
    color: #64748b
}

.c59-status {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 7px;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap
}

.c59-status.ok {
    background: #ecfdf5;
    color: #047857
}

.c59-status.warn {
    background: #fffbeb;
    color: #92400e
}

.c59-status.muted {
    background: #f1f5f9;
    color: #475569
}

.c59-link {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer
}

.c59-tablewrap {
    overflow: auto
}

.c59-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    font-size: 9px
}

.c59-table th,
.c59-table td {
    padding: 8px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left
}

.c59-table th {
    background: #f8fafc;
    color: #64748b
}

.c59-empty {
    padding: 22px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 10px
}

.c59-modal {
    width: min(720px, calc(100vw - 24px));
    max-height: 90vh;
    overflow: auto;
    padding: 18px
}

.c59-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.c59-modal-head h2 {
    margin: 0;
    font-size: 19px
}

.c59-modal-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 10px
}

.c59-close {
    border: 0;
    background: #f1f5f9;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    cursor: pointer
}

.c59-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.c59-form-grid label {
    display: grid;
    gap: 5px;
    color: #475569;
    font-size: 9px;
    font-weight: 800
}

.c59-form-grid input,
.c59-form-grid select,
.c59-form-grid textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px;
    background: #fff;
    font-size: 10px;
    color: #0f172a
}

.c59-form-grid textarea {
    min-height: 85px
}

.c59-form-grid .full {
    grid-column: 1/-1
}

/* A multi-select (the grade / class audience picker) shares the field styling but needs a
   readable list height. */
.c59-form-grid select[multiple] {
    min-height: 104px
}

.c59-check {
    display: flex;
    align-items: center;
    gap: 7px
}

.c59-check input {
    width: auto
}

.c59-note {
    margin-top: 12px;
    padding: 10px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #475569;
    font-size: 9px
}

.c59-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 14px
}

.c59-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.c59-detail-grid>div {
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 8px
}

.c59-detail-grid small,
.c59-detail-grid b {
    display: block
}

.c59-detail-grid small {
    font-size: 8px;
    color: #64748b
}

.c59-detail-grid b {
    font-size: 10px;
    margin-top: 3px
}

@media(max-width:1050px) {
    .c59-kpis {
        grid-template-columns: repeat(2, 1fr)
    }

    .c59-day {
        min-height: 120px;
        padding: 6px
    }

    .c59-event strong {
        font-size: 10px
    }

    .c59-event small {
        font-size: 8px
    }
}

@media(max-width:700px) {
    .c59 {
        padding-bottom: 60px
    }

    .c59-head {
        flex-direction: column
    }

    .c59-head-actions {
        width: 100%
    }

    .c59-head-actions .c59-btn {
        flex: 1
    }

    .c59-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 7px
    }

    .c59-filters {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .c59-filters label,
    .c59-filters select,
    .c59-filters .c59-btn {
        width: 100%;
        box-sizing: border-box
    }

    .c59-main {
        padding: 8px;
        gap: 8px
    }

    .c59-main>aside {
        grid-template-columns: 1fr
    }

    .c59-calendar-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .c59-calendar-card>.c59-cardhead,
    .c59-calendar-card>.c59-monthbar {
        position: sticky;
        left: 0
    }

    .c59-weekdays,
    .c59-grid {
        grid-template-columns: repeat(7, minmax(104px, 1fr));
        width: 764px
    }

    .c59-day {
        min-height: 104px;
        padding: 6px
    }

    .c59-event {
        padding: 5px 6px
    }

    .c59-event strong {
        font-size: 10px
    }

    .c59-event small {
        font-size: 8px
    }

    .c59-form-grid,
    .c59-detail-grid {
        grid-template-columns: 1fr
    }

    .c59-form-grid .full {
        grid-column: auto
    }

    .c59-modal-actions {
        position: sticky;
        bottom: -18px;
        background: #fff;
        padding-top: 10px
    }

    .c59-modal-actions .c59-btn {
        flex: 1
    }
}

/* School Branding (reference/75-screen-school-branding.md). Ported verbatim from
   reference/prototype-school-branding.css: the Step-1 screen classes (.sb-settings … .sb-footnote,
   .sb-directory-actions) below, and the Step-2 shared login classes (.sb-login … .sb-unavailable) in
   the block at the end of this file. The .sb-sidebar-brand / .sb-header-brand / .sb-workspace-banner
   chrome belongs to Step 3 and is deliberately not ported yet. The --sb-* palette is the reference's
   own scale for this screen; declared here so the ported rules resolve. Logged in memory-bank/decisions.md. */
:root {
    --sb-ink: #193b38;
    --sb-teal: #16665a;
    --sb-muted: #617572;
    --sb-line: #dbe6e2;
    --sb-wash: #f3f7f4
}

.sb-settings {
    max-width: 1220px;
    margin: 0 auto;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--sb-ink)
}

.sb-settings * {
    box-sizing: border-box
}

.sb-eyebrow {
    font-size: 10px;
    letter-spacing: 1.8px;
    font-weight: 750;
    display: block;
    color: #53746b
}

.sb-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px
}

.sb-page-heading h1 {
    font-size: 30px;
    letter-spacing: -1px;
    margin: 10px 0
}

.sb-page-heading p {
    color: var(--sb-muted);
    font-size: 14px;
    margin: 0
}

.sb-school-picker {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px 24px;
    background: #eef4ef;
    border-radius: 12px;
    margin-bottom: 24px
}

.sb-school-picker label {
    flex: 1;
    margin: 0;
    max-width: 650px
}

.sb-pill {
    font-size: 11px;
    border-radius: 20px;
    background: #dcebe2;
    color: #235644;
    padding: 7px 12px;
    margin-top: 20px
}

.sb-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px
}

.sb-panel {
    background: white;
    border: 1px solid var(--sb-line);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 22px;
    min-width: 0
}

.sb-panel h2 {
    font-size: 19px;
    margin: 0 0 8px;
    letter-spacing: -.4px
}

.sb-panel h3 {
    font-size: 16px;
    margin: 0 0 9px
}

.sb-panel p {
    margin: 8px 0
}

.sb-settings label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    font-weight: 650;
    margin: 21px 0 0
}

.sb-settings input,
.sb-settings select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #cddbd5;
    border-radius: 8px;
    background: white;
    color: var(--sb-ink);
    font: inherit;
    font-size: 14px;
    outline: none
}

.sb-settings input:focus,
.sb-settings select:focus {
    border-color: #317d6b;
    box-shadow: 0 0 0 3px #317d6b19
}

.sb-settings input[readonly] {
    background: #f4f7f5;
    color: #526863
}

.sb-settings label small {
    font-weight: 400;
    color: var(--sb-muted);
    font-size: 11px;
    line-height: 1.5
}

.sb-muted {
    color: var(--sb-muted);
    font-size: 13px;
    line-height: 1.65
}

.sb-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 15px;
    background: white;
    border: 1px solid var(--sb-line);
    padding: 5px
}

.sb-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e4eee7;
    color: #1c6555;
    font-size: 24px;
    font-weight: 750
}

.sb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 42px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #cbdad3;
    color: var(--sb-ink);
    border-radius: 8px;
    text-decoration: none;
    font: 600 13px system-ui;
    cursor: pointer;
    white-space: normal;
    text-align: center
}

.sb-button.primary {
    color: white;
    background: var(--sb-teal);
    border-color: var(--sb-teal)
}

.sb-button:hover {
    filter: brightness(.96)
}

.sb-button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.sb-button:focus-visible {
    outline: 3px solid #adcb8d;
    outline-offset: 3px
}

.sb-error {
    font-size: 13px;
    color: #a33232;
    background: #fff1ed;
    border-radius: 7px;
    padding: 12px;
    line-height: 1.5
}

.sb-logo-upload {
    display: flex;
    gap: 17px;
    align-items: center;
    margin-top: 22px
}

.sb-logo-upload>div:last-child {
    flex: 1;
    min-width: 0
}

.sb-logo-upload label {
    margin: 0
}

.sb-logo-upload input {
    font-size: 11px;
    min-height: 0;
    padding: 9px
}

.sb-text-button {
    background: none;
    border: none;
    padding: 8px 0;
    color: #a1473c;
    cursor: pointer;
    font-size: 12px
}

.sb-logo-upload .sb-muted {
    display: block;
    font-size: 11px
}

.sb-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px
}

.sb-preview {
    background: #f8faf6
}

.sb-preview>div {
    text-align: center;
    background: white;
    padding: 30px 24px;
    border: 1px solid var(--sb-line);
    border-radius: 10px;
    margin-top: 20px
}

.sb-preview .sb-logo {
    margin-bottom: 16px
}

.sb-preview h2 {
    font-size: 20px;
    line-height: 1.4
}

.sb-preview-input {
    text-align: left;
    font-size: 11px;
    color: #819089;
    border: 1px solid var(--sb-line);
    border-radius: 7px;
    padding: 13px;
    margin: 12px 0
}

.sb-preview-submit {
    padding: 13px;
    border-radius: 7px;
    background: var(--sb-teal);
    color: white;
    font-size: 12px;
    margin: 16px 0
}

.sb-preview small {
    font-size: 10px;
    color: #71837a
}

.sb-footnote {
    color: #738479;
    font-size: 11px;
    line-height: 1.6;
    margin: 8px 0 20px
}

.sb-directory-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    background: #edf5ef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px
}

.sb-directory-actions p {
    font-size: 12px;
    color: var(--sb-muted);
    margin: 6px 0 0
}

@media(max-width:1100px) {
    .sb-setup-grid {
        gap: 16px
    }

    .sb-panel {
        padding: 20px
    }
}

@media(max-width:850px) {
    .sb-setup-grid {
        grid-template-columns: 1fr
    }

    .sb-school-picker {
        flex-wrap: wrap;
        padding: 18px
    }

    .sb-school-picker label {
        flex-basis: 100%
    }

    .sb-pill {
        margin-top: 0
    }

    .sb-page-heading {
        align-items: flex-start
    }

    .sb-page-heading h1 {
        font-size: 26px
    }

    .sb-directory-actions {
        flex-wrap: wrap
    }
}

@media(max-width:540px) {
    .sb-page-heading {
        flex-direction: column
    }

    .sb-settings .sb-form-actions>.sb-button {
        flex: 1
    }

    .sb-logo {
        width: 56px;
        height: 56px
    }

    .sb-logo-upload {
        align-items: flex-start
    }

    .sb-panel {
        padding: 18px
    }
}

/* ------------------------------------------------------------------------------------------------
   Step 2 — the school's shared branded login (/s/{slug}/login), ported from
   reference/prototype-school-branding.css (.sb-login … .sb-unavailable). The reference's .sb-demo*
   block and its pre-authentication chooser (.sb-choice / .sb-school-choice) are deliberately not
   ported: the real page carries no hardcoded demo accounts, and pre-authentication school selection
   is not built (every seeded account belongs to exactly one school). See memory-bank/decisions.md.
   ------------------------------------------------------------------------------------------------ */
.sb-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    padding: clamp(16px, 3vw, 28px);
    background: #fcfdfb;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--sb-ink)
}

/* Centred by `margin:auto` on the card (not place-items:center) so that if the card is ever taller than
   the viewport it pins to the top and scrolls normally instead of clipping its top edge. */
.sb-login,
.sb-login * {
    box-sizing: border-box
}

/* The single column left after the story panel was removed is now a centred branded card: border and
   radius mirror .sb-panel (white surface, var(--sb-line) border), the teal top accent uses the brand
   var(--sb-teal)/#317d6b scale already used for input focus, and the soft ink shadow lifts it off the
   #fcfdfb page. Logged in memory-bank/decisions.md. */
.sb-login-panel {
    position: relative;
    width: 100%;
    max-width: 610px;
    margin: auto;
    overflow: hidden;
    background: white;
    border: 1px solid var(--sb-line);
    border-radius: 18px;
    box-shadow: 0 20px 50px -34px rgba(25, 59, 56, .45), 0 2px 8px -3px rgba(25, 59, 56, .08);
    padding: 34px clamp(24px, 5vw, 56px)
}

.sb-login-panel:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--sb-teal), #317d6b)
}

/* The brand row holds only the logo, centred as the card's hero mark. Its size tracks 24vw and 20vh
   (whichever is smaller) clamped to 104–156px, so the mark reads large on a normal screen yet shrinks on
   short ones — which is what keeps the card inside the viewport without a page scrollbar. */
.sb-login-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(14px, 2vw, 20px)
}

.sb-login-brand .sb-logo {
    width: clamp(184px, min(24vw, 20vh), 156px);
    height: clamp(184px, min(24vw, 20vh), 156px);
    border-radius: clamp(20px, 6vw, 30px);
    padding: clamp(9px, 2.4vw, 14px);
    box-shadow: 0 16px 30px -18px rgba(25, 59, 56, .5), 0 0 0 4px #e4eee7, 0 0 0 8px var(--sb-line)
}

.sb-login-brand .sb-monogram {
    font-size: clamp(34px, 9vw, 54px)
}

.sb-login-panel h2 {
    font-size: 19px;
    letter-spacing: -.3px;
    margin: 0 0 4px
}

.sb-login-panel .sb-muted {
    margin: 0 0 2px
}

.sb-login-panel label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    font-weight: 650;
    margin: 16px 0 0
}

.sb-login-panel input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #cddbd5;
    border-radius: 8px;
    background: white;
    color: var(--sb-ink);
    font: inherit;
    font-size: 14px;
    outline: none
}

.sb-login-panel input:focus {
    border-color: #317d6b;
    box-shadow: 0 0 0 3px #317d6b19
}

.sb-password {
    display: flex;
    align-items: center;
    position: relative
}

.sb-password input {
    padding-right: 63px
}

.sb-password button {
    position: absolute;
    right: 5px;
    padding: 10px;
    border: none;
    background: none;
    color: var(--sb-teal);
    font-size: 12px;
    cursor: pointer
}

.sb-wide {
    width: 100%;
    margin-top: 20px;
    justify-content: space-between;
    min-height: 48px
}

.sb-login-footer {
    text-align: center;
    margin-top: 20px;
    color: #7c8a82;
    font-size: 11px
}

.sb-login-footer b {
    color: #456b5c
}

.sb-unavailable {
    grid-column: 1/-1;
    max-width: 580px
}

.sb-unavailable h1 {
    font-size: 30px
}

.sb-unavailable p {
    line-height: 1.7;
    color: var(--sb-muted)
}

@media(max-width:850px) {
    .sb-login-panel {
        max-width: 520px;
        padding: 28px 24px
    }
}

@media(max-width:540px) {
    .sb-login-panel {
        padding: 24px 18px
    }

    .sb-login-brand {
        margin-bottom: 14px
    }
}

/* Short viewports: trim the card framing further; the logo already scales with vh, so it needs no override. */
@media(max-height:680px) {
    .sb-login-panel {
        padding-top: 22px;
        padding-bottom: 22px
    }

    .sb-login-brand {
        margin-bottom: 12px
    }
}

/* Timetable (V6.2.4) - the module's grid, period editor dialog, date-schedule panel and cover
   lists. Ported verbatim from the prototype's stylesheet (reference/prototype-timetable.css) into
   the app's `.tt-` namespace; only the prototype's injected-element ids that the Razor page also
   renders (`#tt-form-error`, `#tt-absence`) are kept as written. */
.tt-app {
    --tt-green: #16665a;
    max-width: 1500px;
    margin: auto;
    color: #233e39
}

.tt-app * {
    box-sizing: border-box
}

.tt-heading,
.tt-actions,
.tt-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap
}

.tt-heading {
    margin-bottom: 24px
}

.tt-heading-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.tt-heading h1 {
    font-size: 30px;
    letter-spacing: -.8px;
    margin: 8px 0
}

.tt-heading p,
.tt-note {
    color: #667b76;
    font-size: 13px;
    line-height: 1.7
}

.tt-eyebrow {
    color: #187869;
    letter-spacing: 1.6px;
    font-size: 10px;
    font-weight: 800
}

.tt-toolbar {
    justify-content: flex-start;
    background: #fff;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px
}

.tt-app label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    min-width: 160px
}

.tt-app input,
.tt-app select {
    font: inherit;
    max-width: 100%;
    min-height: 42px;
    padding: 10px;
    border: 1px solid #c9d9d2;
    border-radius: 9px;
    background: white;
    color: #203f36
}

.tt-button {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    color: var(--tt-green);
    border: 1px solid #bcd5cc;
    border-radius: 9px;
    padding: 11px 14px;
    cursor: pointer;
    min-height: 40px
}

.tt-button:hover,
.tt-button[aria-pressed=true] {
    background: #16665a;
    color: white
}

.tt-button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.tt-button:focus-visible,
.tt-slot:focus-visible {
    outline: 3px solid #eebd5a;
    outline-offset: 2px
}

.tt-segment {
    display: flex;
    gap: 5px
}

.tt-badge {
    padding: 7px 10px;
    border-radius: 30px;
    background: #e5f1eb;
    font-size: 11px;
    color: #236252;
    font-weight: 700
}

.tt-week {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0
}

.tt-day {
    background: #fff;
    border: 1px solid #dce7e2;
    border-radius: 14px;
    overflow: hidden;
    min-width: 0
}

.tt-day h2 {
    font-size: 13px;
    background: #edf5ef;
    padding: 16px;
    margin: 0
}

/* The week the grid is dated for: the caption above it and the two buttons that walk it. The
   weekly plan repeats every week, so the dates say which week the columns name. */
.tt-week-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px
}

.tt-week-bar b {
    display: block;
    font-size: 15px;
    color: #233e39
}

.tt-week-bar small {
    display: block;
    margin-top: 3px;
    color: #667b76;
    font-size: 12px;
    line-height: 1.6
}

.tt-week-nav {
    display: flex;
    gap: 8px
}

/* One weekday column's date under its name, the "Today" mark and the holiday banner. */
.tt-day-date {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #4f6b63;
    letter-spacing: .3px
}

.tt-day-today {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 30px;
    background: #187869;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px
}

.tt-day-holiday {
    margin: 0;
    padding: 8px 16px;
    background: #fdf3e7;
    border-bottom: 1px solid #f2e2cb;
    color: #8a5a1f;
    font-size: 11px;
    font-weight: 700
}

.tt-day-off {
    background: #fbf9f4
}

.tt-day-off h2 {
    background: #f6efe3
}

.tt-day-off .tt-period,
.tt-day-off .tt-slot {
    opacity: .6
}

.tt-period {
    padding: 10px;
    border-bottom: 1px solid #edf1ef;
    min-height: 115px
}

.tt-period>small {
    font-size: 10px;
    color: #788a82;
    display: block;
    margin-bottom: 8px
}

.tt-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 9px;
    background: #f0f7f3;
    border: 0;
    border-left: 3px solid #68a28a;
    border-radius: 6px;
    text-align: left;
    font: inherit;
    min-height: 65px;
    overflow-wrap: anywhere
}

.tt-slot b {
    font-size: 12px
}

.tt-slot span,
.tt-slot small {
    font-size: 11px;
    color: #5e776c
}

button.tt-slot {
    cursor: pointer
}

/* A substitution reads on the dated grid: the square names its cover and whether the substitute
   acknowledged the duty, and the substitute's own week carries the duty as its own square. */
.tt-slot-cover {
    font-weight: 700;
    color: #16665a !important
}

.tt-slot--cover {
    background: #fdf3e7;
    border-left-color: #d79a3f
}

.tt-slot--cover b,
.tt-slot--cover span {
    color: #7a4f12
}

.tt-free {
    font-size: 12px;
    color: #829188;
    display: block;
    padding: 12px 0
}

.tt-panel {
    background: #fff;
    border: 1px solid #dce7e2;
    padding: 22px;
    border-radius: 16px;
    margin: 15px 0
}

.tt-panel h2,
.tt-actions h2 {
    font-size: 17px;
    margin: 0 0 10px
}

.tt-panel h3 {
    font-size: 15px;
    margin: 0
}

.tt-panel p {
    font-size: 13px
}

.tt-daily {
    display: flex;
    gap: 25px;
    padding: 15px 0;
    border-bottom: 1px solid #edf1ef;
    font-size: 13px
}

.tt-daily small,
.tt-daily span,
.tt-daily em {
    display: block;
    line-height: 1.8
}

.tt-daily>span {
    min-width: 100px
}

.tt-daily small {
    color: #708178;
    font-size: 11px
}

.tt-daily em {
    font-size: 11px;
    color: #16665a
}

.tt-warning,
#tt-form-error,
#tt-setup-error {
    color: #a04e0c !important
}

.tt-cover-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.tt-cover-list .tt-panel {
    margin: 0
}

.tt-assign,
#tt-absence {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap
}

.tt-absence-list>span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #e3ece6;
    padding: 10px 0;
    font-size: 13px
}

.tt-absence-list {
    margin-top: 15px
}

.tt-feedback {
    background: #fff6db;
    border: 1px solid #ecd898;
    padding: 13px;
    border-radius: 10px;
    font-size: 13px
}

/* The publish-blocked warning (V6.2.4, no prototype counterpart): the draft's teaching periods that
   carry a subject but no teacher. The panel names the classes behind those squares, and the square
   itself is ringed, so a manager sees where the missing assignment sits instead of only how many
   squares are missing in a grid that shows one class at a time. */
.tt-blocked {
    border-left: 4px solid #d98324;
    background: #fffaf0
}

.tt-blocked b {
    font-size: 13px;
    color: #a04e0c
}

.tt-blocked p {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #7a5a34
}

.tt-blocked-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px
}

.tt-blocked-class {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    background: #fff;
    color: #a04e0c;
    border: 1px solid #ecd898;
    border-radius: 20px;
    padding: 5px 10px;
    cursor: pointer
}

.tt-blocked-class span {
    background: #fbe6c2;
    border-radius: 12px;
    padding: 1px 6px;
    font-size: 10px
}

.tt-blocked-class:hover,
.tt-blocked-class[aria-pressed=true] {
    background: #fdf0d8;
    border-color: #d9a24a
}

.tt-slot.tt-slot--blocked {
    background: #fff5e2;
    border-left-color: #d98324;
    box-shadow: inset 0 0 0 2px #e5b76a
}

.tt-slot .tt-slot-flag {
    font-size: 10px;
    font-weight: 700;
    color: #a04e0c
}

.tt-empty {
    color: #71887c;
    padding: 20px
}

.tt-app dialog {
    width: min(480px, calc(100vw - 30px));
    max-height: 90dvh;
    overflow: auto;
    border: 1px solid #d4e2dc;
    border-radius: 18px;
    padding: 24px;
    color: inherit
}

.tt-app dialog::backdrop {
    background: #143e365e
}

.tt-app dialog label {
    margin: 15px 0
}

.tt-app dialog h2 {
    font-size: 20px
}

.tt-app .tt-actions input {
    max-width: 190px
}

/* V6.2.4 "Set up periods" - the bell-schedule form: the year's working days and the school's ordered
   periods. It reuses the module's dialog, label and button styling; only the day chips, the period
   rows and the break marker are new. */
.tt-app dialog.tt-setup-dialog {
    width: min(940px, calc(100vw - 30px))
}

.tt-app dialog.tt-setup-dialog>p:first-of-type {
    color: #667b76;
    font-size: 13px;
    margin: 0
}

.tt-setup-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #187869;
    margin: 20px 0 0
}

/* "Roll over previous year": what the previous year's published week gives this year, and what it
   cannot. A plain list under the dialog's subtitle - the row styling is the module's own. */
.tt-app dialog .tt-rollover-list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #33413d;
    font-size: 13px;
    line-height: 1.6
}

.tt-app dialog .tt-rollover-list li+li {
    margin-top: 4px
}

.tt-setup-days {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid #dce7e2;
    border-radius: 12px;
    padding: 14px
}

.tt-app label.tt-setup-day,
.tt-app label.tt-setup-double {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0
}

.tt-app label.tt-setup-day {
    flex: 0 1 auto
}

.tt-app label.tt-setup-day input,
.tt-app label.tt-setup-double input {
    width: 17px;
    height: 17px;
    min-height: 0;
    padding: 0;
    margin: 0;
    accent-color: #16665a
}

.tt-setup-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid #edf1ef;
    padding: 14px 0
}

.tt-app .tt-setup-row label {
    flex: 1 1 130px;
    margin: 0;
    min-width: 0
}

.tt-app .tt-setup-row label.tt-setup-name {
    flex: 1 1 200px
}

.tt-app .tt-setup-row label.tt-setup-double {
    flex: 0 1 auto;
    padding-bottom: 12px
}

.tt-setup-order {
    font-size: 12px;
    font-weight: 800;
    color: #708178;
    min-width: 16px;
    padding-bottom: 12px
}

.tt-app .tt-setup-row .tt-button {
    flex: 0 0 auto;
    margin-bottom: 1px
}

.tt-setup-day-timings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #dce7e2;
    border-radius: 12px;
    padding: 14px
}

.tt-setup-day-timing {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #edf1ef;
    padding-top: 12px
}

.tt-setup-day-timing:first-child {
    border-top: 0;
    padding-top: 0
}

.tt-app label.tt-setup-day-custom,
.tt-app label.tt-setup-day-runs {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0
}

.tt-app label.tt-setup-day-custom {
    flex: 0 1 auto
}

.tt-app label.tt-setup-day-runs {
    flex: 1 1 130px;
    font-weight: 600
}

.tt-app label.tt-setup-day-custom input,
.tt-app label.tt-setup-day-runs input {
    width: 17px;
    height: 17px;
    min-height: 0;
    padding: 0;
    margin: 0;
    accent-color: #16665a
}

.tt-setup-day-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 25px
}

.tt-setup-day-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap
}

.tt-app .tt-setup-day-row label {
    flex: 1 1 130px;
    margin: 0;
    min-width: 0
}

.tt-app .tt-setup-day-row label.tt-setup-time {
    flex: 0 1 120px
}

/* The day row ticks its own double periods, so the tick sits beside the day's type, not stretched
   across the row like the field labels around it. */
.tt-app .tt-setup-day-row label.tt-setup-double {
    flex: 0 1 auto;
    padding-bottom: 12px
}

/* The window of a period the day does not run stays visible, but inert. */
.tt-app .tt-setup-day-row input[disabled] {
    background: #f4f7f5;
    color: #9aa8a2
}

.tt-app #tt-setup-error {
    font-size: 13px;
    margin: 14px 0 0
}

.tt-break {
    display: block;
    font-size: 12px;
    color: #8a6a1f;
    background: #fdf7e4;
    border-left: 3px solid #e0bf63;
    border-radius: 6px;
    padding: 12px 9px;
    min-height: 65px
}
/* "Create from template": the template/class selects, the school day next to the calendar entries, the
   weekly counts and the generated week. It reuses the module's dialog, label and button styling; only
   the two-column panels, the count rows and the preview table are new. */
.tt-app dialog.tt-template-dialog {
    width: min(1240px, calc(100vw - 30px))
}

.tt-tpl-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.tt-tpl-head label {
    margin: 0
}

.tt-tpl-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 2px
}

.tt-tpl-list {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #dce7e2;
    border-radius: 12px;
    font-size: 12px;
    max-height: 168px;
    overflow: auto
}

.tt-tpl-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f4f2
}

.tt-tpl-list li:last-child {
    border-bottom: 0
}

.tt-tpl-list span {
    color: #667b76
}

.tt-tpl-subjects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px 16px;
    border: 1px solid #dce7e2;
    border-radius: 12px;
    padding: 14px
}

.tt-app label.tt-tpl-subject {
    display: grid;
    grid-template-columns: 1fr 74px;
    grid-template-areas: "name count" "note note";
    gap: 4px 8px;
    align-items: center;
    margin: 0;
    min-width: 0
}

.tt-app label.tt-tpl-subject span {
    grid-area: name;
    font-size: 13px;
    font-weight: 600;
    color: #24413a
}

.tt-app label.tt-tpl-subject input {
    grid-area: count;
    min-height: 36px;
    padding: 6px 8px;
    text-align: center
}

.tt-app label.tt-tpl-subject small {
    grid-area: note;
    font-size: 11px;
    color: #71887c
}

.tt-tpl-preview {
    border-top: 1px solid #e7ebf2;
    margin-top: 18px;
    padding-top: 14px
}

.tt-tpl-preview h3 {
    margin: 0 0 4px;
    font-size: 16px
}

.tt-tpl-preview h4 {
    margin: 16px 0 6px;
    font-size: 13px;
    color: #187869;
    letter-spacing: .4px;
    text-transform: uppercase
}

.tt-tpl-scroll {
    overflow-x: auto;
    border: 1px solid #dce7e2;
    border-radius: 12px
}

.tt-tpl-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 11px
}

.tt-tpl-table th,
.tt-tpl-table td {
    border-bottom: 1px solid #eef3f0;
    border-right: 1px solid #eef3f0;
    padding: 6px;
    vertical-align: top;
    text-align: left
}

.tt-tpl-table thead th {
    background: #f5f9f7;
    font-size: 10px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #4d6b62;
    white-space: nowrap
}

.tt-tpl-table tbody th {
    background: #fafcfb;
    font-weight: 700;
    color: #24413a;
    white-space: nowrap
}

.tt-tpl-cell {
    min-width: 128px
}

.tt-tpl-cell b {
    display: block;
    font-size: 11px;
    color: #143e36
}

.tt-tpl-cell em {
    display: block;
    font-size: 10px;
    line-height: 1.35;
    color: #8a2f2f;
    margin-top: 3px
}

.tt-tpl-cell-warn {
    background: #fdf0ee;
    box-shadow: inset 0 0 0 1px #e5a49a
}

.tt-tpl-cell-off {
    background: #f7f9f8
}

.tt-app .tt-tpl-cell select.tt-tpl-teacher {
    width: 100%;
    min-height: 28px;
    margin-top: 4px;
    padding: 3px 4px;
    font-size: 11px
}

.tt-tpl-break {
    display: block;
    font-size: 10px;
    color: #8a6a1f;
    background: #fdf7e4;
    border-radius: 5px;
    padding: 6px 5px;
    min-height: 26px
}

.tt-tpl-free {
    display: block;
    font-size: 10px;
    color: #9aa8a2;
    padding: 8px 4px
}

@media(max-width:900px) {
    .tt-tpl-head,
    .tt-tpl-cols {
        grid-template-columns: 1fr
    }
}


@media(max-width:650px) {
    .tt-app dialog.tt-setup-dialog {
        padding: 16px
    }
}

@media(max-width:1100px) {
    .tt-week {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:650px) {
    .tt-week,
    .tt-cover-list {
        grid-template-columns: 1fr
    }

    .tt-heading h1 {
        font-size: 25px
    }

    .tt-toolbar label,
    .tt-assign label,
    #tt-absence label {
        flex: 1;
        min-width: 0;
        width: 100%
    }

    .tt-toolbar {
        display: grid;
        grid-template-columns: 1fr
    }

    .tt-day {
        display: block
    }

    .tt-period {
        display: grid;
        grid-template-columns: 110px 1fr;
        align-items: start;
        gap: 8px;
        min-height: 0
    }

    .tt-panel {
        padding: 16px
    }

    .tt-actions {
        gap: 8px
    }

    .tt-assign,
    #tt-absence {
        align-items: stretch;
        flex-direction: column
    }

    .tt-app select {
        width: 100%
    }

    .tt-daily {
        gap: 12px
    }

    .tt-absence-list>span {
        flex-wrap: wrap
    }
}

@media print {
    .sidebar,
    .topbar,
    .bottom-nav,
    .tt-toolbar,
    .tt-actions button,
    .tt-heading+.tt-feedback,
    #sb-powered {
        display: none !important
    }

    .main {
        margin: 0 !important
    }

    .content {
        padding: 0 !important
    }

    .tt-week {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .tt-app {
        max-width: none
    }

    .tt-day {
        break-inside: avoid
    }

    .tt-panel {
        break-inside: avoid
    }
}
/* V6.2.5 Notices (reference/77-screen-notices.md, reference/prototype-notices.css) — the composer
   (recipients + purpose/response), the review panel, the sender register and the read-only
   tracking drawer. Ported from the prototype stylesheet; the two media rules are its own 850px
   (composer/list collapse) and 480px (phone) rules. */
.nt {
    max-width: 1200px;
    margin: auto;
    color: #25324a;
}

.nt * {
    box-sizing: border-box;
}

.nt-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 8px 0 22px;
}

.nt h1 {
    font-size: 32px;
    letter-spacing: -1px;
    margin: 8px 0;
}

.nt h2 {
    font-size: 20px;
    margin: 12px 0;
}

.nt p {
    line-height: 1.65;
}

.nt-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #4f46a5;
}

.nt-demo {
    background: #eef2ff;
    border: 1px solid #dce2fa;
    color: #515d7a;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 12px;
    margin-bottom: 22px;
}

.nt-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.nt-stats>div {
    padding: 20px;
    border: 1px solid #e0e5ef;
    background: white;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nt-stats b {
    font-size: 28px;
    color: #37318c;
}

.nt-stats span,
.nt-muted {
    font-size: 13px;
    color: #64748b;
}

.nt-btn {
    border: 1px solid #d7ddeb;
    background: white;
    color: #384562;
    border-radius: 9px;
    padding: 10px 15px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
}

.nt-btn.primary,
.nt-btn.active {
    background: #4338a4;
    color: white;
    border-color: #4338a4;
}

.nt-btn:hover {
    filter: brightness(.96)
}

.nt button:focus-visible,
.nt input:focus-visible,
.nt select:focus-visible,
.nt textarea:focus-visible {
    outline: 3px solid #8b9ef8;
    outline-offset: 2px;
}

.nt-toolbar,
.nt-actions,
.nt-tabs {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
}

.nt-toolbar {
    justify-content: space-between;
    margin: 22px 0;
}

.nt-toolbar>input {
    max-width: 300px;
}

.nt input:not([type=checkbox]),
.nt select,
.nt textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #ccd5e3;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background: white;
    color: #24324c;
}

.nt label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    margin: 15px 0;
}

.nt-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.nt-card {
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: white;
    border: 1px solid #dce3ed;
    border-radius: 14px;
    padding: 22px;
    color: inherit;
}

.nt-card:hover {
    border-color: #8277d1;
    box-shadow: 0 4px 16px #2936540b;
}

.nt-card.static {
    cursor: default;
}

.nt-card-top {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.nt-pill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 6px;
    background: #f0f3f9;
    font-size: 11px;
    font-weight: 700;
    color: #52607b;
}

.nt-pill.danger {
    background: #ffeded;
    color: #a52837;
}

.nt-card p {
    color: #65728a;
    font-size: 14px;
}

.nt-card-foot {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 12px;
    color: #65728a;
}

.nt-card-foot strong {
    color: #4338a4;
}

.nt-panel {
    background: white;
    border: 1px solid #dce3ed;
    border-radius: 14px;
    padding: 25px;
    min-width: 0;
}

.nt-compose,
.nt-detail {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 22px;
    margin-top: 18px;
}

.nt-detail {
    grid-template-columns: 1.1fr .9fr;
}

.nt-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.nt-picks {
    max-height: 270px;
    overflow: auto;
}

.nt label.nt-pick {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e6eaf1;
    border-radius: 8px;
    padding: 12px;
    gap: 12px;
    margin: 8px 0;
}

.nt-pick input {
    width: 17px;
    height: 17px;
    accent-color: #4338a4;
}

.nt-pick small,
.nt-recipient small,
.nt-log small {
    display: block;
    color: #64748b;
    margin-top: 5px;
    font-size: 12px;
}

.nt-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.nt-chips .nt-btn {
    padding: 6px 9px;
    font-size: 11px;
}

.nt-actions {
    margin: 20px 0 5px;
}

.nt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e9edf4;
    padding: 14px 0;
    font-size: 13px;
}

.nt-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.nt-error {
    padding: 14px;
    background: #fff0ed;
    color: #9f2d25;
    border: 1px solid #ffd4ce;
    border-radius: 9px;
    margin: 14px 0;
    font-size: 13px;
}

.nt-callout {
    padding: 17px;
    background: #f1f3ff;
    border-left: 3px solid #6252b9;
    border-radius: 8px;
    margin: 20px 0;
}

.nt-callout p {
    margin: 7px 0 0;
}

.nt-recipient {
    border: 1px solid #e6eaf1;
    border-radius: 9px;
    padding: 13px;
    margin: 10px 0;
    font-size: 13px;
}

.nt-recipient span {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 7px;
}

.nt-log {
    border-left: 2px solid #d9d5ee;
    padding: 7px 12px;
    margin: 13px 0;
    font-size: 12px;
}

.nt-empty {
    padding: 45px;
    background: white;
    border: 1px dashed #cad3e1;
    border-radius: 12px;
}

.nt-overdue {
    color: #ab3c26;
    font-size: 12px;
    margin-top: 12px;
}

@media(max-width:850px) {
    .nt-compose,
    .nt-detail {
        grid-template-columns: 1fr
    }

    .nt-list {
        grid-template-columns: 1fr
    }
}

@media(max-width:480px) {
    .nt-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .nt h1 {
        font-size: 27px
    }

    .nt-stats {
        gap: 7px
    }

    .nt-stats>div {
        padding: 12px
    }

    .nt-stats span {
        font-size: 11px
    }

    .nt-stats b {
        font-size: 23px
    }

    .nt-panel,
    .nt-card {
        padding: 17px
    }

    .nt-two {
        grid-template-columns: 1fr;
        gap: 0
    }

    .nt-toolbar>input {
        max-width: none
    }

    .nt-row {
        flex-direction: column
    }

    .nt-btn {
        min-height: 42px
    }

    .nt-heading p {
        margin: 5px 0
    }
}
/* V7.2 School Media (reference/78-screen-school-media.md, reference/media-v72/media.css) — the
   Explore/My posts feed, one album's detail view and the editor's two panels. Ported from the
   prototype stylesheet; its own 1000px (grid/detail/editor collapse) and 760px (phone) rules are
   kept, and the prototype's secondary-text contrast rules close the block. */
.md {
    max-width: 1200px;
    margin: auto;
    color: #4e394f;
}

.md * {
    box-sizing: border-box;
}

.md-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #f4eaf0;
    border: 1px solid #e9dce5;
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 12px;
}

.md-heading h1 {
    margin: 9px 0;
    font-size: 30px;
}

.md-heading p {
    color: #8c7183;
    font-size: 13px;
}

.md-eyebrow {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #997269;
    font-weight: 700;
}

.md-storage {
    font-size: 10px;
    color: #9a8996;
    margin: 12px 3px 23px;
}

.md-muted {
    font-size: 12px;
    color: #8c7183;
}

.md-btn {
    background: white;
    color: #70516b;
    border: 1px solid #e4d6e1;
    border-radius: 10px;
    padding: 11px 15px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    min-height: 40px;
}

.md-btn.primary {
    background: #76526f;
    color: white;
    border-color: #76526f;
}

.md-btn.selected {
    background: #76526f;
    color: white;
}

.md-tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.md-toolbar {
    display: flex;
    align-items: end;
    gap: 14px;
    background: white;
    border: 1px solid #e9e1e9;
    border-radius: 15px;
    padding: 16px;
    margin-bottom: 22px;
}

.md-toolbar label:first-child {
    flex: 1;
}

.md-toolbar label {
    margin: 0;
}

.md-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.md-card {
    border: 1px solid #e9e2e9;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 16px #39223905;
    min-width: 0;
}

.md-cover {
    position: relative;
    display: block;
    width: 100%;
    height: 195px;
    padding: 0;
    border: 0;
    background: #f1edf8;
    cursor: pointer;
    overflow: hidden;
}

.md-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}

.md-cover:hover img {
    transform: scale(1.035);
}

.md-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: #fffef4e8;
    border-radius: 20px;
    font-size: 10px;
    padding: 5px 9px;
    color: #665666;
}

.md-card-body {
    padding: 19px;
}

.md-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.md-meta span {
    color: #997269;
    font-size: 10px;
    background: #faf0e8;
    padding: 4px 7px;
    border-radius: 6px;
}

.md-meta small {
    font-size: 9px;
    color: #aa97a4;
}

.md-title {
    display: block;
    text-align: left;
    border: 0;
    background: none;
    padding: 0;
    margin: 13px 0 8px;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #4e394f;
    cursor: pointer;
}

.md-card-body p {
    font-size: 12px;
    color: #928090;
    line-height: 1.65;
    margin: 0;
}

.md-card-foot {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f2eaf0;
    margin-top: 16px;
    padding-top: 12px;
    font-size: 9px;
    color: #aa91a1;
}

.md-card-foot b {
    color: #87627c;
}

.md-video-cover {
    background: linear-gradient(145deg, #6b557b, #403748);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 8px;
    padding: 18px;
}

.md-video-cover span {
    border: 1px solid #ffffff60;
    padding: 12px 16px;
    border-radius: 50%;
    font-size: 20px;
}

.md-video-cover small {
    font-size: 10px;
    overflow-wrap: anywhere;
}

.md-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.md-panel {
    background: white;
    border: 1px solid #e9e0e9;
    border-radius: 19px;
    padding: 25px;
    margin-bottom: 19px;
}

.md-panel h2 {
    font-size: 21px;
}

.md-panel h3 {
    font-size: 15px;
}

.md label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #806b80;
    font-weight: 650;
    margin: 17px 0;
}

.md input:not([type=checkbox]),
.md textarea,
.md select {
    width: 100%;
    padding: 11px;
    border: 1px solid #e2d8e2;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    color: #5a4658;
    background: white;
}

.md textarea {
    resize: vertical;
}

.md-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.md-help {
    font-size: 11px;
    color: #a28f9e;
    line-height: 1.7;
}

.md-rights {
    border: 1px solid #efe5d6;
    background: #fffaf1;
    padding: 17px;
    border-radius: 13px;
    margin-top: 24px;
}

.md .md-checkbox,
.md .md-checks label {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.md-checkbox input,
.md-checks input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    accent-color: #76526f;
}

.md-checks {
    display: flex;
    gap: 20px;
}

.md .md-drop {
    padding: 24px;
    background: #faf6fb;
    border: 1px dashed #cdb8cf;
    border-radius: 15px;
    text-align: center;
    color: #8a6185;
    cursor: pointer;
    font-size: 15px;
}

.md-drop input {
    font-size: 11px;
    background: transparent;
}

.md-uploads {
    display: grid;
    gap: 16px;
}

.md-uploads article {
    border: 1px solid #e9e0ec;
    border-radius: 13px;
    padding: 13px;
}

.md-thumb {
    height: 160px;
    background: #f3edf8;
    border-radius: 10px;
    overflow: hidden;
}

.md-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.md-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8a6185;
    font-size: 11px;
    overflow-wrap: anywhere;
    padding: 12px;
    text-align: center;
}

.md-uploads small {
    font-size: 10px;
    color: #a08a9b;
}

.md-actions,
.md-editor-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px 0;
}

.md-editor-actions {
    justify-content: flex-end;
    background: white;
    border: 1px solid #eadfea;
    border-radius: 14px;
    padding: 15px;
}

.md-error {
    background: #fff1ed;
    color: #a35340;
    padding: 15px;
    border: 1px solid #f2d4cb;
    border-radius: 12px;
    font-size: 12px;
    margin: 15px 0;
}

/* The reviewer's own words — the requested-changes reason or the author's removal request reason
   (the reference's feedback callout) — read as a titled note inside the publishing panel. */
.md .md-error b {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.md .md-error p {
    margin: 0;
    line-height: 1.6;
}

.md-guidance {
    padding: 16px;
    background: #f5eef7;
    border-radius: 12px;
    color: #866b90;
    font-size: 12px;
    line-height: 1.7;
    margin: 15px 0;
}

.md-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
}

.md-description {
    white-space: pre-wrap;
    line-height: 1.8;
    font-size: 14px;
    color: #8e778b;
}

.md-story small {
    color: #ac97a6;
    font-size: 10px;
}

.md-album figure {
    margin: 0 0 22px;
    background: white;
    border: 1px solid #eadfea;
    border-radius: 18px;
    overflow: hidden;
}

.md-album img,
.md-album video {
    display: block;
    width: 100%;
    max-height: 650px;
    object-fit: contain;
    background: #f5f0f8;
}

.md-album figcaption,
.md-caption {
    padding: 15px 20px;
    color: #8d738a;
    font-size: 12px;
    margin: 0;
}

.md-detail aside p {
    font-size: 12px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    color: #8d7488;
}

.md-log {
    padding: 13px 0;
    border-bottom: 1px solid #f1e8f1;
    font-size: 11px;
    line-height: 1.5;
    color: #8c6c87;
}

.md-log small {
    display: block;
    font-size: 9px;
    color: #b09bad;
    margin-top: 6px;
}

.md-empty {
    grid-column: 1/-1;
    background: #fff;
    border: 1px dashed #e2d2e2;
    text-align: center;
    border-radius: 18px;
    padding: 35px;
    color: #9b8598;
    font-size: 13px;
}

.md-status {
    background: #f3eaf2;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 11px;
    color: #946786;
}

/* The dashboard's "Moments from school" strip (media.css #md-dashboard, dashboardFeed()): the same
   cards as the Media feed, fewer of them, and a swipe row on a phone. */
#md-dashboard {
    margin-top: 30px;
}

#md-dashboard>.md-help {
    margin-top: -6px;
    margin-bottom: 15px;
}

#md-dashboard .u-section-heading a {
    font-size: 11px;
    font-weight: 700;
    color: var(--u-brand);
    text-decoration: none;
}

#md-dashboard a.md-cover,
#md-dashboard a.md-title {
    text-decoration: none;
}

.md-dashboard-grid .md-cover {
    height: 160px;
}

.md-dashboard-grid .md-title {
    font-size: 15px;
}

.md-dashboard-grid .md-card-body {
    padding: 17px;
}

.md-dashboard-grid .md-card-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.md-btn:focus-visible,
.md-cover:focus-visible,
.md-title:focus-visible {
    outline: 3px solid #b99bc4;
    outline-offset: 3px;
}

/* Readable secondary text on pastel surfaces. */
.md-help,
.md-storage,
.md-card-body p,
.md-description,
.md-heading p {
    color: #746270;
}

.md-meta small,
.md-card-foot,
.md-story small,
.md-log small {
    color: #756674;
}

.md button:disabled {
    opacity: .55;
    cursor: wait;
}

@media(max-width:1000px) {
    .md-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md-detail {
        grid-template-columns: 1fr
    }

    .md-editor {
        grid-template-columns: 1fr
    }
}

@media(max-width:760px) {
    .md-heading {
        padding: 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .md-heading h1 {
        font-size: 25px
    }

    .md-heading p {
        font-size: 12px
    }

    .md-heading>.md-btn {
        width: 100%
    }

    .md-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .md-cover {
        height: 215px
    }

    .md-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }

    .md-two {
        grid-template-columns: 1fr;
        gap: 0
    }

    .md-panel {
        padding: 19px
    }

    .md input:not([type=checkbox]),
    .md textarea,
    .md select {
        font-size: 16px;
        min-height: 44px
    }

    .md .md-btn {
        min-height: 44px
    }

    .md-editor-actions {
        position: sticky;
        bottom: 78px;
        z-index: 20;
        justify-content: stretch
    }

    .md-editor-actions>* {
        flex: 1;
        font-size: 11px
    }

    .md-tabs {
        flex-wrap: nowrap;
        overflow: auto;
        padding-bottom: 5px;
        max-width: 100%
    }

    .md-tabs>* {
        flex-shrink: 0;
        white-space: nowrap
    }

    .md-detail {
        gap: 10px
    }

    .md-story h2 {
        font-size: 22px
    }

    .md-dashboard-grid {
        display: flex;
        overflow: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        gap: 13px
    }

    .md-dashboard-grid .md-card {
        flex: 0 0 86%;
        scroll-snap-align: start
    }

    .md-dashboard-grid .md-cover {
        height: 175px
    }

    .md-dashboard-grid .md-title {
        font-size: 17px
    }

    .md-album figure {
        border-radius: 15px
    }
}

@media(prefers-reduced-motion:reduce) {
    .md-cover img {
        transition: none
    }
}

@media print {

    .md-editor-actions,
    .md-drop {
        display: none
    }

}

/* School Access (reference/settings-v73/settings.js platform(), reference/settings-v73/settings.css)
   — the Super Admin module/channel/status screen, its save bar and the review dialog. Ported from the
   prototype stylesheet: the hero, tabs, module grid, fields, guidance panels and stat tiles keep the
   prototype's sizes and colours, and its 1100px (two-column grid) and 760px (phone) rules are kept.
   The save bar stays in flow rather than sticky, so it can never cover the mobile bottom navigation.
   The review dialog is the shell's `.modal` plus `.ac-review`; the two-class selector is needed only
   to beat the shell's single-class `.modal` sizing. */
.ac-app {
    max-width: 1200px;
    margin: auto;
    color: #493e5b;
}

.ac-app * {
    box-sizing: border-box;
}

.ac-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background: #eee9f7;
    border: 1px solid #dfd7ee;
    border-radius: 22px;
    padding: 30px;
    margin-bottom: 20px;
}

.ac-hero h1 {
    font-size: 30px;
    margin: 10px 0;
}

.ac-hero p {
    color: #73657e;
    line-height: 1.6;
    margin: 0;
    max-width: 700px;
}

.ac-hero > img {
    width: 80px;
    height: 80px;
}

.ac-btn {
    border: 1px solid #dcd3e8;
    border-radius: 10px;
    background: white;
    color: #635279;
    min-height: 43px;
    padding: 10px 15px;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.ac-btn.primary,
.ac-btn.active {
    background: #625080;
    border-color: #625080;
    color: white;
}

.ac-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ac-btn:focus-visible {
    outline: 3px solid #a18bbd;
    outline-offset: 3px;
}

.ac-tabs {
    display: flex;
    gap: 9px;
    overflow: auto;
    margin: 24px 0;
    padding: 2px 0 8px;
}

.ac-tabs > * {
    white-space: nowrap;
    flex-shrink: 0;
}

.ac-panel {
    background: white;
    border: 1px solid #e3ddeb;
    border-radius: 18px;
    padding: 24px;
    min-width: 0;
    margin: 18px 0;
}

.ac-panel h2 {
    font-size: 20px;
    margin: 0 0 12px;
}

.ac-panel p {
    font-size: 13px;
    color: #74677d;
    line-height: 1.7;
}

.ac-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.ac-module {
    display: flex;
    gap: 12px;
    border: 1px solid #e7e0ee;
    background: #fdfbff;
    padding: 17px;
    border-radius: 13px;
    min-width: 0;
}

.ac-module > img {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
}

.ac-module > div {
    flex: 1;
    min-width: 0;
}

.ac-module h3 {
    font-size: 15px;
    margin: 0 0 6px;
}

.ac-module small {
    display: block;
    font-size: 11px;
    color: #83718c;
    line-height: 1.7;
    margin-top: 6px;
}

.ac-check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0;
    color: #5f5070;
}

.ac-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: #72578b;
}

.ac-check:has(input:disabled) {
    opacity: .6;
}

.ac-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: #655674;
}

.ac-app input:not([type=checkbox]),
.ac-app select,
.ac-app textarea {
    width: 100%;
    border: 1px solid #dbd2e5;
    border-radius: 9px;
    padding: 11px;
    font: inherit;
    font-size: 13px;
    background: white;
    color: #51455e;
}

.ac-app textarea {
    min-height: 90px;
    resize: vertical;
}


.ac-save {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: white;
    border: 1px solid #e3ddeb;
    border-radius: 17px;
    padding: 18px;
    margin: 24px 0;
}

.ac-save > .ac-field {
    flex: 1;
    min-width: 260px;
}

.ac-alert {
    background: #fff5e9;
    color: #855209;
    border: 1px solid #f1d09e;
    padding: 13px 15px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.ac-guidance {
    background: #f6f1fb;
    border: 1px solid #e4d9ef;
    border-radius: 13px;
    padding: 18px;
}

.ac-guidance p {
    margin: 7px 0;
}

.ac-caption {
    font-size: 12px;
    color: #7c6d83;
    line-height: 1.6;
}

.ac-stats {
    display: flex;
    gap: 19px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ac-stats > div {
    flex: 1 1 160px;
    border: 1px solid #e4daee;
    background: #fbf8fe;
    border-radius: 15px;
    padding: 18px;
}

.ac-stats b {
    display: block;
    font-size: 26px;
    color: #5f4675;
}

.ac-stats span {
    font-size: 12px;
    color: #796780;
}

.ac-page-controls {
    margin-top: 10px;
    border: 1px solid #e7dfef;
    border-radius: 11px;
    padding: 11px;
    background: white;
}

.ac-page-controls > summary {
    cursor: pointer;
    font-weight: 650;
    color: #655270;
}

.ac-app pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 11px;
    background: #f7f3fb;
    padding: 15px;
    border-radius: 9px;
    max-height: 340px;
    overflow: auto;
}

.ac-empty {
    padding: 42px 24px;
    text-align: center;
}


.modal.ac-review {
    width: min(620px, calc(100vw - 30px));
    border: 1px solid #ddd1e7;
    border-radius: 20px;
    padding: 28px;
    max-height: 85vh;
    color: #584564;
}

.modal.ac-review h2 {
    font-size: 21px;
    color: #493e5b;
}

.modal.ac-review p {
    font-size: 13px;
    line-height: 1.7;
    color: #6d5c78;
}

.modal.ac-review summary {
    cursor: pointer;
    font-weight: 650;
    font-size: 14px;
    color: #6b527e;
}

.modal.ac-review pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 11px;
    background: #f8f5fb;
    padding: 15px;
    border-radius: 9px;
    max-height: 340px;
    overflow: auto;
}

.modal.ac-review .ac-guidance {
    margin: 15px 0;
}

@media(max-width:1100px) {
    .ac-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:760px) {
    .ac-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 19px;
    }

    .ac-hero > img {
        width: 54px;
        height: 54px;
    }

    .ac-hero h1 {
        font-size: 24px;
    }

    .ac-grid {
        grid-template-columns: 1fr;
    }

    .ac-panel {
        padding: 17px;
        border-radius: 14px;
    }

    .ac-save {
        padding: 14px;
    }

    .ac-save > .ac-field {
        min-width: 100%;
    }

    .modal.ac-review {
        width: calc(100vw - 14px);
        padding: 18px;
    }
}


/* V7.3 settings module: hub cards, request/audit lists and the locked screen
   (reference/settings-v73/settings.css). Appended after the School Access block. */
.ac-card {
    border: 1px solid #e4daee;
    background: #fdfbff;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ac-card h2 {
    font-size: 18px;
    margin: 0;
}

.ac-card h3 {
    font-size: 16px;
    margin: 2px 0;
}

.ac-card p {
    font-size: 13px;
    color: #74677d;
    line-height: 1.6;
    margin: 0;
}

.ac-card > .ac-btn {
    margin-top: auto;
    align-self: flex-start;
}

.ac-badge {
    align-self: flex-start;
    border-radius: 999px;
    background: #f3e8d2;
    color: #7a5a17;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ac-badge.good {
    background: #e2f2e4;
    color: #2f6b3a;
}

.ac-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ac-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ac-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.ac-event-list {
    display: grid;
    gap: 12px;
}

.ac-event {
    border: 1px solid #e7e0ee;
    border-radius: 13px;
    padding: 16px;
    background: #fdfbff;
}

.ac-event h3 {
    font-size: 15px;
    margin: 0 0 4px;
}

.ac-event p {
    margin: 0 0 8px;
    font-size: 12px;
    color: #74677d;
}

.ac-event small {
    color: #83718c;
    font-size: 11px;
}

.ac-role-list {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.ac-role-list details {
    border: 1px solid #e7e0ef;
    border-radius: 11px;
    padding: 12px;
    background: white;
}

.ac-role-list summary {
    cursor: pointer;
    font-weight: 650;
    color: #655270;
}

.ac-role-list .ac-grid {
    margin-top: 10px;
}

.ac-locked .ac-panel {
    max-width: 720px;
    margin: 0 auto;
}

.ac-locked h1 {
    font-size: 26px;
    margin: 8px 0;
}

.ac-locked-icon {
    width: 56px;
    height: 56px;
}

.ac-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    font-size: 13px;
    margin: 10px 0;
}

.ac-dl dt {
    color: #83718c;
}

.ac-dl dd {
    margin: 0;
    color: #584564;
}

/* Students roster transport QR (QR-PRINT, 2026-10-29). The QR dialog previews the same code the
   guardian shows the driver; js/student-qr.js draws it and builds the PNG / PDF download, so only
   the preview box needs styling here. The bulk sheet is written into a hidden iframe, so no print
   rules are added to this stylesheet. */
.qr-preview {
    width: 180px;
    height: 180px;
    margin: 14px auto;
    padding: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.qr-preview svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 680px) {
    .qr-preview {
        width: 150px;
        height: 150px;
    }
}

/* QR-PRINT (2026-10-29): "Print QR Codes" sits with the roster's grid filters — pushed to the far
   end of the toolbar on wide screens and wrapped onto its own line when the filters fill the row. */
.toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* STUDENT-IMPORT (2026-10-29): the import modal is a three-step wizard — Upload Excel, Validate,
   Review & Import — because the template downloads from the page header instead of being the
   modal's first step. The strip keeps the prototype's styling (safeshala.css stays verbatim); only
   the column count and the completed state are added here. A step that is finished is one the flow
   walked past, so it reads green rather than blue. */
.import-steps {
    grid-template-columns: repeat(3, 1fr);
}

.import-step.done {
    color: #067647;
    font-weight: 700;
}

.import-step.done b {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

/* The prototype drops the strip to two columns on a phone; three steps then read as 2 + 1, which
   keeps the labels legible where three columns would clip them. */
@media (max-width: 680px) {
    .import-steps {
        grid-template-columns: 1fr 1fr;
    }
}


/* ATTENDANCE-CALENDAR (2026-10-29): the Parent / Student Calendar View cell now reads as a solid
   status chip - Present green, Absent red, Late amber, any other recorded status slate - with a
   white day number and caption, so a marked day is obvious at a glance. The base sheet only tinted
   the caption text, which left the day number black on white and the status easy to miss. A
   "Not marked" record keeps its hatched neutral pattern (it is not Present/Absent) and an
   unrecorded day stays plain white. The legend dots follow the same colours. */
.attendance-calendar .cal-day.present,
.attendance-calendar .cal-day.late,
.attendance-calendar .cal-day.absent,
.attendance-calendar .cal-day.recorded {
    color: #fff;
    font-weight: 600;
}

.attendance-calendar .cal-day.present {
    background: var(--att-green);
    border-color: var(--att-green);
}

.attendance-calendar .cal-day.absent {
    background: var(--att-red);
    border-color: var(--att-red);
}

.attendance-calendar .cal-day.late {
    background: var(--att-amber);
    border-color: var(--att-amber);
}

.attendance-calendar .cal-day.recorded {
    background: var(--att-slate-500);
    border-color: var(--att-slate-500);
}

.attendance-calendar .cal-day.present small,
.attendance-calendar .cal-day.late small,
.attendance-calendar .cal-day.absent small,
.attendance-calendar .cal-day.recorded small {
    color: #fff;
    font-weight: 600;
}

/* Not-marked days keep the hatch, but the caption and number are dark enough to read on it. */
.attendance-calendar .cal-day.unmarked {
    color: var(--att-slate-700);
}

.attendance-calendar .cal-day.unmarked small {
    color: var(--att-slate-700);
    font-weight: 600;
}

/* Legend dots are matched to the chips and squared off so the colour is readable at 10px. */
.attendance-calendar + .legend span:before {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--att-green);
}

.attendance-calendar + .legend span:nth-child(2):before {
    background: var(--att-amber);
}

.attendance-calendar + .legend span:nth-child(3):before {
    background: var(--att-red);
}

.attendance-calendar + .legend span:nth-child(4):before {
    background: var(--att-slate-500);
}

.attendance-calendar + .legend span:nth-child(5):before {
    background: #E2E8F0;
}

.attendance-calendar + .legend span:nth-child(6):before {
    background: #CBD5E1;
}

/* ============================================================================
   Students — phone / PWA layout (2026-10-30)

   The roster's phone fallback came from safeshala.css's generic 760px block: its 8–9px card
   values, its 9px action buttons and its 28px pager squares were sized to fit the grid, not to be
   read or tapped on a handset, so the record rows were effectively unusable on a phone.
   Everything below is scoped to .students-page (the wrapper Pages/People/Students.razor renders)
   and stays inside the same 760px breakpoint the rest of the shell uses, so no other screen and
   no desktop layout changes.

   Reasons for the individual choices:
     * 16px fields  — Safari on iOS zooms the viewport when a focused field is smaller than 16px;
     * 44px targets — the minimum comfortable touch target, used for the card actions and the
                      four pager buttons;
     * 3-up values  — ID / Class / Roll keep one line each with an ellipsis, which is what the
                      desktop columns showed;
     * bottom sheet — the View drawer is pinned to the bottom edge, its head stays visible while
                      its body scrolls, and it clears the home indicator with the safe-area inset;
     * Print QR     — the roster action stays visible in the toolbar (it used to be a 9px link in a
                      scrolling row) and prints the filtered roster, the same call the desktop uses;
     * 681–760px    — the roster shows at all (a later `.mobile-cards{display:none}` left that band
                      with the table hidden and the cards hidden — see the note at the cards rule).
   ============================================================================ */

@media (max-width: 760px) {

    /* ---------------------------------------------------------------- page head */

    .students-page .page-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    .students-page .page-head h1 {
        font-size: 22px;
    }

    .students-page .page-head p {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.5;
    }

    .students-page .head-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .students-page .head-actions .btn {
        min-height: 44px;
        padding: 0 10px;
        font-size: 12px;
        line-height: 1.25;
    }

    /* Add Student is the screen's primary action: it leads the row at full width. */
    .students-page .head-actions .btn.primary {
        grid-column: 1 / -1;
        order: -1;
        min-height: 46px;
        font-size: 13px;
    }

    /* ----------------------------------------------------------------- filters */

    .students-page .toolbar {
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: stretch;
        margin-bottom: 12px;
    }

    .students-page .students-search {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 12px;
        font-size: 16px;
    }

    .students-page .students-filter {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        font-size: 16px;
    }

    .students-page .students-scope-hint {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 11px;
        line-height: 1.4;
    }

    .students-page .students-count {
        grid-column: 1;
        align-self: center;
        margin: 0;
        font-size: 11px;
    }

    .students-page .students-clear {
        grid-column: 2;
        min-height: 44px;
        font-size: 12px;
    }

    .students-page .students-toolbar-actions {
        display: block;
        grid-column: 1 / -1;
    }

    .students-page .students-print-qr {
        width: 100%;
        min-height: 44px;
        font-size: 12px;
    }

    /* ------------------------------------------------------------ roster cards */

    /* Only the roster card is re-flowed: .card is shared by the overview and dialog blocks, which
       keep their own display. The QuickGrid table inside .table-wrap is hidden by .desktop-table,
       but the wrap itself would still paint an empty bordered strip above the cards. */
    .students-page .students-roster {
        padding: 12px;
    }

    /* A V6.1.8 block later in safeshala.css re-declares `.mobile-cards{display:none}` at base level and
       re-enables it only inside `@media(max-width:680px)`. Because that base declaration sits after
       the 760px block, 681–760px had the desktop table hidden *and* the cards hidden — a blank
       roster. Setting the display here (two classes, so it wins over both) restores the list for the
       whole phone/tablet range, and one column with a gap keeps the cards apart. */
    .students-page .mobile-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .students-page .record {
        padding: 14px;
        border-radius: 14px;
        cursor: pointer;
    }

    .students-page .record:active {
        background: #F8FAFC;
    }

    .students-page .record-top {
        align-items: flex-start;
    }

    .students-page .record-identity {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .students-page .record-identity strong {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;
        color: #172B4D;
        overflow-wrap: anywhere;
    }

    .students-page .record-identity .badge {
        align-self: flex-start;
        padding: 3px 9px;
        font-size: 10px;
    }

    .students-page .record-chevron {
        flex-shrink: 0;
        color: #98A2B3;
        font-size: 20px;
        line-height: 1;
    }

    .students-page .record-meta {
        /* Student ID is the longest of the three values, so it gets the widest track; the ellipsis on
           the value keeps an unusually long code from pushing the row into a horizontal scroll. */
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr);
        gap: 6px;
        margin: 10px 0 0;
    }

    .students-page .record-meta div {
        min-width: 0;
        padding: 7px 8px;
        border-radius: 9px;
        background: #F8FAFC;
    }

    .students-page .record-meta b {
        display: block;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .students-page .record-meta span {
        margin-top: 2px;
        font-size: 10px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .students-page .record-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    .students-page .record-actions .btn {
        min-height: 44px;
        padding: 0 6px;
        font-size: 12px;
    }

    /* ------------------------------------------------------------------- pager */

    /* The page renders the QuickGrid <Paginator> after the cards, so the pager already sits under
       the records; the empty table wrap above them is what has to go. Its four arrow buttons were
       28px squares, which is below a comfortable touch target. */
    .students-page .table-wrap {
        display: none;
    }

    .students-page .paginator {
        margin-top: 14px;
        gap: 8px;
        justify-content: center;
    }

    .students-page .paginator .summary,
    .students-page .paginator .pagination-text {
        width: 100%;
        font-size: 11px;
        text-align: center;
    }

    .students-page .paginator nav {
        margin: 0 auto;
        gap: 8px;
    }

    .students-page .paginator nav button {
        width: 44px;
        height: 44px;
    }

    /* --------------------------------------------------------- empty / loading */

    .students-page .empty {
        padding: 32px 12px;
        font-size: 13px;
        line-height: 1.5;
    }

    .students-page .students-roster > .hint {
        margin: 6px 0;
        font-size: 12px;
    }

    /* ------------------------------------------------- drawer → bottom sheet */

    .students-page .drawer {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 92dvh;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        border-radius: 18px 18px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 -18px 50px #10182826;
        transform: translateY(100%);
    }

    .students-page .drawer.show {
        transform: translateY(0);
    }

    .students-page .drawer-head {
        flex-shrink: 0;
        padding: 14px 16px;
        background: #fff;
        border-bottom: 1px solid var(--line, #E4E7EC);
        border-radius: 18px 18px 0 0;
    }

    .students-page .drawer-head h2 {
        margin: 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .students-page .drawer-head .close {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        font-size: 22px;
        line-height: 1;
    }

    /* The body is the only scrolling region, so the head and its close button stay in reach. */
    .students-page .students-drawer-body {
        flex: 1;
        min-height: 0;
        padding: 14px 16px 18px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .students-page .students-drawer-body .card {
        padding: 12px;
    }

    .students-page .students-drawer-body .detail {
        padding: 10px;
    }

    .students-page .students-drawer-body .hint {
        font-size: 12px;
        line-height: 1.5;
    }

    /* ----------------------------------------------- create / import dialogs */

    .students-page .modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: 92dvh;
        padding: 16px;
        border-radius: 16px;
    }

    .students-page .modal-head h2 {
        margin: 0;
        font-size: 15px;
        line-height: 1.3;
    }

    .students-page .modal-head .close {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    /* 16px keeps iOS from zooming the page when a field takes focus. */
    .students-page .modal input:not([type=checkbox]):not([type=radio]):not([type=file]),
    .students-page .modal select,
    .students-page .modal textarea,
    .students-page .modal .fake-input {
        min-height: 44px;
        font-size: 16px;
    }

    .students-page .modal-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .students-page .modal-actions .btn {
        flex: 1;
        min-height: 44px;
        font-size: 12px;
    }

    /* ------------------------------------------------------------------ toast */

    /* The shell reserves a 78px strip for the fixed bottom navigation, so the toast sits above it
       instead of behind the tab bar. */
    .students-page .toast {
        left: 12px;
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }
}

/* ============================================================================
   Teachers (Pages/People/Teachers.razor) - phone / PWA layout

   The roster came from the same generic phone fallback as Students: 8-9px card text, 9px action
   buttons and 28px pager squares, i.e. a list that could be seen but not read or tapped. Everything
   below is scoped to .teachers-page (the wrapper the page renders) and stays inside the same 760px
   breakpoint the rest of the shell uses, so no other screen and no desktop layout changes.

   Reasons for the individual choices:
     * 16px fields   - Safari on iOS zooms the viewport when a focused field is smaller than 16px;
     * 44px targets  - the minimum comfortable touch target, used for View / More / the menu items,
                       the four pager buttons and the dialog buttons;
     * three values  - Employee ID / Subjects / Classes stay one labelled line each, which is the
                       information the desktop columns carried;
     * More menu     - Edit and Delete move behind one labelled button so a card never squeezes three
                       unbalanced buttons into one line; the menu opens upwards, away from the pager;
     * bottom sheet  - the View drawer is pinned to the bottom edge, its head stays visible while
                       .teachers-drawer-body scrolls, and it clears the home indicator;
     * 681-760px     - the roster shows at all (a later `.mobile-cards{display:none}` left that band
                       with the table hidden *and* the cards hidden - see the note at the cards rule).
   ============================================================================ */

@media (max-width: 760px) {

    /* ---------------------------------------------------------------- page head */

    .teachers-page .page-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    .teachers-page .page-head h1 {
        font-size: 22px;
    }

    .teachers-page .page-head p {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.5;
    }

    .teachers-page .head-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    /* Add Teacher is the screen's primary action, so it is the full-width first row of the head. */
    .teachers-page .head-actions .btn {
        width: 100%;
        min-height: 46px;
        padding: 0 12px;
        font-size: 13px;
    }

    /* ------------------------------------------------------------------- tabs */

    .teachers-page .tabs {
        gap: 4px;
        margin-bottom: 12px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .teachers-page .tabs::-webkit-scrollbar {
        display: none;
    }

    .teachers-page .tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 14px;
        font-size: 13px;
    }

    /* ---------------------------------------------------------------- filters */

    .teachers-page .teachers-toolbar {
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: stretch;
        margin-bottom: 12px;
    }

    .teachers-page .teachers-search {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 12px;
        font-size: 16px;
    }

    .teachers-page .teachers-filter {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        font-size: 16px;
    }

    .teachers-page .teachers-clear {
        min-height: 44px;
        padding: 0 14px;
        font-size: 12px;
    }

    /* The count is the toolbar's last line, so it reads as a caption for the list below it. */
    .teachers-page .teachers-count {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 11px;
        line-height: 1.4;
        text-align: right;
    }

    /* ---------------------------------------------------- roster states / card */

    .teachers-page .teachers-roster {
        padding: 12px;
    }

    .teachers-page .teachers-refreshing {
        margin: 0 0 8px;
        font-size: 11px;
        line-height: 1.4;
    }

    /* A failed load keeps the roster card (and the filters above it) and offers the retry here. */
    .teachers-page .teachers-load-error {
        display: grid;
        gap: 8px;
        margin: 0 0 10px;
        font-size: 12px;
        line-height: 1.5;
    }

    .teachers-page .teachers-load-error .btn {
        min-height: 44px;
        font-size: 12px;
    }

    .teachers-page .teachers-empty-clear {
        display: block;
        width: 100%;
        margin-top: 12px;
        min-height: 44px;
        font-size: 12px;
    }

    .teachers-page .empty {
        padding: 32px 12px;
        font-size: 13px;
        line-height: 1.5;
    }

    /* The empty table wrap would still paint a bordered strip above the cards; the cards replace it. */
    .teachers-page .table-wrap {
        display: none;
    }

    /* Two classes, so this wins over the later base `.mobile-cards{display:none}` - see the note above. */
    .teachers-page .mobile-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ------------------------------------------------------------ roster cards */

    .teachers-page .record {
        padding: 14px;
        border-radius: 14px;
    }

    .teachers-page .record:active {
        background: #F8FAFC;
    }

    /* The name and the status badge are one button: tapping either opens the View sheet. */
    .teachers-page .record-open {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
    }

    .teachers-page .record-identity {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .teachers-page .record-identity strong {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;
        color: #172B4D;
        overflow-wrap: anywhere;
    }

    .teachers-page .record-identity .badge {
        align-self: flex-start;
        padding: 3px 9px;
        font-size: 10px;
    }

    .teachers-page .record-chevron {
        flex-shrink: 0;
        color: #98A2B3;
        font-size: 20px;
        line-height: 1;
    }

    .teachers-page .record-meta {
        /* Three equal tracks: the labels are short and every value ellipsises, so a long register
           name or a long subject list cannot push the card into a horizontal scroll. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin: 10px 0 0;
    }

    .teachers-page .record-meta div {
        min-width: 0;
        padding: 7px 8px;
        border-radius: 9px;
        background: #F8FAFC;
    }

    .teachers-page .record-meta b {
        display: block;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .teachers-page .record-meta span {
        margin-top: 2px;
        font-size: 10px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    /* ------------------------------------------------------ card actions / More */

    .teachers-page .record-actions {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 8px;
        margin-top: 12px;
    }

    .teachers-page .record-actions .btn {
        width: 100%;
        min-height: 44px;
        padding: 0 10px;
        font-size: 12px;
    }

    /* The anchor is the positioning context for the menu, so the menu opens next to its own card. */
    .teachers-page .record-more-anchor {
        position: relative;
        min-width: 0;
    }

    .teachers-page .record-more-toggle {
        width: 100%;
    }

    /* Opens upwards: the pager follows the last card, so a downward menu would cover it. */
    .teachers-page .record-more {
        position: absolute;
        right: 0;
        bottom: calc(100% + 6px);
        z-index: 6;
        display: grid;
        gap: 2px;
        min-width: 190px;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--line, #E4E7EC);
        border-radius: 12px;
        box-shadow: 0 18px 44px #1018282E;
    }

    .teachers-page .record-more button {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        border: 0;
        border-radius: 8px;
        background: none;
        color: #172B4D;
        font-size: 13px;
        text-align: left;
    }

    .teachers-page .record-more button:active {
        background: #F2F4F7;
    }

    .teachers-page .record-more button.danger {
        color: #B42318;
    }

    /* ------------------------------------------------------------------- pager */

    .teachers-page .paginator {
        margin-top: 14px;
        gap: 8px;
        justify-content: center;
    }

    .teachers-page .paginator .summary,
    .teachers-page .paginator .pagination-text {
        width: 100%;
        font-size: 11px;
        text-align: center;
    }

    .teachers-page .paginator nav {
        margin: 0 auto;
        gap: 8px;
    }

    .teachers-page .paginator nav button {
        width: 44px;
        height: 44px;
    }

    /* ------------------------------------------------- drawer -> bottom sheet */

    .teachers-page .drawer {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 92dvh;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        border-radius: 18px 18px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 -18px 50px #10182826;
        transform: translateY(100%);
    }

    /* The sheet is inserted already carrying .show, so a transition has nothing to animate from; the
       opening motion is an animation, played once when the element appears. */
    @keyframes teachers-sheet-in {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .teachers-page .drawer.show {
        transform: translateY(0);
        animation: teachers-sheet-in .18s ease-out;
    }

    .teachers-page .drawer-head {
        flex-shrink: 0;
        padding: 14px 16px;
        background: #fff;
        border-bottom: 1px solid var(--line, #E4E7EC);
        border-radius: 18px 18px 0 0;
    }

    .teachers-page .drawer-head h2 {
        margin: 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .teachers-page .drawer-head .close {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        font-size: 22px;
        line-height: 1;
    }

    /* The body is the only scrolling region, so the head and its close button stay in reach. */
    .teachers-page .teachers-drawer-body {
        flex: 1;
        min-height: 0;
        padding: 14px 16px 18px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .teachers-page .teachers-drawer-body .card {
        padding: 12px;
    }

    .teachers-page .teachers-drawer-body .detail {
        padding: 10px;
    }

    .teachers-page .teachers-drawer-body .hint {
        font-size: 12px;
        line-height: 1.5;
    }

    /* ------------------------------------------------- create / edit dialog */

    .teachers-page .modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: 92dvh;
        padding: 16px;
        border-radius: 16px;
    }

    .teachers-page .modal-head h2 {
        margin: 0;
        font-size: 15px;
        line-height: 1.3;
    }

    .teachers-page .modal-head .close {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* The onboarding form is long, so it gets a single column and its sections lose some padding. */
    .teachers-page .modal .form-grid {
        grid-template-columns: 1fr;
    }

    .teachers-page .modal .form-section {
        padding: 12px;
    }

    /* 16px keeps iOS from zooming the page when a field takes focus. */
    .teachers-page .modal input:not([type=checkbox]):not([type=radio]):not([type=file]),
    .teachers-page .modal select,
    .teachers-page .modal textarea,
    .teachers-page .modal .fake-input {
        min-height: 44px;
        font-size: 16px;
    }

    /* The assignment table needs three columns' worth of content, so on a handset each saved pair
       becomes its own row: subject over class, with Remove beside both. */
    .teachers-page .modal table.assignment-grid {
        display: block;
        width: 100%;
    }

    .teachers-page .modal table.assignment-grid thead {
        display: none;
    }

    .teachers-page .modal table.assignment-grid tbody {
        display: grid;
        gap: 10px;
    }

    .teachers-page .modal table.assignment-grid tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px;
        border: 1px solid var(--line, #E4E7EC);
        border-radius: 12px;
        background: #fff;
    }

    .teachers-page .modal table.assignment-grid td {
        display: block;
        padding: 0;
    }

    .teachers-page .modal table.assignment-grid td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .teachers-page .modal table.assignment-grid td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .teachers-page .modal table.assignment-grid td:nth-child(3) {
        align-self: center;
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .teachers-page .modal table.assignment-grid select {
        width: 100%;
    }

    .teachers-page .modal table.assignment-grid .btn {
        min-height: 44px;
        font-size: 12px;
    }

    /* The sticky action row stays on the dialog's bottom edge, above the keyboard. */
    .teachers-page .modal-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .teachers-page .modal-actions .btn {
        flex: 1;
        min-height: 44px;
        font-size: 12px;
    }

    /* ------------------------------------------------------------------ toast */

    /* The shell reserves a 78px strip for the fixed bottom navigation, so the toast sits above it. */
    .teachers-page .toast {
        left: 12px;
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }
}

/* The bottom sheet slides in; with reduced motion it simply appears where it belongs. */
@media (prefers-reduced-motion: reduce) {

    .teachers-page .drawer {
        transition: none;
        animation: none;
    }
}