/* ===========================================================================
   BOAB PC v2 — global app styles.
   Brand tokens mirror Theme/BoabTheme.cs (the MudBlazor token source) and the
   locked brand kit in docs/ui-claimsheet-roadmap.md. Body type is a clean modern
   system stack (light/airy); the brand face Proxima Nova Alt (Semibold-only) is
   applied to headings / brand accents for flavour without the heavy body weight.
   =========================================================================== */

:root {
    --boab-gum-green: #1a3f2e;
    --boab-gum-green-dark: #153324;
    --boab-amber: #8b4d24;
    --boab-sun-ray: #fcce6c;
    --boab-ink: #2e3030;
    --boab-powder: #d4d4d4;
    --boab-canvas: #eef1ee; /* was #f6f7f6 — a step closer to the rail so the green/canvas delta softens (owner review) */
}

@font-face {
    font-family: 'Proxima Nova Alt';
    src: url('fonts/ProximaNovaA-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Brand the headings with Proxima Nova Alt (Semibold). */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.mud-typography-subtitle1 {
    font-family: 'Proxima Nova Alt', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    /* Only the Semibold cut ships — never synthesize a faux-bold/italic; fall back instead. */
    font-synthesis: none;
}

/* --- De-"blazor-default" the still-Bootstrap pages: brand the blue chrome --- */
a, .btn-link {
    color: var(--boab-amber);
}
/* Dark: the pinned amber computes ~2.2:1 on the dark canvas (fails AA). Route bare anchors /
   .btn-link onto the flipping info token (light: identical #8b4d24 → dark: lightened #c47a45)
   so page-content links stay legible. Light mode unchanged (override scoped to .boab-dark). */
.boab-dark a,
.boab-dark .btn-link {
    color: var(--mud-palette-info);
}

.btn-primary {
    color: #fff;
    background-color: var(--boab-gum-green);
    border-color: var(--boab-gum-green);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--boab-gum-green-dark) !important;
    border-color: var(--boab-gum-green-dark) !important;
}

.btn-outline-primary {
    color: var(--boab-gum-green);
    border-color: var(--boab-gum-green);
}

/* Dark: the pinned gum-green text+border is near-invisible on the dark canvas. Route to the
   flipping primary token (light: identical #1a3f2e → dark: lightened #3a8060). Placed BEFORE
   the :hover rule so the hover fill (white on green, equal specificity) still wins on hover. */
.boab-dark .btn-outline-primary {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--boab-gum-green);
    border-color: var(--boab-gum-green);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem color-mix(in srgb, var(--boab-gum-green) 45%, transparent);
    border-color: var(--boab-gum-green);
}

.form-check-input:checked {
    background-color: var(--boab-gum-green);
    border-color: var(--boab-gum-green);
}

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

/* ===========================================================================
   Interim Bootstrap page polish — until each page is ported to MudBlazor
   (Phase 7), give the still-Bootstrap cards/tables a light, airy, chunked
   treatment so they read as one design system on the Mud shell, not two.
   =========================================================================== */

/* Stage 3: interim Bootstrap chrome now speaks the SHEET language too — the sheet
   radius / hairline / tint (via sheet-tokens.css + the --boab-panel-* indirection in
   boab-design.css, which also dark-maps them) instead of shadows and ad-hoc greys. */
.card {
    border: max(1px, var(--sheet-stroke)) solid var(--boab-panel-border);
    border-radius: var(--sheet-radius);
    box-shadow: none;
}

.card-header {
    background-color: var(--boab-panel-tint);
    border-bottom: 1px solid var(--boab-panel-rule);
    font-weight: 600;
}

.card-body {
    padding: 1.25rem 1.5rem;
}

/* Quieter, chunked tables — tinted header band, hairline rows, generous cells. */
.table {
    --bs-table-border-color: var(--boab-panel-rule);
}

.table > thead {
    background-color: var(--boab-panel-tint);
}

.table > thead th {
    font-weight: 600;
    color: var(--boab-panel-ink);
    border-bottom: 1px solid var(--boab-panel-rule);
}

.list-group {
    border-radius: var(--sheet-radius);
}

/* Brand the still-Bootstrap selected list item (Outbox sender batches) — the
   default is Bootstrap blue, which is neither brand nor sheet. */
.list-group-item.active {
    background-color: var(--boab-gum-green);
    border-color: var(--boab-gum-green);
}

/* ===========================================================================
   SIDEBAR-ONLY APP SHELL (feat/shell-skeleton) — no app bar. A gum-green drawer
   that FLOATS inset on the canvas, everything the old top bar hosted moved into it
   (brand → header, user + dark toggle → footer), and a capped/centred content column.

   Specificity note: MudBlazor.min.css loads AFTER this file (App.razor), so every
   rule that overrides a MudBlazor default must out-SPECIFY it (a source-order tie
   goes to MudBlazor) — hence the doubled classes below. `.boab-shell` is the layout
   root (MainLayout) and scopes all of this to the web app shell only.
   =========================================================================== */

/* Shell tokens: the float gap + the panel corner (the house --sheet-radius family)
   + the mobile strip height (the ONLY chrome below Lg). */
.boab-shell {
    --boab-shell-gap: 14px;
    --boab-shell-radius: calc(var(--sheet-radius) * 2); /* ~11px — a soft corner for the floating rail (dialed back from *3/~17px, owner review) */
    --boab-topbar-h: 48px;
    /* Rail width — widened 250→260 for the denser nav. Overridden here as a CSS var (NOT in
       BoabTheme.cs, which is SHARED with the field head): MudBlazor's drawer width + the
       content-margin calc both read --mud-drawer-width-left, and `.boab-shell` is a nearer
       ancestor than the theme's :root, so descendants inherit 260px. */
    --mud-drawer-width-left: 260px;
    /* The rail surface — a single softenable token (light: the brand gum-green; dark below).
       Routes the drawer background so future contrast tuning never touches the brand token. */
    --boab-rail: var(--boab-gum-green);
    /* ONE canvas across the whole viewport: the floating drawer sits ON the layout root, and
       MudBlazor paints only <body> (var(--mud-palette-background), light #f6f7f6) — which
       drifted from --boab-canvas when the owner review softened it to #eef1ee, so the strip
       behind/around the inset rail read white against the green-tinted content. Painting the
       shell root with the SAME token the content uses closes the seam; the `.boab-dark` hook
       rides this element, so its --boab-canvas remap (→ the Mud dark background) flips this
       background too — dark mode stays one dark canvas, as before. */
    background-color: var(--boab-canvas);
}

/* Dark: match PaletteDark.DrawerBackground (#122a1f) exactly so nothing shifts in dark mode. */
.boab-shell.boab-dark {
    --boab-rail: #122a1f;
}

/* ── Mobile-only brand strip (hidden on desktop; shown < Breakpoint.Lg below) ── */
.boab-mobilebar {
    display: none;
}

/* ── The floating drawer: the rail itself never scrolls (overflow hidden clips it to
   the radius); the nav region between the fixed header + footer scrolls instead, so
   the user identity stays pinned in view. ── */
.boab-drawer.mud-drawer {
    overflow: hidden;
}

/* Route the rail surface through --boab-rail (light: gum-green; dark: #122a1f). `.boab-shell`
   prefix out-specifies MudBlazor's own .mud-drawer background (which loads after this file). */
.boab-shell .boab-drawer.mud-drawer {
    background-color: var(--boab-rail);
}

.boab-drawer .boab-drawer-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Quiet, thin scrollbar for the scrolling nav region (the rail itself never scrolls). */
.boab-shell .boab-drawer-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.boab-shell .boab-drawer-nav::-webkit-scrollbar {
    width: 6px;
}

.boab-shell .boab-drawer-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
}

.boab-shell .boab-drawer-nav::-webkit-scrollbar-track {
    background: transparent;
}

/* Sidebar footer — the relocated app-bar tail. Identity FIRST (owns the flexible space,
   name ellipsises), theme toggle LAST (a small quiet cap on the right). A hairline sets it
   off from the nav. */
.boab-drawer-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px; /* round-2 trim (was 10px vertical) — buys the nav region 4px */
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* Identity owns the flexible space. The Authorized identity is a MudMenu whose activator is
   the button, so the menu WRAPPER must grow (not just the button) for the name to fill +
   ellipsise; the NotAuthorized "Sign in" button is a direct flex child and grows on its own. */
.boab-drawer-footer .boab-drawer-user {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.boab-drawer-footer .boab-user-button {
    flex: 1 1 auto;
    min-width: 0; /* also kills MudButton's default 64px min-width so the ellipsis can bite */
    width: 100%;
    justify-content: flex-start;
    text-transform: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #ece9df;
    padding: 4px 8px;
    border-radius: 8px;
}

.boab-drawer-footer .boab-user-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.boab-drawer-footer .boab-user-button .mud-button-label {
    overflow: hidden;
}

/* The name ellipsises here (not on .mud-button-label): that label is a flex container, on
   which text-overflow can't act on a bare text node. This span is a blockified flex item, so
   it shrinks (min-width:0) and shows the ellipsis when the name is too long for the rail. */
.boab-drawer-footer .boab-user-button .boab-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* StartIcon (AccountCircle / Login) sized to 20px. */
.boab-drawer-footer .boab-user-button .mud-icon-root {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/* Un-clip the StartIcon: the name label carries `overflow:hidden` (so a long name
   ellipsises), but MudBlazor hands the StartIcon a -4px left margin for optical alignment,
   which pushes the round AccountCircle past the label's content box — `overflow:hidden`
   then shaves those 4px off its left edge. Zero the negative margin (keep the 8px gap to
   the name) and stop the icon flex-shrinking, so it always renders fully round while the
   name still ellipsises. */
.boab-drawer-footer .boab-user-button .mud-button-icon-start {
    margin-left: 0;
    margin-inline-start: 0;
    flex-shrink: 0;
}

/* Theme toggle — a small (≤32px) quiet hit target (muted white, NOT the loud amber);
   hover lifts it to white on a faint wash. */
.boab-drawer-footer .boab-drawer-footer-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 7px;
    color: rgba(255, 255, 255, 0.62);
}

.boab-drawer-footer .boab-drawer-footer-btn .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.boab-drawer-footer .boab-drawer-footer-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Drawer header — wordmark sits on the rail (background transparent so it inherits --boab-rail).
   22px left pad optically aligns the wordmark with the nav gutter (12px container + 10px link pad). */
.boab-drawer .boab-drawer-header {
    flex: 0 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    padding-left: 22px;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.boab-wordmark {
    width: auto;
}

/* ── Nav (Linear/Notion-density rail) ──────────────────────────────────────────────
   Every selector is `.boab-shell`-scoped (never leaks to KioskLayout / the field head)
   and based on `.boab-nav.mud-navmenu` — a compound on ONE element (MudNavMenu carries
   both classes) — so each rule clears MudBlazor's own nav rules (which load after this
   file): its default-active rule is 0,5,0 and its nested-group indent is 0,4,0. Home,
   group headers, and nested links all share ONE left gutter. */
.boab-shell .boab-nav.mud-navmenu {
    padding: 8px 12px 10px; /* round-2 trim (was 10/12/16): all four group headers must fit at 1080p */
}

/* Every nav link — the dense row (top-level Home AND group children; group headers get
   their own smaller treatment below). */
.boab-shell .boab-nav.mud-navmenu .mud-nav-link {
    min-height: 32px;
    padding: 5px 10px;
    margin: 1px 0;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
    align-items: center;
}

/* Kill MudBlazor's 36px nested-group indent (it sets BOTH padding-left AND
   padding-inline-start at 0,4,0) AND the old app.css hairline indent: every nested link
   shares Home's 10px gutter, no left border, full radius. Set both physical + logical so
   the used padding-left resolves to 10px regardless of writing-mode mapping. */
.boab-shell .boab-nav.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 10px;
    padding-inline-start: 10px;
    margin-left: 0;
    margin-inline-start: 0;
    border-left: none;
    border-inline-start: none;
    border-radius: 8px;
}

/* Icons — 18px, muted; out-specify MudBlazor's .mud-icon-size-medium (24px) and the
   .mud-nav-link-icon-default colour. The label's own 12px start-margin is zeroed so the
   icon's 10px end-margin is the sole (clean) gap. */
.boab-shell .boab-nav.mud-navmenu .mud-nav-link .mud-nav-link-icon {
    color: rgba(255, 255, 255, 0.62);
    margin-inline-end: 10px;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-link .mud-nav-link-icon svg {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-link .mud-nav-link-text {
    margin-left: 0;
    margin-inline-start: 0;
}

/* Hover. */
.boab-shell .boab-nav.mud-navmenu .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-link:hover .mud-nav-link-icon {
    color: #fff;
}

/* Active — a rounded inset amber pill with sun-ray text/icon. MudBlazor's
   `.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)` (0,5,0)
   forces the link (and the inherited label) to the dark primary; we out-specify it (0,7,0
   with the .boab-nav.mud-navmenu compound) AND still target the text/icon elements directly.
   The rounded pill needs no edge bar, so MudBlazor's ::before indicator is hidden. */
.boab-shell .boab-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(139, 77, 36, 0.30);
    color: var(--boab-sun-ray);
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    background-color: rgba(139, 77, 36, 0.40);
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text {
    color: var(--boab-sun-ray);
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--boab-sun-ray);
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
    display: none;
}

.boab-nav-divider {
    border-color: rgba(255, 255, 255, 0.12) !important;
    margin: 8px 8px;
}

/* ── Group headers ──────────────────────────────────────────────────────────────────
   A small-caps section label. Its icon is hidden (duplicates the child icons + wastes the
   gutter); the header label then sits over the child-icon column, children indented behind.
   Chevron muted + shrunk. */
.boab-shell .boab-nav.mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    display: none;
}

.boab-shell .boab-nav.mud-navmenu .mud-nav-group > .mud-nav-link {
    min-height: unset;
    padding: 4px 10px 2px; /* round-2 trim (was 6/10/4) */
    margin-top: 10px;      /* round-2 trim (was 14px) */
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
}

/* Expand chevron — 16px, faint. MudBlazor sets `fill: primary` directly on the transformed
   (expanded) chevron at 0,3,0, so recolour BOTH color and fill to beat it. */
.boab-shell .boab-nav.mud-navmenu .mud-nav-group .mud-nav-link-expand-icon {
    color: rgba(255, 255, 255, 0.40);
    fill: rgba(255, 255, 255, 0.40);
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ── The floating drawer + capped content (DESKTOP, ≥ Breakpoint.Lg 1280px) ────────
   The drawer docks (Responsive variant); here we lift it off the edges — a gap all
   round + the panel corner — so the gum-green rail reads as a panel sitting ON the
   canvas, which shows through around it. Content clears the floating rail + a matching
   right gap. All keyed to the DOCKED-open state class MudBlazor puts on the layout
   root, so a user-toggled-closed drawer reflows normally.
   `--mud-drawer-width-left` is 260px (overridden on .boab-shell); the +2×gap right-shifts
   content so a canvas gutter sits between the rail's right edge and the content column.

   The float geometry must out-SPECIFY MudBlazor's own responsive-drawer rules (loaded after
   this file): `height:100%` is 0,3,0 and open-state `left:0` is 0,4,0. Stacking the real
   state classes MudBlazor puts on the aside (.mud-drawer-fixed.mud-drawer-responsive) under
   the `.boab-shell` root lifts these to 0,5,0 / 0,6,0 so they win cleanly — no !important. */
@media (min-width: 1280px) {
    .boab-shell .boab-drawer.mud-drawer-fixed.mud-drawer-responsive.mud-drawer-pos-left {
        top: var(--boab-shell-gap);
        bottom: var(--boab-shell-gap);
        height: auto;                              /* top+bottom pin the height → it floats */
        border-radius: var(--boab-shell-radius);
    }

    /* Open-state gets the left offset + the floating-panel elevation. (Elevation ONLY here:
       the closed drawer slides to left:-260px and MudBlazor sets its box-shadow:none — a
       shadow there would bleed at the viewport edge.) */
    .boab-shell .boab-drawer.mud-drawer-fixed.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open {
        left: var(--boab-shell-gap);
        box-shadow: 0 1px 2px rgba(16, 32, 24, 0.12), 0 12px 32px rgba(16, 32, 24, 0.16);
    }

    /* Content clears the floating rail (rail width + a gap on each side). The .boab-shell
       compound (same element as the drawer-open state class) beats MudBlazor's own margin
       rule that loads later. */
    .boab-shell.mud-drawer-open-responsive-lg-left .boab-main.mud-main-content {
        margin-left: calc(var(--mud-drawer-width-left) + var(--boab-shell-gap) * 2);
    }
}

/* Content area — airy padding on the canvas; full viewport height now the bar is gone. */
.boab-main {
    background-color: var(--boab-canvas);
    min-height: 100vh;
}

/* No app bar → the main region owns the top edge. (Doubled class beats MudBlazor's
   `.mud-main-content{padding-top:var(--mud-appbar-height)}`, which loads later.) */
.boab-main.mud-main-content {
    padding-top: 0;
}

/* ── Dark mode: the page CANVAS token (the panels/tables already dark-map through the
   --boab-panel-* indirection; the app bar that used to remap here is gone). Route the
   canvas onto the Mud dark palette under the app's `.boab-dark` hook. The claim-entry
   sheet's .boab-sheet-* colours ALSO remap in dark (owner ruling 2026-07-07, in
   boab-design.css); print/PDF stay paper. */
.boab-dark {
    --boab-canvas: var(--mud-palette-background, #1a1c1b);
}

/* ── Capped, centred content column (all viewports) ───────────────────────────────
   Default admin templates stretch edge-to-edge; cap the column at a comfortable
   reading width and let MudContainer's own auto margins centre it on wide monitors.
   Doubled class (`.boab-main .boab-content`) beats MudBlazor's `.mud-container-*` cap
   rule (loads later). A page that genuinely needs full bleed (big table / the pivot)
   opts out by rendering a `.boab-wide` element anywhere in its body. */
.boab-main .boab-content {
    max-width: 1520px;
    padding: 24px 28px 40px 28px;
}

.boab-main .boab-content:has(.boab-wide) {
    max-width: none;
}

@media (max-width: 640px) {
    .boab-main .boab-content {
        padding: 16px 14px 28px 14px;
    }
}

/* ── Mobile chrome (< Breakpoint.Lg): the slim gum-green strip is the only top bar and
   the sole affordance to open the overlay drawer. The drawer stays flush full-height
   here (the desktop float is min-width:1280 only). ── */
@media (max-width: 1279.98px) {
    .boab-mobilebar {
        display: flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--boab-topbar-h);
        padding: 0 6px;
        background-color: var(--boab-rail);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        z-index: 1100; /* below --mud-zindex-drawer (1300) so the open drawer overlays it */
    }

    .boab-mobilebar .boab-mobilebar-toggle {
        color: #fff;
    }

    .boab-mobilebar-brand {
        display: inline-flex;
        align-items: center;
    }

    /* Content clears the fixed strip. */
    .boab-main.mud-main-content {
        padding-top: var(--boab-topbar-h);
    }

    /* The shared /plan sticky day bar sticks BELOW the strip (it keys off
       --mud-appbar-height * 0.75; on the web shell we drive its offset directly instead
       — web-scoped so the field head's own dense app bar keeps its 48px). */
    .boab-shell .boab-plan-daybar {
        top: var(--boab-topbar-h);
    }
}

/* Desktop: no chrome above the sticky /plan day bar. */
@media (min-width: 1280px) {
    .boab-shell .boab-plan-daybar {
        top: 0;
    }
}

/* Keep the legacy .content helper used by some not-yet-migrated pages from
   double-padding inside the new MudContainer. */
.boab-content .content {
    padding-top: 0;
}

/* StatusBadge's own pill styling (.boab-status-badge) moved to the shared
   _content/Boab.Works.Ui/css/boab-design.css — StatusBadge is a shared RCL component, so its
   style belongs with the component (both heads now render it identically). */

/* MasterDetailView — generic two-pane list/detail shell (Components/Shared). */
.boab-master-detail .boab-md-list {
    min-width: 0;
}
.boab-master-detail .boab-md-list-item {
    cursor: pointer;
}
.boab-master-detail .boab-md-list-item.boab-md-selected {
    /* Flipping primary tint + bar so the selected row is legible in dark (was a pinned
       gum-green rgba/bar that vanished on the dark surface). Light: primary == gum-green. */
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-left: 3px solid var(--mud-palette-primary);
}
.boab-master-detail .boab-md-list-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}
.boab-master-detail .boab-md-list-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
/* Sticky list header strip (filters / "New" button) — the sheet's tint band so it
   reads as a header (dark-mapped via the --boab-panel-* indirection). */
.boab-master-detail .boab-md-list-header {
    border-bottom: 1px solid var(--boab-panel-rule);
    background-color: var(--boab-panel-tint);
}
.boab-master-detail .boab-md-detail {
    min-width: 0; /* let long content wrap instead of overflowing the grid column */
}

/* AppDataGrid — thin MudDataGrid wrapper (Components/Shared). */
.boab-data-grid {
    width: 100%;
}