html, body {
    /* --mk-font keeps Plus Jakarta Sans first, then adds the Noto families.
       The old stack fell through to Helvetica/Arial, neither of which has a
       single Indic glyph — every Hindi/Marathi/Tamil string rendered as tofu
       on any machine without a system Noto. */
    font-family: var(--mk-font);
    height: 100%;
    margin: 0;
    padding: 0;

    /* Explicit, from a token. Without it the page ground stays browser-white in
       dark mode and every gap between cards glares — the cards flip, the canvas
       behind them doesn't. */
    background: var(--mk-bg-app);
    color: var(--mk-text);
}

/* ── Bootstrap type scale -> design tokens ───────────────────────────────────────
   Bootstrap sizes headings on its own ladder (h5 = 20px), so the ~200 business screens titled
   with <h5 class="mb-0 fw-bold"> read bigger than every Personal Finance page title (18px).
   Headings are mapped by ROLE, so h5 lands exactly on the PF title token. The size utilities
   (.fs-*, .lead) snap to the NEAREST token instead, so they don't visibly jump.

   Body text, form controls and `small` deliberately keep Bootstrap's sizes — owner's choice,
   2026-09-15. Shrinking dense forms and tables is a separate decision.

   SPECIFICITY IS LOAD-BEARING. Each rule weighs exactly what Bootstrap's does (one element or
   one class), so it wins on load order and still loses to any component class rule. The filter
   sits inside :where(), which adds nothing; chaining the :not()s directly would add a class's
   weight per filter and override component sizes. The filter skips elements carrying a Tailwind
   size class: MyStackBlazor keeps those inside @layer, and an unlayered rule beats a layered one
   regardless of specificity. */
h1:where(:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not([class*="text-6xl"])), .h1 { font-size: var(--mk-t-hero-sm); }   /* 32px */
h2:where(:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not([class*="text-6xl"])), .h2 { font-size: var(--mk-t-page); }   /* 26px */
h3:where(:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not([class*="text-6xl"])), .h3 { font-size: var(--mk-t-page-sm); }   /* 24px */
h4:where(:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not([class*="text-6xl"])), .h4 { font-size: var(--mk-t-section); }   /* 20px */
h5:where(:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not([class*="text-6xl"])), .h5 { font-size: var(--mk-t-section-sm); }   /* 18px */
h6:where(:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not([class*="text-6xl"])), .h6 { font-size: var(--mk-t-card); }   /* 16px */

/* Bootstrap marks its utilities !important, so these must too. */
.fs-1 { font-size: var(--mk-t-hero-lg) !important; }   /* 40px */
.fs-2 { font-size: var(--mk-t-hero-sm) !important; }   /* 32px */
.fs-3 { font-size: var(--mk-t-page) !important; }   /* 26px */
.fs-4 { font-size: var(--mk-t-page-sm) !important; }   /* 24px */
.fs-5 { font-size: var(--mk-t-section) !important; }   /* 20px */
.fs-6 { font-size: var(--mk-t-card) !important; }   /* 16px */
.lead { font-size: var(--mk-t-section); }   /* 20px */

/* Shared compact control sizing — keeps native <input type=date> and custom
   toggle/segmented buttons visually aligned with MyStackBlazor's own
   StackInput/StackSelect/StackButton baseline (36px height, 6px radius, 14px font). */
.mk-date-input {
    width: 100%; height: 36px; padding: 0 12px; box-sizing: border-box;
    border: 1.5px solid #e2e8f0; border-radius: 6px;
    font-size: var(--mk-t-body); color: #0f172a; outline: none; background: white;
}
.mk-toggle-btn {
    height: 36px; padding: 0 14px; border-radius: 6px;
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-bold); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: border-color .15s, background .15s, color .15s, transform .12s, box-shadow .12s;
}
.mk-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.08); }

/* ── Sidebar section headings ────────────────────────────────────────────────
   These live here, GLOBAL, and not in NavMenu.razor.css, for a reason worth
   knowing before "tidying" them back into the component: NavMenu builds this
   element in RenderSectionHeader with a RenderTreeBuilder, and the Razor
   compiler only stamps its b-<hash> scope attribute onto elements it sees as
   markup in the .razor file. A builder-made element gets no scope attribute, so
   every scoped rule naming .nav-section-label or .nav-section-toggle silently
   matches nothing. Style it here or it does not get styled.

   Sections are now closed by default, which makes these headings the whole menu
   on first load rather than captions over an open list — so they carry a row's
   contrast and a row's click target, while the uppercase label keeps a section
   reading differently from a destination. */
.nav-section-label {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-bold);
    /* Was a literal #9ca3af, which is the cold grey the dark ramp no longer
       uses — it left the PF nav headings reading blue against warm charcoal. */
    color: var(--mk-text-2);
    text-transform: uppercase;
    letter-spacing: var(--mk-ls-label);
}

.nav-section-toggle {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    min-height: var(--mk-ctrl-h);
    cursor: pointer;
    border-radius: var(--mk-r-sm);
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .15s, color .15s;
}

/* The business rail paints white-on-navy; PF paints ink-on-white. Neither
   inherits a usable heading colour, so both are stated.

   The guard is on .page, not .sidebar: pf-theme is applied to the page wrapper in
   MainLayout, so .sidebar:not(.pf-theme) is true on BOTH themes and would paint
   the PF headings white on a white rail. Keeping it at the same depth as the
   .pf-theme rule below also keeps the two at equal specificity, so their order
   here decides the winner rather than a :not() quietly outranking one of them. */
.page:not(.pf-theme) .nav-section-toggle { color: rgba(255, 255, 255, 0.82); }

.page:not(.pf-theme) .nav-section-toggle:hover {
    background-color: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.pf-theme .nav-section-toggle { color: var(--mk-text); }

.pf-theme .nav-section-toggle:hover {
    background-color: var(--mk-bg-subtle);
    color: var(--mk-pf-ink);
}

/* eKash + bootstrap palette tokens — BRIDGE ONLY.
   These values are no longer authored here. Every one of them now derives
   from the --mk-* base in css/design-tokens.css, which loads before this
   file; the aliases exist so the ~6 Personal Finance pages written against
   --ek-* and bootstrap's own --bs-* rules keep working unchanged.
   To change a brand color, edit design-tokens.css — editing it here only
   desynchronises this namespace from the rest of the app.
   No .dark block is needed anymore either: --mk-* is already redefined under
   .dark in the base file, so these aliases follow the theme automatically. */
:root {
    --bs-primary: var(--mk-primary);
    /* Bootstrap needs the channels unpacked for its rgba() mixes, so this one
       cannot be an alias — keep it in step with --mk-orange by hand. */
    --bs-primary-rgb: 249, 115, 22;

    --ek-primary: var(--mk-primary);
    --ek-primary-lt: var(--mk-primary-lt);
    --ek-success: var(--mk-success);
    --ek-success-lt: var(--mk-success-lt);
    --ek-danger: var(--mk-danger);
    --ek-danger-lt: var(--mk-danger-lt);
    --ek-warning: var(--mk-warning);
    --ek-warning-lt: var(--mk-warning-lt);
    --ek-info: var(--mk-info);
    --ek-info-lt: var(--mk-info-lt);
    --ek-purple: var(--mk-purple);
    --ek-purple-lt: var(--mk-purple-lt);
    --ek-text: var(--mk-text);
    --ek-muted: var(--mk-text-2);
    --ek-surface: var(--mk-bg-app);
    --ek-border: var(--mk-border);
    --ek-card: var(--mk-bg-surface);
    --ek-r: var(--mk-r-md);
    --ek-r-btn: var(--mk-r-sm);
    --ek-shadow: var(--mk-sh-sm);
    --ek-shadow-md: var(--mk-sh-md);
}

/* Link color is the darkened orange, not the primary: the brand orange on
   white is only ~2.9:1, well under the 4.5:1 AA floor for body-size text. */
a, .btn-link {
    color: var(--mk-primary-ink);
}

.btn-primary {
    color: var(--mk-text-oncolor);
    background-color: var(--mk-primary);
    border-color: var(--mk-primary-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--mk-bg-surface), 0 0 0 0.25rem var(--mk-orange-dark);
}

.content {
    padding-top: 0;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Global responsive fixes ─────────────────────────────────────────────
   MyStackBlazor's <StackGridLayout Columns="N"> (used across ~40+ pages —
   Accounting, Inventory, GST, Analytics, Niche, Reports, etc.) renders an
   unclassed <div style="display:grid;grid-template-columns:repeat(N,
   minmax(0,1fr))"> with no breakpoints of its own — confirmed by inspecting
   the actual DOM output (no grid-cols-N class is ever present, so a
   class-based override cannot match it). The only hook available is the
   inline style itself; !important is required to beat it since inline
   styles otherwise always win over stylesheet rules. */
@media (max-width: 640px) {
    div[style*="grid-template-columns:repeat("] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 420px) {
    div[style*="grid-template-columns:repeat("] {
        grid-template-columns: 1fr !important;
    }
}

/* ── StackAdvancedTable / StackDataTable toolbar fixes ───────────────────
   Both grids draw their search box as an absolutely-positioned magnifier svg
   over an <input> that the package offsets with Tailwind's `pl-8`. This app's
   wwwroot/css/tailwind.css is a prebuilt bundle, so a utility the app itself
   never uses is simply absent from it and the class silently no-ops — computed
   padding-left came back as 0px and the icon sat on top of the placeholder in
   every grid. Restoring the offset here fixes it once for all of them.

   The selector matches the package's own search construction (an absolutely
   positioned icon immediately followed by its input inside a relative box)
   rather than a utility class name, so it survives a Tailwind rebuild.        */
.relative > svg.absolute + input {
    padding-left: var(--mk-s6);
}

/* The grid toolbar is a `flex flex-wrap` row and anything passed through
   ToolbarContent becomes a flex item. A StackSelect renders `w-full`, so an
   unconstrained filter select claims the whole remaining row and wraps onto its
   own line. Wrap each one in this class to size it to its widest option
   instead — no literal width, so it adapts to the label text. */
.mk-grid-filter {
    flex: 0 0 auto;
    width: max-content;
}

/* Same problem, the other two shapes a grid toolbar carries. A StackInput and
   BarcodeScanInput are both `width: 100%`, so an unwrapped search or scan box
   pushes everything after it onto its own line. These give each one a flex
   basis instead: the search grows into whatever the row has spare, the scan box
   holds the width a barcode needs to stay readable, and both collapse to a full
   row only once the toolbar genuinely runs out of width.

   The literals are layout bases for a form control, not design values — there is
   no --mk-* token for "how wide a search box wants to be". */
.mk-grid-search {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 380px;
}

.mk-grid-scan {
    flex: 0 1 240px;
    min-width: 180px;
}

/* Ultrawide monitors (1920px+ desktops) — page content otherwise stretches
   edge-to-edge with no cap, leaving dashboard grids very sparse. Only kicks
   in well above laptop width so normal desktops are unaffected. */
@media (min-width: 1800px) {
    /* Full-screen overlays are excluded. A modal backdrop is a direct child of the content
       area but is `position: fixed; inset: 0`, so capping it at 1800px and auto-centring it
       shrinks the *backdrop* — the dim stops 60px short on each side at 1920px wide and the
       page shows through undimmed beside the modal. The cap is meant for in-flow page content
       only. `[class*="overlay"]` covers .pos-overlay / .rm-overlay / .del-overlay /
       .bill-del-overlay, `[class*="backdrop"]` covers .bsheet-backdrop; add .mk-full-bleed to
       anything new that must span the viewport. */
    main > article.content > *:not([class*="overlay"]):not([class*="backdrop"]):not(.mk-full-bleed) {
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Personal Finance page shell (BusinessType 100)

   Every PF screen roots in .pf-page so they all share one width, one alignment
   and one set of page padding. Before this, the 59 PF pages used four different
   root shapes — some capped at 760-1200px and centred with `margin: 0 auto`,
   some edge-to-edge, some with no padding at all — so moving between them made
   the content jump left and right.

   PF pages are FULL-WIDTH and LEFT-ALIGNED, matching the rest of the app
   (Products, Customers, Invoices are all uncapped). The only cap is the 1800px
   ultrawide guard above, which applies app-wide.

   Deliberately NOT a max-width: a centred column here would re-create exactly
   the inconsistency this replaces the moment one page opted out.

   Anything that must span the viewport (overlays, sheets) stays outside this
   class — see the .mk-full-bleed note above.
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-page {
    padding: var(--mk-s4) var(--mk-s5) var(--mk-s6);
    width: 100%;
    box-sizing: border-box;
    background: var(--mk-bg-app);
    min-height: 100vh;
    font-family: var(--mk-font);
}

/* Breakpoints are 600 / 1025 / 1441 with .98 maxima — literals because CSS
   forbids custom properties inside @media. */
@media (max-width: 599.98px) {
    .pf-page { padding: var(--mk-s3) var(--mk-s3) var(--mk-s5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   School ERP (BusinessType.School)

   These live in app.css rather than a .razor.css because they are shared across
   ~16 School pages; a scoped stylesheet would have to be duplicated per page.
   Every value is a --mk-* token: see docs/css-design-system.md.
   ═══════════════════════════════════════════════════════════════════════════ */

.school-stat {
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    padding: var(--mk-space-3);
    height: 100%;
}

.school-stat-label {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-space-1);
}

.school-stat-value {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    line-height: 1.15;
}

.school-stat-caption {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
    margin-top: var(--mk-space-1);
}

/* Alerts. Severity comes from the server (Critical/Warning/Info) so the school
   sees the same ordering on Web and Mobile. */
.school-alert {
    border-radius: var(--mk-radius-md);
    padding: var(--mk-space-3);
    border-left: 3px solid var(--mk-border);
    background: var(--mk-bg-subtle);
    cursor: pointer;
}

.school-alert:hover { background: var(--mk-bg-app); }

.school-alert-title {
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-t-body);
    color: var(--mk-text-strong);
}

.school-alert-detail {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

/* The tint and the text colour are set together on each severity: a pastel fill
   left to inherit a --mk-text-* token goes invisible in dark mode. */
.school-alert-critical {
    border-left-color: var(--mk-danger);
    background: var(--mk-danger-lt);
}
.school-alert-critical .school-alert-title,
.school-alert-critical .school-alert-detail { color: var(--mk-danger-fg); }

.school-alert-warning {
    border-left-color: var(--mk-warning);
    background: var(--mk-warning-lt);
}
.school-alert-warning .school-alert-title,
.school-alert-warning .school-alert-detail { color: var(--mk-warning-fg); }

.school-alert-info {
    border-left-color: var(--mk-primary);
    background: var(--mk-primary-lt);
}
.school-alert-info .school-alert-title,
.school-alert-info .school-alert-detail { color: var(--mk-primary-deep); }

/* Metric colouring — attendance and collection percentages. */
.school-metric-low { color: var(--mk-danger-fg); font-weight: var(--mk-fw-semibold); }
.school-metric-mid { color: var(--mk-warning-fg); font-weight: var(--mk-fw-semibold); }
.school-metric-good { color: var(--mk-success-fg); font-weight: var(--mk-fw-semibold); }

/* Links inside School pages. --mk-primary is only ~2.9:1 on white and fails the
   4.5:1 AA floor at body size, so links use the ink variant. */
.school-link {
    color: var(--mk-primary-ink);
    text-decoration: none;
    font-weight: var(--mk-fw-medium);
}
.school-link:hover { text-decoration: underline; }

/* Attendance register — the tap targets a class teacher uses 30 times a morning. */
.school-att-row {
    display: flex;
    align-items: center;
    gap: var(--mk-space-3);
    padding: var(--mk-space-2) var(--mk-space-1);
    border-bottom: 1px solid var(--mk-border);
}

.school-att-roll {
    min-width: 2.5rem;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-muted);
    font-size: var(--mk-t-secondary-sm);
}

.school-att-name { flex: 1; font-weight: var(--mk-fw-medium); }

.school-att-actions { display: flex; gap: var(--mk-space-1); flex-wrap: wrap; }

.school-att-btn {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-radius-sm);
    padding: 2px var(--mk-space-2);
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
    min-width: 2.75rem;
}

.school-att-btn.is-on[data-status="Present"] {
    background: var(--mk-success-lt);
    border-color: var(--mk-success);
    color: var(--mk-success-fg);
}
.school-att-btn.is-on[data-status="Absent"] {
    background: var(--mk-danger-lt);
    border-color: var(--mk-danger);
    color: var(--mk-danger-fg);
}
.school-att-btn.is-on[data-status="Late"] {
    background: var(--mk-warning-lt);
    border-color: var(--mk-warning);
    color: var(--mk-warning-fg);
}
.school-att-btn.is-on[data-status="Leave"] {
    background: var(--mk-primary-lt);
    border-color: var(--mk-primary);
    color: var(--mk-primary-deep);
}

/* Timetable grid. Scrolls inside its own container — the page body must never
   scroll horizontally. */
.school-tt-wrap { overflow-x: auto; }

.school-tt {
    width: 100%;
    border-collapse: collapse;
    min-width: 44rem;
}

.school-tt th,
.school-tt td {
    border: 1px solid var(--mk-border);
    padding: var(--mk-space-2);
    vertical-align: top;
    font-size: var(--mk-t-secondary-sm);
}

.school-tt th {
    background: var(--mk-bg-subtle);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    text-align: left;
}

.school-tt-cell { cursor: pointer; min-height: 3rem; }
.school-tt-cell:hover { background: var(--mk-bg-subtle); }
.school-tt-cell.is-break { background: var(--mk-bg-subtle); cursor: default; }
.school-tt-subject { font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.school-tt-teacher { color: var(--mk-text-muted); }

/* Report card — printed as often as it is read on screen. */
.school-card-hero {
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    padding: var(--mk-space-4);
}

@media print {
    .school-no-print { display: none !important; }
    /* One student per A4 sheet: a card is handed to one parent, so it must never start
       halfway down a page or run onto the next student's sheet. */
    .school-card-hero {
        border: 1px solid var(--mk-border);
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .school-card-hero + .school-card-hero {
        break-before: page;
        page-break-before: always;
    }
    /* .table-responsive scrolls sideways on screen; on paper that clips the right-hand
       columns instead, so let the table take the sheet's width. */
    .school-card-hero .table-responsive { overflow: visible !important; }
}

/* ── Tab strip (MyStackBlazor StackTabs) ──────────────────────────────────────
   The package stamps its "active" utility classes onto every trigger regardless of state, so
   nothing on screen says which tab you are on — and those classes are Tailwind names that are not
   in the prebuilt bundle anyway, so they no-op. What the package does get right is `aria-selected`,
   which is the honest state to key off. Global rather than component-scoped because these elements
   are rendered by the package and never carry a page's b-<hash> scope attribute. */
[role="tab"] {
    /* box-shadow and background are reset because the package stamps its "selected" utility
       classes (bg-background text-foreground shadow-sm) onto every trigger, which otherwise leaves
       a second, permanently-highlighted tab next to the real one. */
    background: transparent;
    box-shadow: none;
    color: var(--mk-text-2);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

[role="tab"]:hover { color: var(--mk-text-strong); }

/* .mk-tab-on is set by the page from the same field that picks the panel. The package's own
   selected state does not track it reliably — it stamps its active utility classes onto every
   trigger, and its aria-selected and the rendered style disagree — so the page owns the highlight. */
[role="tab"].mk-tab-on {
    color: var(--mk-primary-ink);
    border-bottom-color: var(--mk-primary);
    font-weight: var(--mk-fw-600);
}

/* ── Period tabs (Personal Finance) ───────────────────────────────────────────
   The All / Weekly / Monthly / Yearly filter above a list, and the budget cycle
   tabs. Mirrors .pf-seg in the Mobile app's pf-theme.css — change one, change
   the other. Lives here rather than in a page's scoped block because several
   pages use it. */
.pf-seg {
    display: flex;
    gap: var(--mk-s1);
    margin-bottom: var(--mk-s3);
    padding: var(--mk-s1);
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-pill);
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
}

.pf-seg-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: var(--mk-s1) var(--mk-s4);
    border: none;
    border-radius: var(--mk-r-pill);
    background: none;
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    white-space: nowrap;
    cursor: pointer;
}

.pf-seg-btn:hover { color: var(--mk-primary-ink); }

.pf-seg-btn.is-on {
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-bold);
}

/* Window stepper arrows beside the period tabs. */
.win-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-size: var(--mk-t-card-sm);
    line-height: 1;
    cursor: pointer;
}

.win-btn:hover { border-color: var(--mk-primary-border); color: var(--mk-primary-ink); }
.win-btn:disabled { opacity: .45; cursor: default; }