html, body{
    /* --mk-font is Inter + Noto Sans Devanagari (UI/UX spec v1.0 §5).
       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: var(--mk-input-h); padding: 0 var(--mk-s3); box-sizing: border-box;
    border: 1px solid var(--mk-border-strong); border-radius: var(--mk-r-md);
    font-size: var(--mk-t-body); color: var(--mk-text-strong); outline: none; background: var(--mk-bg-surface);
}
.mk-date-input:focus{ border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }
.mk-toggle-btn,.mk-toggle-btn.mk-plain{
    height: var(--mk-btn-h); padding: 0 var(--mk-s4); border-radius: var(--mk-r-md);
    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,.mk-toggle-btn.mk-plain:hover{ box-shadow: var(--mk-sh-sm); }

/* ── 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{
    /* Inside-app guide §3.5: 11px / 700 / uppercase / 0.05em in the secondary ink, so a
       heading reads as a heading and not as one more destination. */
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    /* Separation comes from space above the group rather than a rule between groups. */
    margin-top: var(--mk-s2);
}

.nav-section-toggle{
    width: 100%;
    box-sizing: border-box;
    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;
}

/* Both rails are now white (UI/UX spec v1.0 §7.1); the two rules stay separate
   so either theme can diverge again without a specificity fight.

   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: var(--mk-text-2); }

/* Lucide glyphs (LcIcon) sit on the text baseline like the old icon font did. */
svg.lc{ display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
.nav-section-chevron{ opacity: .7; }

.page:not(.pf-theme) .nav-section-toggle:hover{
    background-color: var(--mk-bg-nav-hover);
    color: var(--mk-text-strong);
}

.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: 194, 65, 12;

    --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);
}

/* ── Shell metrics — all derived from the --mk-* base ──────────────────────
   These lived in MainLayout.razor.css, but that file is SCOPED: Blazor rewrote the selector to
   :root[b-…], which never matches <html>, so not one of them was ever defined. Only the retail and
   PF themes worked, because their own sheets restate some of them. Everyone else got a transparent
   phone tab bar with no height, laid over the bottom of the page with no space reserved for it. */
:root{
    --sidebar-w:   var(--mk-sidebar);
    --topbar-h:    var(--mk-topbar);
    --bottomnav-h: var(--mk-bottomnav);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.16s;
    --t-med:  0.26s;
    --color-brand:   var(--mk-primary);
    --color-surface: var(--mk-bg-surface);
    --color-bg:      var(--mk-bg-app);
    --color-border:  var(--mk-border);
    --color-muted:   var(--mk-text-2);
    --shadow-topbar:  none;              /* spec §7.2: a border, not a shadow */
    --shadow-sidebar: var(--mk-sh-lg);   /* drawer only, over the page        */
}

/* 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,.btn-link.mk-plain{
    color: var(--mk-primary-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT BASELINE — MyKhata360 UI/UX Theme & Design System v1.0 (§8, §9, §13)

   Applies to Bootstrap's classes app-wide, so every page built on them follows
   the spec without being edited. MyStackBlazor components get the same values
   through the --color-* / --radius-* bridge in App.razor. Every value is a token.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Buttons (§8.1): 40px, 8px radius, semibold; one orange CTA per screen ---- */
.btn,.btn.mk-plain{
    min-height: var(--mk-btn-h);
    padding: 0 var(--mk-s4);
    border-radius: var(--mk-r-md);
    font-weight: var(--mk-fw-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mk-s2);
}
.btn-sm,.btn-sm.mk-plain{ min-height: var(--mk-ctrl-h); padding: 0 var(--mk-s3); border-radius: var(--mk-r-md); }
.btn-lg{ min-height: var(--mk-row-h); }

.btn-primary,.btn-primary.mk-plain{
    --bs-btn-bg: var(--mk-primary);
    --bs-btn-border-color: var(--mk-primary);
    --bs-btn-hover-bg: var(--mk-primary-hover);
    --bs-btn-hover-border-color: var(--mk-primary-hover);
    --bs-btn-active-bg: var(--mk-primary-active);
    --bs-btn-active-border-color: var(--mk-primary-active);
    --bs-btn-disabled-bg: var(--mk-primary-muted);
    --bs-btn-disabled-border-color: var(--mk-primary-muted);
    --bs-btn-color: var(--mk-text-onprimary);
    --bs-btn-hover-color: var(--mk-text-onprimary);
    --bs-btn-active-color: var(--mk-text-onprimary);
    color: var(--mk-text-onprimary);
    background-color: var(--mk-primary);
    border-color: var(--mk-primary);
}
.btn-primary:hover,.btn-primary.mk-plain:hover{ color: var(--mk-text-onprimary); }

/* Secondary: white with a strong border (spec's .btn-secondary). Bootstrap's grey
   secondary and its outline variants all collapse onto it. */
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-primary, .btn-outline-dark,.btn-outline-secondary.mk-plain,.btn-outline-primary.mk-plain{
    --bs-btn-color: var(--mk-text);
    --bs-btn-bg: var(--mk-bg-surface);
    --bs-btn-border-color: var(--mk-border-strong);
    --bs-btn-hover-color: var(--mk-text-strong);
    --bs-btn-hover-bg: var(--mk-bg-hover);
    --bs-btn-hover-border-color: var(--mk-border-strong);
    --bs-btn-active-color: var(--mk-text-strong);
    --bs-btn-active-bg: var(--mk-bg-subtle);
    --bs-btn-active-border-color: var(--mk-border-strong);
}
.btn-outline-primary,.btn-outline-primary.mk-plain{ --bs-btn-color: var(--mk-primary-ink); --bs-btn-hover-color: var(--mk-primary-ink); }

.btn-danger, .btn-outline-danger:hover,.btn-danger.mk-plain,.btn-outline-danger.mk-plain:hover{
    --bs-btn-bg: var(--mk-danger);
    --bs-btn-border-color: var(--mk-danger);
    --bs-btn-hover-bg: var(--mk-danger-fg);
    --bs-btn-hover-border-color: var(--mk-danger-fg);
    --bs-btn-color: var(--mk-text-onprimary);
    --bs-btn-hover-color: var(--mk-text-onprimary);
}
.btn-outline-danger,.btn-outline-danger.mk-plain{ --bs-btn-color: var(--mk-danger-fg); --bs-btn-border-color: var(--mk-border-strong); }
.btn-success{ --bs-btn-bg: var(--mk-success); --bs-btn-border-color: var(--mk-success); --bs-btn-hover-bg: var(--mk-success-fg); --bs-btn-hover-border-color: var(--mk-success-fg); }

/* -- Focus (§13): visible orange ring on every keyboard-focusable control ----- */
.btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus,
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,.btn.mk-plain:focus-visible,.btn.mk-plain:active:focus-visible{
    outline: none;
    box-shadow: var(--mk-focus-ring);
}

/* -- Inputs (§8.2): 42px, 1px strong border, 8px radius, orange focus ---------- */
.form-control, .form-select{
    min-height: var(--mk-input-h);
    background-color: var(--mk-bg-surface);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    color: var(--mk-text-strong);
    font-size: var(--mk-t-body);
}
.form-control::placeholder{ color: var(--mk-text-muted); }
.form-control:focus, .form-select:focus{ border-color: var(--mk-primary); }
textarea.form-control{ min-height: calc(var(--mk-input-h) * 2); }
/* -- MkSelect (StackDropDownList): same box as an input so a converted form keeps its rhythm -- */
.mk-select > [role="combobox"]{
    min-height: var(--mk-input-h);
    height: auto;
    background-color: var(--mk-bg-surface);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    color: var(--mk-text-strong);
    font-size: var(--mk-t-body);
}
.mk-select > [role="combobox"]:focus-visible,
.mk-select > [role="combobox"][aria-expanded="true"]{ border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }
.mk-select.mk-select-attention > [role="combobox"]{ border: 1.5px solid var(--mk-fin-pending); }
.mk-select [role="listbox"]{ font-size: var(--mk-t-body); }
/* StackInput draws a 2px Tailwind border on its wrapper span; the spec input is 1px strong. */
span.mk-input{
    min-height: var(--mk-input-h);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    background-color: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-size: var(--mk-t-body);
}
span.mk-input:focus-within{ border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }
/* A MyStackBlazor input sits in a wrapper that draws the focus ring, and marks the inner
   field outline-none; the theme focus outlines (retail, PF) would draw a second ring inside it. */
html :is(input, textarea).outline-none:focus,
html :is(input, textarea).outline-none:focus-visible{ outline: none; box-shadow: none; }
/* FeatureAccessBadge (spec §14) is a StackBadge. These were scoped CSS, which cannot reach an
   element the package renders; the doubled selectors outrank the badge utility classes,
   which load after this file. */
span.fab{
    display: inline-flex; align-items: center; gap: var(--mk-s1);
    padding: 2px var(--mk-s2);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    line-height: 1.5;
    white-space: nowrap;
    border-color: transparent;
}
.fab.fab-available{ color: var(--mk-success-fg); background: var(--mk-success-lt); }
.fab.fab-limited{ color: var(--mk-warning-fg); background: var(--mk-warning-lt); }
.fab.fab-locked{ color: var(--mk-draft);      background: var(--mk-draft-lt); }
.fab.fab-trial{ color: var(--mk-info-fg);    background: var(--mk-info-lt); }
.fab.fab-comingsoon{ color: var(--mk-financial-fg); background: var(--mk-financial-soft); }
/* StackSheet (Side="bottom") as the app's bottom sheet. Its overlay is z-index 50, under the
   Mobile tab bar (100); .mk-sheet on the panel lifts the overlay and keeps the panel clear of
   the phone's home indicator. */
.fixed.inset-0:has(> .mk-sheet){ z-index: 1000; }
.mk-sheet{
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    background: var(--mk-bg-surface);
    padding: var(--mk-s4) var(--mk-s4) calc(var(--mk-s6) + env(safe-area-inset-bottom));
}
/* A sheet with a pinned header over its own scrolling list (contact picker): the panel only frames it. */
.mk-sheet.mk-sheet-flush{ padding: 0 0 env(safe-area-inset-bottom); overflow: hidden; }

.form-control-sm, .form-select-sm{ min-height: var(--mk-ctrl-h); border-radius: var(--mk-r-md); }
.form-label, label.form-label{
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-t-w-label);
    color: var(--mk-text);
}
.form-text{ font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); }
.form-check-input:checked{ background-color: var(--mk-primary); border-color: var(--mk-primary); }

/* MyStackBlazor inputs are drawn with a 2px border; the spec's is 1px. */
.border-2.border-input{ border-width: 1px; }
input.border-input.h-10, .border-input.h-10.w-full{ height: var(--mk-input-h); }

/* -- Cards (§8.3): white, 1px border, 12px radius, xs shadow ------------------- */
.card{
    --bs-card-border-color: var(--mk-border);
    --bs-card-border-radius: var(--mk-r-card);
    --bs-card-inner-border-radius: calc(var(--mk-r-card) - 1px);
    --bs-card-bg: var(--mk-bg-surface);
    --bs-card-cap-bg: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-xs);
}
.card-body{ padding: var(--mk-s4); }
.card-title, .card-header h5, .card-header h6{ font-size: var(--mk-t-card); font-weight: var(--mk-t-w-card); color: var(--mk-text-strong); }
.modal-content{ border-radius: var(--mk-r-modal); border-color: var(--mk-border); box-shadow: var(--mk-sh-lg); }
.dropdown-menu{ border-radius: var(--mk-r-md); border-color: var(--mk-border); box-shadow: var(--mk-sh-md); }

/* -- Tables (§8.4): #F8FAFC 13px semibold header, 48px rows, tabular figures --- */
.table{
    --bs-table-bg: var(--mk-bg-surface);
    --bs-table-color: var(--mk-text);
    --bs-table-border-color: var(--mk-border);
    --bs-table-hover-bg: var(--mk-bg-hover);
    --bs-table-striped-bg: var(--mk-bg-table-head);
    font-variant-numeric: tabular-nums;
}
.table > thead > tr > th, .table > thead > tr > td{
    background: var(--mk-bg-table-head);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-t-w-th);
    color: var(--mk-text-2);
    border-bottom-color: var(--mk-border);
    white-space: nowrap;
}
.table:not(.table-sm) > tbody > tr > td{ height: var(--mk-row-h); vertical-align: middle; }
.text-end, td.num, th.num{ font-variant-numeric: tabular-nums; }

/* -- Status badges (§9): text + tint, never colour alone ---------------------- */
.mk-status{
    display: inline-flex; align-items: center; gap: var(--mk-s1);
    padding: 2px var(--mk-s2);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    line-height: 1.5;
    white-space: nowrap;
}
.mk-status-paid, .mk-status-success{ color: var(--mk-success-fg); background: var(--mk-success-lt); }
.mk-status-pending, .mk-status-warning{ color: var(--mk-warning-fg); background: var(--mk-warning-lt); }
.mk-status-overdue, .mk-status-failed, .mk-status-danger{ color: var(--mk-danger-fg); background: var(--mk-danger-lt); }
.mk-status-draft{ color: var(--mk-draft); background: var(--mk-draft-lt); }
.mk-status-info, .mk-status-processing{ color: var(--mk-info-fg); background: var(--mk-info-lt); }
.badge{ border-radius: var(--mk-r-sm); font-weight: var(--mk-fw-semibold); }
.bg-success{ background-color: var(--mk-success-solid) !important; }
.bg-warning{ background-color: var(--mk-warning) !important; }
.bg-danger{ background-color: var(--mk-danger-solid) !important; }
.bg-info{ background-color: var(--mk-info-solid) !important; }
.bg-primary{ background-color: var(--mk-primary) !important; }
.bg-secondary{ background-color: var(--mk-draft-lt) !important; color: var(--mk-draft) !important; }
.text-success{ color: var(--mk-success-fg) !important; }
.text-danger{ color: var(--mk-danger-fg)  !important; }
.text-warning{ color: var(--mk-warning-fg) !important; }
.text-info{ color: var(--mk-info-fg)    !important; }
.text-muted, .text-secondary{ color: var(--mk-text-muted) !important; }
.alert{ border-radius: var(--mk-r-md); }
.alert-success{ --bs-alert-bg: var(--mk-success-lt); --bs-alert-color: var(--mk-success-fg); --bs-alert-border-color: var(--mk-fin-positive-br); }
.alert-warning{ --bs-alert-bg: var(--mk-warning-lt); --bs-alert-color: var(--mk-warning-fg); --bs-alert-border-color: var(--mk-fin-pending-br); }
.alert-danger{ --bs-alert-bg: var(--mk-danger-lt);  --bs-alert-color: var(--mk-danger-fg);  --bs-alert-border-color: var(--mk-fin-negative-br); }
.alert-info{ --bs-alert-bg: var(--mk-info-lt);    --bs-alert-color: var(--mk-info-fg);    --bs-alert-border-color: var(--mk-fin-info-br); }

/* Financial accent helpers (teal) — reports and analytics surfaces. */
.mk-financial{ color: var(--mk-financial); }
.mk-financial-soft{ background: var(--mk-financial-soft); }

/* -- Touch (§13): 44px minimum below the desktop tier ------------------------ */
@media (max-width: 1024.98px) {
    .btn, .form-control, .form-select,.btn.mk-plain{ min-height: var(--mk-touch); }
    .form-control, .form-select{ font-size: var(--mk-fs-base); }  /* 16px stops iOS zoom-on-focus */
}

.content{
    padding-top: 0;
}

/* FocusOnNavigate (Routes.razor) focuses each page's h1 with tabindex="-1" so a screen reader announces
   the new page. That focus is not for sighted users: after any key press the focus-visible ring
   (a box-shadow, which "outline: none" does not clear) drew a box around every page title. */
h1:focus,
h1[tabindex="-1"]:focus-visible{
    outline: none;
    box-shadow: none;
}

.valid.modified:not([type=checkbox]){
    outline: 1px solid var(--mk-success);
}

.invalid{
    outline: 1px solid var(--mk-danger);
}

.validation-message{
    color: var(--mk-danger-fg);
    font-size: var(--mk-t-secondary);
}

.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: var(--mk-text-oncolor);
}

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

.darker-border-checkbox.form-check-input{
    border-color: var(--mk-text-muted);
}

.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,.school-att-btn.mk-plain{
    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-semibold);
}

/* ── 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,.pf-seg-btn.mk-plain{
    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,.pf-seg-btn.mk-plain: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,.win-btn.mk-plain{
    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,.win-btn.mk-plain:hover{ border-color: var(--mk-primary-border); color: var(--mk-primary-ink); }
.win-btn:disabled,.win-btn.mk-plain:disabled{ opacity: .45; cursor: default; }

/* ── Comfortable Display (UI/UX spec v1.0 §13) ────────────────────────────────
   Toggled per device from Settings → Preferences (window.mk360Display.set), stored in
   localStorage and applied pre-paint. Type scales through the root font size, because
   every --mk-t-* / --mk-fs-* step, Bootstrap and MyStackBlazor size in rem; controls
   grow through the px sizing tokens. `html.mk-comfortable` outranks `:root`. */
html.mk-comfortable{
    font-size: 112.5%;          /* 16px -> 18px root */
    --mk-btn-h:   48px;
    --mk-input-h: 48px;
    --mk-ctrl-h:  44px;
    --mk-touch:   48px;
    --mk-row-h:   56px;
}

/* Sidebar rows under Comfortable Display: 44px (inside-app guide §3.3). Here rather than in
   NavMenu.razor.css because scoped CSS cannot reach a class on <html>. */
@media (min-width: 1025px) {
    html.mk-comfortable .nav-item .nav-link{ min-height: 44px; }
}

/* ── Seed & fertilizer (agri inputs) ────────────────────────────────────────
   Shared by the expiry, claims, recalls, licences and season-plan pages. Status colour is an
   edge or the -fg text token on the page surface, never a pastel -lt fill: those fills are not
   redefined for dark mode. */
.agri-chips{ display: flex; flex-wrap: wrap; gap: var(--mk-s2); }
.agri-chip,.agri-chip.mk-plain{
    display: inline-flex; align-items: center; gap: var(--mk-s2);
    padding: var(--mk-s1) var(--mk-s3);
    border: 1px solid var(--mk-border); border-radius: var(--mk-radius-pill);
    background: var(--mk-surface); color: var(--mk-text);
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold);
}
.agri-chip.active{ border-color: var(--mk-primary); color: var(--mk-primary-ink); }
.agri-chip-count{ color: var(--mk-text-2); font-variant-numeric: tabular-nums; }
.agri-days{ font-variant-numeric: tabular-nums; }
.agri-days.warn{ color: var(--mk-warning-fg); font-weight: var(--mk-fw-semibold); }
.agri-days.danger{ color: var(--mk-danger-fg); font-weight: var(--mk-fw-bold); }
.agri-status{ font-weight: var(--mk-fw-semibold); }
.agri-status.danger{ color: var(--mk-danger-fg); }
.agri-status.warn{ color: var(--mk-warning-fg); }
.agri-status.ok{ color: var(--mk-success-fg); }
.agri-form{
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-s3);
    align-items: end;
}
.agri-form .span-2{ grid-column: span 2; }
.agri-form .span-4{ grid-column: 1 / -1; }
.agri-kv{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-s3) var(--mk-s5); }
.agri-kv dt{ font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2); font-weight: var(--mk-fw-semibold); }
.agri-kv dd{ margin: 0; color: var(--mk-text-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 1024.98px) {
    .agri-form, .agri-kv{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
    .agri-form, .agri-kv{ grid-template-columns: minmax(0, 1fr); }
    .agri-form .span-2{ grid-column: auto; }
}
.agri-farm-head{
    margin-top: var(--mk-s2); padding-top: var(--mk-s3); border-top: 1px solid var(--mk-border);
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong);
}
/* POS cart: the lot this line leaves from. Global because the cart row is Billing.razor's own markup
   with no scoped stylesheet beside it. */
.pos-lot-select{
    display: block; margin-top: var(--mk-s1); max-width: 100%;
    height: 28px; padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm);
    background: var(--mk-surface); color: var(--mk-text);
    font-size: var(--mk-t-secondary-sm);
}

/* MyStackBlazor keeps its utilities in `@layer utilities`, but this app's prebuilt tailwind.css
   ships an unlayered preflight — `button, input, select, textarea{ color: inherit }` — and an
   unlayered rule beats any layered one regardless of specificity. So every StackButton took its
   text colour from its parent instead of --color-*-foreground: dark grey on orange in light mode,
   light beige on orange in dark (~2:1, found on a phone 2026-10-22). Restated unlayered, a class
   outranks the element reset again. */
.text-primary-foreground{ color: var(--color-primary-foreground); }
.text-secondary-foreground{ color: var(--color-secondary-foreground); }
.text-destructive-foreground{ color: var(--color-destructive-foreground); }
.text-accent-foreground{ color: var(--color-accent-foreground); }

/* Same preflight, background half: `button{ background-color: transparent }` is unlayered too, so
   the package's layered `.bg-destructive` lost and every Variant="destructive" StackButton drew white
   text on nothing — invisible (trial-room Abandon, delete confirmations; found 2026-10-22).
   .bg-primary/.bg-secondary are already restated above with !important. */
.bg-destructive{ background-color: var(--color-destructive); }
.hover\:bg-destructive\/90:hover{ background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent); }

/* StackCheckbox renders a block div, so inside a plain label its text dropped to the next line. */
label > div.flex:has(> button[role="checkbox"]){
  display: inline-flex;
  vertical-align: middle;
  margin-inline-end: var(--mk-s2);
}

/* Icons that were an icon font: sized by the text around them, as the font was. */
svg.bi{ width: 1em; height: 1em; }

/* The package's charts scale their 560-wide canvas to the column, which blew 11px labels up to 20px. */
.mk-chart-fit svg { max-height: 280px; }

/* They always draw the y-axis figures, so "hide all amounts" has to hide them here. Those are the only
   end-anchored labels on a line or bar chart. */
.mk-chart-masked svg text[text-anchor="end"] { visibility: hidden; }