/* ==================================================================   theme-polish.css — "Aedium-grade" visual polish for the MudBlazor surfaces
   (Accounting / Restaurant ERP, Equipment, Placeable Items, dialogs).

   Aedium's professional feel comes from its design TOKENS, not its framework
   (Aedium is Ant Design Blazor; we're MudBlazor — markup can't be copied). We
   replicate the aesthetic here in Ziggi's espresso/tan/cream palette:
     • subtle 1px borders + soft TWO-layer shadows instead of heavy elevation
     • tight table density with uppercase, muted, letter-spaced headers
     • a consistent radius scale + refined buttons/tabs/inputs
     • custom thin scrollbars + Inter stylistic alternates

   Loaded AFTER app.css + MudBlazor.min.css so these win over the defaults.
   Scoped to .mud-* so the custom-HTML pages (Home, Gallery) and the 3D
   viewer (own CSS) are untouched.
   ========================================================================= */

:root {
    --zg-surface:        #ffffff;
    --zg-surface-soft:   #faf6ee;   /* warm off-white — header rows / zebra    */
    --zg-border:         #e8e1d3;   /* subtle warm hairline                     */
    --zg-border-strong:  #d8cdb8;
    --zg-muted:          #927f6b;   /* muted label text                         */

    --zg-radius-sm: 4px;   /* controls/buttons — 4px everywhere (owner, ADR-0102) */
    --zg-radius:    9px;
    --zg-radius-lg: 14px;

    --app-control-h: 36px;   /* #78 (Global UX/UI): shared control height — toolbar search, buttons, toggles all align to this */
    --zg-ctl-h: 40px;        /* 978 (R7): form control band — Ant inputs/selects/numbers/pickers; toolbars keep --app-control-h */
    --zg-label-h: 22px;      /* 978 (R7): label band above a labelled field */

    /* Soft, multi-layer elevation (the Aedium signature — barely-there depth) */
    --zg-shadow-sm: 0 1px 2px rgba(58, 38, 24, 0.05);
    --zg-shadow:    0 1px 3px rgba(58, 38, 24, 0.07), 0 1px 2px rgba(58, 38, 24, 0.05);
    --zg-shadow-md: 0 6px 16px rgba(58, 38, 24, 0.08), 0 2px 5px rgba(58, 38, 24, 0.05);

    /* Widget content text tiers — used by .zg-wv / .zg-wl / .zg-wi / .zg-wlink classes (see below).
       Flip to light values in dark mode so every widget gets theme-aware text without inline styles. */
    --zg-text-strong: #0f172a;
    --zg-text-body:   #1f2937;
    --zg-text-muted:  #6b7280;
    --zg-text-faint:  #9ca3af;
    --zg-text-link:   #8a5a2b;
}

/* Dark theme: same Ziggi's identity, inverted. Espresso is the BG, tan is the action color, cream is the text.
   Stamped on <html> by App.razor (SSR cookie read) + the inline head script (OS prefers-color-scheme). The
   MudBlazor side flips through MudThemeProvider IsDarkMode in the same tick; the rules below cover everything
   else (the scoped + plain CSS that keys on the --zg-* tokens). */
:root[data-theme="dark"] {
    --zg-surface:        #241710;   /* slightly-lifted espresso for cards/panels */
    --zg-surface-soft:   #2D1E14;   /* header rows / zebra                       */
    --zg-border:         rgba(217, 173, 109, 0.18);   /* tan at low opacity      */
    --zg-border-strong:  rgba(217, 173, 109, 0.30);
    --zg-muted:          #A39078;   /* muted tan-cream label text                */

    /* Shadows recede on dark — keep the structure but drop the contrast (a glowing shadow on dark looks fake). */
    --zg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --zg-shadow:    0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.28);
    --zg-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 5px rgba(0, 0, 0, 0.30);

    /* Widget text tiers inverted for dark surface */
    --zg-text-strong: #F5F0E6;
    --zg-text-body:   #F5F0E6;
    --zg-text-muted:  #A39078;
    --zg-text-faint:  rgba(245, 240, 230, 0.50);
    --zg-text-link:   #3BA7B4;   /* teal — complements espresso/tan on dark */

    /* Espresso elevation ramp. Chrome (cards, toolbars, headers, popovers) is BROWN; higher = lighter,
       the standard dark-UI reading of depth. Teal is an ACCENT here, never a surface — it used to fill
       every container (22 rules) which is what made the theme read as a teal app wearing a brown sidebar. */
    --zg-elev-1: #241710;   /* cards, papers, tables, dashboard cells, tab panels   */
    --zg-elev-2: #2F1F15;   /* raised ON a card: toolbars, table headers, footers   */
    --zg-inset:  #1B110B;   /* recessed: inputs, pager/view buttons, inactive tabs  */
    --zg-float:  #35241A;   /* floating above everything: popovers, menus           */

    /* Teal, used deliberately and sparingly: indicator lines, selection tint, focus. */
    --zg-accent:      #3BA7B4;
    --zg-accent-soft: rgba(59, 167, 180, 0.14);
}

/* Body background: in dark mode the BG is the deep-espresso below the MudBlazor surface stack. */
/* html AND body: body alone leaves the root element cream (app.css paints it from the brand token,
   which does not flip), so any area the body box doesn't cover — overscroll, short pages, a viewport
   wider than the shell — flashes beige in dark mode. */
:root[data-theme="dark"],
:root[data-theme="dark"] body { background: #1A100A; color: #F5F0E6; }

/* ---- Dark: text that never got theme-aware -------------------------------
   Two app-wide sources of dark-on-dark text, both the same bug class as the cream .erp-shell above
   (a brand constant used directly, so it can't flip):

   1. app.css sets `h1..h6 { color: var(--ziggis-espresso) }` — #4a2613 on a #1A100A page. That is
      EVERY heading in the app, including fly-in titles ("Edit bill") and section labels ("Lines").
   2. .app-field-label — the label every App*Ant wrapper renders (AppTextFieldAnt, AppSelectAnt,
      AppDatePickerAnt, AppNumberField, AppTextAreaAnt, AppCounterpartySelect) — has NO rule of its
      own anywhere, so it inherits ant-design-blazor.css's base rgba(0,0,0,0.85): near-black.
      (ant-theme.css DOES dark-style `.ant-form-item-label > label`, but that markup never renders —
      the wrappers use their own label element, so that override is dead code.)

   Element selectors are 0-0-1, so :root[data-theme="dark"] + element wins without !important. */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 { color: var(--zg-text-strong); }

/* Field labels sit beside their input, so a slightly muted cream keeps the VALUE dominant. */
:root[data-theme="dark"] .app-field-label { color: rgba(245, 240, 230, 0.78); }

/* Required-field marker on App*Ant wrappers (item 726) — VISUAL ONLY (FluentValidation still enforces).
   Theme-red so it reads in both modes; hugs the label with a hair of space. */
.erp-required-star { color: var(--mud-palette-error); margin-left: 2px; font-weight: 600; }

/* ── System-wide AppForm row rhythm (item 776, owner 2026-08-09; always-on class 2026-08-10) ──────
   Every App*Ant wrapper labels its control its own way — AppTextFieldAnt's .app-field-wrap,
   AppSelectAnt's .app-select-label-wrap, a bare switch span, a bare .ant-checkbox-wrapper — so the
   12-col form grid had no single source of vertical rhythm: it ran on each field's incidental
   label height (rowGap was 0), and switch/checkbox rows (no top label) butted the row above.
   2026-08-10: AppForm now ALWAYS emits .app-form-rhythm, so the rhythm no longer depends on a form
   opting into .erp-form-grid — the rules key off the always-on class too. Grid LAYOUT stays opt-in
   (the class carries NO display:grid/flex — only spacing). */

/* One uniform inter-row gap supplies ALL the vertical rhythm in a grid form (was 0). */
.erp-form-grid { row-gap: 12px; }

/* Always-on rhythm for NON-grid AppForms: 12px between the form's OWN stacked rows, imposing no layout.
   Ant's <Form> injects a hidden <input> as the form's FIRST child, so `:not(input)` is load-bearing — a plain
   `> * + *` would land 12px on the first real child (pushing a grid form's .erp-form-grid down 12px, a
   regression). Skipping the hidden input, the FIRST real row gets no top margin and only later rows are spaced:
   inert on single-container forms (one .erp-form-grid / AppGrid / AppStack child ⇒ grid spacing unchanged),
   effective on a bare multi-row AppForm. */
.app-form-rhythm > :not(input) ~ :not(input) { margin-top: 12px; }

/* AppTextFieldAnt's out-of-form wrap had no rule, so its label sat differently from AppSelectAnt's
   — unify the two so labeled rows are pixel-consistent, with no stray padding above the label. */
.app-field-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-field-label { margin: 0; padding: 0; }
.app-field-error { color: var(--mud-palette-error); font-size: 0.8rem; margin-top: 2px; }   /* 1873: typed date refused */
/* 978: an unlabelled wrap's empty label is a 0px first flex item whose baseline sits at the wrap's top — under the
   baseline table rule below it dropped the control a row lower (TaxRegistrationsTab pickers, measured 26px). */
.app-field-wrap > .app-field-label:empty { display: none; }

/* 978 (R7): field row — top-aligned, so a caption/validation line under one field never re-centres its neighbours;
   in a labelled row an unlabelled item drops onto the control band. Buttons/checkboxes/text (or a .zg-band
   wrapper around a chip) centre on that band. Opt-in per strip (item 980). */
.zg-field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.zg-field-row:has(.app-field-label:not(:empty)) > :not(:has(.app-field-label:not(:empty))) { margin-top: var(--zg-label-h); }
.zg-field-row > :is(.mud-button-root, .ant-checkbox-wrapper, .mud-typography), .zg-band {
    min-height: var(--zg-ctl-h); display: inline-flex; align-items: center; gap: 6px; }

/* Switch / checkbox cells carry no floating label, so their control hugged the row above and sat a
   label's-height too high to line up with the labeled controls beside them (e.g. the Depreciable
   toggle vs the contra select). Drop them onto the same control band — in a grid row AND, now, as a
   direct child of any AppForm (the always-on class). */
.erp-form-grid > *:has(> .d-inline-flex > .ant-switch),
.erp-form-grid > *:has(> .ant-checkbox-wrapper),
.app-form-rhythm > *:has(> .d-inline-flex > .ant-switch),
.app-form-rhythm > *:has(> .ant-checkbox-wrapper) { padding-top: 22px; }

/* Topbar + breadcrumbs + user menu (custom HTML, NOT MudBlazor — these key off our own surface color). */
/* The top-bar user menu is a NATIVE <details> dropdown rendered INLINE in .app-topbar (not portaled), so its
   .app-usermenu-panel (z-index:1400) is trapped inside the top bar's own stacking context (.app-topbar is
   position:sticky; z-index:1050) — the panel therefore cannot out-paint page content that establishes its
   own stacking context, and its lower items (theme toggle, kiosk, logout) get painted / hit-tested UNDER a
   Finance grid's .erp-grid-v2-body (or a grid's portaled Ant dropdown at z-index:1450). WHILE the menu is
   open, lift the WHOLE bar into the overlay band so the entire dropdown reliably stacks above grids and other
   page content in BOTH themes; closing it restores the normal 1050 rank so open Ant/Mud popovers elsewhere
   are never covered by the bar. Scoped to [open] via :has() (an idiom already used across app.css). ADR-0115. */
.app-topbar:has(.app-usermenu[open]) { z-index: 1460; }

/* 2159: initials chip + name (sample 2126 B); long names ellipsize, the email sits in the panel. 0-3-0 beats the scoped summary rule. */
.app-topbar .app-usermenu > .app-usermenu-trigger { gap: 8px; max-width: 280px; }
.app-usermenu-initials { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--mud-palette-secondary); color: var(--mud-palette-black); }
.app-topbar-user-name { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-usermenu-account { max-width: 280px; padding: 2px 10px 6px; font-size: 13px; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }

:root[data-theme="dark"] .app-topbar,
:root[data-theme="dark"] .app-usermenu-panel,
:root[data-theme="dark"] .app-breadcrumbs { background: var(--zg-surface) !important; color: #F5F0E6; border-color: var(--zg-border); }
:root[data-theme="dark"] .app-breadcrumb-link { color: #d9ad6d; }
:root[data-theme="dark"] .app-breadcrumb-current,
:root[data-theme="dark"] .app-breadcrumb-sep,
:root[data-theme="dark"] .app-breadcrumb-home { color: #F5F0E6; }
:root[data-theme="dark"] .app-usermenu-item:hover { background: rgba(217, 173, 109, 0.12); }
:root[data-theme="dark"] .app-usermenu-label { color: var(--zg-muted); }
:root[data-theme="dark"] .app-usermenu-divider { border-color: var(--zg-border); }

/* The panel got a dark background above, but its ITEMS carry their own colour in the legacy scoped
   UserMenu.razor.css (#3a2a1a on .app-usermenu-item / > summary, #9a8a75 on the caret) — scoped rules are
   0-2-0, so they beat the panel's inherited colour and the whole menu rendered dark-on-dark. These are 0-3-0
   and win without !important. (Third source of non-theme-aware colour after brand constants and inline hex:
   hardcoded hex inside legacy scoped .razor.css — see backlog 462.) */
:root[data-theme="dark"] .app-usermenu-item,
:root[data-theme="dark"] .app-usermenu > summary { color: var(--zg-text-strong); }
:root[data-theme="dark"] .app-usermenu-caret { color: var(--zg-text-muted); }
:root[data-theme="dark"] .app-usermenu-item:hover,
:root[data-theme="dark"] .app-usermenu > summary:hover { background: rgba(217, 173, 109, 0.12); }
/* Keep logout red, but lift it off espresso — #b02020 is too close to the background to read comfortably. */
:root[data-theme="dark"] .app-usermenu-logout { color: #ff8a8a; }
:root[data-theme="dark"] .app-usermenu-logout:hover { background: rgba(255, 138, 138, 0.12); }

/* Command-palette "Ctrl K" hint. Its scoped rule asks for --mud-palette-background-GREY, but the token
   is defined as --mud-palette-background-GRAY (theme-vars.css) — so the var never resolves and the
   hardcoded #f3f3f7 fallback wins in BOTH themes, leaving beige text on near-white in dark. Overridden
   here (0-3-0 beats the scoped 0-2-0) rather than editing the legacy scoped file. */
:root[data-theme="dark"] .cmdk-trigger-kbd {
    background: rgba(245, 240, 230, 0.10);
    border-color: var(--zg-border);
    color: var(--zg-text-muted);
}

/* ---- Widget semantic text classes ----------------------------------------
   Replace inline style="color:#0f172a/6b7280/9ca3af/1f2937/8a5a2b" in all widget
   files with these classes — one token flip in :root[data-theme="dark"] above
   handles every widget at once. Font-size stays inline (varies per widget). */
.zg-wv    { color: var(--zg-text-strong); }   /* KPI value — big number        */
.zg-wv--warn { color: var(--mud-palette-warning); }   /* value that IS the warning (e.g. NOT CONFIGURED) */
.zg-ws    { color: var(--zg-text-body); }     /* strong body text              */
.zg-wl    { color: var(--zg-text-muted); }   /* label / subtitle              */
.zg-wi    { color: var(--zg-text-faint); }   /* loading / idle / dim          */
.zg-wlink { color: var(--zg-text-link) !important; }   /* inline link in widget */
.zg-wlink:hover { opacity: 0.85; }

/* ---- Typography: Inter stylistic alternates + smoothing ------------------ */
body {
    font-feature-settings: 'cv02', 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Cards & outlined panels: hairline border, gentle shadow ------------- */
.mud-card,
.mud-paper.mud-paper-outlined {
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius);
}
.mud-card {
    box-shadow: var(--zg-shadow-sm);
    transition: box-shadow .15s ease;
}
.mud-card:hover {
    box-shadow: var(--zg-shadow);
}

/* ---- Tables & data grids framed as clean white cards on the cream bg ----- */
/* Covers both MudTable (.mud-table wrapper) and MudDataGrid (.mud-data-grid);
   the soft shadow replaces MudBlazor's default .mud-elevation-1 block shadow. */
.mud-table,
.mud-data-grid {
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius);
    box-shadow: var(--zg-shadow-sm) !important;
    overflow: hidden;
    background: var(--zg-surface);
}

/* ---- Table headers: uppercase, muted, letter-spaced (small-caps feel) ---- */
.mud-table-root thead th.mud-table-cell {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--zg-muted) !important;
    background: var(--zg-surface-soft) !important;
    border-bottom: 1px solid var(--zg-border-strong) !important;
}

/* ---- Table body: hairline rows, soft zebra, warm tan hover --------------- */
.mud-table-root tbody td.mud-table-cell {
    border-bottom: 1px solid var(--zg-border) !important;
}
.mud-table-root:not(.mud-table-striped) tbody tr:nth-of-type(even) {
    background: rgba(245, 240, 230, 0.5);
}
.mud-table-root tbody tr:hover {
    background: rgba(217, 173, 109, 0.10) !important;   /* tan tint */
}

/* ---- Tabs: refined underline / ink-bar — light & elegant (Aedium-style) -- */
/* Muted text tabs; the active one is espresso with a thin tan accent bar that
   glides between tabs. No heavy fill — reads far lighter than a solid pill. */
.mud-tabs .mud-tabs-toolbar {
    border-bottom: 1px solid var(--zg-border);
    min-height: 0;
    padding: 0;
}
.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.005em;
    min-height: 38px;
    padding: 0 0.95rem;
    margin: 0;
    border-radius: 0;
    color: var(--zg-muted);
    transition: color .12s ease;
}
.mud-tabs .mud-tab:hover:not(.mud-tab-active) {
    color: var(--ziggis-espresso);
    background: transparent;
}
.mud-tabs .mud-tab.mud-tab-active {
    color: var(--ziggis-espresso);
    font-weight: 600;
    background: transparent;
}
.mud-tabs .mud-tab.mud-tab-active .mud-icon-root { color: var(--ziggis-espresso) !important; }
/* Keep the tab bar + panels on the cream bg — no white strip under the ink-bar */
.erp-shell .mud-tabs-toolbar,
.erp-shell .mud-tabs-panels,
.erp-shell .mud-tab-panel { background: transparent !important; }
/* the moving ink-bar under the active tab */
.mud-tabs .mud-tab-slider {
    display: block !important;
    height: 2.5px !important;
    background: var(--ziggis-tan, #d9ad6d) !important;
    border-radius: 3px 3px 0 0;
}

/* ---- ERP tabbed pages: full-bleed grid-shell, tabs + grid fill the height - */
/* Mirrors the .grid-region pattern one level deeper: the page title + company
   switcher take natural height; MudTabs fills the rest; the active panel hosts
   either a grid marked .erp-fill (fills + scrolls its own body, toolbar/pager
   pinned — exactly like Equipment) or a form/report (scrolls as a whole). */
.erp-shell .mud-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.erp-shell .mud-tabs > .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.erp-shell .mud-tabs-panels > .mud-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;          /* form / report panels scroll as a whole */
}
/* A grid/host marked .erp-fill stretches to fill its panel. */
.erp-shell .erp-fill {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* ErpEditLink + grid nav links — teal so a clickable value reads as a link without hover. */
.erp-grid-edit-link {
    cursor: pointer;
    font-weight: 600;
}
.mud-link.erp-grid-edit-link { color: #1a7a87 !important; }
.mud-link.erp-grid-edit-link:hover { color: #115e6a !important; text-decoration: underline; }
:root[data-theme="dark"] .mud-link.erp-grid-edit-link { color: #4AABB8 !important; }
:root[data-theme="dark"] .mud-link.erp-grid-edit-link:hover { color: #6CC3CD !important; }

/* ErpGrid host = a sticky action bar above a filling, internally-scrolling grid. */
.erp-grid-host > .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.erp-shell .erp-fill .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.erp-shell .erp-fill .mud-table-pagination,
.erp-shell .erp-fill .mud-table-pagination-toolbar {
    flex: 0 0 auto;
}

/* 1502 — AppSectionTabs tabs scroll inside their own strip; section-tabs.js marks the clipped side (fade + nudge).
   The strip's 1px bottom pad + the track's -1px margin keep the active tab fused to the panel despite the clip. */
.app-sectiontabs-track {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-self: flex-end;
    margin-bottom: -1px;
}
.app-sectiontabs-strip {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 34px;      /* clear of the nudge */
}
.app-sectiontabs-strip::-webkit-scrollbar { display: none; }
.app-sectiontabs-strip .app-sectiontab { flex: 0 0 auto; }
.app-sectiontabs-strip .app-sectiontab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;             /* the strip clips an outer ring */
}
.app-sectiontabs-track[data-st-left] .app-sectiontabs-strip {
    -webkit-mask-image: linear-gradient(to right, transparent, black 44px);
    mask-image: linear-gradient(to right, transparent, black 44px);
}
.app-sectiontabs-track[data-st-right] .app-sectiontabs-strip {
    -webkit-mask-image: linear-gradient(to left, transparent, black 44px);
    mask-image: linear-gradient(to left, transparent, black 44px);
}
.app-sectiontabs-track[data-st-left][data-st-right] .app-sectiontabs-strip {
    -webkit-mask-image: linear-gradient(to right, transparent, black 44px, black calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, transparent, black 44px, black calc(100% - 44px), transparent);
}
.app-sectiontabs-nudge {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    box-shadow: var(--mud-elevation-2);
    cursor: pointer;
}
.app-sectiontabs-nudge:hover { color: var(--mud-palette-text-primary); }
.app-sectiontabs-nudge--prev { left: 0; }
.app-sectiontabs-nudge--next { right: 0; }
.app-sectiontabs-track[data-st-left] .app-sectiontabs-nudge--prev,
.app-sectiontabs-track[data-st-right] .app-sectiontabs-nudge--next { display: inline-flex; }
/* clip, not hidden: a hidden box is still scrollable, so focus could slide the whole page sideways */
.erp-shell,
.ziggis-content:has(.erp-shell) { overflow: clip; }

/* #74 / ADR-0042 — make the new AppSectionTabs panel self-sufficient: a grid dropped into a section
   tab fills the REMAINING height (below any filter bar / header in the tab) and scrolls its OWN body,
   toolbar/pager pinned — with NO .erp-shell on the page or .erp-fill on the grid required.
   THE #74 FIX: this overrides the legacy `.erp-fill { height: 100% }`, which overflowed the panel
   whenever the tab had content above the grid (so the page scrolled and the pager fell below the fold).
   .ast-body is already a flex column, so `flex:1 + min-height:0` is the correct "fill the rest". */
.app-sectiontabs-panel > .ast-body > .erp-grid-host {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;          /* override .erp-shell .erp-fill height:100% (overflows when a header sits above) */
    display: flex;
    flex-direction: column;
}
.ast-body .erp-grid-host .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;        /* the grid body scrolls internally; the panel itself never scrolls */
}
.ast-body .erp-grid-host .mud-table-pagination,
.ast-body .erp-grid-host .mud-table-pagination-toolbar {
    flex: 0 0 auto;        /* pager pinned at the bottom, always visible — no page scroll */
}

/* The one consistent, pinned action bar — used by ErpGrid and by standalone
   bars (e.g. the Chart of Accounts tree view). Sticky so it never scrolls away;
   cream background masks content scrolling beneath it. */
.erp-actionbar {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0 0.6rem;
    background: var(--ziggis-cream, #faf6ee);
}
.erp-actionbar-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* A page header carries a picker, a state line and 2-3 actions. Let it WRAP as coherent blocks rather than
   squeezing, and give every control the shared height so the row reads as one bar. */
.erp-actionbar { flex-wrap: wrap; row-gap: 8px; }
.erp-actionbar-start, .erp-actionbar-end { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
.erp-actionbar .mud-button-root,
.erp-actionbar .mud-toggle-item {
    height: var(--app-control-h); min-height: var(--app-control-h); white-space: nowrap;
}
.erp-actionbar .ant-select-selector { min-height: var(--app-control-h); }
/* The state line is prose, not a control — let it use the space it needs and never clip. */
.erp-actionbar .zg-state-line { white-space: normal; line-height: 1.5; }

/* A legend belongs UNDER the controls, not among them. */
.erp-grid-v2-legend { padding: 0 16px 8px; font-size: 0.8rem; color: var(--zg-muted); }

/* ---- ErpGrid "quick list" variant (QuickList="true") ---------------------
   A slim, chrome-free embed for tight contexts (dashboard tiles, side panels):
   no action bar, no pager, tighter cell padding + smaller type than the already-
   dense default. Scoped to .erp-grid-quick so it never touches normal grids. */
.erp-grid-quick {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.erp-grid-quick > .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.erp-grid-quick .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
/* Trim the row chrome below MudBlazor's Dense baseline. */
.erp-grid-quick .mud-table-cell {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.78rem;
    line-height: 1.3;
}
.erp-grid-quick .mud-table-head .mud-table-cell {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--zg-muted, #927f6b);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ---- Buttons: refined to match the light tabs — quiet until hover -------- */
.mud-button-root {
    border-radius: var(--zg-radius-sm);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}
/* Buttons rendered ~54px tall: the button typography line-height (1.75) compounded with a
   block-display start/end icon span. Tighten both so iconned + text buttons are compact app-wide
   (owner 2026-07-18). Grid-toolbar buttons keep their own explicit height rules below. */
.mud-button-root.mud-button { line-height: 1.4; }
.mud-button .mud-button-icon { line-height: 1; display: inline-flex; align-items: center; }
/* The toolbar "Add …" / "New …" actions (outlined-primary): soft warm hairline
   instead of a loud espresso slab. Semantic outlined buttons (warning / error)
   keep their own color. */
.mud-button-outlined-primary {
    border-color: rgba(74, 38, 19, 0.22) !important;
}
.mud-button-outlined-primary:hover {
    border-color: var(--ziggis-tan, #d9ad6d) !important;
    background: rgba(217, 173, 109, 0.10) !important;
}
.mud-button-filled {
    box-shadow: var(--zg-shadow-sm);
}
.mud-button-filled:hover {
    box-shadow: var(--zg-shadow);
}

/* ---- Toggle groups (Tree/Grid, report switcher): light segmented control - */
.mud-toggle-group {
    border: 1px solid var(--zg-border-strong) !important;
    border-radius: var(--zg-radius-sm) !important;
    background: var(--zg-surface);
    overflow: hidden;
}
.mud-toggle-group .mud-toggle-item {
    text-transform: none;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--zg-muted);
    padding: 0.32rem 0.9rem;
    transition: background-color .12s ease, color .12s ease;
}
.mud-toggle-group .mud-toggle-item .mud-icon-root { color: currentColor; }
.mud-toggle-group .mud-toggle-item:hover:not(.mud-toggle-item-selected) {
    background: rgba(217, 173, 109, 0.08);
    color: var(--ziggis-espresso);
}
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
    background: rgba(217, 173, 109, 0.18) !important;
    color: var(--ziggis-espresso) !important;
    font-weight: 600;
}

/* ---- Chips: tag-style (slightly rounded, not loud pills) ----------------- */
.mud-chip {
    border-radius: 6px;
    font-weight: 600;
}

/* ---- Inputs: consistent radius ------------------------------------------ */
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-outlined {
    border-radius: var(--zg-radius-sm);
}

/* ---- Expansion panels: hairline frame ----------------------------------- */
.mud-expand-panel {
    border: 1px solid var(--zg-border);
}

/* ---- Dialogs & menus: softer corners + Aedium-grade shadow -------------- */
.mud-dialog,
.mud-popover.mud-popover-paper {
    border-radius: var(--zg-radius);
    box-shadow: var(--zg-shadow-md) !important;
}

/* ---- Custom thin warm scrollbars (scoped to scrolling Mud surfaces) ------ */
.mud-table-container::-webkit-scrollbar,
.mud-tabs-panels::-webkit-scrollbar,
.mud-dialog-content::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
.mud-table-container::-webkit-scrollbar-track,
.mud-tabs-panels::-webkit-scrollbar-track,
.mud-dialog-content::-webkit-scrollbar-track {
    background: transparent;
}
.mud-table-container::-webkit-scrollbar-thumb,
.mud-tabs-panels::-webkit-scrollbar-thumb,
.mud-dialog-content::-webkit-scrollbar-thumb {
    background: rgba(58, 38, 24, 0.20);
    border-radius: 5px;
}
.mud-table-container::-webkit-scrollbar-thumb:hover,
.mud-tabs-panels::-webkit-scrollbar-thumb:hover,
.mud-dialog-content::-webkit-scrollbar-thumb:hover {
    background: rgba(58, 38, 24, 0.34);
}

/* ---- Chart-of-accounts tree (grouped by type, nested by parent) --------- */
.coa-tree {
    padding: 0.25rem 0.25rem 0.5rem;
    font-family: 'Inter', system-ui, sans-serif;
}
/* In a fill container (tree view) the tree scrolls below the pinned bar, so the
   scrollbar runs alongside the tree only — not the action bar. */
.erp-shell .erp-fill > .coa-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.coa-group { margin-bottom: 0.75rem; }
.coa-group-header {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--zg-muted);
    padding: 0.5rem 0.5rem 0.3rem;
    border-bottom: 1px solid var(--zg-border);
    margin-bottom: 0.15rem;
}
.coa-count {
    margin-left: 0.45rem;
    color: var(--zg-border-strong);
    font-weight: 600;
}
.coa-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.10rem 0.5rem;
    line-height: 1.25;
    min-height: 0;
    border-radius: 6px;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(232, 225, 211, 0.5);
}
.coa-row:hover { background: rgba(217, 173, 109, 0.10); }
.coa-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ziggis-espresso);
    min-width: 3.5em;
}
.coa-name { color: #3a2618; }
.coa-name.coa-rollup { font-weight: 700; }
/* Rollup rows have no link to post to, so their number/name fall back to .coa-row's size while every other
   row picks up the link's body1 (16px) — pin both so a parent never renders smaller than its own children. */
.coa-row .coa-num,
.coa-row .coa-name { font-size: 1rem; }
/* A rollup's amount is the SUM of the rows beneath it, not a posted balance: tinted band + left rule + muted
   text so it reads as a subtotal header. The wash is primary-on-surface (espresso in light, tan in dark), NOT
   --zg-surface-soft — that's the grid's hover colour, and a hovered row must not read as a rollup. */
.coa-row.coa-rollup-row {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    box-shadow: inset 3px 0 0 0 var(--zg-border-strong);
    border-bottom-color: var(--zg-border-strong);
}
.coa-row.coa-rollup-row:hover { background: rgba(var(--mud-palette-primary-rgb), 0.13); }
.coa-rollup-row .coa-num,
.coa-rollup-row .coa-name.coa-rollup { color: var(--zg-muted); }
.coa-rollup-row .coa-balance { font-weight: 600; }
.coa-spacer { flex: 1 1 auto; }
.coa-normal {
    color: var(--zg-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}
/* ADR-0107 — muted balance, fixed min-width + tabular so the column lines up across rows. */
.coa-balance {
    min-width: 7.5em;
    text-align: right;
    color: var(--zg-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* #368 — constant-width action slot sized to hold BOTH icons (printer + edit ≈ 104px), so the slot is the
   same width whether or not the bank-only printer icon is present and the balance column never shifts.
   flex-basis must be >= the two-icon width or two-icon rows grow past it (measured: one icon 75px, two 104px). */
.coa-actions {
    flex: 0 0 110px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* Grid mirror of the tree's rollup band. The leading .erp-grid-v2 is only there for specificity — the grid's
   own `tbody tr:hover td` rule sits further down this file and would otherwise win the tie. */
.erp-grid-v2 .erp-grid-v2-table tbody tr.zg-coa-rollup td { background: rgba(var(--mud-palette-primary-rgb), 0.06); }
.erp-grid-v2 .erp-grid-v2-table tbody tr.zg-coa-rollup:hover td { background: rgba(var(--mud-palette-primary-rgb), 0.13); }
.erp-grid-v2 .erp-grid-v2-table tbody tr.zg-coa-rollup td:first-child { box-shadow: inset 3px 0 0 0 var(--zg-border-strong); }
/* Number + name of a rollup row: no link, so size them to the link's body1 and mute them like the tree. */
.coa-rollup-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--zg-muted);
}

/* ---- Ingredient-availability row shading (Menu grid, B.iii) -------------- */
/* The Menu grid is an ErpGrid (MudDataGrid), so rows are tr.mud-table-row and the
   tint must land on the cells (> td) to beat zebra-striping + hover. Hue tracks the
   theme via the *-rgb palette tokens (present in this MudBlazor 9.4 build). The
   HierarchyColumn child row (recipe card) is intentionally not tinted. */
.mud-table-row.zg-row-out > td        { background-color: rgba(var(--mud-palette-error-rgb),   0.14) !important; }
.mud-table-row.zg-row-out:hover > td  { background-color: rgba(var(--mud-palette-error-rgb),   0.22) !important; }
.mud-table-row.zg-row-low > td        { background-color: rgba(var(--mud-palette-warning-rgb), 0.16) !important; }
.mud-table-row.zg-row-low:hover > td  { background-color: rgba(var(--mud-palette-warning-rgb), 0.24) !important; }

/* ---- Top-10 recent-sellers highlight (Menu grid default rank order) ------- */
/* A subtle warm tint so the last-7-days top sellers stand out without competing
   with the stronger out/low stock cues above (those win in RowClassFunc). A left
   accent bar reads as "featured" rather than "warning". */
.mud-table-row.zg-row-top > td        { background-color: rgba(var(--mud-palette-warning-rgb), 0.07) !important; }
.mud-table-row.zg-row-top:hover > td  { background-color: rgba(var(--mud-palette-warning-rgb), 0.13) !important; }
.mud-table-row.zg-row-top > td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-warning); }

/* ADR-0066 P8 / ADR-0070 P3 — palette ?focus row-preselect: the scrolled-to row flashes once. */
.mud-table-row.zg-focus-row > td,
.coa-row.zg-focus-row { animation: zg-focus-flash 2.2s ease-out 1; }
@keyframes zg-focus-flash {
    0%   { background-color: rgba(var(--mud-palette-primary-rgb), 0.32); }
    100% { background-color: transparent; }
}
/* Item 867: "Classify…" flashes the row's Subject picker (focus-row.js focusSubject). */
.zg-subject-row.zg-flash { animation: zg-focus-flash 2.2s ease-out 1; border-radius: 8px; }

/* Rank badge (#1..#10) in the Menu-item cell — compact, doesn't push the row taller. */
.zg-rank-badge.mud-chip { height: 20px; font-weight: 700; }

/* ---- SidePanel (shared right slide-out, z-index 1391): lift MudBlazor popovers
   (selects, date-pickers, menus — default z 1201) ABOVE the panel so form controls
   inside it open on top instead of behind. This also keeps them above dialogs,
   which is the correct stacking. ---- */
.mud-popover { z-index: 1402 !important; }

/* ---- AppRibbon command-bar family (ADR-0026) — Aedium .aed-cust-btn restated in coffee.
   Icon-over-label tile baked in so call sites stop hand-rolling the flex-column blob. ---- */
.app-ribbon { display:flex; flex-wrap:wrap; align-items:stretch; gap:5px; }
.app-ribbon-group { display:flex; flex-direction:column; gap:3px; }
/* Separator drawn between adjacent groups via ::before — no index tracking. */
.app-ribbon-group + .app-ribbon-group::before {
    content:""; position:absolute; left:-5px; top:0; bottom:0;
    width:1px; background:var(--zg-border-strong);
}
.app-ribbon-group + .app-ribbon-group { position:relative; margin-left:5px; }
.app-ribbon-group-tiles { display:flex; flex-wrap:wrap; gap:5px; align-items:stretch; }
.app-ribbon-group-cap { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
    color:var(--zg-muted); padding:0 2px; }
.app-ribbon-sep { width:1px; align-self:stretch; min-height:34px; background:var(--zg-border-strong); margin:0 5px; }
.app-ribbon-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-width:58px; padding:5px 9px; border:1px solid var(--zg-border-strong); border-radius:var(--zg-radius-sm);
    background:var(--zg-surface); color:#3a2618; cursor:pointer; line-height:1.15; white-space:nowrap;
    text-decoration:none; font-family:inherit;
    transition:background-color .12s, border-color .12s, color .12s; }
.app-ribbon-tile:hover:not(:disabled){ background:var(--zg-surface-soft); border-color:#b89368; color:#2A1A10; }
.app-ribbon-tile:disabled{ opacity:.55; cursor:not-allowed; }
.app-ribbon-tile .app-ribbon-ico{ font-size:16px; line-height:1; }       /* MudIcon Size.Small sits here */
.app-ribbon-tile .app-ribbon-lbl{ font-size:11px; font-weight:500; }
.app-ribbon-tile--primary{ background:#4a2613; border-color:#4a2613; color:#fff; }
.app-ribbon-tile--primary:hover:not(:disabled){ background:#5A4030; border-color:#5A4030; color:#fff; }
.app-ribbon-tile--danger{ background:var(--zg-surface); border-color:var(--zg-border-strong); color:#c0392b; }
.app-ribbon-tile--danger:hover:not(:disabled){ background:#fdf3f1; border-color:#e0a99f; color:#a5281b; }

/* ============================================================================
   ErpGridV2 — Mud-free grid (pure HTML table).
   Ported from Aedium AedGridV2, adapted to Ziggis espresso palette.
   ============================================================================ */

.erp-grid-v2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 0;
    background: var(--zg-surface);
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius);
    box-shadow: var(--zg-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.erp-grid-v2:hover { border-color: var(--zg-border-strong); }


/* Unpaged — auto-height (size to content, no fill). Applied when EnablePaging=false. */
.erp-grid-v2--auto { flex: none; min-height: auto; }
.erp-grid-v2--auto .erp-grid-v2-body { flex: none; min-height: auto; overflow-y: visible; }

/* QuickList — chrome-free embed for dashboards / side panels */
.erp-grid-v2--quick {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    flex: none;
    min-height: auto;
}
.erp-grid-v2--quick .erp-grid-v2-body { flex: none; min-height: auto; overflow-y: visible; }
.erp-grid-v2--quick .erp-grid-v2-table thead th {
    font-size: 0.68rem;
    padding: 4px 8px;
    color: var(--zg-muted);
}
.erp-grid-v2--quick .erp-grid-v2-table tbody td {
    padding: 2px 8px;
    font-size: 0.78rem;
    line-height: 1.3;
}

/* ---- Toolbar (three-section: left=filters, center=search, right=settings+commands) ---- */
/* 1485: an overfull bar wraps instead of scrolling. Basis 0 keeps the search centred; fit-content stops a side shrinking
   under its content (capped at the bar, where its items wrap). Left's overflow-x is toggle-fit.js's measuring box. */
.erp-grid-v2-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    row-gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--zg-border);
    background: var(--zg-surface);
    flex-wrap: wrap;
}
.erp-grid-v2-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    row-gap: 6px;
    flex: 1 1 0;
    flex-wrap: wrap;
    min-width: fit-content;
    overflow-x: auto;
    scrollbar-width: thin;
}
/* Injected controls keep their natural width. Without this they are flex items with the default
   shrink:1, so a button in ToolbarLeft gets CRUSHED and its label clipped mid-word ("lark 0 as cleared")
   instead of the bar wrapping (1485). (Owner 2026-07-26.) */
.erp-grid-v2-toolbar-left > *,
.erp-grid-v2-toolbar-right > * { flex: 0 0 auto; }
.erp-grid-v2-toolbar-left::-webkit-scrollbar { height: 6px; }
.erp-grid-v2-toolbar-left::-webkit-scrollbar-thumb { background: rgba(74,38,19,0.18); border-radius: 3px; }
.erp-grid-v2-toolbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.erp-grid-v2-toolbar-right { display: flex; align-items: center; gap: 10px; row-gap: 6px; flex: 1 1 0; flex-wrap: wrap; min-width: fit-content; justify-content: flex-end; }
/* ---- #515: ONE control metric for the whole toolbar ----
   This bar is on nearly every screen, so a mismatch here reads as sloppiness everywhere. The reference is
   .erp-grid-v2-search-input below: height var(--app-control-h), radius var(--zg-radius-sm).

   The old rule normalized ONE class (.mud-button-root) and set height only, so buttons complied while the
   Ant-wrapped controls and toggle groups each kept their own height AND radius — radius was never unified at
   all. Everything a wrapper can render into a toolbar slot is listed here.

   SCOPED TO .erp-grid-v2-toolbar deliberately: the same controls legitimately differ inside forms and fly-ins,
   where they sit in a 40px form rhythm rather than a 36px toolbar.

   !important is load-bearing, not laziness: AntDesign ships its own heights/radii at high specificity from a
   stylesheet we don't control, and without it .ant-select-selector keeps 32px. */
.erp-grid-v2-toolbar .mud-button-root,
.erp-grid-v2-toolbar .ant-select-selector,
.erp-grid-v2-toolbar .ant-picker,
.erp-grid-v2-toolbar .ant-input,
.erp-grid-v2-toolbar .ant-input-affix-wrapper,
.erp-grid-v2-toolbar .ant-btn,
.erp-grid-v2-toolbar .mud-toggle-group,
.erp-grid-v2-toolbar .erp-grid-v2-search-input {
    height: var(--app-control-h) !important;
    min-height: var(--app-control-h) !important;
    border-radius: var(--zg-radius-sm) !important;
    box-sizing: border-box;
}
/* Ant centres its select text with line-height, which a forced height would otherwise leave sitting high. */
.erp-grid-v2-toolbar .ant-select-single .ant-select-selector .ant-select-selection-item,
.erp-grid-v2-toolbar .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
.erp-grid-v2-toolbar .ant-select-single .ant-select-selector .ant-select-selection-search-input {
    height: calc(var(--app-control-h) - 2px) !important;
    line-height: calc(var(--app-control-h) - 2px) !important;
}
/* Number field in a toolbar slot (item 1043): ant-theme.css sizes it to the 40px form rhythm — bring it to the bar's metric. */
.erp-grid-v2-toolbar .ant-input-number {
    height: var(--app-control-h) !important;
    border-radius: var(--zg-radius-sm) !important;
    box-sizing: border-box;
}
.erp-grid-v2-toolbar .ant-input-number .ant-input-number-input { height: calc(var(--app-control-h) - 2px) !important; }
/* A toggle GROUP is one control; its items fill it rather than each claiming their own height. The group owns
   the outer radius, so only the end items round — a pill made of pills looks like a mistake. */
.erp-grid-v2-toolbar .mud-toggle-group .mud-toggle-item {
    height: 100%;
    border-radius: 0;
    white-space: nowrap;      /* #515: labels crushed to nothing as the bar tightened */
}
.erp-grid-v2-toolbar .mud-toggle-group .mud-toggle-item:first-child {
    border-top-left-radius: var(--zg-radius-sm); border-bottom-left-radius: var(--zg-radius-sm);
}
.erp-grid-v2-toolbar .mud-toggle-group .mud-toggle-item:last-child {
    border-top-right-radius: var(--zg-radius-sm); border-bottom-right-radius: var(--zg-radius-sm);
}
.erp-grid-v2-toolbar .mud-button-root { white-space: nowrap; }
/* The gear/refresh icons are the one deliberate exception — square, chrome-less, sized to the same height so
   they still line up with everything else. */
.erp-grid-v2-toolbar .erp-grid-v2-gear {
    height: var(--app-control-h);
    min-height: var(--app-control-h);
    border-radius: var(--zg-radius-sm);
}
@media (max-width: 640px) { .erp-grid-v2-toolbar { flex-wrap: wrap; } }

/* Gear / refresh — plain icon, no button chrome */
.erp-grid-v2-gear {
    color: var(--zg-muted);
    cursor: pointer;
    user-select: none;
    transition: color 0.12s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    min-height: var(--app-control-h);
}
.erp-grid-v2-gear:hover { color: var(--ziggis-espresso); }

/* ---- View toggle (List / Card) ---- */
.erp-grid-v2-view-toggle {
    display: inline-flex;
    height: var(--app-control-h);
    box-sizing: border-box;
    border: 1px solid var(--zg-border-strong);
    border-radius: var(--zg-radius-sm);
    overflow: hidden;
}
.erp-grid-v2-view-btn {
    background: var(--zg-surface);
    color: rgba(74,38,19,0.75);
    border: none;
    border-right: 1px solid var(--zg-border-strong);
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, color 0.12s;
}
.erp-grid-v2-view-btn:last-child { border-right: none; }
.erp-grid-v2-view-btn:hover:not(.is-active) { background: var(--zg-surface-soft); }
.erp-grid-v2-view-btn.is-active { background: var(--ziggis-espresso); color: var(--ziggis-cream); }

/* ---- Column chooser popover ---- */
.erp-grid-v2-col-chooser { position: relative; }
.erp-grid-v2-popover-scrim { position: fixed; inset: 0; z-index: 60; }
.erp-grid-v2-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    z-index: 61;
    background: var(--zg-surface);
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius);
    box-shadow: var(--zg-shadow-md);
    padding: 8px 0;
}
.erp-grid-v2-popover-header {
    padding: 4px 12px 8px;
    font-size: 11px;
    color: var(--zg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom: 1px solid var(--zg-border);
}
.erp-grid-v2-popover-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 280px;
    overflow-y: auto;
}
.erp-grid-v2-popover-list li label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.erp-grid-v2-popover-list li label:hover { background: var(--zg-surface-soft); }
.erp-grid-v2-popover-list li input[type=checkbox] { cursor: pointer; accent-color: var(--ziggis-espresso); }
.erp-grid-v2-popover-footer { padding: 4px 8px; border-top: 1px solid var(--zg-border); text-align: right; }
.erp-grid-v2-popover-reset {
    background: transparent;
    color: var(--ziggis-espresso);
    border: none;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
}
.erp-grid-v2-popover-reset:hover { background: rgba(74,38,19,0.08); }

/* ---- Search ---- */
.erp-grid-v2-search { display: inline-flex; align-items: center; position: relative; }
.erp-grid-v2-search-input {
    width: 220px;
    height: var(--app-control-h);
    box-sizing: border-box;
    padding: 4px 30px 4px 10px;   /* right room for the clear (x) */
    border: 1px solid var(--zg-border-strong);
    border-radius: var(--zg-radius-sm);
    font-size: 13px;
    color: rgba(0,0,0,0.85);
    background: var(--zg-surface);
    transition: border-color 0.12s, box-shadow 0.12s;
    font-family: inherit;
}
/* #78: explicit, consistent in-field clear (replaces the inconsistent native type=search X) */
.erp-grid-v2-search-clear {
    position: absolute;
    right: 6px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(74,38,19,0.10); color: var(--zg-muted);
    font-size: 10px; line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.erp-grid-v2-search-clear:hover { background: rgba(74,38,19,0.20); color: var(--ziggis-espresso); }
.erp-grid-v2-search-input:focus {
    outline: none;
    border-color: var(--ziggis-espresso);
    box-shadow: 0 0 0 2px rgba(74,38,19,0.12);
}
.erp-grid-v2-search-input::placeholder { color: rgba(0,0,0,0.35); }

/* ---- Loading indicator ---- */
.erp-grid-v2-loading {
    height: 3px;
    width: 100%;
    background: var(--zg-border);
    overflow: hidden;
    flex-shrink: 0;
}
.erp-grid-v2-loading-bar {
    height: 100%;
    width: 30%;
    background: var(--ziggis-espresso);
    border-radius: 2px;
    animation: erp-loading-slide 1.2s ease-in-out infinite;
}
@keyframes erp-loading-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(433%); }
}

/* ---- Body (scrollable region between toolbar and footer) ---- */
/* Basis AUTO, not 0 (items 1373/1383): a grid whose parent isn't a fixed-height flex column sizes to its content,
   and a 0 basis collapsed the body to nothing ("Showing 1–8 of 8", no rows). In a fill parent it still shrinks/scrolls. */
.erp-grid-v2-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--zg-surface);
}
.erp-grid-v2-body::-webkit-scrollbar { width: 8px; height: 8px; }
.erp-grid-v2-body::-webkit-scrollbar-track { background: transparent; }
.erp-grid-v2-body::-webkit-scrollbar-thumb { background: rgba(74,38,19,0.18); border-radius: 4px; }
.erp-grid-v2-body::-webkit-scrollbar-thumb:hover { background: rgba(74,38,19,0.3); }

/* ---- Table (list view) ---- */
.erp-grid-v2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--zg-surface);
    table-layout: auto;
}
.erp-grid-v2-table thead th {
    background: var(--zg-surface-soft);
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--zg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    user-select: none;
}
.erp-grid-v2-table tbody td {
    padding: 5px 10px;
    border-top: 1px solid var(--zg-border);
    vertical-align: middle;
    white-space: nowrap;
}
.erp-grid-v2-table tbody tr:hover td {
    background: var(--zg-surface-soft);
}
.erp-grid-v2-table .amt { text-align: right; font-variant-numeric: tabular-nums; }
/* Shared "inactive/off" row style (RowClassFunc => "erp-row-inactive"; item 1305): muted text, dimmed chips; actions and switches stay full strength. */
.erp-grid-v2-table tbody tr.erp-row-inactive > td:not(.erp-grid-v2-actions-cell) { color: var(--zg-text-muted); }
.erp-grid-v2-table tbody tr.erp-row-inactive > td:not(.erp-grid-v2-actions-cell) :is(.zg-chip, .zg-setup-chip, .status-chip, img) { opacity: 0.55; }
/* Owner 2026-09-29: erp-grid-resize.js fit() sizes each unset column to its content once (text capped), then the table
   locks to fixed layout — widths are exact, a drag moves a column both ways, and long text ends in … instead of stretching it.
   The grid's "Wrap text" option (per user + grid) lets rows grow to show everything instead. */
.erp-grid-v2-table.is-fitted { table-layout: fixed; }
.erp-grid-v2-table > tbody > tr > td { overflow: hidden; text-overflow: ellipsis; }
.erp-grid-v2-table > tbody > tr > td.erp-grid-v2-actions-cell,
.erp-grid-v2-table > tbody > tr > td.erp-grid-v2-expander-cell,
.erp-grid-v2-table > tbody > tr > td.erp-grid-v2-expansion-cell,
.erp-grid-v2-table > tbody > tr > td.erp-grid-v2-empty { overflow: visible; text-overflow: clip; }
.erp-grid-v2--wrap .erp-grid-v2-table > tbody > tr > td:not(.erp-grid-v2-actions-cell) { white-space: normal; overflow-wrap: anywhere; }
.erp-grid-v2--wrap .ledger-memo { white-space: normal; }
/* A named grid without a toolbar: column menu at the end of the header row, opening an inline strip (the grid clips popovers). */
.erp-grid-v2-table thead th.erp-grid-v2-th--menu { padding: 4px 6px; text-align: center; }
.erp-grid-v2-th--menu .erp-grid-v2-gear { min-height: 0; }
.erp-grid-v2-table > tbody > tr > td.erp-grid-v2-menu-cell { padding: 0; }
.erp-grid-v2-inline-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; font-size: 13px;
                           background: var(--zg-surface-soft); border-bottom: 1px solid var(--zg-border); }
.erp-grid-v2-inline-menu label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.erp-grid-v2-inline-menu .erp-grid-v2-inline-wrap { font-weight: 600; }
.erp-grid-v2-inline-label { color: var(--zg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.erp-grid-v2-inline-close { margin-left: auto; border: none; background: none; color: var(--zg-muted); cursor: pointer; font-size: 13px; }
.erp-grid-v2-inline-close:hover { color: var(--zg-text); }
.erp-grid-v2-popover-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer;
                              border-bottom: 1px solid var(--zg-border); }
/* ADR-0166 §6.3: non-zero NNN reconciliation variance (ledger↔GL drift). */
.nnn-drift { color: var(--mud-palette-error); font-weight: 600; }

/* ADR-0183 budget grid — group subtotal + grand-total rows (applied via ErpGridV2 RowClassFunc) + variance colour +
   the drill affordance. Tints use theme vars so light/dark both work. */
.erp-grid-v2-table tr.budget-group-row td {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--zg-border-strong);
}
.erp-grid-v2-table tr.budget-total-row td {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    font-weight: 700;
    border-top: 2px solid var(--zg-border-strong);
}
.budget-under { color: var(--mud-palette-success); font-variant-numeric: tabular-nums; }
.budget-over  { color: var(--mud-palette-error);   font-variant-numeric: tabular-nums; }
.budget-drill { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.budget-months-table { min-width: 640px; }
.budget-months-table td.amt, .budget-months-table th.amt { text-align: right; font-variant-numeric: tabular-nums; }
.erp-grid-v2-table .ctr { text-align: center; }
.erp-grid-v2-table .wrap { white-space: normal; }

/* ADR-0183 C4 — the plain app-table views (overview / cash-to-finish) reuse the grid's total-row + drill grammar. */
.app-table tr.budget-total-row td {
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    font-weight: 700;
    border-top: 2px solid var(--zg-border-strong);
}
.budget-overview-table { min-width: 900px; }
.cash-to-finish-table { min-width: 820px; }
.app-table tr.cash-shortfall-row td { background: rgba(var(--mud-palette-error-rgb), 0.07); }

/* 914/1902: income statement (PnlStatementTable) — the approved sample's look on theme colours. */
.pnl-wrap { overflow-x: auto; }
.app-table.pnl-statement { font-size: 13px; font-variant-numeric: tabular-nums; }
.pnl-statement thead th { text-align: right; }
.pnl-statement thead th:first-child { text-align: left; }
.pnl-statement thead tr.pnl-grp th { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--mud-palette-text-primary); font-weight: 700; border-bottom: 0; text-align: center; }
.pnl-statement thead tr.pnl-grp th.pnl-py { color: var(--mud-palette-text-secondary); font-weight: 600; }
.pnl-statement .pnl-sub { font-size: 11px; font-weight: 400; color: var(--mud-palette-text-secondary); margin-left: 4px; }
.pnl-statement td { padding: 5px 8px; }
.pnl-statement td.pnl-n { text-align: right; width: 92px; white-space: nowrap; }
.pnl-statement td.pnl-pc { text-align: right; width: 62px; color: var(--mud-palette-text-secondary); font-size: 12px; padding-right: 14px; white-space: nowrap; }
.pnl-statement td.pnl-py { color: var(--mud-palette-text-secondary); }
.pnl-statement .pnl-brk { border-left: 1px solid var(--zg-border); }
.pnl-statement .pnl-lbl { white-space: nowrap; }
.pnl-statement .pnl-no { display: inline-block; width: 42px; color: var(--mud-palette-text-secondary); font-size: 12px; }
.pnl-statement .pnl-car { display: inline-block; width: 14px; margin-left: -16px; color: var(--mud-palette-text-secondary); font-size: 11px; }
.pnl-statement sup.pnl-dg, .pnl-foot sup.pnl-dg { color: var(--mud-palette-info); margin-left: 2px; }
.pnl-statement td.pnl-neg { color: var(--mud-palette-error) !important; }
.pnl-statement tr.pnl-rc, .pnl-statement tr.pnl-rh { cursor: pointer; }
.pnl-statement tr.pnl-section td { font-weight: 700; padding-top: 14px; border-bottom: 1px solid var(--zg-border-strong); color: var(--mud-palette-primary); }
.pnl-statement tr.pnl-total td { border-top: 1px solid var(--zg-border-strong); font-weight: 600; }
.pnl-statement tr.pnl-rs td { font-weight: 600; }
.pnl-statement tr.pnl-rs td.pnl-n { box-shadow: inset 0 1px 0 var(--zg-border); }
.pnl-statement tr.pnl-computed td { background: rgba(var(--mud-palette-primary-rgb), 0.08); border-top: 2px solid var(--zg-border-strong); font-weight: 700; }
.pnl-statement tr.pnl-computed.pnl-gp td { background: rgba(var(--mud-palette-primary-rgb), 0.04); font-weight: 600; }
.pnl-statement tr.pnl-computed.pnl-band td { background: rgba(var(--mud-palette-secondary-rgb), 0.22); }
.pnl-statement tr.pnl-computed.pnl-band td:first-child { box-shadow: inset 4px 0 0 var(--mud-palette-secondary); }
.pnl-statement tr.pnl-computed.pnl-net td { font-size: 14.5px; border-bottom: 3px double var(--zg-border-strong); }
.pnl-foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 4px; font-size: 12px; color: var(--mud-palette-text-secondary); border-top: 1px solid var(--zg-border); }
/* 1954: summary tiles + lender lines (sample 1902) */
.pnl-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pnl-kpi { border: 1px solid var(--zg-border); border-radius: 8px; padding: 8px 12px; min-width: 150px; }
.pnl-kpi > span:first-child { display: block; font-size: 11px; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.pnl-kpi b { font-size: 19px; font-variant-numeric: tabular-nums; }
.pnl-kpi small { display: block; font-size: 12px; color: var(--mud-palette-text-secondary); }
.pnl-kpi.pnl-prime { border-left: 4px solid var(--mud-palette-secondary); }
.pnl-kpi.pnl-guides { flex: 1; }
.pnl-kpi .pnl-guide { margin: 4px 4px 0 0; }
.pnl-lender { margin: 10px 0; border: 1px dashed var(--zg-border-strong); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; background: rgba(var(--mud-palette-primary-rgb), 0.02); }
.pnl-lender table { border-collapse: collapse; margin-top: 4px; }
.pnl-lender td { padding: 3px 10px 3px 0; font-variant-numeric: tabular-nums; }
.pnl-lender td.pnl-n { text-align: right; min-width: 90px; }
.pnl-lender tr.pnl-lender-sub td { color: var(--mud-palette-text-secondary); font-size: 11.5px; }

/* 1507: balance sheet — earnings lines inside Equity; both grand totals pinned to their column foot so they align. */
.bs-statement > .bs-col { display: flex; flex-direction: column; min-width: 0; }
.bs-statement > .bs-col > * { min-width: 0; }
/* A nowrap account name made the table wider than its half — it ran under the other column. Names wrap; figures never do. */
.bs-table > tbody > tr > td { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.bs-table > tbody > tr > td.amt { white-space: nowrap; width: 1%; }
.bs-statement .bs-total { padding: 5px 10px; border-top: 1px solid var(--zg-border-strong); }
.bs-statement .bs-total > :first-child { min-width: 0; overflow-wrap: anywhere; }
.bs-statement .bs-total > :last-child { white-space: nowrap; }
.bs-statement .bs-grand-total { margin-top: auto; padding: 8px 10px; border-top: 1px solid var(--zg-border-strong); border-bottom: 4px double var(--zg-border-strong); font-size: 1.05rem; }
.bs-statement .bs-grand-total .mud-typography { font-size: inherit; }
.bs-statement tr.bs-computed td { background: rgba(var(--mud-palette-primary-rgb), 0.05); }
.bs-statement tr.bs-neg td.amt { color: var(--mud-palette-error); }
.bs-statement .bs-note { margin-left: 8px; font-size: 0.8em; color: var(--mud-palette-text-secondary); white-space: nowrap; }
/* 1624: cash-flow statement — line captions, the expandable bill detail, the non-cash note */
.cf-table > tbody > tr > td { white-space: normal; vertical-align: top; }
.cf-table > tbody > tr > td.amt { white-space: nowrap; width: 1%; }
.cf-cap { display: block; font-size: 12px; color: var(--mud-palette-text-secondary); }
.cf-table tr.cf-detail td { border-top: 0; padding-top: 0; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.cf-table tr.cf-detail td:first-child { padding-left: 40px; }

/* Header cell: sortable + draggable + resizable.
   nowrap keeps the label + sort arrow + filter magnifier on ONE line — the tbody td already nowraps, so
   without this the header alone wrapped the 🔍 under the label ("LINES / 🔍"). table-layout:auto widens
   the column to fit instead. */
.erp-grid-v2-th { position: relative; cursor: pointer; white-space: nowrap; }
.erp-grid-v2-th--actions { cursor: default; }
.erp-grid-v2-th--dragging { opacity: 0.45; }
.erp-grid-v2-th--drop { box-shadow: inset 3px 0 0 0 var(--ziggis-tan); }
.erp-grid-v2-header-label { user-select: none; }
/* #462: --ziggis-espresso is a BRAND constant and does not flip, so the sort arrow was espresso-on-
   espresso in dark on EVERY grid in the app. currentColor follows the header text in both themes. */
.erp-grid-v2-sort { margin-left: 4px; color: currentColor; font-size: 10px; }

/* ADR-0105: Column filter UI */
.erp-grid-v2-filter-btn {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    font-size: 12px; opacity: .4; vertical-align: middle;
}
.erp-grid-v2-filter-btn:hover { opacity: .8; }
.erp-grid-v2-filter-btn.active { opacity: 1; color: var(--ziggis-espresso); }
.erp-grid-v2-filter-popover {
    position: absolute; top: 100%; left: 0; z-index: 10;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px; padding: 6px; display: flex; gap: 4px; align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.erp-grid-v2-filter-input {
    font-size: 12px; padding: 3px 6px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px; background: transparent; color: var(--mud-palette-text-primary); min-width: 100px;
}
/* ADR-0105: typed-filter operator dropdown, shares the popover row with the value input */
.erp-grid-v2-filter-op {
    font-size: 12px; padding: 3px 6px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
}
.erp-grid-v2-filter-clear {
    font-size: 11px; padding: 2px 6px; border: none; border-radius: 3px;
    background: var(--mud-palette-action-default-hover); cursor: pointer; color: var(--mud-palette-text-secondary);
}
/* ADR-0105: filter chip bar */
.erp-grid-v2-filter-chips {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    align-items: center;
}
.erp-grid-v2-filter-chip {
    font-size: 11px; padding: 2px 8px; border-radius: 12px;
    background: var(--mud-palette-action-default-hover);
    display: inline-flex; align-items: center; gap: 4px;
}
.erp-grid-v2-filter-chip strong { font-weight: 600; }
.erp-grid-v2-filter-chip-clear {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 12px; color: var(--mud-palette-text-secondary); line-height: 1;
}
.erp-grid-v2-filter-chip-clear:hover { color: var(--mud-palette-error); }
.erp-grid-v2-filter-chip-clearall {
    font-size: 11px; padding: 2px 8px; border: none; cursor: pointer;
    color: var(--mud-palette-text-secondary); background: none; text-decoration: underline;
}

/* Resize handle. touch-action:none lets Pointer Capture own the gesture on touch/pen
   (otherwise the browser steals the move for scrolling). */
.erp-grid-v2-resize-handle {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 7px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    background: transparent;
    transition: background 0.12s;
}
.erp-grid-v2-th:hover .erp-grid-v2-resize-handle { background: rgba(74,38,19,0.18); }
.erp-grid-v2-resize-handle:hover,
.erp-grid-v2-resize-handle.is-resizing { background: var(--ziggis-espresso) !important; }
/* During a drag: lock the resize cursor page-wide and kill text selection. */
body.erp-grid-resizing, body.erp-grid-resizing * { cursor: col-resize !important; user-select: none !important; }

/* Row actions + empty state */
.erp-grid-v2-actions-cell { white-space: nowrap; }
.erp-grid-v2-row-clickable { cursor: pointer; }
.erp-grid-v2-row-clickable:hover > td { background: var(--mud-palette-action-default-hover); }
.erp-grid-v2-empty { padding: 24px 12px; text-align: center; color: var(--zg-muted); }

/* ---- Card view ---- */
.erp-grid-v2-card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 12px;
}
.erp-grid-v2-card-wrapper { display: contents; }

/* ---- Row expansion ---- */
.erp-grid-v2-expander-cell { width: 36px; text-align: center; padding: 4px !important; }
.erp-grid-v2-expander {
    border: 0;
    background: transparent;
    color: var(--zg-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.erp-grid-v2-expander:hover {
    background: rgba(74,38,19,0.08);
    color: var(--ziggis-espresso);
}
.erp-grid-v2-caret {
    display: inline-block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
    transition: transform 0.15s ease;
}
.erp-grid-v2-caret.open {
    transform: rotate(90deg);
}
.erp-grid-v2-expansion-row td.erp-grid-v2-expansion-cell {
    background: rgba(74,38,19,0.03);
    border-top: 0;
    padding: 10px 16px 14px;
}
/* The grid's `tbody td { white-space: nowrap }` also matches the expansion cell AND every td of a
   detail table nested inside it — blowing a long banner / line table out to thousands of px and
   scrolling the whole grid horizontally. Let the expansion body + TEXT cells wrap to absorb it. */
.erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell,
.erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell td {
    white-space: normal;
    overflow-wrap: anywhere;
}
/* ...but headers + numeric/money (.amt) cells must stay on ONE line: `overflow-wrap:anywhere` was
   shattering "Qty"→"QT Y" and "$665.00"→"$665. 00" in squeezed drill (app-table) / journal
   (erp-grid-v2-table) line tables nested under expansions. Keep them nowrap + tabular so text
   columns absorb the squeeze and the .erp-grid-v2-body scrolls horizontally only as a last resort. */
.erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell th,
.erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell td.amt,
.erp-grid-v2-table tbody td.erp-grid-v2-expansion-cell .amt {
    white-space: nowrap;
    overflow-wrap: normal;
    font-variant-numeric: tabular-nums;
}

/* ---- Row-class shading (stock status, top seller) ---- */
.erp-grid-v2-table tr.zg-row-out > td        { background-color: rgba(var(--mud-palette-error-rgb),   0.14); }
.erp-grid-v2-table tr.zg-row-out:hover > td  { background-color: rgba(var(--mud-palette-error-rgb),   0.22); }
.erp-grid-v2-table tr.zg-row-low > td        { background-color: rgba(var(--mud-palette-warning-rgb), 0.16); }
.erp-grid-v2-table tr.zg-row-low:hover > td  { background-color: rgba(var(--mud-palette-warning-rgb), 0.24); }
.erp-grid-v2-table tr.zg-row-top > td        { background-color: rgba(var(--mud-palette-warning-rgb), 0.07); }
.erp-grid-v2-table tr.zg-row-top:hover > td  { background-color: rgba(var(--mud-palette-warning-rgb), 0.13); }
.erp-grid-v2-table tr.zg-row-top > td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-warning); }

/* Killed (Void/Ignored) rows — present but visibly dead. Deliberately NEUTRAL, not the error tint: a voided
   bill is a decision, not a problem. Chips are atomic inlines, so the strike doesn't propagate into them. */
.erp-grid-v2-table tr.zg-row-killed > td        { color: var(--zg-muted); opacity: .62; text-decoration: line-through; }
.erp-grid-v2-table tr.zg-row-killed:hover > td  { opacity: .85; }
.erp-grid-v2-table tr.zg-row-killed > td:first-child { box-shadow: inset 3px 0 0 0 var(--zg-muted); }

/* ---- Footer / Pager ---- */
.erp-grid-v2-footer {
    border-top: 1px solid var(--zg-border);
    background: var(--zg-surface-soft);
    padding: 10px 16px;
    color: var(--zg-muted);
    font-size: 12px;
    font-feature-settings: 'tnum';
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.erp-grid-v2-pager { display: flex; align-items: center; gap: 6px; }
.erp-grid-v2-pager-btn {
    border: 1px solid var(--zg-border-strong);
    background: var(--zg-surface);
    color: rgba(74,38,19,0.7);
    border-radius: var(--zg-radius-sm);
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    min-width: 24px;
}
.erp-grid-v2-pager-btn:hover:not(:disabled) {
    border-color: var(--ziggis-espresso);
    color: var(--ziggis-espresso);
}
.erp-grid-v2-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.erp-grid-v2-pager-label { padding: 0 6px; color: rgba(74,38,19,0.7); font-weight: 500; }
.erp-grid-v2-pager-sep { color: rgba(74,38,19,0.2); padding: 0 2px; }
.erp-grid-v2-pager-pagesize { display: flex; align-items: center; gap: 6px; }
.erp-grid-v2-pager-pagesize select { width: auto; font-size: 12px; padding: 2px 6px; height: auto; }
.erp-grid-v2-pager-info { color: var(--zg-muted); font-size: 12px; }

/* ============================================================================
   Dark-mode polish batch (recon + verify in workflow w3kk32zuy):
   widget shells / dashboard title / section tabs / toggle pills / grid search,
   plus the creative drink-image "spotlight" ellipse so menu-item photos read
   on dark without leaving a white slab. Each rule uses :root[data-theme="dark"]
   (specificity 0,2,1) — beats the unscoped light-mode rules in dashboard.css /
   app.css (specificity 0,1,0) regardless of stylesheet load order.
   ============================================================================ */

/* ---- Page-shell containers ----
   .grid-shell / .erp-shell are the page-content wrappers used by most ERP pages — both have
   `background: var(--ziggis-cream)` hardcoded in app.css. In dark mode let the body bg (#1A100A)
   show through; the cards/grids inside provide their own surface color and the visual hierarchy
   reads cleaner that way. */
:root[data-theme="dark"] .grid-shell,
:root[data-theme="dark"] .erp-shell { background: transparent; }

/* ---- Menu item drink-image: cream "spotlight" ellipse on dark ----
   Drink photos arrive with white edges (transparent PNG letterbox). In light mode that
   white slab is fine; in dark mode it leaves a giant white block. Solution: keep the
   cream backdrop but CLIP it to an ellipse so the drink sits in a menu-board spotlight
   surrounded by the dark page. The drop-shadow gives the spot a soft warm glow. */
:root[data-theme="dark"] .menu-record-bigimg-img {
    background: var(--ziggis-cream);
    clip-path: ellipse(46% 49% at 50% 50%);
    filter: drop-shadow(0 8px 28px rgba(217, 173, 109, 0.18));
}
:root[data-theme="dark"] .menu-record-bigimg-ph {
    background: var(--zg-surface-soft);
    color: var(--zg-muted);
}
/* 1849: record title row on every tab (menu item, employee); tight so the tab's content leads (owner 11/5) */
.record-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap;
    padding: .2rem 1rem .5rem 0; }
.record-head-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .75rem; min-width: 0; }
.record-head-title h1 { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: var(--mud-palette-text-primary); }
.record-head-sub { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.record-head-meta { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.record-head-price { font-size: 1.35rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.kpr-bar > .record-head { padding: 0 0 0 .25rem; }   /* Demo tab: the title sits in the demo bar, one row */
.kpr-bar-size { font-weight: 600; color: var(--mud-palette-text-secondary); }
/* Sister surfaces: small card thumbs + hover-zoom flyout — same cream-on-dark idiom */
:root[data-theme="dark"] .menu-card-img { background: var(--ziggis-cream); }
:root[data-theme="dark"] .menu-card-noimg { color: var(--zg-muted); }
:root[data-theme="dark"] .menu-card-name { color: var(--ziggis-cream); }
:root[data-theme="dark"] .menu-card-meta { color: var(--zg-muted); }
:root[data-theme="dark"] .menu-card-price { color: var(--ziggis-tan-light); }
:root[data-theme="dark"] .menu-card-zoom {
    background: var(--zg-surface);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .8);
    border: 1px solid var(--zg-border);
}
:root[data-theme="dark"] .menu-card-zoom-img { background: var(--ziggis-cream); }
:root[data-theme="dark"] .menu-card-zoom-name { color: var(--ziggis-cream); }
:root[data-theme="dark"] .menu-card-zoom-cat,
:root[data-theme="dark"] .menu-card-zoom-recipe-h,
:root[data-theme="dark"] .menu-card-zoom-recipe th {
    color: var(--zg-muted);
    border-bottom-color: var(--zg-border);
}
:root[data-theme="dark"] .menu-card-zoom-ing { color: var(--ziggis-cream); }

/* ---- Grids + Tabs: dark teal glass (matches dashboard widgets) with brown accents --
   Primary surface = teal glass; headers/toolbars = deeper teal; row hover + active
   accents = brown/tan family. Brings the whole page into the same material language
   as .aed-dashboard-cell. */

/* --- Grids (MudTable / MudDataGrid / ErpGridV2 shell) --- */
:root[data-theme="dark"] .mud-table,
:root[data-theme="dark"] .mud-data-grid {
    background: var(--zg-elev-1);
    border-color: rgba(94, 178, 190, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(94, 178, 190, 0.06) !important;
}
:root[data-theme="dark"] .mud-table-root thead th.mud-table-cell {
    background: var(--zg-elev-2) !important;
    border-bottom-color: rgba(94, 178, 190, 0.22) !important;
}
:root[data-theme="dark"] .mud-table-root tbody td.mud-table-cell {
    border-bottom-color: rgba(94, 178, 190, 0.10) !important;
}
:root[data-theme="dark"] .mud-table-root:not(.mud-table-striped) tbody tr:nth-of-type(even) {
    background: rgba(94, 178, 190, 0.04);
}
:root[data-theme="dark"] .mud-table-root tbody tr:hover {
    background: rgba(217, 173, 109, 0.10) !important;
}

/* --- MudTabs (erp-shell tab pages: Accounting, Food, Equipment, etc.) --- */
:root[data-theme="dark"] .mud-tabs .mud-tabs-toolbar {
    border-bottom-color: rgba(94, 178, 190, 0.22);
}
:root[data-theme="dark"] .mud-tabs .mud-tab {
    color: rgba(245, 240, 230, 0.50);
}
:root[data-theme="dark"] .mud-tabs .mud-tab:hover:not(.mud-tab-active) {
    color: rgba(245, 240, 230, 0.78);
    background: rgba(94, 178, 190, 0.06);
}
:root[data-theme="dark"] .mud-tabs .mud-tab.mud-tab-active {
    color: var(--ziggis-cream);
    background: var(--zg-elev-2);
}
:root[data-theme="dark"] .mud-tabs .mud-tab.mud-tab-active .mud-icon-root { color: var(--ziggis-cream) !important; }
:root[data-theme="dark"] .mud-tabs .mud-tab-slider {
    background: var(--ziggis-tan) !important;
}
:root[data-theme="dark"] .erp-shell .mud-tabs-toolbar,
:root[data-theme="dark"] .erp-shell .mud-tabs-panels,
:root[data-theme="dark"] .erp-shell .mud-tab-panel { background: transparent !important; }

/* --- AppSectionTabs (folder-style: Transactions, Chart of Accounts, etc.) --- */
:root[data-theme="dark"] .app-sectiontabs-bar { background: transparent; }
:root[data-theme="dark"] .app-sectiontab {
    color: rgba(245, 240, 230, 0.50);
    background: transparent;
    border-color: rgba(94, 178, 190, 0.12);
}
:root[data-theme="dark"] .app-sectiontab:hover {
    color: rgba(245, 240, 230, 0.78);
    background: var(--zg-elev-1);
    border-color: rgba(94, 178, 190, 0.20);
}
:root[data-theme="dark"] .app-sectiontab.active {
    color: var(--ziggis-cream);
    background: var(--zg-elev-2);
    border-color: rgba(94, 178, 190, 0.22);
}
:root[data-theme="dark"] .app-sectiontab.active .app-sectiontab-cap { background: var(--ziggis-tan); }
:root[data-theme="dark"] .app-sectiontabs-panel {
    background: var(--zg-elev-1);
    border-color: rgba(94, 178, 190, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(94, 178, 190, 0.06);
}
:root[data-theme="dark"] .app-sectiontab--error {
    color: #ff7f7f;
    border-color: rgba(255, 127, 127, 0.25);
}
:root[data-theme="dark"] .app-sectiontab--error:hover {
    color: #ff9090;
    background: rgba(255, 127, 127, 0.12);
}
:root[data-theme="dark"] .app-sectiontab--error.active {
    color: #ff9090;
    background: var(--zg-elev-2);
    border-color: rgba(255, 127, 127, 0.40);
}
:root[data-theme="dark"] .app-sectiontab--error.active .app-sectiontab-cap { background: #ff9090; }
:root[data-theme="dark"] .app-sectiontab-badge {
    background: #ff7f7f;
    color: var(--ziggis-espresso-dark);
}

/* ---- Dashboard: title h1 + source badge + widget shells + chart primitives ----
   dashboard.css hardcodes #fff/#1f2937/#e5e7eb across every widget surface. The
   :root[data-theme="dark"] prefix takes specificity above the bare class selectors. */
:root[data-theme="dark"] .aed-dashboard-header h1 { color: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-dashboard-source { color: var(--zg-muted); }

:root[data-theme="dark"] .aed-dashboard-cell {
    background: var(--zg-elev-1) !important;   /* dark glass teal — lifts off the espresso page BG */
    border-color: rgba(94, 178, 190, 0.18) !important;
}
:root[data-theme="dark"] .aed-dashboard-cell-header {
    background: var(--zg-elev-2) !important;
    border-bottom-color: rgba(94, 178, 190, 0.22) !important;
    color: var(--ziggis-cream);
}
:root[data-theme="dark"] .aed-dashboard-cell-title { color: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-dashboard-cell-error { color: var(--zg-muted); }

/* Status badges: desaturated semantic tones for dark surface */
:root[data-theme="dark"] .aed-dashboard-cell-status--ok      { background: rgba(34, 197, 94, 0.18); color: #86efac; }
:root[data-theme="dark"] .aed-dashboard-cell-status--warn    { background: rgba(202, 138, 4, 0.22); color: #facc15; }
:root[data-theme="dark"] .aed-dashboard-cell-status--danger  { background: rgba(239, 68, 68, 0.22); color: #fca5a5; }
:root[data-theme="dark"] .aed-dashboard-cell-status--info    { background: rgba(127, 168, 176, 0.22); color: #b5d4d9; }
:root[data-theme="dark"] .aed-dashboard-cell-status--accent  { background: rgba(201, 138, 60, 0.22); color: #e6b58a; }
:root[data-theme="dark"] .aed-dashboard-cell-status--gray    { background: rgba(217, 173, 109, 0.10); color: var(--zg-muted); }

/* FeatureLink bottom-fade gradient — flip the white scroll mask to the dark surface */
:root[data-theme="dark"] .aed-feature-link::after {
    background: linear-gradient(to bottom, rgba(36, 23, 16, 0) 0%, rgba(36, 23, 16, 0.85) 70%, rgba(36, 23, 16, 1) 100%);
}

/* Customize / +Widget / Save / Reset / Remove buttons (.aed-cust-btn family) */
:root[data-theme="dark"] .aed-cust-btn {
    background: transparent;
    border-color: var(--zg-border-strong);
    color: var(--ziggis-cream);
}
:root[data-theme="dark"] .aed-cust-btn:hover:not(:disabled) {
    background: rgba(217, 173, 109, 0.08);
    border-color: var(--ziggis-tan);
    color: var(--ziggis-tan);
}
:root[data-theme="dark"] .aed-cust-btn--primary {
    background: var(--ziggis-tan);
    border-color: var(--ziggis-tan);
    color: var(--ziggis-espresso-dark);
}
:root[data-theme="dark"] .aed-cust-btn--primary:hover:not(:disabled) {
    background: var(--ziggis-tan-light);
    border-color: var(--ziggis-tan-light);
    color: var(--ziggis-espresso-dark);
}
:root[data-theme="dark"] .aed-cust-btn--danger {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.40);
    color: #fca5a5;
}
:root[data-theme="dark"] .aed-cust-btn--danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    border-color: #fca5a5;
}

/* Floating cell-edit toolbar (shown in edit mode) + the nudge controls inside */
:root[data-theme="dark"] .aed-dashboard-floating-toolbar {
    background: var(--zg-surface);
    border-color: var(--zg-border-strong);
    color: var(--ziggis-cream);
}
:root[data-theme="dark"] .aed-dashboard-cell-coord { color: var(--zg-muted); }
:root[data-theme="dark"] .aed-dashboard-cell-nudge {
    border-color: var(--zg-border-strong);
    background: var(--zg-surface-soft);
    color: var(--ziggis-cream);
}
:root[data-theme="dark"] .aed-dashboard-cell-nudge:hover:not(:disabled) {
    background: rgba(217, 173, 109, 0.12);
    border-color: var(--ziggis-tan);
}

/* Widget gallery picker (SidePanel) */
:root[data-theme="dark"] .aed-widget-pick-module { color: var(--zg-muted); }
:root[data-theme="dark"] .wpick-card {
    background: var(--zg-surface);
    border-color: var(--zg-border);
}
:root[data-theme="dark"] .wpick-card:hover {
    border-color: var(--ziggis-tan);
    background: rgba(217, 173, 109, 0.08);
}
:root[data-theme="dark"] .wpick-title { color: var(--ziggis-cream); }
:root[data-theme="dark"] .wpick-desc { color: var(--zg-muted); }

/* Chart primitives — AedChartCard, AedKpiCard, AedDonut, AedBarSeries, AedSparkline */
:root[data-theme="dark"] .aed-chart-card {
    background: var(--zg-surface);
    border-color: var(--zg-border);
}
:root[data-theme="dark"] .aed-chart-card-header {
    background: var(--zg-surface-soft);
    border-bottom-color: var(--zg-border-strong);
}
:root[data-theme="dark"] .aed-chart-card-title { color: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-chart-card-subtitle,
:root[data-theme="dark"] .aed-chart-empty { color: var(--zg-muted); }
:root[data-theme="dark"] .aed-kpi-card {
    background: var(--zg-surface);
    border-color: var(--zg-border);
    /* The border-left accent uses --aed-kpi-accent (light fallback #8a5a2b). Flip the fallback to tan
       in dark mode so widgets that don't override the var inline get a brand-correct accent line. */
    --aed-kpi-accent: var(--ziggis-tan);
}
:root[data-theme="dark"] .aed-kpi-card-label { color: var(--zg-muted); }
:root[data-theme="dark"] .aed-kpi-card-value { color: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-kpi-card-subtitle,
:root[data-theme="dark"] .aed-kpi-card-delta { color: rgba(245, 240, 230, 0.70); }
:root[data-theme="dark"] .aed-donut-total { fill: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-donut-total-label { fill: var(--zg-muted); }
:root[data-theme="dark"] .aed-donut-legend-label { color: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-donut-legend-value,
:root[data-theme="dark"] .aed-donut-legend-pct { color: rgba(245, 240, 230, 0.70); }
:root[data-theme="dark"] .aed-bar-row-label { color: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-bar-row-track { background: rgba(217, 173, 109, 0.10); }
:root[data-theme="dark"] .aed-bar-row-value { color: rgba(245, 240, 230, 0.70); }
:root[data-theme="dark"] .aed-sparkline { color: var(--ziggis-cream); }
:root[data-theme="dark"] .aed-sparkline-empty { color: var(--zg-muted); }

/* ---- MudToggleGroup pills (To review / Posted / Ignored / All etc.) ----
   The light-mode hover rule above hardcodes color:var(--ziggis-espresso), which is nearly
   black on dark BG. Override to cream/tan in dark mode. */
:root[data-theme="dark"] .mud-toggle-group .mud-toggle-item:hover:not(.mud-toggle-item-selected) {
    background: rgba(217, 173, 109, 0.08);
    color: var(--ziggis-tan);
}
:root[data-theme="dark"] .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
    background: rgba(217, 173, 109, 0.18) !important;
    color: var(--ziggis-cream) !important;
    font-weight: 600;
}

/* ---- ErpGrid / ErpGridV2 search input + action bar + scrollbars ----
   The native HTML search input has rgba(0,0,0,*) text + placeholder colors invisible on dark. */
:root[data-theme="dark"] .erp-actionbar { background: var(--zg-elev-2) !important; }
:root[data-theme="dark"] .erp-grid-v2-search-input {
    color: var(--ziggis-cream);
    background: var(--zg-inset);
    border-color: rgba(94, 178, 190, 0.22);
}
:root[data-theme="dark"] .erp-grid-v2-search-input::placeholder { color: rgba(245, 240, 230, 0.45); }
:root[data-theme="dark"] .erp-grid-v2-search-input:focus {
    border-color: var(--ziggis-tan);
    box-shadow: 0 0 0 2px rgba(217, 173, 109, 0.18);
}
/* MudTextField-based search (ErpGrid v1) — readable text + placeholder */
:root[data-theme="dark"] .erp-grid-search .mud-input-slot input { color: var(--ziggis-cream); }
:root[data-theme="dark"] .erp-grid-search .mud-input-slot input::placeholder { color: rgba(245, 240, 230, 0.45); }
/* Scrollbar tone — tan-on-dark instead of espresso-on-cream */
:root[data-theme="dark"] .mud-table-container::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .erp-grid-v2-toolbar-left::-webkit-scrollbar-thumb {
    background: rgba(217, 173, 109, 0.22);
}
:root[data-theme="dark"] .mud-table-container::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .erp-grid-v2-toolbar-left::-webkit-scrollbar-thumb:hover {
    background: rgba(217, 173, 109, 0.35);
}

/* ---- ErpGridV2 dark-mode: pager / toolbar / empty state ------------------
   The grid uses rgba(74,38,19,*) espresso tones for pager text + buttons —
   invisible on the dark BG. Override the lot here. */
:root[data-theme="dark"] .erp-grid-v2-toolbar {
    background: var(--zg-elev-2);
    border-bottom-color: rgba(94, 178, 190, 0.22);
}
:root[data-theme="dark"] .erp-grid-v2-footer {
    background: var(--zg-elev-2);
    color: rgba(245, 240, 230, 0.65);
    border-top-color: rgba(94, 178, 190, 0.22);
}
:root[data-theme="dark"] .erp-grid-v2-pager-label,
:root[data-theme="dark"] .erp-grid-v2-pager-info,
:root[data-theme="dark"] .erp-grid-v2-pager-sep { color: rgba(245, 240, 230, 0.65); }
:root[data-theme="dark"] .erp-grid-v2-pager-btn {
    background: var(--zg-inset);
    border-color: rgba(94, 178, 190, 0.22);
    color: var(--ziggis-cream);
}
:root[data-theme="dark"] .erp-grid-v2-pager-btn:hover:not(:disabled) {
    border-color: var(--ziggis-tan);
    color: var(--ziggis-tan);
    background: rgba(217, 173, 109, 0.10);
}
:root[data-theme="dark"] .erp-grid-v2-pager-pagesize select {
    background: var(--zg-inset);
    border-color: rgba(94, 178, 190, 0.22);
    color: var(--ziggis-cream);
}
:root[data-theme="dark"] .erp-grid-v2-view-btn {
    background: var(--zg-inset);
    color: rgba(245, 240, 230, 0.75);
    border-color: rgba(94, 178, 190, 0.18);
}
:root[data-theme="dark"] .erp-grid-v2-view-btn.is-active {
    background: var(--ziggis-tan);
    color: #1A100A;
}
:root[data-theme="dark"] .erp-grid-v2-gear { color: rgba(245, 240, 230, 0.50); }
:root[data-theme="dark"] .erp-grid-v2-gear:hover { color: var(--ziggis-tan); }
/* Empty state text + column-chooser popover */
:root[data-theme="dark"] .erp-grid-v2-empty { color: rgba(245, 240, 230, 0.55); }
:root[data-theme="dark"] .erp-grid-v2-popover {
    background: var(--zg-float);
    border-color: rgba(94, 178, 190, 0.22);
}
:root[data-theme="dark"] .erp-grid-v2-popover-header { color: rgba(245, 240, 230, 0.55); border-bottom-color: rgba(94, 178, 190, 0.15); }
:root[data-theme="dark"] .erp-grid-v2-popover-list li label { color: var(--ziggis-cream); }
:root[data-theme="dark"] .erp-grid-v2-popover-list li label:hover { background: rgba(217, 173, 109, 0.10); }
:root[data-theme="dark"] .erp-grid-v2-popover-footer { border-top-color: rgba(94, 178, 190, 0.15); }
:root[data-theme="dark"] .erp-grid-v2-popover-reset { color: var(--ziggis-tan); }

/* ---- Widget inline-color override (CSS-only, no widget edits) ----
   24 widget files use inline style="color:#0f172a" (dark navy) for counter numbers / labels.
   Attribute selectors targeting the literal hex string override these with !important — the only
   way to beat an inline style from external CSS. Scoped to dark mode so light mode is unaffected.
   #6b7280 (gray labels) → muted tan-cream; #9ca3af is light enough to read and is left alone. */
:root[data-theme="dark"] [style*="color:#0f172a"] { color: var(--ziggis-cream) !important; }
:root[data-theme="dark"] [style*="color:#1f2937"] { color: var(--ziggis-cream) !important; }
:root[data-theme="dark"] [style*="color:#374151"] { color: var(--ziggis-cream) !important; }
:root[data-theme="dark"] [style*="color:#6b7280"] { color: rgba(245, 240, 230, 0.65) !important; }

/* ---- .text-muted (app.css hardcodes espresso rgba — invisible on dark) ---- */
:root[data-theme="dark"] .text-muted { color: rgba(245, 240, 230, 0.55) !important; }

/* ---- MudBlazor general dark-mode gap-fills ----
   MudThemeProvider's PaletteDark handles MOST surfaces, but a few Mud components render
   with light-mode hardcoded values that slip through, or rely on inherited body color that
   we've already overridden. These catch the gaps. */

/* MudPaper + MudCard — teal glass with cream text */
:root[data-theme="dark"] .mud-paper {
    color: #F5F0E6;
    background: var(--zg-elev-1);
    border-color: rgba(94, 178, 190, 0.18);
}
:root[data-theme="dark"] .mud-card {
    background: var(--zg-elev-1);
    border-color: rgba(94, 178, 190, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(94, 178, 190, 0.06) !important;
}

/* MudSimpleTable — teal glass treatment matching grids */
:root[data-theme="dark"] .mud-simple-table {
    background: var(--zg-elev-1);
}
:root[data-theme="dark"] .mud-simple-table thead th {
    background: var(--zg-elev-2) !important;
    color: var(--zg-muted) !important;
    border-bottom-color: rgba(94, 178, 190, 0.22) !important;
}
:root[data-theme="dark"] .mud-simple-table tbody td {
    border-bottom-color: rgba(94, 178, 190, 0.10) !important;
}

/* MudDataGrid / MudTable pager (Files page still uses raw MudDataGrid, not ErpGridV2) */
:root[data-theme="dark"] .mud-table-pagination-toolbar {
    color: rgba(245, 240, 230, 0.65);
}
:root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-select,
:root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-caption { color: rgba(245, 240, 230, 0.65); }
:root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-actions button { color: rgba(245, 240, 230, 0.50); }
:root[data-theme="dark"] .mud-table-pagination-toolbar .mud-table-pagination-actions button:hover { color: var(--ziggis-tan); }

/* MudLink — teal in dark mode to match grid edit-link palette */
:root[data-theme="dark"] .mud-link { color: #4AABB8; }
:root[data-theme="dark"] .mud-link:hover { color: #6CC3CD; }

/* MudChip default variant — ensure readable on dark surface */
:root[data-theme="dark"] .mud-chip.mud-chip-color-default { color: rgba(245, 240, 230, 0.75); }

/* Chart of accounts tree — hardcoded espresso text flipped to cream */
:root[data-theme="dark"] .coa-name { color: var(--ziggis-cream); }
:root[data-theme="dark"] .coa-num { color: var(--ziggis-tan); }
/* …but rollup rows stay muted here too (the light-mode rule two-way-ties with the flips above and loses). */
:root[data-theme="dark"] .coa-rollup-row .coa-name,
:root[data-theme="dark"] .coa-rollup-row .coa-num { color: var(--zg-muted); }

/* AppRibbon tiles — espresso text → cream on dark */
:root[data-theme="dark"] .app-ribbon-tile { background: var(--zg-surface); color: var(--ziggis-cream); border-color: var(--zg-border-strong); }
:root[data-theme="dark"] .app-ribbon-tile:hover:not(:disabled) { background: var(--zg-surface-soft); border-color: var(--ziggis-tan); color: var(--ziggis-cream); }
:root[data-theme="dark"] .app-ribbon-tile--primary { background: var(--ziggis-tan); border-color: var(--ziggis-tan); color: #1A100A; }
:root[data-theme="dark"] .app-ribbon-tile--danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.40); }

/* BL-123: the ?focus deep-link target row — a soft pulse that settles to a highlight. */
.erp-grid-v2-row-focus > td { background: rgba(201, 123, 31, 0.14) !important; }
.erp-grid-v2-row-focus { outline: 2px solid rgba(201, 123, 31, 0.55); outline-offset: -2px; }

/* Inline supplier "New" mode — floating badge inside the taken-over combo area (owner 2026-07-17). */
.zg-new-badge { position:absolute; top:-8px; right:8px; background:var(--mud-palette-warning, #e6a23c); color:#fff;
                font-size:0.62rem; font-weight:700; letter-spacing:.05em; padding:1px 6px; border-radius:8px; pointer-events:none; }


/* Owner 2026-07-17: slim pill chips — the default Mud chip wastes vertical space in dense grids. */
.zg-slim-chip.mud-chip { height: 20px; font-size: 0.72rem; padding: 0 8px; margin: 0; }

/* MUD-5 (ADR-0134): the house PLAIN table — replaces MudTable/MudSimpleTable for input + detail
   tables (data GRIDS keep using ErpGridV2). Dense, borderless, matching the swept look. */
.app-table { width:100%; border-collapse:collapse; background:transparent; font-size:0.85rem; }
.app-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
                color:var(--mud-palette-text-secondary,#8a7a66); padding:6px 10px; white-space:nowrap;
                border-bottom:1px solid var(--mud-palette-lines-default,#e3d8c5); }
/* Text cells absorb the squeeze; money/numeric (.amt) never wrap mid-number (tabular so digits line up). */
.app-table td { padding:6px 10px; overflow-wrap:anywhere; border-bottom:1px solid var(--mud-palette-lines-default,#f0e9dc); }
.app-table .amt, .app-table th.amt { text-align:right; white-space:nowrap; overflow-wrap:normal; font-variant-numeric:tabular-nums; }
.app-table tbody tr:hover td { background:var(--mud-palette-action-default-hover, rgba(0,0,0,.04)); }
.app-table tr.group th { background:var(--mud-palette-background-grey,#f5efe3); }
.app-table tfoot td { border-bottom:0; border-top:1px solid var(--mud-palette-lines-default,#e3d8c5); }
/* 978 (R7): edit rows align on the first text baseline — a caption/chip/button under one control hangs below
   instead of lifting it above its neighbours (td's default middle re-centres every cell around the tallest). */
.app-table > tbody > tr:has(.ant-input, .ant-select, .ant-input-number, .ant-picker) > td { vertical-align: baseline; }
/* 1061: PO line editor — fixed columns, so a long item or pack label ellipsizes instead of widening the fly-in. */
.app-table.po-line-table { table-layout: fixed; }
/* 1919: the line's Projection drill-down sits beside its remove button */
.app-table.po-line-table td.po-line-act { white-space: nowrap; text-align: right; }
/* 1862/1864: PO receive, read and bill views — the item column keeps a readable width (name over pack); qty headers may wrap instead. */
.app-table:is(.po-receive-table, .po-view-table) td.po-recv-item { min-width: 15em; overflow-wrap: normal; }
.app-table:is(.po-receive-table, .po-view-table) th.amt { white-space: normal; }
.po-recv-date { max-width: 14em; margin-bottom: 8px; }
/* 1093: inventory Suggest order — a dash that names the open PO covering the need */
.inv-covered { cursor: help; }
.inv-covered-po { display: block; font-size: 0.72rem; line-height: 1.3; color: var(--mud-palette-text-secondary); white-space: nowrap; }
/* 1092: lines a supplier switch re-priced or re-packed, and the one-line notice under them */
.app-table.po-line-table tr.po-line--switched > td { background: rgba(var(--mud-palette-info-rgb), 0.07); }
.po-switch-note .zg-alert-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.po-switch-note-text { border-bottom: 1px dotted currentColor; cursor: help; }
.po-switch-note .po-switch-keep { padding: 0 6px; font-size: 0.75rem; }
/* 1540: free-freight progress on the Order Assistant, draft POs and the submit dialog */
.ff-banner-head { font-weight: 600; }
.ff-banner-bar { max-width: 22rem; margin: 4px 0; }
.ff-banner-detail { font-size: 0.8125rem; line-height: 1.35; }
/* 1541: the store simulator card's run progress */
.store-sim-bar { max-width: 22rem; }
/* ADR #206: a smallware line's GL account override, under the item picker */
.po-line-gl, .po-line-pack { margin-top: 4px; }
.po-line-gl .ant-select { width: 100%; font-size: 0.8rem; }

/* ---- ADR-0060 #312 compliance-list value badges: tabular chips + subtle 16–17 curfew moon ---- */
.zg-rule-badge { font-variant-numeric: tabular-nums; }
.zg-rule-glyph { color: var(--zg-muted, #8a7a66); vertical-align: text-bottom; }

/* ---- ADR-0134 AppChip v2 (Mud-free pill; StatusChip's visual language) ---- */
.zg-chip { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px;
           border-radius:999px; font-size:0.78rem; font-weight:600; line-height:1; white-space:nowrap;
           background: color-mix(in srgb, var(--chip) 14%, transparent); color: var(--chip);
           vertical-align: middle; }
.zg-chip--sm { height:20px; font-size:0.72rem; padding:0 8px; }
.zg-chip--outlined { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 55%, transparent); }
/* Filled = a stronger sibling of the light status pill (owner 2026-07-17): mild tone gradient,
   tone-dark text, thin ring — not the flat solid block. */
.zg-chip--filled { background: linear-gradient(180deg,
                     color-mix(in srgb, var(--chip) 14%, #fff) 0%,
                     color-mix(in srgb, var(--chip) 32%, #fff) 100%);
                   color: color-mix(in srgb, var(--chip) 82%, #000);
                   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 40%, transparent); }
.zg-chip-ic { width:14px; height:14px; fill: currentColor; flex: 0 0 auto; }
.zg-chip--click { cursor: pointer; }
.zg-chip--click:hover { filter: brightness(0.92); }
/* AppChip OnClose — trailing clear (×), tinted by the chip's own tone. */
.zg-chip-x { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin:0 -4px 0 1px;
             padding:0; border:0; border-radius:50%; background:transparent; color:inherit; font:inherit; font-size:0.6rem;
             line-height:1; cursor:pointer; opacity:0.75; }
.zg-chip-x:hover { opacity:1; background: color-mix(in srgb, var(--chip) 24%, transparent); }
.zg-chip-x:focus-visible { outline: 2px solid var(--chip); outline-offset: 1px; }
.zg-chip--default   { --chip: var(--mud-palette-text-secondary, #8a7a66); }
.zg-chip--primary   { --chip: var(--mud-palette-primary, #7a5c43); }
.zg-chip--secondary { --chip: var(--mud-palette-secondary, #9c7b5f); }
.zg-chip--info      { --chip: var(--mud-palette-info, #3b82f6); }
.zg-chip--success   { --chip: var(--mud-palette-success, #16a34a); }
.zg-chip--warning   { --chip: var(--mud-palette-warning, #b45309); }
.zg-chip--error     { --chip: var(--mud-palette-error, #dc2626); }

/* ---- ADR-0134 internals swap: stack children never shrink (MudStack contract) ---- */
.zg-stack > * { flex-shrink: 0; }

/* House toast stack (ADR-0134) — bottom-right, replaces MudSnackbar. */
.zg-toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 5000; display: flex;
    flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 40px)); pointer-events: none; }
.zg-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
    border-radius: 10px; box-shadow: 0 6px 24px rgba(40, 28, 14, .22); font-size: .9rem; color: #fff;
    animation: zg-toast-in .22s cubic-bezier(.2, .8, .3, 1); --toast: #3b82f6; background: var(--toast); }
.zg-toast--success { --toast: #16a34a; }
.zg-toast--info    { --toast: #2563eb; }
.zg-toast--warning { --toast: #b45309; }
.zg-toast--error   { --toast: #dc2626; }
.zg-toast-ic { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.zg-toast-msg { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.zg-toast-close { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; opacity: .8;
    line-height: 0; flex: 0 0 auto; }
.zg-toast-close:hover { opacity: 1; }
.zg-toast-action { margin-left: 8px; color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }   /* 1567 */
@keyframes zg-toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Native AppBusyOverlay (ADR-0134/0026) — scrim + centered spinner panel; replaces MudOverlay.
   Absolute dims just a position:relative parent; fixed covers the viewport. */
.zg-busy-overlay { display: flex; align-items: center; justify-content: center; inset: 0; z-index: 1200;
    animation: zg-busy-fade .15s ease; }
.zg-busy-overlay--absolute { position: absolute; }
.zg-busy-overlay--fixed { position: fixed; }
.zg-busy-overlay--light { background: rgba(255, 255, 255, .55); }
.zg-busy-overlay--dark { background: rgba(20, 12, 4, .55); }
:root[data-theme="dark"] .zg-busy-overlay--light { background: rgba(20, 12, 4, .5); }
.zg-busy-overlay__panel { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.zg-busy-overlay__msg { font-weight: 500; color: var(--mud-palette-text-primary, #3a2a1a); }
@keyframes zg-busy-fade { from { opacity: 0; } to { opacity: 1; } }

/* Native AppDialog (ADR-0134) — scrim + centered panel; replaces MudDialog/MudDialogProvider.
   Each <AppDialog> draws its own scrim so it works service-hosted (AppDialogHost) or inline (@bind-Visible). */
.zg-dialog-scrim { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .5); padding: 24px; overflow: auto; outline: none; }
.zg-dialog-panel { background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #3a2a1a);
    border-radius: 12px; box-shadow: 0 12px 48px rgba(20, 12, 4, .32); display: flex; flex-direction: column;
    max-height: calc(100vh - 48px); max-width: 600px; width: auto; overflow: hidden; outline: none;
    animation: zg-dialog-in .16s cubic-bezier(.2, .8, .3, 1); }
.zg-dialog--full { width: 100%; }
.zg-dialog--extrasmall { max-width: 444px; }
.zg-dialog--small { max-width: 600px; }
.zg-dialog--medium { max-width: 960px; }
.zg-dialog--large { max-width: 1280px; }
.zg-dialog--extralarge { max-width: 1920px; }
.zg-dialog-titlebar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 1.15rem;
    font-weight: 600; border-bottom: 1px solid var(--mud-palette-lines-default, #e3d8c5); flex: 0 0 auto; }
.zg-dialog-title { flex: 1 1 auto; min-width: 0; }
.zg-dialog-close { margin-left: auto; background: none; border: 0; color: var(--mud-palette-text-secondary, #8a7a66);
    cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; flex: 0 0 auto; }
.zg-dialog-close:hover { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .06)); color: inherit; }
.zg-dialog-content { padding: 20px; overflow: auto; flex: 1 1 auto; }
.zg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; flex: 0 0 auto;
    border-top: 1px solid var(--mud-palette-lines-default, #e3d8c5); }
@keyframes zg-dialog-in { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* Native AppColorPicker (ADR-0134) — swatch + editable hex; replaces MudColorPicker (drops the popover too). */
.zg-colorpicker { display: inline-flex; flex-direction: column; gap: 3px; }
.zg-colorpicker-label { font-size: .75rem; color: var(--mud-palette-text-secondary, #8a7a66); }
.zg-colorpicker-row { display: inline-flex; align-items: center; gap: 6px; }
.zg-colorpicker-swatch, .zg-theme-swatch { width: 34px; height: 30px; padding: 2px; flex: 0 0 auto; cursor: pointer;
    background: none; border: 1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius: 6px; }
.zg-colorpicker-hex { width: 6.5em; padding: 5px 7px; border: 1px solid var(--mud-palette-lines-default, #e3d8c5);
    border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #3a2a1a); }

/* Tip pooling settings (ADR-0135 TP-B7, 1505 role classes) */
.tps { max-width: 40em; }
.tps-rule { font-weight: 600; }
.tps-classes { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tps-roles { display: flex; flex-direction: column; gap: 6px; }
.tps-role { display: grid; grid-template-columns: minmax(0, 1fr) 10em minmax(0, 9em); gap: 10px; align-items: center;
    padding: 4px 0; border-bottom: 1px solid var(--mud-palette-lines-default, #e3d8c5); }
.tps-role-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .tps-role { grid-template-columns: minmax(0, 1fr) 9em; } }
/* 2191/2192: a manager's reason to lock a tip day */
.tips-reason { max-width: 34em; }
/* 2188: people who never share */
.tps-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center;
    padding: 4px 0; border-bottom: 1px solid var(--mud-palette-lines-default, #e3d8c5); }
.tps-person-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 600px) { .tps-person-add { grid-template-columns: minmax(0, 1fr); } }

/* Tip Preview Share (ADR-0135) — touch-first what-if distribution; shared by Payroll + Kiosk. */
.tipprev { display: flex; flex-direction: column; gap: 14px; }
.tipprev-pools { display: flex; gap: 10px; flex-wrap: wrap; }
.tipprev-pool { flex: 1 1 130px; border: 1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius: 14px;
    padding: 12px 16px; background: var(--mud-palette-surface, #fff); display: flex; flex-direction: column; gap: 2px; }
/* 1103: the Day total tile tints the surface with the theme's gold (was a light-only cream gradient: cream ink on cream in dark).
   background-image only, so the tile keeps .tipprev-pool's surface colour underneath. */
.tipprev-pool--total { background-image: linear-gradient(135deg, rgba(var(--mud-palette-secondary-rgb), .12), rgba(var(--mud-palette-secondary-rgb), .24));
    border-color: rgba(var(--mud-palette-secondary-rgb), .7); }
.tipprev-pool-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #8a7a66); }
.tipprev-pool-amt { font-size: 1.45rem; font-weight: 800; color: var(--mud-palette-text-primary, #3a2a1a);
    font-variant-numeric: tabular-nums; }
.tipprev-pulls { display: flex; gap: 8px; flex-wrap: wrap; }
.tipprev-pullchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dcc389;
    background: #fdf6e8; border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-weight: 600; color: #5b4a33; }
.tipprev-pullamt { font-weight: 800; color: #3a2a1a; }
.tipprev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tipprev-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--mud-palette-lines-default, #e3d8c5);
    border-radius: 14px; padding: 12px 14px; background: var(--mud-palette-surface, #fff); }
.tipprev-card--excluded { opacity: .45; }
.tipprev-avatar { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center;
    justify-content: center; font-weight: 800; font-size: 1rem; color: #4a2613;
    background: linear-gradient(135deg, #e5cca9, #d9ad6d); }
.tipprev-body { flex: 1 1 auto; min-width: 0; }
.tipprev-name { font-weight: 700; color: var(--mud-palette-text-primary, #3a2a1a); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tipprev-meta { display: flex; gap: 6px; align-items: center; margin: 2px 0 4px; flex-wrap: wrap; }
.tipprev-basis { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.tipprev-basis--clock { background: #e5f2e8; color: #2f6b40; }
.tipprev-basis--sched { background: #e9eef7; color: #3a5a8c; }
.tipprev-basis--x { background: #efe6da; color: #8a7a66; }
.tipprev-role { font-size: .72rem; color: var(--mud-palette-text-secondary, #8a7a66); }
.tipprev-amts { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tipprev-cash { font-size: 1.15rem; font-weight: 800; color: var(--mud-palette-success-darken); font-variant-numeric: tabular-nums; }   /* 1103: #2f6b40 was 2.7:1 in dark */
.tipprev-sub { font-size: .7rem; color: var(--mud-palette-text-secondary, #8a7a66); }
.tipprev-card-amt { font-size: .8rem; color: var(--mud-palette-text-secondary, #8a7a66); font-variant-numeric: tabular-nums; }
.tipprev-total { font-size: 1.05rem; font-weight: 800; color: var(--mud-palette-text-primary, #3a2a1a);
    font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.tipprev-empty { color: var(--mud-palette-text-secondary, #8a7a66); padding: 1.2rem 0; }
/* ADR-0135 TP-B7 — active-policy label + graceful-fallback notes under the pools. */
.tipprev-policy { font-size: .78rem; font-weight: 700; color: var(--mud-palette-text-secondary, #8a7a66);
    margin: 2px 0 6px; }
.tipprev-notes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tipprev-note { font-size: .78rem; color: #7a5514; background: #fdf3e0; border: 1px solid #e8c27a;
    border-radius: 8px; padding: 6px 10px; }

.tipprev-asof { font-weight: 600; }

/* 1497 — My tips (employee self-view): one card per pay period. */
.mytips { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.mytips-period { display: flex; flex-direction: column; gap: 10px; }
.mytips-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mytips-head .record-section-title { margin: 0; }
.mytips-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.mytips-totals > div { flex: 1 1 110px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.mytips-totals span { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.mytips-totals strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.mytips-totals > .mytips-total { border-color: rgba(var(--mud-palette-secondary-rgb), .7);
    background-image: linear-gradient(135deg, rgba(var(--mud-palette-secondary-rgb), .10), rgba(var(--mud-palette-secondary-rgb), .22)); }
.mytips-table td.mytips-flags { white-space: nowrap; }
.mytips-reports { display: flex; flex-direction: column; gap: 6px; }
.mytips-report { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border-radius: 10px;
    background: rgba(var(--mud-palette-warning-rgb), .08); font-size: .85rem; color: var(--mud-palette-text-primary); }
.mytips-report-note { color: var(--mud-palette-text-secondary); }

/* 1497 — Tips tab: staff reports; reviewed rows recede. */
.tipreports-done td { opacity: .6; }

/* ADR-0135 TP-B8 — crew-change cash reminder: big flashing amber on the kiosk Tips + Clock screens. */
.tip-crewalert { display: flex; align-items: center; gap: 12px; background: #fff4d6; color: #7a4d00;
    border: 2px solid #e8a33d; border-radius: 14px; padding: 16px 20px; margin: 0 0 16px; font-size: 1.15rem;
    font-weight: 800; animation: tip-crewflash 1.1s ease-in-out infinite; }
.tip-crewalert-icon { font-size: 1.6rem; line-height: 1; }
@keyframes tip-crewflash {
    0%, 100% { background: #fff4d6; border-color: #e8a33d; box-shadow: 0 0 0 rgba(232, 163, 61, 0); }
    50% { background: #ffe4a3; border-color: #d98a1f; box-shadow: 0 0 18px rgba(232, 163, 61, .6); }
}
@media (prefers-reduced-motion: reduce) { .tip-crewalert { animation: none; } }

/* Item 1099 — the banner's 'Not now' (the banner keeps its fixed amber in both themes, so the button inherits its ink). */
.kiosk-crewbanner .kiosk-crewbanner-text { flex: 1 1 auto; min-width: 0; }
.kiosk-crewbanner-later { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer;
    font-size: 1rem; font-weight: 800; color: inherit; background: transparent; border: 2px solid currentColor; }
.kiosk-crewbanner-later:disabled, .kct-later:disabled { opacity: .5; cursor: default; }

/* ADR-0135 TP-B8 — the kiosk's lower-right crew-change toast (was an inline <style> in KioskCrewAlert.razor). */
.kiosk-crew-toast { position: fixed; right: 20px; bottom: 20px; z-index: 4000; display: flex; align-items: center; gap: 12px;
    max-width: 420px; border-radius: 14px; padding: 13px 15px; color: var(--mud-palette-warning-darken);
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), .16), rgba(var(--mud-palette-warning-rgb), .16)), var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-warning); border-left-width: 5px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    animation: kct-in .25s ease; }
.kct-icon { font-size: 1.5rem; line-height: 1; }
.kct-title { font-weight: 800; }
.kct-sub { font-size: .85rem; opacity: .9; }
.kct-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.kct-go, .kct-later { min-height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kct-go { border: none; background: var(--mud-palette-warning-darken); color: var(--mud-palette-warning-text); }
.kct-later { background: transparent; color: inherit; border: 1px solid rgba(var(--mud-palette-warning-rgb), .7); }
@keyframes kct-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kiosk-crew-toast { animation: none; } }

/* ADR-0135 TP-B6 — the day ledger (TipDayLedgerPanel; was its inline <style>, moved here by 1103). Payroll's fly-in uses these;
   the kiosk Tips stage restyles them under .kx-tips (kiosk.css). */
.tdl-title { font-weight: 800; color: var(--zg-text-strong); margin-bottom: 8px; font-size: 1.02rem; }
.tdl-empty { color: var(--zg-text-muted); font-size: .9rem; }
.tdl-row { padding: 7px 0; border-bottom: 1px dashed var(--zg-border); }
.tdl-row:last-of-type { border-bottom: none; }
.tdl-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tdl-win { font-weight: 700; color: var(--zg-text-strong); font-variant-numeric: tabular-nums; font-size: .9rem; }
.tdl-amt { font-weight: 800; color: var(--mud-palette-success-darken); font-variant-numeric: tabular-nums; }   /* 1103: success was 4:1 on white */
.tdl-audit { display: flex; justify-content: space-between; gap: 8px; color: var(--zg-text-muted); font-size: .78rem; margin-top: 2px; }
.tdl-by { font-weight: 600; }
.tdl-at { font-variant-numeric: tabular-nums; }
/* Crew-change marker: compact, muted, no amount — a boundary note, not a money row. */
.tdl-crew-txt { color: var(--zg-text-muted); font-size: .82rem; font-weight: 600; font-style: italic; }
.tdl-card .tdl-win { color: var(--zg-text-strong); font-weight: 600; }
.tdl-adjust-txt { color: var(--mud-palette-warning); font-size: .82rem; font-weight: 700; }
.tdl-sum { display: flex; justify-content: space-between; border-top: 2px solid var(--zg-border); margin-top: 6px;
    padding-top: 8px; font-weight: 800; color: var(--zg-text-strong); font-variant-numeric: tabular-nums; }

/* Item 1099 — day ledger: a crew change no pull covers yet (snoozed at the kiosk or not), and a jar-empty pull. */
.tdl-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font-size: .72rem; font-weight: 800;
    font-style: normal; letter-spacing: .02em; white-space: nowrap; vertical-align: 1px; }
.tdl-flag--open { color: var(--mud-palette-warning-darken); background: rgba(var(--mud-palette-warning-rgb), .16); }
.tdl-flag--snoozed { color: var(--mud-palette-text-secondary); background: rgba(var(--mud-palette-warning-rgb), .06);
    border: 1px dashed rgba(var(--mud-palette-warning-rgb), .6); }
.tdl-amt.tdl-amt--empty { color: var(--mud-palette-text-secondary); font-weight: 700; }

/* Item 1100 — kiosk schedule Day view: clock in / out on today's shift cell, the punch sheet, the walk-in pointer.
   kiosk.css loads after this sheet, so the rules that meet it carry a second class. */
.ksd-clock { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ksd-clock-status { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.ksd-clock-status--in { color: var(--mud-palette-success-darken); }
.ksd-mine .ksd-clock-status { color: inherit; }
.ksd-clock-btn { min-height: 44px; padding: 0 18px; border: none; border-radius: 12px; cursor: pointer; font-size: 1rem;
    font-weight: 800; white-space: nowrap; }
.ksd-clock-btn--in { background: var(--mud-palette-success-darken); color: var(--mud-palette-success-text); }
.ksd-clock-btn--out { background: var(--mud-palette-error-darken); color: var(--mud-palette-error-text); }
.ksd-clock-btn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.ksd-blk .ksd-clock .kc-pill { min-height: 28px; }
.ksd-blk.ksd-blk--clock { z-index: 3; }
.tip-crewalert.ksd-crewalert { flex: 0 0 auto; margin: -4px 0 12px; }
.ksd-walkin { margin: 16px 4px 0; font-size: 1rem; color: var(--mud-palette-text-secondary); }
.ksd-walkin a { font-weight: 800; color: var(--mud-palette-primary); }
.kiosk-sheet.kps { width: min(520px, calc(100vw - 32px)); text-align: center; }
.kps .kiosk-np-title { margin-bottom: 10px; }
.kps-who { margin: 2px 0 14px; font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.kps-time { margin: -4px 0 18px; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.kps-actions { display: flex; gap: 14px; justify-content: center; }
.kps-actions .kc-btn { flex: 1 1 0; min-width: 0; }

/* Native AppAccordion (ADR-0134): flat house collapsible via <details>/<summary>. */
.zg-accordion-panel { border-bottom: 1px solid var(--mud-palette-lines-default, #e3d8c5); }
.zg-accordion-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 12px 4px; font-weight: 600; color: var(--mud-palette-text-primary, #3a2a1a); user-select: none; }
.zg-accordion-summary::-webkit-details-marker { display: none; }
.zg-accordion-summary:hover { color: var(--mud-palette-primary, #7a5c43); }
.zg-accordion-summary--disabled { pointer-events: none; opacity: .5; }
.zg-accordion-title { flex: 1 1 auto; min-width: 0; }
.zg-accordion-chevron { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .15s ease;
    color: var(--mud-palette-text-secondary, #8a7a66); }
.zg-accordion-panel[open] > .zg-accordion-summary .zg-accordion-chevron { transform: rotate(180deg); }
.zg-accordion-body { padding: 4px 4px 14px; }

/* Native AppFileUpload: transparent file input overlays the trigger (no JS, no Mud). */
.zg-fileupload { position: relative; display: inline-flex; }
.zg-fileupload-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Native App(Icon)Button: spinner sizing + the (unused) count pill. */
.zg-btn-ic { width: 1em; height: 1em; }
.zg-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    margin-left: 6px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--mud-palette-lines-default, #e3d8c5); color: var(--mud-palette-text-secondary, #8a7a66); }
.zg-btn-count--on { background: var(--mud-palette-info, #3b82f6); color: #fff; }

/* ---- ADR-0134 internals swap: icon / link / alert / progress (Mud-free) ---- */
.zg-tone--default   { --tone: var(--mud-palette-text-secondary, #8a7a66); }
.zg-tone--primary   { --tone: var(--mud-palette-primary, #7a5c43); }
.zg-tone--secondary { --tone: var(--mud-palette-secondary, #9c7b5f); }
.zg-tone--info      { --tone: var(--mud-palette-info, #3b82f6); }
.zg-tone--success   { --tone: var(--mud-palette-success, #16a34a); }
.zg-tone--warning   { --tone: var(--mud-palette-warning, #b45309); }
.zg-tone--error     { --tone: var(--mud-palette-error, #dc2626); }
[class*="zg-tone--"] { color: var(--tone); }

.zg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.zg-icon--small { width: 20px; height: 20px; }
.zg-icon--medium { width: 24px; height: 24px; }
.zg-icon--large { width: 32px; height: 32px; }

.zg-link { color: var(--mud-palette-primary, #7a5c43); text-decoration: none; cursor: pointer; }
.zg-link:hover { text-decoration: underline; }

.zg-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px;
            font-size: .875rem; --tone: var(--mud-palette-info, #3b82f6);
            background: color-mix(in srgb, var(--tone) 11%, transparent);
            color: color-mix(in srgb, var(--tone) 78%, #000); }
.zg-alert--default { --tone: var(--mud-palette-text-secondary, #8a7a66); }
.zg-alert--info    { --tone: var(--mud-palette-info, #3b82f6); }
.zg-alert--success { --tone: var(--mud-palette-success, #16a34a); }
.zg-alert--warning { --tone: var(--mud-palette-warning, #b45309); }
.zg-alert--error   { --tone: var(--mud-palette-error, #dc2626); }
.zg-alert--dense { padding: 5px 10px; }
.zg-alert--outlined { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent); }
.zg-alert--solid { background: var(--tone); color: #fff; }
.zg-alert-ic { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--tone); }
.zg-alert--solid .zg-alert-ic { color: #fff; }
.zg-alert-msg { flex: 1 1 auto; min-width: 0; }
.zg-alert-close { background: none; border: 0; cursor: pointer; padding: 2px; color: inherit; line-height: 0; }

.zg-progress { position: relative; height: 4px; overflow: hidden;
               background: color-mix(in srgb, var(--tone, #7a5c43) 18%, transparent); }
.zg-progress--rounded { border-radius: 999px; }
.zg-progress-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--tone, #7a5c43);
                   transition: width .3s ease; border-radius: inherit; }
.zg-progress-bar--indet { width: 40%; animation: zg-indet 1.4s ease-in-out infinite; }
@keyframes zg-indet { 0% { left: -40%; } 100% { left: 100%; } }
.zg-progress-bar--striped { background-image: repeating-linear-gradient(45deg,
                   rgba(255,255,255,.35) 0 8px, transparent 8px 16px); background-size: 200% 100%;
                   animation: zg-stripe 1s linear infinite; }
@keyframes zg-stripe { to { background-position: 32px 0; } }

/* ---- Grid buttons sit 4px shorter (owner 2026-07-17): they were padding the rows out ---- */
.erp-grid-v2 .mud-button-root.mud-button,
.app-table .mud-button-root.mud-button { padding-top: 4px; padding-bottom: 4px; min-height: 32px; height: 32px; }
.erp-grid-v2 .mud-button[class*="-size-small"],
.app-table .mud-button[class*="-size-small"] { padding-top: 2px; padding-bottom: 2px; min-height: 26px; height: 26px; }
.erp-grid-v2 .mud-icon-button,
.app-table .mud-icon-button { padding: 4px; min-height: 0; height: auto; }

/* ---- Pay Bills 90-day chart: playful circles + hover card (PB-2 redesign 2026-07-17) ---- */
/* Supplier lane links draw their own teal hairline, but app.css `a { text-decoration: underline }` wins over
   mud-compat's reset (it loads later) and paints a second line on top. Kill it here — theme-polish loads last.
   Must sit on the <a>: text-decoration is painted by the ancestor, not inherited, so styling the <text> child
   does nothing. */
.pb-lane-link { text-decoration: none; }
.pb-blob { cursor: pointer; }
.pb-blob circle { transition: transform .15s ease, filter .15s ease; transform-box: fill-box; transform-origin: center; }
.pb-blob:hover circle { transform: scale(1.22); filter: brightness(1.1) saturate(1.15); }
.pb-blob--overdue { transform-box: fill-box; transform-origin: center; animation: pb-throb 2.4s ease-in-out infinite; }
@keyframes pb-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.pb-tip { position: fixed; z-index: 4000; pointer-events: none; min-width: 230px; max-width: 330px;
          background: var(--mud-palette-surface, #fffaf2); border: 1px solid var(--mud-palette-lines-default, #e3d8c5);
          border-radius: 10px; box-shadow: 0 10px 30px rgba(60, 45, 25, .20); padding: 10px 12px;
          transform: translate(-50%, calc(-100% - 14px)); }
.pb-tip--below { transform: translate(-50%, 18px); }
.pb-tip-total { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.pb-tip-line { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; padding: 1px 0; }
.pb-tip-hint { font-size: .72rem; color: var(--mud-palette-text-secondary, #8a7d6a); font-style: italic; margin-top: 6px; }

/* ---- ADR-0134 batch F: detail card, plain list, read-only field, audit timeline ---- */
.zg-detail-card { background: rgba(217, 173, 109, 0.04); }
.zg-list { display: flex; flex-direction: column; }
.zg-list-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.zg-list-subheader { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                     color: var(--mud-palette-text-secondary, #8a7a66); padding: 8px 0 2px; }
.zg-field { display: flex; flex-direction: column; gap: 2px; }
.zg-field-label { font-size: 11px; color: var(--mud-palette-text-secondary, #8a7a66); }
.zg-field-value { font-size: 0.875rem; min-height: 1.4em; }
.zg-timeline { display: flex; flex-direction: column; }
.zg-tl-item { display: flex; gap: 12px; }
.zg-tl-side { flex: 0 0 auto; width: 96px; text-align: right; padding-top: 1px; }
.zg-tl-rail { flex: 0 0 auto; position: relative; width: 14px; }
.zg-tl-dot { position: absolute; top: 3px; left: 1px; width: 12px; height: 12px; border-radius: 50%;
             border: 2px solid var(--chip, #8a7a66); background: var(--mud-palette-surface, #fffaf2); }
.zg-tl-item:not(:last-child) .zg-tl-rail::after { content: ""; position: absolute; top: 18px; bottom: -2px;
             left: 6px; width: 2px; background: var(--mud-palette-lines-default, #e3d8c5); }
.zg-tl-body { flex: 1 1 auto; padding-bottom: 14px; min-width: 0; }
/* Audit field-level diff: collapsed by default, so the summary has to read as a control rather than a stray line. */
.zg-audit-diff > summary {
    cursor: pointer;
    display: inline-block;
    font-size: 0.78rem;
    color: var(--zg-muted);
    padding: 1px 0;
    user-select: none;
}
.zg-audit-diff > summary:hover { color: var(--ziggis-espresso); }
:root[data-theme="dark"] .zg-audit-diff > summary:hover { color: var(--ziggis-tan); }
.zg-audit-diff[open] > summary { margin-bottom: 2px; }

/* ---- Supplier record — Overview tab (owner 2026-07-28: "it looks jammed up") -------------
   The tab was one left-aligned column: numbers, details and actions all the same weight, all touching.
   Same content, given room and grouping — a stat strip, then cards for the detail blocks, then the actions
   below a rule. Every colour is a theme token so dark mode follows. */
.zg-sup-overview { padding: 0.25rem 0.25rem 1.5rem; max-width: 78rem; }
.zg-sup-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 0.85rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid var(--zg-border);
}
/* Stat strip: auto-fit so five tiles sit on one row on a wide screen and reflow, never squash. */
.zg-sup-stats {
    display: grid;
    /* 9.5rem so all five clear one row inside the tabbed content area (~888px) rather than breaking 4+1;
       auto-fit still reflows them on a narrow window instead of squashing. */
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}
.zg-sup-stat {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius);
    background: var(--zg-surface);
}
.zg-sup-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--zg-muted);
}
.zg-sup-stat-value {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
/* The balance owed is the headline number on the page — let it read as one. */
.zg-sup-stat-value--lead { font-size: 1.35rem; font-weight: 700; }
/* "open / 4" is context for the count, not part of it. */
.zg-sup-stat-of { font-size: 0.82rem; font-weight: 400; color: var(--zg-muted); }

.zg-sup-card {
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius);
    background: var(--zg-surface);
}
.zg-sup-spark { margin-bottom: 1.15rem; }
.zg-sup-spark > div { margin-top: 0.35rem; }
.zg-sup-spark svg { width: 100%; max-width: 34rem; height: auto; }

.zg-sup-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.85rem;
    align-items: start;
}
/* Actions sit under everything they change, separated by a rule so they don't read as more data. */
.zg-sup-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--zg-border);
}
.zg-sup-pos { margin-top: 1.35rem; }
.zg-sup-pos table { width: 100%; }

/* ---- Supplier > Items > Import… price-list panel (item 1052) ---- */
.zg-pl-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; max-width: 46rem; }
.zg-pl-busy { display: flex; align-items: center; gap: 0.6rem; padding: 2rem 0; }
.zg-pl-recent { width: 100%; }
.zg-pl-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin-bottom: 0.5rem; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.zg-pl-note { display: block; margin-bottom: 0.6rem; }
/* 1859: Gold Seal's three-step DSDLink how-to + the draggable bookmark */
.zg-pl-dsd { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 1rem; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), 0.04); }
.zg-pl-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; }
.zg-pl-bookmarklet { display: inline-block; padding: 0 10px; border: 1px solid var(--mud-palette-primary); border-radius: 999px;
    color: var(--mud-palette-primary); font-weight: 600; text-decoration: none; cursor: grab; }
/* 1859: "How matching works" stays one closed line under the how-to */
.zg-pl-howto { align-self: stretch; }
.zg-pl-howto .zg-accordion-summary { padding: 2px 0; min-height: 0; font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.zg-pl-howto .zg-accordion-body { padding: 0 0 4px; }
/* 1859: the review fills the wide panel; the grid takes every row of height left (its body scrolls, the toolbar stays). */
.zg-pl-review { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.zg-pl-grid { display: flex; flex-direction: column; flex: 1 1 0; min-height: 320px; }
.zg-pl-grid .erp-grid-v2-toolbar-right { flex: 0 0 auto; }
.zg-pl-grid .erp-grid-v2-search-input { width: 190px; }
.zg-pl-grid .erp-grid-v2-table th, .zg-pl-grid .erp-grid-v2-table td { padding-left: 6px; padding-right: 6px; }
.erp-grid-v2-table tbody td.zg-pl-col-sku, .erp-grid-v2-table tbody td.zg-pl-col-pack { color: var(--mud-palette-text-secondary); }
.erp-grid-v2-table tbody td.zg-pl-col-desc { max-width: 16rem; }
.erp-grid-v2-table tbody td.zg-pl-col-pack { max-width: 6.5rem; }
/* The item on one line (… past the width), the pack under it. */
.zg-pl-match { width: 16.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.zg-pl-match .ant-select { width: 100%; }
.zg-pl-match-line { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.zg-pl-match-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-pl-match .zg-pl-pick { min-width: 0; max-width: 100%; padding: 0 4px; font-size: 0.75rem; text-align: left; overflow: hidden; text-overflow: ellipsis; }
/* Accept (or the row's next step) + the ⋯ menu, in the same two slots on every row. */
.zg-pl-actions { display: grid; grid-template-columns: 4.25rem 2rem; gap: 4px; align-items: center; }
.zg-pl-actions > * { min-width: 0; }
.zg-pl-actions .zg-pl-act { width: 100%; min-width: 0; padding: 2px 4px; font-size: 0.75rem; line-height: 1.5; white-space: nowrap; }
.zg-pl-cost { white-space: nowrap; font-variant-numeric: tabular-nums; }
.zg-pl-up { color: var(--mud-palette-error); }
.zg-pl-down { color: var(--mud-palette-success); }
.zg-pl-pct--big { font-weight: 700; padding: 0 3px; border-radius: 4px; background: rgba(var(--mud-palette-warning-rgb), 0.18); cursor: help; }
.zg-pl-derived { border-bottom: 1px dotted var(--mud-palette-text-secondary); cursor: help; }
/* item 1063: the pack a row writes + its "check pack" / "order pack" flags */
.zg-pl-pack { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 0.75rem; white-space: nowrap; overflow: hidden; }
.zg-pl-col-cost .zg-pl-flag { margin-left: 4px; }
/* 1095: the per-row price-basis toggle sits beside the cost as a small text button */
.zg-pl-col-cost .zg-pl-basis { min-width: 0; margin-left: 4px; padding: 0 4px; font-size: 0.72rem; line-height: 1.5; }
.erp-grid-v2-table tbody tr.zg-pl-row--chosen td { background: rgba(var(--mud-palette-success-rgb), 0.07); }
.erp-grid-v2-table tbody tr.zg-pl-row--applied td { color: var(--mud-palette-text-secondary); }
.erp-grid-v2-table tbody tr.zg-pl-row--ignored td { color: var(--mud-palette-text-disabled); background: rgba(var(--mud-palette-text-disabled-rgb), 0.04); }
.erp-grid-v2-table tbody tr.zg-pl-row--ignored td .zg-pl-derived { border-bottom-color: var(--mud-palette-text-disabled); }
/* 1862: Gold Seal invoice from DSDLink: the prompt on Pay Bills › Upload / the PO, and the bill check in its panel */
.zg-gsi-prompt { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; padding: 0.6rem 0.9rem;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), 0.05); }
.zg-gsi-prompt--list { align-items: flex-start; }
.zg-gsi-prompt-body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; }
.zg-gsi-prompt-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.po-unbilled-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }   /* 1868 */
.zg-gsi { display: flex; flex-direction: column; gap: 0.75rem; }
.zg-gsi-head { display: flex; align-items: flex-end; gap: 1.5rem; }
.zg-gsi-due { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8rem; }
.zg-gsi-due strong { font-size: 1.15rem; color: var(--mud-palette-text-primary); }
.zg-gsi-pick { display: flex; align-items: center; gap: 0.6rem; }
.zg-gsi-pick-select { min-width: 24rem; }
.zg-gsi-table td { vertical-align: top; }
.zg-gsi-table tr.zg-gsi-flag td { background: rgba(var(--mud-palette-warning-rgb), 0.08); }
.zg-gsi-pack, .zg-gsi-note { font-size: 0.75rem; }
.zg-gsi-totals { display: flex; justify-content: flex-end; gap: 1.5rem; font-size: 0.875rem; padding-top: 0.25rem;
    border-top: 1px solid var(--mud-palette-lines-default); }
/* 1763: "How was it paid?" on a bill about to post */
.zg-paidwith { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 1rem; border-radius: 8px;
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.45); background: rgba(var(--mud-palette-info-rgb), 0.05); }
.zg-paidwith-opt { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.zg-paidwith-card { min-width: 14rem; }
.zg-paidwith-note { padding-left: 1.5rem; }

/* ---- ADR-0134 Mud-free primitives (AppSpacer / AppDivider / AppSpinner) ---- */
.zg-spacer { flex: 1 1 auto; }
.zg-divider { border: 0; border-top: 1px solid var(--mud-palette-lines-default, #e3d8c5); margin: 0; }
.zg-spin { display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:50%;
           border:2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color:currentColor;
           animation: zg-spin .8s linear infinite; }
@keyframes zg-spin { to { transform: rotate(360deg); } }

/* Employees list: the caller's OWN row — locked here, reached via My Profile (owner rule 2026-07-18). */
.emp-self-row td { opacity: .55; }

/* AppToggleGroup XLarge (owner: Write-check mode picker) — tall, bold, big targets. */
.zg-toggle-xl .mud-toggle-item { padding: 14px 10px; font-size: 1.12rem; font-weight: 700; }

/* Owner: checkboxes were hard to see — darker borders everywhere. */
.ant-checkbox-inner { border: 1.5px solid rgba(138,109,59,0.75) !important; }
.app-table input[type=checkbox], .erp-grid input[type=checkbox], table input[type=checkbox] {
    outline: 1.5px solid rgba(138,109,59,0.6); outline-offset: -1px; border-radius: 3px; accent-color: #5b4a33;
}
/* Date/time pickers join the 40px control band (were 38px beside 40px inputs); toolbars stay 36px (.erp-grid-v2-toolbar). */
.ant-picker { width: 100%; height: var(--zg-ctl-h); min-height: var(--zg-ctl-h); }

/* Journal grid: post-dated (future) posted JEs are tinted, with a red "today" line above the first today/past
   row (QuickBooks-style). Applied via RowClassFunc; global (no scoped razor.css). */
.je-future td { background: rgba(var(--mud-palette-error-rgb), 0.06) !important; }
.je-today-line td { border-top: 2px solid var(--mud-palette-error) !important; }
/* 1624: a report-range ledger drill - beginning/ending balance rows, the back link to the report */
.ledger-edge td { background: rgba(var(--mud-palette-primary-rgb), 0.05) !important; font-weight: 600; }
.report-back-link { display: inline-block; margin: 2px 0 8px; font-size: 13px; }
/* #575: truncation banner removed — journal all-entries view is server-paged now. */
/* Ledger memo column: follows the column width (drag it), ellipsis at the edge; full text in the title tooltip. */
.ledger-memo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* JournalLinesView: pencil appears on hover, stays muted so it doesn't fight the memo text. */
.jlv-memo-pencil { opacity: 0.3; margin-left: 4px; transition: opacity .15s; }
.jlv-memo-pencil:hover { opacity: 0.8; }

/* Checks register: display:contents keeps the register grid a direct flex child (its height chain). The
   numbering-gap rule sits on the side the missing range is (bottom = ▼ newest-first, top = ▲ ascending). */
.checks-register-wrap { display: contents; }
.check-gap-below td { border-bottom: 3px solid var(--mud-palette-secondary) !important; }
.check-gap-above td { border-top: 3px solid var(--mud-palette-secondary) !important; }
.check-gap-note { color: var(--mud-palette-secondary-darken); font-size: 0.7rem; font-weight: 700;
                  letter-spacing: 0.05em; margin-left: 8px; white-space: nowrap; }

/* ---- ADR-0101 contextual help overlay ------------------------------------
   Panel body only — the slide-over chrome is SidePanel's. Global (not scoped) per the CSS rule; colors from
   theme vars so the authored SVG diagrams read in both themes. */
.zg-help { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 16px; }
.zg-help-svg { width: 100%; height: auto; display: block; margin: 2px 0 6px; }
.zg-help-section {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--zg-text-muted, #6b7280); margin-top: 6px;
}
.zg-help-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.zg-help-rules li { font-size: .86rem; line-height: 1.4; color: var(--zg-text-body, #1f2937); }
.zg-help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zg-help-list li { padding: 1px 0; }
.zg-help-link {
    background: none; border: none; padding: 4px 0; cursor: pointer; font-size: .88rem; text-align: left;
    color: var(--zg-text-link, #8a5a2b); text-decoration: underline;
}
.zg-help-link:hover { opacity: .82; }
.zg-help-none { font-size: .85rem; color: var(--zg-text-muted, #6b7280); margin: 2px 0; }
.zg-help-foot { margin-top: 10px; border-top: 1px solid var(--zg-border, rgba(0,0,0,.08)); padding-top: 8px; }
.zg-help-search {
    width: 100%; padding: 7px 10px; border-radius: 8px; font-size: .88rem;
    border: 1px solid var(--zg-border, rgba(0,0,0,.12));
    background: var(--zg-surface, #fff); color: var(--zg-text-body, #1f2937);
}
/* The "?" trigger is icon-only, so it doesn't need the label spacing .ask-trigger carries. */
.zg-help-trigger { padding-left: 8px; padding-right: 8px; }

/* Semantic widget-value tones (#462). Widgets hardcoded #166534/#92400e/#b91c1c inline for "good/warn/bad"
   numbers; inline styles beat every stylesheet, so those could never go dark-aware. Use these instead. */
.zg-wv--ok   { color: #166534; }
.zg-wv--warn { color: #92400e; }
.zg-wv--err  { color: #b91c1c; }
:root[data-theme="dark"] .zg-wv--ok   { color: #86EFAC; }
:root[data-theme="dark"] .zg-wv--warn { color: #E9C48A; }
:root[data-theme="dark"] .zg-wv--err  { color: #FCA5A5; }
.zg-wv--info { color: #1e40af; }
:root[data-theme="dark"] .zg-wv--info { color: #7FD4DE; }

/* ---- PrintBrandHeader (#462) --------------------------------------------
   Authored for PAPER (dark ink on white), but it also renders on screen above every report — so in dark mode
   the report title and subtitle were near-invisible. Screen follows the theme; print is forced back to ink
   regardless of theme, so a dark-mode user still prints a legible document. */
.zg-print-title { font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: #2f2a22; }
.zg-print-sub   { font-size: .95rem; margin-top: 2px; color: #6b6257; }
:root[data-theme="dark"] .zg-print-title { color: var(--zg-text-strong); }
:root[data-theme="dark"] .zg-print-sub   { color: var(--zg-text-muted); }
@media print {
    .zg-print-title, :root[data-theme="dark"] .zg-print-title { color: #2f2a22 !important; }
    .zg-print-sub,   :root[data-theme="dark"] .zg-print-sub   { color: #6b6257 !important; }
}

/* ---- Print skin (the PDF path) --------------------------------------------
   Export hands the region to the BROWSER'S print pipeline (pdf-export.js printRegion), so the output is real
   selectable text, not a screenshot. printRegion tags the target `.zg-print-target` and every ancestor
   `.zg-print-path`, then strips both on afterprint — so ANY region id prints on its own and there is no
   per-surface print layout to write. Everything below is print-media only: it can never reach the screen.
   Goal is a filed-report look: narrow ink-on-white type, ruled ledger tables, no screen chrome.
   Swap the two font vars to retune every printed document at once. */
@media print {
    @page { margin: 14mm 12mm; }

    /* Isolate the region: anything hanging off an ancestor that isn't itself on the path goes. That covers the
       sidebar, app bar, tab strip, toolbars and any body-appended popover, without naming one of them. */
    .zg-print-path > *:not(.zg-print-path):not(.zg-print-target) { display: none !important; }
    /* The ancestors survive but stop being layout — no flex/grid centring, no fixed heights, no scroll clipping
       (a scroll container would otherwise print only the slice that happened to be visible). */
    .zg-print-path {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        position: static !important;
    }
    /* A dark-mode user still prints ink on white. */
    :root, :root[data-theme="dark"] {
        color-scheme: light;
        --zg-surface: #fff;
        --zg-surface-soft: #fff;
        --zg-muted: #55504a;
        --zg-border: #d8d4cd;
        --zg-border-strong: #b8b2a8;
    }

    .zg-print-target {
        --pdf-font-body:  "Aptos Narrow", "Arial Narrow", "Liberation Sans Narrow", Inter, system-ui, sans-serif;
        --pdf-font-title: Georgia, "Times New Roman", serif;
        font-family: var(--pdf-font-body);
        font-size: 9.5pt;
        line-height: 1.35;
        color: #1c1a17;
        background: #fff;
    }
    .zg-print-target * { font-family: inherit; }
    /* Letterhead: serif title — the "official document" cue. Never orphan it at the foot of a page. */
    .zg-print-target .zg-print-title {
        font-family: var(--pdf-font-title) !important;
        font-size: 17pt;
        letter-spacing: 0.01em;
        color: #1c1a17;
        break-after: avoid;
    }
    .zg-print-target .zg-print-sub {
        font-family: var(--pdf-font-title) !important;
        font-size: 10pt;
        color: #55504a;
    }
    /* Tables: ruled ledger, not a UI grid. Uppercase letter-spaced heads over a dark rule, hairlines between
       rows, tabular figures so the money columns line up digit-for-digit. table-header-group is what repeats
       the column heads on every page — the thing that makes a multi-page report readable. */
    .zg-print-target table { width: 100%; border-collapse: collapse; }
    .zg-print-target thead { display: table-header-group; }
    .zg-print-target tr { break-inside: avoid; }
    .zg-print-target thead th {
        text-transform: uppercase;
        letter-spacing: 0.07em;
        font-size: 7pt !important;
        font-weight: 700;
        color: #1c1a17 !important;
        background: none !important;
        padding: 3px 6px !important;
        border: none !important;
        border-bottom: 1.2px solid #1c1a17 !important;
    }
    .zg-print-target tbody td {
        font-size: 9.5pt !important;
        padding: 2.5px 6px !important;
        border: none !important;
        border-bottom: 0.6px solid #d8d4cd !important;
        background: none !important;
        color: #1c1a17;
        font-variant-numeric: tabular-nums;
    }
    .zg-print-target tbody tr:last-child td { border-bottom: 1.2px solid #1c1a17 !important; }
    /* Rollup/subtotal rows keep their weight but lose the screen tint — on paper the rule does that job. */
    .zg-print-target tr.zg-coa-rollup td { background: none !important; box-shadow: none !important; font-weight: 700; }
    /* Cards/surfaces become plain ruled blocks; chips become outlined text, not filled pills. */
    .zg-print-target .app-surface,
    .zg-print-target .zg-card {
        box-shadow: none !important;
        border: 0.6px solid #b8b2a8 !important;
        border-radius: 0 !important;
        background: none !important;
        break-inside: avoid;
    }
    .zg-print-target .zg-chip {
        background: none !important;
        border: 0.6px solid #55504a !important;
        border-radius: 0 !important;
        color: #1c1a17 !important;
        font-size: 7.5pt !important;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    /* Links are dead ink on paper — colouring/underlining them just invites clicks that do nothing. */
    .zg-print-target a, .zg-print-target .zg-link { color: #1c1a17 !important; text-decoration: none !important; }
    .zg-print-target .erp-grid-v2,
    .zg-print-target .erp-grid-v2-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    /* Two-column reports (Balance Sheet, Income Statement) are an AppGrid of md-6 items. Flex items default to
       min-width:auto, and the grid tables are white-space:nowrap — so a 721px-wide table inside a 481px column
       simply refuses to shrink and spills over the neighbouring column instead (measured: 240px of overlap).
       Let them shrink, let the cells wrap, and give a real flex-basis so the pair drops to ONE column when the
       paper can't fit two — portrait wraps, landscape keeps both. */
    .zg-print-target .mud-grid { display: flex; flex-wrap: wrap; }
    .zg-print-target .mud-grid-item {
        min-width: 0;
        flex: 1 1 26rem;
        max-width: 100% !important;   /* beats mud-grid-item-md-6's 50% cap */
    }
    .zg-print-target .mud-grid-item td,
    .zg-print-target .mud-grid-item th { white-space: normal !important; }
    /* Don't split a section (Assets / Liabilities / Equity) across a page break if it can be helped. */
    .zg-print-target .mud-grid-item > * { break-inside: avoid; }

    /* Screen-only chrome that has no meaning on paper. */
    .zg-print-target .erp-grid-v2-toolbar,
    .zg-print-target .erp-grid-v2-pager,
    .zg-print-target .erp-grid-v2-sort,
    .zg-print-target .erp-grid-v2-expand,
    .zg-print-target .app-btn,
    .zg-print-target button { display: none !important; }
}

/* CORR-8 reconcile-light: past ~10 days "the bank hasn't caught up" stops being credible — tint the row
   so a real exception separates itself from the normal settlement lag at a glance. */
.zg-stale-row td { background: rgba(var(--mud-palette-warning-rgb), 0.10) !important; }
.zg-stale-row td:first-child { box-shadow: inset 3px 0 0 0 var(--mud-palette-warning); }

/* BR-6 reconciliation workspace: the 4-tile proof strip. The last tile IS the verdict, so it carries the
   colour — green when it ties out, red when it does not. Theme vars only; never Aedium's hardcoded hexes. */
.zg-rec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.zg-rec-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
    border: 1px solid var(--zg-border, rgba(74,38,19,0.18)); border-radius: var(--zg-radius-sm); }
.zg-rec-tile-k { font-size: 0.75rem; opacity: 0.7; }
.zg-rec-tile-v { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.zg-rec-tile.is-ok { border-color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), 0.08); }
.zg-rec-tile.is-off { border-color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), 0.08); }
/* THE EVIDENCE LADDER, one meaning wherever a dot appears (owner 2026-07-26):
     nothing = no one has confirmed it
     GOLD    = the bank agrees (feed, Xero, or you said so) but it has not been PROVED in a reconciliation
     GREEN   = proved in a finalized reconciliation
   Green is only ever CorroborationSource.Statement, which only promote-on-finalize writes — so the colour
   cannot drift from the truth without the reconciliation itself changing. */
.zg-rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mud-palette-success); }
.zg-rec-dot.is-unreconciled { background: var(--mud-palette-warning); }

/* BR-9: secondary toolbar rows inside the grid chrome — notices that belong to the grid, not to a row. */
/* Top padding so the summary/notice row is not crowded against the toolbar border above it
   (owner 2026-07-26). */
.erp-grid-v2-notices { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; }
.erp-grid-v2-notice {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.45);
    background: rgba(var(--mud-palette-info-rgb), 0.08);
    border-radius: var(--zg-radius-sm); font-size: 0.9rem;
}
.erp-grid-v2-notice.is-warn {
    border-color: rgba(var(--mud-palette-warning-rgb), 0.55);
    background: rgba(var(--mud-palette-warning-rgb), 0.10);
}

/* An auxiliary-row SUMMARY: the state of the thing you are looking at. Reads as content, not a footnote
   (that is .erp-grid-v2-legend) and not an alert (.erp-grid-v2-notice). */
.erp-grid-v2-summary { font-size: 0.92rem; line-height: 1.6; }

/* Auxiliary-row FILTERS: secondary narrowing that would otherwise push the primary toolbar into a scroll. */
.erp-grid-v2-filters { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; flex-wrap: wrap; }

/* CoA tree: the row is 16-24px of content, but the edit pencil shipped its default 48px hit target and set
   the row height single-handedly (measured 2026-07-26: row 52px, actions 48px, everything else <=24px).
   Scoped to .coa-tree so icon buttons everywhere else keep their normal size. */
.coa-tree .coa-actions { height: 24px; }
.coa-tree .coa-actions .mud-button-root,
.coa-tree .coa-actions .mud-icon-button {
    height: 24px; min-height: 24px; width: 24px; min-width: 24px; padding: 0;
}
.coa-tree .coa-actions .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }

/* Toolbar selects are BOUNDED. `flex: 0 0 auto` (which stops buttons being crushed) also stops a select
   shrinking, so one long option — "High Grounds Coffee Sales and Service" — sized the control and pushed the
   whole bar into a horizontal scroll (owner 2026-07-26). Cap the trigger and ellipsise; the dropdown panel
   sizes to its own content (AppSelectAnt.DropdownMatchSelectWidth defaults false) so nothing is unreadable. */
.erp-grid-v2-toolbar .ant-select,
.erp-actionbar .ant-select { min-width: 140px; max-width: 240px; }
.erp-grid-v2-toolbar .ant-select-selection-item,
.erp-actionbar .ant-select-selection-item {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* …and the panel never collapses to the trigger's narrow width. */
.ant-select-dropdown { min-width: 220px; }

/* ADR-0150 RS-2 — the shared option vocabulary. Adopters compose these instead of hand-rolling inline styles,
   so every rich picker in the app lines up and themes together. */
/* align-items:center, not baseline: a 600-weight name next to a 0.75rem balance baseline-aligns to something
   that reads as "sitting high". Stacked (two-line) adopters override flex-direction themselves. */
.app-opt { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.app-opt-title { font-weight: 600; }
.app-opt-sub { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
/* margin-left:auto is what makes the numeric column right-align without a table. Never shrinks: the number is
   the reason the row is rich, so the NAME gives way first. */
.app-opt-num { margin-left: auto; font-variant-numeric: tabular-nums; flex: 0 0 auto; white-space: nowrap; }
/* Truncate the name rather than wrap it. In a closed one-line control a wrapped name pushed the row to two
   lines inside a single-line box, which reads as broken (owner 2026-07-26). */
.app-opt > span:not(.app-opt-num) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Money on an option row. A NEGATIVE balance is the one thing you must not miss while picking an account,
   so it loses the muting and gains weight rather than just changing hue. */
.zg-bal { font-size: 0.75rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
/* Owner 2026-08-20: balance reads as a success/error CHIP (tinted background + bold), not colored text. */
.zg-bal-pos, .zg-bal-neg { opacity: 1; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
.zg-bal-pos { background: rgba(var(--mud-palette-success-rgb), 0.16); color: var(--mud-palette-success); }
.zg-bal-neg { background: rgba(var(--mud-palette-error-rgb), 0.16); color: var(--mud-palette-error); }

/* "After this payment: $X" — a strip that reads as ATTACHED under the bank picker (owner 2026-07-27):
   negative margin tucks it beneath the control's rounded corners; only the bottom corners round. */
.zg-after-pay {
    display: block;
    margin-top: -3px;
    padding: 6px 12px;
    border-radius: 0 0 8px 8px;
    font-size: 0.75rem;
    background: rgba(var(--mud-palette-lines-default-rgb, 128, 128, 128), 0.10);
    color: var(--mud-palette-text-secondary);
    /* Owner 2026-08-20: continue the picker's border down the strip so the whole thing reads as ONE
       enclosed field (was: bordered select + naked strip = "border around the top half only"). */
    border: 1px solid rgba(var(--mud-palette-lines-default-rgb, 128, 128, 128), 0.45);
    border-top: 0;
}
.zg-after-pay--neg {
    background: rgba(var(--mud-palette-error-rgb), 0.14);
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* Pay-bills "Total payment" — carries the figure now that the footer button doesn't (owner 2026-07-27). */
.zg-pay-total {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--zg-accent-soft, rgba(59, 167, 180, 0.14));
}
.zg-pay-total > span { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.zg-pay-total > strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ---- Public policy pages (/privacy, /security-policy, /data-retention, /terms, /sms-optin).
   Anonymous + static-rendered, so there is no MudBlazor in the tree — the whole type scale lives here. ---- */
.zg-policy { max-width: 46rem; margin: 2rem auto 3rem; padding: 0 1.25rem; line-height: 1.55; }
.zg-policy h1 { font-size: 1.5rem; margin: 0 0 0.2rem; }
.zg-policy h2 { font-size: 1.15rem; margin: 1.6rem 0 0.4rem; }
.zg-policy h3 {
    font-size: 0.82rem; margin: 1.1rem 0 0.2rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}
.zg-policy ul, .zg-policy ol { margin: 0.4rem 0; padding-left: 1.35rem; }
.zg-policy li { margin: 0.25rem 0; }
.zg-policy-meta { color: var(--mud-palette-text-secondary); font-size: 0.9rem; margin: 0 0 1.1rem; }

/* The draft banner has to be impossible to miss — a policy page is quotable the moment it is linked. */
.zg-policy-draft {
    margin: 0 0 1.4rem;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 0 6px 6px 0;
    background: rgba(var(--mud-palette-warning-rgb), 0.12);
    font-size: 0.9rem;
}

/* Cross-links to the rest of the pack; also the per-page version stamp. */
.zg-policy-nav {
    margin-top: 2.2rem; padding-top: 0.8rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.88rem; color: var(--mud-palette-text-secondary);
}

/* ADR-0156 — the "Due now" block above the Prepaids grid. Boxed so the grid below reads as a separate list. */
.prepaid-due-section {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: rgba(var(--mud-palette-info-rgb), 0.06);
}
.prepaid-due-row { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 0.25rem; }
.prepaid-due-row:first-of-type { border-top: 0; }

/* 670: prepaid recognition progress cell — bar fills the cell, "x of y" label rides beside it. */
.prepaid-progress-cell { display: flex; align-items: center; gap: 0.5rem; min-width: 130px; }
.prepaid-progress-cell .zg-progress { flex: 1; min-width: 56px; height: 8px; }
.prepaid-progress-label { white-space: nowrap; font-size: 0.78rem; color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums; }

/* ================= ADR-0156 — period-close wizard (steps + pre-flight checklist) ================= */

/* Step indicator (AppStepsAnt). Display-only: the wizard footer owns navigation. */
.zg-steps { display: flex; align-items: center; gap: 0; width: 100%; }
.zg-step { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.zg-step-dot {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 600; line-height: 1;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-secondary);
}
.zg-step-title { font-size: 0.85rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.zg-step-bar { flex: 1 1 auto; height: 1px; min-width: 1rem; margin: 0 0.6rem; background: var(--mud-palette-lines-default); }
.zg-step--process .zg-step-dot { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.zg-step--process .zg-step-title { color: var(--mud-palette-text-primary); font-weight: 600; }
.zg-step--finish .zg-step-dot { border-color: var(--mud-palette-success); color: var(--mud-palette-success); }
.zg-step--finish .zg-step-bar { background: var(--mud-palette-success); }
.zg-step--error .zg-step-dot { border-color: var(--mud-palette-error); color: var(--mud-palette-error); }

/* The chain banner: "3 periods to close — now: June 2026". Sequencing is a queue, never a dead end. */
.pcw-chain-banner {
    margin-bottom: 0.9rem; padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--mud-palette-info); border-radius: 0 6px 6px 0;
    background: rgba(var(--mud-palette-info-rgb), 0.1);
}

/* One pre-flight check. The left rail carries the verdict colour so a Block is findable at a glance. */
.pcw-check-row {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid transparent;
}
.pcw-check-row--block { border-left-color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), 0.06); }
.pcw-check-row--warn { border-left-color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), 0.06); }
.pcw-check-row--pass { border-left-color: rgba(var(--mud-palette-success-rgb), 0.5); }
.pcw-check-chip { flex: 0 0 auto; margin-top: 0.1rem; }
.pcw-check-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.pcw-check-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; font-size: 0.82rem; }
.pcw-check-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.pcw-check-count { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.pcw-check-act { flex: 0 0 auto; display: flex; align-items: center; gap: 0.25rem; }
.pcw-check-override { padding: 0 0.7rem 0.7rem 1.4rem; border-bottom: 1px solid var(--mud-palette-lines-default); }

/* Adjustments-step cards + the "arrives with PC-2/PC-3" placeholders. */
.pcw-card { padding: 0.8rem 0.9rem; margin-bottom: 0.8rem; }
.pcw-card--pending { border-style: dashed; }
.pcw-placeholder { color: var(--mud-palette-text-disabled); font-style: italic; }
.pcw-memo {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.35rem 0; border-top: 1px solid var(--mud-palette-lines-default);
}
.pcw-memo-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.pcw-review-foot {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 0.6rem; padding-top: 0.5rem; font-size: 0.88rem;
    border-top: 1px solid var(--mud-palette-lines-default); font-variant-numeric: tabular-nums;
}
.pcw-override-summary { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.4rem; }

/* PC-2: the closing entry's net line into retained earnings — the one line that isn't a P&L account. */
.pcw-ye-net {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 4px;
    font-weight: 600; font-variant-numeric: tabular-nums;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    border-left: 3px solid var(--mud-palette-primary);
}

/* Item 585: AR aging strip — mirrors the AP buckets in BillsTab but uses theme vars. */
.ar-bucket { min-width: 120px; }
.ar-bucket--overdue {
    border-color: var(--mud-palette-warning) !important;
    background: rgba(var(--mud-palette-warning-rgb), 0.06);
}
.ar-bucket--total {
    min-width: 140px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}
.ar-bucket-label--overdue { color: var(--mud-palette-warning-darken); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ================= Item 727 — Taxes & Payroll Summary: grouped advisories ================= */
/* Sections stack with air between them; headings are quiet so the advisory ROWS carry the weight. */
.zsum-section { margin: 0 0 1.1rem; }
.zsum-section:last-child { margin-bottom: 0; }
.zsum-heading { margin: 0 0 0.5rem; }
.zsum-subheading { margin: 0.9rem 0 0.35rem; color: var(--mud-palette-text-secondary); }

/* The calm "nothing needs a human" line — one row, not a green box. */
.zsum-allclear { display: flex; align-items: center; gap: 0.5rem; color: var(--mud-palette-text-secondary); }
.zsum-allclear-ic { width: 18px; height: 18px; color: var(--mud-palette-success); flex: 0 0 auto; }
.zsum-allclear-ic--info { color: var(--mud-palette-info); }   /* the "no activity detected" all-clear is info-toned, not success */

/* One clickable attention row. Left-accent + icon/count colour carry severity; the whole row is the link
   (overrides .zg-link's primary colour + hover underline — this block comes later in the file so it wins). */
.zsum-advisories { display: flex; flex-direction: column; gap: 0.4rem; }
.zsum-advisory {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.85rem; border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left-width: 3px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary); text-decoration: none; cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
a.zsum-advisory:hover { text-decoration: none; background: var(--mud-palette-action-default-hover); }
.zsum-advisory-ic { flex: 0 0 auto; width: 22px; height: 22px; }
.zsum-advisory-body { flex: 1 1 auto; min-width: 0; }
.zsum-advisory-title { font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.zsum-advisory-sub { font-size: 0.78rem; color: var(--mud-palette-text-secondary); line-height: 1.3; }
.zsum-advisory-count { flex: 0 0 auto; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.zsum-advisory-chev { flex: 0 0 auto; width: 20px; height: 20px; color: var(--mud-palette-text-secondary); }

.zsum-advisory--error { border-left-color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), 0.05); }
.zsum-advisory--error .zsum-advisory-ic, .zsum-advisory--error .zsum-advisory-count { color: var(--mud-palette-error); }
.zsum-advisory--warning { border-left-color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), 0.05); }
.zsum-advisory--warning .zsum-advisory-ic, .zsum-advisory--warning .zsum-advisory-count { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.zsum-advisory--info { border-left-color: var(--mud-palette-info); background: rgba(var(--mud-palette-info-rgb), 0.05); }
.zsum-advisory--info .zsum-advisory-ic, .zsum-advisory--info .zsum-advisory-count { color: var(--mud-palette-info); }
.zsum-advisory--success { border-left-color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), 0.05); }
.zsum-advisory--success .zsum-advisory-ic, .zsum-advisory--success .zsum-advisory-count { color: var(--mud-palette-success-darken, var(--mud-palette-success)); }
/* Static (non-link) advisory cards, e.g. Filings all-clear — same look, no pointer affordance. */
.zsum-advisory--static { cursor: default; }
/* Critical tone — past-due money/filings: deeper red than --error (darker accent, stronger tint, red title). */
.zsum-advisory--critical { border-left-color: var(--mud-palette-error-darken, var(--mud-palette-error)); background: rgba(var(--mud-palette-error-rgb), 0.10); }
.zsum-advisory--critical .zsum-advisory-ic, .zsum-advisory--critical .zsum-advisory-count,
.zsum-advisory--critical .zsum-advisory-title { color: var(--mud-palette-error-darken, var(--mud-palette-error)); }
.zsum-advisory-sub ul { margin: 0.15rem 0 0; padding-left: 1.1rem; }

/* ---- ADR-0163: Compliance Calendar ---- */
.compliance-calendar-wrapper { padding: 16px; }
.compliance-month-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.compliance-month-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; overflow: hidden;
}
.compliance-dow-header {
    text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 6px 0;
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-lines-default);
}
.compliance-day-cell {
    min-height: 80px; padding: 4px; border-bottom: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default); font-size: 12px; overflow: hidden;
}
.compliance-day-cell:nth-child(7n) { border-right: none; }
.compliance-day-other { opacity: 0.4; }
.compliance-day-today { background: rgba(var(--mud-palette-primary-rgb), 0.08); }
.compliance-day-num { font-weight: 600; font-size: 13px; display: block; margin-bottom: 2px; }
.compliance-occ-chip {
    font-size: 10px; padding: 1px 4px; border-radius: 3px; margin-bottom: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compliance-occ-upcoming { background: rgba(59,130,246,.12); color: #1d4ed8; }
.compliance-occ-due { background: rgba(230,162,60,.15); color: #92400e; }
.compliance-occ-done { background: rgba(22,163,74,.12); color: #15803d; }
.compliance-occ-skipped { background: rgba(156,163,175,.12); color: #6b7280; }
.compliance-occ-overdue { background: rgba(239,68,68,.12); color: #b91c1c; }
.compliance-occ-missed { background: rgba(var(--mud-palette-error-rgb), .18); color: var(--mud-palette-error); text-decoration: line-through; }
.compliance-occ-more { font-size: 10px; color: var(--mud-palette-text-secondary); }

/* Agenda list */
.compliance-agenda { padding: 12px 16px; }
.compliance-agenda-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.compliance-agenda-date { text-align: center; min-width: 44px; }
.compliance-agenda-day { display: block; font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.compliance-agenda-month { display: block; font-size: 11px; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.compliance-agenda-body { flex: 1; min-width: 0; }
.compliance-agenda-title { display: block; font-weight: 500; }
.compliance-agenda-category { font-size: 11px; color: var(--mud-palette-text-secondary); }
.compliance-agenda-notes { display: block; font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.compliance-agenda-actions { display: flex; gap: 4px; align-items: center; }

/* Tasks toolbar */
.compliance-tasks-toolbar { display: flex; justify-content: flex-end; padding: 8px 16px; }

/* Item 1244: HACCP floor-task alignment panel */
.fta-intro { display: block; margin-bottom: 12px; color: var(--mud-palette-text-secondary); }
.fta-line { padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.fta-line--done { opacity: .6; }
.fta-line-head { display: flex; align-items: center; gap: 8px; }
.fta-title { font-weight: 500; }
.fta-changes { margin: 4px 0 0 28px; padding-left: 16px; font-size: 13px; color: var(--mud-palette-text-secondary); }
/* item 1305: a task the owner turned off — skipped unless ticked */
.fta-line--off .fta-title { color: var(--mud-palette-text-secondary); }
.fta-off-hint { margin: 4px 0 0 28px; font-size: 13px; color: var(--mud-palette-text-secondary); }
/* Item 1517: package groups in the align panel, the package-state line and the link note. */
.fta-packages { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.fta-group { margin-top: 12px; }
.fta-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 2px solid var(--mud-palette-divider); }
.fta-group-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.fta-group-count { font-size: 12px; color: var(--mud-palette-text-secondary); }
.fta-link-note { color: var(--mud-palette-text-disabled); }
.tpb-chip { white-space: nowrap; }
/* Item 1517: setup wizard package switch and listed-only (amendment) items. */
.zg-setup-switch { display: inline-flex; align-items: center; }
.zg-setup-item.is-info .zg-setup-item-title { font-weight: 400; }
.zg-setup-item-badge { margin-left: 6px; vertical-align: middle; }

/* Tax filing/remittance due-date row shading (shared by TaxPrepareTab + TaxRemittancesTab; item 677) —
   theme-var backed so light/dark both work. Applied via ErpGridV2 RowClassFunc. */
.tax-due-fatal td { background-color: rgba(var(--mud-palette-error-rgb), 0.24) !important; }
.tax-due-error td { background-color: rgba(var(--mud-palette-error-rgb), 0.11) !important; }
.tax-due-warn  td { background-color: rgba(var(--mud-palette-warning-rgb), 0.17) !important; }

/* EFTPS deposit-voucher monospace block (shared by both tax tabs). */
.eftps-voucher {
    font-family: var(--mud-typography-monospace, monospace);
    white-space: pre-wrap;
    background: var(--mud-palette-background-grey);
    padding: 12px;
    border-radius: 6px;
    margin: 0;
}

/* Gallery (item 678) — de-scoped from Gallery.razor.css; all selectors are prefixed with .gallery-page
   so these page-specific classes can't clash globally. Colors are legacy hardcoded values kept verbatim
   (theme-var conversion is shrink-only follow-up per the plan). Raw <input>/<select>/<button> rules were
   dropped: those controls are now App* wrappers. */
.gallery-page .gallery-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.gallery-page .gallery-header h1 { margin: 0; color: #2d5016; }
.gallery-page .gallery-stats { color: #666; font-size: 0.9rem; }
.gallery-page .filter-bar { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; padding: 1rem;
    background: #f5f5f0; border-radius: 8px; margin-bottom: 1.5rem; }
.gallery-page .filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
.gallery-page .filter-group label { font-size: 0.8rem; font-weight: 600; color: #555; }
.gallery-page .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gallery-page .image-card { border-radius: 8px; overflow: hidden; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.gallery-page .image-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.gallery-page .image-wrapper { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eee; }
.gallery-page .image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.gallery-page .video-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gallery-page .video-duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0, 0, 0, 0.65); color: #fff;
    padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.gallery-page .image-info { padding: 0.5rem 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.gallery-page .image-date { font-size: 0.8rem; color: #666; }
.gallery-page .comment-count { font-size: 0.75rem; color: #2d5016; font-weight: 500; }
.gallery-page .loading, .gallery-page .empty-state { text-align: center; padding: 3rem; color: #888; }
.gallery-page .empty-state h2 { color: #666; }
.gallery-page .load-more { text-align: center; padding: 2rem; }
.gallery-page .image-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; display: flex;
    justify-content: center; align-items: start; overflow-y: auto; padding: 2rem; }
.gallery-page .image-detail { background: white; border-radius: 12px; max-width: 900px; width: 100%; overflow: hidden; position: relative; }
.gallery-page .image-detail > img { width: 100%; display: block; }
.gallery-page .image-detail video { max-width: 100%; max-height: 70vh; background: #000; }
.gallery-page .gallery-close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; }
.gallery-page .detail-info { padding: 1rem 1.5rem; }
.gallery-page .detail-info h3 { margin: 0 0 0.5rem; }
.gallery-page .detail-info p { margin: 0.25rem 0; color: #555; font-size: 0.9rem; }
.gallery-page .tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.gallery-page .tag { background: #e8f0e0; color: #2d5016; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; }
.gallery-page .comments-section { padding: 1rem 1.5rem; border-top: 1px solid #eee; }
.gallery-page .comments-section h4 { margin: 0 0 0.75rem; }
.gallery-page .comment { padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; }
.gallery-page .comment strong { color: #2d5016; }
.gallery-page .comment-date { font-size: 0.75rem; color: #999; margin-left: 0.5rem; }
.gallery-page .comment p { margin: 0.25rem 0 0; font-size: 0.9rem; }
.gallery-page .add-comment { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }

/* AppSectionTab closable affordance (item 677) — theme-var backed so both modes read. */
.app-sectiontab-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 8px; border-radius: 50%;
    font-size: 0.95rem; line-height: 1; cursor: pointer; opacity: 0.6;
    color: var(--mud-palette-text-secondary);
}
.app-sectiontab-close:hover { opacity: 1; background: rgba(var(--mud-palette-text-primary-rgb), 0.10); }

/* ================= ADR-0164 (Tax Phase 1) — consolidated tax reference =================
   Global classes for the merged Reference surface (was two scoped <style> blocks in the old
   TaxReferenceTab / PayrollCalcTab). Colors from theme vars so dark mode works. */

/* Prominent sign-off Summary card at the top of the consolidated reference. */
.tax-ref-summary { padding: 0.8rem 1rem; }
.tax-ref-summary-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.tax-ref-summary-row .zg-icon { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px; }
.tax-ref-summary-row--ok { border-left: 3px solid var(--mud-palette-success); padding-left: 0.6rem; }
.tax-ref-summary-row--ok .zg-icon { color: var(--mud-palette-success); }
.tax-ref-summary-row--warn { border-left: 3px solid var(--mud-palette-warning); padding-left: 0.6rem; }
.tax-ref-summary-row--warn .zg-icon { color: var(--mud-palette-warning); }
.tax-ref-summary-main { flex: 1 1 auto; min-width: 0; }
.tax-ref-summary-counts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }

/* Pill badges — active/actionable/reference labeling in the panel titles + flag cells. */
.tax-ref-badge {
    display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 500; margin-left: 6px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary);
}
.tax-ref-badge--active { background: rgba(var(--mud-palette-success-rgb), 0.16); color: var(--mud-palette-success-darken); }
.tax-ref-badge--ok { background: rgba(var(--mud-palette-success-rgb), 0.16); color: var(--mud-palette-success-darken); }
.tax-ref-badge--actionable { background: rgba(var(--mud-palette-warning-rgb), 0.18); color: var(--mud-palette-warning-darken); }
.tax-ref-badge--warn { background: rgba(var(--mud-palette-warning-rgb), 0.18); color: var(--mud-palette-warning-darken); }
.tax-ref-badge--info { background: rgba(var(--mud-palette-info-rgb), 0.16); color: var(--mud-palette-info-darken); }
.tax-ref-badge--error { background: rgba(var(--mud-palette-error-rgb), 0.16); color: var(--mud-palette-error-darken); }
.tax-ref-badge--reference,
.tax-ref-badge--muted { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }

/* Phase 2 — set-level table sign-off: a section header row with its sign-off chip(s) + Accept action inline. */
.tax-ref-signoff-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.tax-ref-signoff { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }

/* ADR-0168 TaxWatch — the health/Last-checked bar + the proposal current→proposed diff. */
.tax-watch-bar { padding: 0.5rem 0.75rem; }
.tax-watch-bar-row { display: flex; align-items: center; gap: 0.6rem; }
.tax-watch-bar-main { flex: 1 1 auto; min-width: 0; }
.tax-watch-fail { color: var(--mud-palette-warning); }
.tax-proposal-diff { width: 100%; border-collapse: collapse; }
.tax-proposal-diff th, .tax-proposal-diff td { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tax-proposal-changed { color: var(--mud-palette-warning); }
.tax-proposal-sources { margin: 0.25rem 0 0 1rem; padding: 0; }

/* ── BL-730 Sankey (ribbon) cash-flow diagram. Pure SVG (SankeyDiagram.razor); palette + tints come only from
   theme vars so light/dark both work. Colours cycle c0–c7 (each just pins the rgb triple in --zsankey-rgb);
   a ribbon inherits its SOURCE node's colour so you can trace where cash came from. */
.zsankey { width: 100%; height: auto; display: block; font-family: inherit; }
.zsankey-empty { padding: 40px 12px; text-align: center; color: var(--mud-palette-text-secondary); font-size: 0.9rem; }
.zsankey-node { fill: rgba(var(--zsankey-rgb), 0.9); }
.zsankey-ribbon { fill: rgba(var(--zsankey-rgb), 0.32); transition: fill .15s ease, opacity .15s ease; }
.zsankey-ribbon:hover { fill: rgba(var(--zsankey-rgb), 0.62); }
/* focus the hovered ribbon by dimming the rest of the field */
.zsankey-ribbons:hover .zsankey-ribbon { opacity: 0.3; }
.zsankey-ribbons .zsankey-ribbon:hover { opacity: 1; }
.zsankey-text { font-size: 13px; }
.zsankey-lbl { fill: var(--mud-palette-text-primary); }
.zsankey-amt { fill: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.zsankey-coltitle { fill: var(--mud-palette-text-secondary); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.zsankey-c0 { --zsankey-rgb: var(--mud-palette-primary-rgb); }
.zsankey-c1 { --zsankey-rgb: var(--mud-palette-secondary-rgb); }
.zsankey-c2 { --zsankey-rgb: var(--mud-palette-tertiary-rgb); }
.zsankey-c3 { --zsankey-rgb: var(--mud-palette-info-rgb); }
.zsankey-c4 { --zsankey-rgb: var(--mud-palette-success-rgb); }
.zsankey-c5 { --zsankey-rgb: var(--mud-palette-warning-rgb); }
.zsankey-c6 { --zsankey-rgb: var(--mud-palette-error-rgb); }
.zsankey-c7 { --zsankey-rgb: var(--mud-palette-dark-rgb); }
/* 1624 CashFlowDiagram: Cash column, AP pass-through box, dashed non-cash panel (dashed = no cash moved). */
.zcf-lbl { fill: var(--mud-palette-text-primary); font-size: 13px; }
.zcf-amt { fill: var(--mud-palette-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.zcf-sm { fill: var(--mud-palette-text-primary); font-size: 12px; font-variant-numeric: tabular-nums; }
.zcf-xs { fill: var(--mud-palette-text-secondary); font-size: 11px; }
.zcf-apt { fill: var(--mud-palette-text-primary); font-size: 12.5px; font-weight: 600; }
.zcf-coltitle { fill: var(--mud-palette-text-secondary); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.zcf-mask { fill: var(--mud-palette-surface); }
.zcf-apbox { fill: rgba(var(--mud-palette-warning-rgb), .16); stroke: var(--mud-palette-warning); stroke-width: 1.5; }
.zcf-ncbox { fill: var(--mud-palette-surface); stroke: var(--mud-palette-tertiary); stroke-width: 1.2; stroke-dasharray: 5 4; }
.zcf-nc { stroke: var(--mud-palette-tertiary); stroke-width: 1.8; stroke-dasharray: 6 4; fill: none; }
.zcf-ahnc { fill: var(--mud-palette-tertiary); }
.zcf-cashline { stroke: var(--mud-palette-info); stroke-width: 2.2; fill: none; }
.zcf-ahcash { fill: var(--mud-palette-info); }
/* Flow view is screen-only; the statement stays in #finance-report so Print/PDF always emits the statement. */
.zsankey-print-only { display: none; }
@media print {
    .zsankey-toolbar, .zsankey-screen { display: none !important; }
    .zsankey-print-only { display: block !important; }
}

/* ADR-0175 report gallery — category-grouped cards, each a skeleton SVG + name + description. */
.zrg-cat { margin-bottom: 1.6rem; }
.zrg-cat-title {
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--mud-palette-text-secondary); margin: 0 0 .6rem;
}
/* Item 742: tighter cards (~200–210px vs the old ~272px) — smaller min-track, thumb + padding. */
.zrg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: .8rem; }
.zrg-card {
    display: flex; flex-direction: column; gap: .4rem; padding: .6rem;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 9px;
    background: var(--mud-palette-surface); color: inherit; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.zrg-card:hover, .zrg-card:focus-visible {
    transform: translateY(-2px); box-shadow: var(--zg-shadow-md);
    border-color: var(--mud-palette-primary); outline: none; text-decoration: none;   /* AppLink anchor: no .zg-link hover underline */
}
.zrg-thumb {
    width: 100%; aspect-ratio: 140 / 90; border-radius: 6px; overflow: hidden;
    background: rgba(var(--mud-palette-primary-rgb), .05);
    display: flex; align-items: center; justify-content: center;
}
.zrg-thumb svg { width: 100%; height: 100%; display: block; }
.zrg-card-name { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.zrg-card-desc { font-size: .74rem; color: var(--mud-palette-text-secondary); line-height: 1.32; }
.zrg-back {
    display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .85rem;
    color: var(--mud-palette-primary); cursor: pointer; font-size: .88rem; font-weight: 500; user-select: none;
}
.zrg-back:hover, .zrg-back:focus-visible { text-decoration: underline; outline: none; }

/* Item 589: percentage-rent YTD-toward-breakpoint progress bar. */
.zpr-progress { display: flex; flex-direction: column; gap: .35rem; }
.zpr-progress-track {
    width: 100%; height: 12px; border-radius: 6px; overflow: hidden;
    background: rgba(var(--mud-palette-primary-rgb), .12);
}
.zpr-progress-fill {
    height: 100%; border-radius: 6px; background: var(--mud-palette-primary);
    transition: width .25s ease;
}
.zpr-progress-fill.over { background: var(--mud-palette-success); }

/* Backlog 750: POS Mapping fly-in key/value detail list. */
.zg-kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: 0; }
.zg-kv dt { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.zg-kv dd { margin: 0; font-size: .85rem; }

/* UX-5 (754): shared report date-range control (AppDateRangeAnt). */
.app-daterange-period { min-width: 12em; }
.app-daterange-label { white-space: nowrap; font-size: .85rem; }
.app-daterange-sep { color: var(--mud-palette-text-secondary); }

/* ============================================================================
   AppGridToolbar (owner-approved 2026-08-05) — a reusable Filters | Search | Primary | Overflow layout that
   lives INSIDE a grid's <ToolbarLeft> slot (the no-second-bar convention). It WRAPS on narrow widths instead of
   turning into a horizontal scroller.
   ============================================================================ */
.zgt-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;         /* the anti-scroller: clusters drop to a new line rather than overflow */
    width: 100%;
    min-width: 0;
}
.zgt-filters { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.zgt-search  { display: flex; align-items: center; flex: 1 1 14em; min-width: 8em; }
.zgt-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
/* The toolbar search box grows to fill its cluster (the shared input is fixed 220px + has a clear-button gap
   this box doesn't use). */
.zgt-search-input { width: 100%; padding-right: 10px; }

/* "⋯ More" overflow — a NATIVE <details> dropdown (UserMenu idiom; can't be clipped/portal-fail). Themed from
   variables so it tracks light/dark. */
.zgt-more { position: relative; }
.zgt-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--app-control-h);
    padding: 0 12px;
    border: 1px solid var(--zg-border-strong);
    border-radius: var(--zg-radius-sm);
    background: var(--zg-surface);
    color: var(--zg-text-strong);
    font-size: 13px;
    white-space: nowrap;
}
.zgt-more > summary::-webkit-details-marker { display: none; }
.zgt-more > summary::marker { content: ""; }
.zgt-more > summary:hover { background: rgba(var(--mud-palette-primary-rgb), 0.08); }
.zgt-more-dots { font-size: 15px; line-height: 1; }
.zgt-more-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1400;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--zg-surface);
    border: 1px solid var(--zg-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}
/* The caller's App buttons become full-width, left-aligned menu rows inside the panel. */
.zgt-more-panel .mud-button-root {
    width: 100%;
    justify-content: flex-start;
}
.zgt-more-panel .mud-button-root:hover { background: rgba(var(--mud-palette-primary-rgb), 0.10); }

/* A grid that adopts AppGridToolbar in <ToolbarLeft>: let that slot span the bar (the right slot then holds only
   the column-chooser gear) and stop it clipping the "⋯ More" dropdown (overflow-x:auto clips y too). */
.zg-toolbar-wide .erp-grid-v2-toolbar-left { overflow: visible; }
.zg-toolbar-wide .erp-grid-v2-toolbar-right { flex: 0 0 auto; }

/* ============================================================================
   Item 863 — Transactions review/posted rows: the trailing actions cell laid out as two FIXED, right-aligned
   slots (one suggestion chip | one primary action + a "⋯" overflow menu) so every row lines up regardless of
   which suggestion/actions it carries. Both slots are fixed-width so the chip's right edge and the buttons'
   right edge each align down the column. Layout hooks only; all colour comes from AppChip/AppButton theme vars.
   ============================================================================ */
.zg-rowact { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; }
.zg-rowact-suggest { flex: 0 0 13rem; display: flex; align-items: center; justify-content: flex-end; min-width: 0; overflow: hidden; }
.zg-rowact-do { flex: 0 0 14rem; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.zg-rowact-new { color: var(--zg-text-muted); font-size: 12px; white-space: nowrap; }
/* The single suggestion chip truncates (its long text ellipsises) instead of shoving the action slot around. */
.zg-rowact-suggest .zg-chip { max-width: 100%; }
.zg-rowact-suggest .zg-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* In-row "⋯" overflow menu (AppOverflowMenu) — the native <details> idiom (UserMenu / AppGridToolbar "… More"),
   sized for a row. overflow-menu.js promotes the OPEN panel to position:fixed so .erp-grid-v2-body can't clip it. */
.zg-rowmenu { display: inline-flex; }
.zg-rowmenu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--app-control-h);
    min-width: 34px;
    padding: 0 8px;
    border: 1px solid var(--zg-border-strong);
    border-radius: var(--zg-radius-sm);
    background: var(--zg-surface);
    color: var(--zg-text-strong);
}
.zg-rowmenu > summary::-webkit-details-marker { display: none; }
.zg-rowmenu > summary::marker { content: ""; }
.zg-rowmenu > summary:hover { background: rgba(var(--mud-palette-primary-rgb), 0.08); }
.zg-rowmenu > summary:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.zg-rowmenu-dots { font-size: 18px; line-height: 1; }
/* Default hidden; overflow-menu.js sets position:fixed + top/left when [open]. z-index 1450 sits above the grid,
   below the top bar's when-open band (1460). */
.zg-rowmenu-panel {
    position: fixed;
    z-index: 1450;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    padding: 6px;
    background: var(--zg-surface);
    border: 1px solid var(--zg-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}
.zg-rowmenu[open] > .zg-rowmenu-panel { display: flex; }
/* The caller's AppButtons become full-width, left-aligned menu rows inside the panel (same as .zgt-more-panel). */
.zg-rowmenu-panel .mud-button-root { width: 100%; justify-content: flex-start; }
.zg-rowmenu-panel .mud-button-root:hover { background: rgba(var(--mud-palette-primary-rgb), 0.10); }
/* 1508: labelled trigger ("Import ▾") — the mud outlined-primary classes on the summary own border + colour. */
.zg-rowmenu--labeled > summary { min-width: 0; padding: 0 12px; gap: 6px; background: transparent; color: var(--mud-palette-primary); }
.zg-rowmenu--labeled > summary .mud-button-icon-start { margin-right: 0; margin-left: 0; }
.zg-rowmenu-caret { font-size: 11px; line-height: 1; opacity: 0.8; }
.zg-rowmenu--labeled > .zg-rowmenu-panel { min-width: 300px; max-width: min(420px, calc(100vw - 16px)); }
/* AppMenuItem: title + description row. Beats the grid toolbar's forced button height / nowrap. */
.zg-rowmenu-panel .mud-button-root.zg-menuitem {
    height: auto !important;
    min-height: 0 !important;
    white-space: normal;
    text-align: left;
    align-items: flex-start;
    padding: 6px 10px;
}
.zg-menuitem .mud-button-icon-start { margin-top: 2px; }
.zg-menuitem-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zg-menuitem-title { font-weight: 600; color: var(--zg-text-strong); }
.zg-menuitem-desc { font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--zg-text-muted); }

/* ADR-0179 B3 — the plain-language tax-election workbench (Fixed Assets › Elections). Layout hooks only; colors
   come from AppSurface/AppChip theme vars. Totals + §179 amounts read as tabular numerals. */
.fa-elections-totals .mud-typography,
.fa-elections-card .app-chip { font-variant-numeric: tabular-nums; }
.fa-elections-s179 { padding-left: .75rem; border-left: 2px solid rgba(var(--mud-palette-primary-rgb), 0.25); }

/* item 771 — CPA review panel (same Fixed Assets › Elections view). One flag per row; resolved rows dim. */
.fa-cpa-flag { padding: .5rem .25rem; border-top: 1px solid rgba(var(--mud-palette-text-primary-rgb), 0.08); }
.fa-cpa-flag:first-child { border-top: 0; }
.fa-cpa-flag--resolved { opacity: .6; }

/* item 773 — Year-end CPA packet: section headers + table of contents (print-friendly, theme-var borders). */
.cpa-section-head { border-top: 2px solid var(--mud-palette-lines-default, #e3d8c5); padding-top: .6rem; margin-bottom: .5rem; }
.cpa-toc { margin: 0; padding-left: 1.3rem; }
.cpa-toc li { padding: 2px 0; }

/* OB-7 (item 382) — the printable "Hiring someone" SOP (/admin/hiring-sop). One document, styled for both
   the screen (theme vars, dark-mode aware) and the print pipeline (the .zg-print-path skin strips app chrome;
   ink-on-white comes from the print block). Layout only — every colour is a theme var. */
.zg-sop { max-width: 62rem; }
.zg-sop-title {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-size: 1.5rem; font-weight: 700; margin: .2rem 0 .3rem; letter-spacing: -.01em;
}
.zg-sop-lede { color: var(--zg-muted, var(--mud-palette-text-secondary)); max-width: 60ch; margin: 0 0 1rem; }
.zg-sop-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .zg-sop-cols { grid-template-columns: minmax(0, 1fr); } }

.zg-sop-prereq {
    background: rgba(var(--mud-palette-primary-rgb), .07);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .2);
    border-radius: var(--zg-radius, 10px); padding: .7rem .9rem; margin-bottom: 1rem; font-size: .92rem;
}
.zg-sop-steps { counter-reset: sop; list-style: none; margin: 0; padding: 0; }
.zg-sop-steps > li {
    position: relative; padding: .1rem 0 1rem 2.6rem; margin: 0;
    border-bottom: 1px solid rgba(var(--mud-palette-text-primary-rgb), .08);
}
.zg-sop-steps > li:last-child { border-bottom: 0; }
.zg-sop-steps > li::before {
    counter-increment: sop; content: counter(sop);
    position: absolute; left: 0; top: 0;
    width: 1.8rem; height: 1.8rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ziggis-espresso, #5b4a33); color: var(--ziggis-cream, #fff);
    font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 700; font-size: .9rem;
}
.zg-sop-step-h { display: block; font-weight: 600; margin-bottom: .15rem; }
.zg-sop-steps ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.zg-sop-steps ul li { margin-bottom: .2rem; }

.zg-sop-side { display: flex; flex-direction: column; gap: 1rem; }
.zg-sop-card {
    background: var(--zg-surface, var(--mud-palette-surface));
    border: 1px solid var(--zg-border, var(--mud-palette-lines-default));
    border-radius: var(--zg-radius, 10px); padding: .85rem 1rem;
}
.zg-sop-card h2 {
    font-family: 'Montserrat', 'Inter', sans-serif; font-size: 1rem; font-weight: 600; margin: 0 0 .4rem;
}
.zg-sop-card-note { color: var(--zg-muted, var(--mud-palette-text-secondary)); font-size: .82rem; margin: .1rem 0 .5rem; }
.zg-sop-fixes { margin: 0; padding-left: 1.05rem; }
.zg-sop-fixes li { margin-bottom: .5rem; font-size: .9rem; }
.zg-sop-card--call { border-color: rgba(var(--mud-palette-primary-rgb), .35); }
.zg-sop-fill { font-family: ui-monospace, Consolas, monospace; letter-spacing: .05em; margin: .3rem 0 .1rem; }

/* =============================================================================================
   BL-786 — schedule board: min-staffing signal on the day HEADER + presence check/miss glyphs.
   Global (not the inline board <style>) so the manager board (Scheduling.razor) and its read-only
   kiosk clone (ScheduleBoardView.razor) share ONE source. Theme vars only — dark-mode safe.
   ============================================================================================= */
/* The day-column header anchors the small far-right staffing pill. */
.bd-colhead { position: relative; }
/* Understaffed / targets-gap ⇒ the whole header goes error-toned (kiosk "today" gradient still wins by source order). */
.bd-colhead.bd-colhead--err { background: var(--mud-palette-error); }
/* Small far-right pill; tooltip names the first failing interval. Legible on any header bg (white chip, error glyph). */
.bd-colhead .bd-colhead-pill {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px;
    background: rgba(255, 255, 255, .92); color: var(--mud-palette-error);
    font-size: 9px; font-weight: 900; line-height: 1; cursor: default;
}

/* Presence glyph — pinned HARD-RIGHT of the filled card (was crowded up against the name). The narrow,
   column-flex board cards won't stretch an inline glyph to the edge, so the badge is absolutely positioned
   against the card and the name reserves right padding so it ellipsizes before the badge instead of under it. */
.bd-hole.bd-filled { position: relative; }
.bd-fname { display: flex; align-items: center; padding-right: 16px; box-sizing: border-box; }
.bd-fname .bd-fname-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bd-fname .bd-presence { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); margin: 0; }
/* today-or-past shift with NO punches ⇒ error-toned ✗ badge (unmistakable on any staff colour). */
.bd-presence.bd-presence--miss {
    color: #fff; background: var(--mud-palette-error);
    border-radius: 6px; padding: 0 4px; font-weight: 800; opacity: 1;
}
/* punches exist (✓ done / ● in / ☕ break) ride the card's white text — just keep them crisp. */
.bd-presence.bd-presence--done,
.bd-presence.bd-presence--in,
.bd-presence.bd-presence--break { opacity: .95; }

/* Item 1043 — Scheduling > Forecast header: week + source chips, then three labeled stats (hover = source). */
.sched-fc-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .75rem; }
.sched-fc-stats { display: flex; align-items: stretch; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
.sched-fc-stat {
    display: flex; flex-direction: column; gap: 2px; padding: .35rem .85rem; cursor: help;
    border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); background: var(--zg-surface);
}
/* Target labor tile is an AppLink to /scheduling/labor — keep the tile look, drop .zg-link's colour/underline. */
.sched-fc-stat--link { color: inherit; cursor: pointer; text-decoration: none; }
.sched-fc-stat--link:hover, .sched-fc-stat--link:focus-visible { border-color: var(--mud-palette-primary); text-decoration: none; outline: none; }
.sched-fc-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zg-muted); }
.sched-fc-stat-value { font-size: 1.05rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* Hoverable number (per-row rate hint). */
.sched-fc-hint { text-decoration: underline dotted; text-decoration-color: var(--zg-muted); text-underline-offset: 3px; cursor: help; }

/* Item 1374 — field-label info icon (App*Ant InfoTip): muted, hover/focus shows the tooltip. */
.app-field-info { display:inline-flex; align-items:center; margin-left:4px; vertical-align:middle; color:var(--mud-palette-text-secondary); cursor:help; border-radius:50%; }
.app-field-info:hover, .app-field-info:focus-visible { color:var(--mud-palette-primary); outline:none; }
.app-field-info .zg-icon { width:15px; height:15px; }
.ant-tooltip.app-tooltip--wide { max-width:min(380px, calc(100vw - 32px)); }
.ant-tooltip.app-tooltip--wide .ant-tooltip-inner { line-height:1.45; }

/* Item 1375 — staff who can't be scheduled any day of the week: roster note, dimmed painter chip, board strip. */
.sched-inelig-note { font-size:.75rem; line-height:1.3; color:var(--mud-palette-warning-darken, var(--mud-palette-warning)); margin-top:2px; }
.bd-pchip.bd-pchip--inelig { opacity:.6; border-style:dashed; }
.bd-pchip-inelig { margin-left:5px; padding:0 5px; border-radius:6px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    background:var(--mud-palette-surface); color:var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.sched-inelig-strip { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:6px; font-size:12px;
    color:var(--mud-palette-text-secondary); }
.sched-inelig-strip strong { color:var(--mud-palette-warning-darken, var(--mud-palette-warning)); font-weight:600; }
.sched-inelig-item { cursor:help; text-decoration:underline dotted; text-underline-offset:2px; }

/* Item 1489 — pending time off in the viewed week: banner, painter-chip tag, Week/Board/ghost flags. */
.sched-topending-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.sched-topending-list { margin:4px 0 6px; padding-left:1.1rem; font-size:.85rem; }
.sched-topending-list li { margin:1px 0; }
.sched-topending-who { font-weight:600; margin-right:6px; }
.sched-topending-reason { margin-left:6px; color:var(--mud-palette-text-secondary); font-style:italic; }
.bd-pchip-topending, .sched-topending-tag { margin-left:5px; padding:0 5px; border-radius:6px; font-size:.62rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; cursor:help; background:var(--mud-palette-surface);
    color:var(--mud-palette-warning-darken, var(--mud-palette-warning)); border:1px dashed var(--mud-palette-warning); }
.bd-pchip.bd-pchip--topending { outline:2px dashed var(--mud-palette-warning); outline-offset:1px; }
.bd-hole.bd-hole--topending { position:relative; box-shadow:inset 0 0 0 2px var(--mud-palette-warning); }
.bd-topending { position:absolute; top:1px; right:2px; font-size:10px; line-height:1; cursor:help; }
.draft-ghost-topending { font-size:.7rem; line-height:1; cursor:help; flex:0 0 auto; }

/* Item 1373 — Scheduling > Labor tab: the scorecard wrapper fills the tab like any grid tab (pager pinned). */
.labor-tab { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.lt-burden { font-size:.82rem; color:var(--mud-palette-text-secondary); white-space:nowrap; }

/* Item 1403 — Settings > Scheduling policy: the itemized employer-burden card. */
.eb-card { border-radius:8px; }
.eb-card.zg-focus-row { animation: zg-focus-flash 2.2s ease-out 1; }
.eb-head { flex:1 1 28em; min-width:0; }
.eb-scroll { overflow-x:auto; }
.eb-table td { vertical-align:top; }
.eb-table .eb-rate { white-space:nowrap; }
.eb-name { font-weight:600; }
.eb-note { font-size:.76rem; color:var(--mud-palette-text-secondary); }
.eb-inline { display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.eb-applies { min-width:16em; }
.eb-off td { opacity:.55; }
.eb-factor { font-size:1.05rem; font-weight:700; color:var(--mud-palette-primary); }

/* Item 1371 — Scheduling > Shifts tab (moved here from the page's inline <style>: dot + ADR-0025 day-pills). */
.sched-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.sched-day-pill { display:inline-block; min-width:1.9em; text-align:center; padding:1px 5px; border-radius:9px; font-size:0.66rem; font-weight:600; line-height:1.5; color:var(--mud-palette-text-disabled); background:var(--mud-palette-background-grey); border:1px solid var(--mud-palette-lines-default); }
.sched-day-pill--on { color:var(--mud-palette-primary-text); background:var(--mud-palette-primary); border-color:var(--mud-palette-primary); }
.zg-shiftdef-name { display:inline-flex; align-items:center; gap:6px; }
.zg-shiftdef-days { display:inline-flex; flex-wrap:wrap; gap:3px; }
.zg-shiftdef-invalid { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; white-space:normal; }
.zg-shiftdef-reason { color:var(--mud-palette-error); font-size:.78rem; line-height:1.3; }

/* ADR-0153 company-setup wizard + Admin → Companies setup chips. Global (no scoped razor.css); theme-var colors. */
.zg-setup-chip {
    display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; font-weight: 600;
    white-space: nowrap; line-height: 1.5;
}
.zg-setup-chip--ok   { background: rgba(var(--mud-palette-success-rgb), .16); color: var(--mud-palette-success); }
.zg-setup-chip--info { background: rgba(var(--mud-palette-info-rgb), .16);    color: var(--mud-palette-info); }
.zg-setup-chip--warn { background: rgba(var(--mud-palette-warning-rgb), .18); color: var(--mud-palette-warning); }
.zg-setup-chip--muted{ background: rgba(var(--mud-palette-action-disabled-rgb), .12); color: var(--mud-palette-text-secondary); }

.zg-setup-page { max-width: 760px; margin: 0 auto; padding: 16px; }
.zg-setup-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.zg-setup-row {
    display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.zg-setup-row:last-child { border-bottom: none; }
.zg-setup-row.is-skip { opacity: .6; }
.zg-setup-row-main { flex: 1 1 auto; min-width: 0; }
.zg-setup-row-desc { font-size: .82rem; }
.zg-setup-row-counts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.zg-setup-exists { font-size: .78rem; }
.zg-setup-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.zg-setup-confirm-list { margin: 10px 0 0; padding-left: 20px; }
.zg-setup-confirm-list li { margin: 2px 0; }
/* Item 1165: per-item ticks inside each setup package. */
.zg-setup-items { padding: 4px 0 2px; }
.zg-setup-item-tools { display: flex; gap: 4px; margin-bottom: 4px; }
.zg-setup-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 2px; border-top: 1px solid var(--mud-palette-divider); }
.zg-setup-item.is-skip { opacity: .65; }
.zg-setup-item-gap { flex: 0 0 16px; }
.zg-setup-item-main { flex: 1 1 auto; min-width: 0; }
.zg-setup-item-title { font-size: .88rem; font-weight: 500; }
.zg-setup-item-key { margin-left: 6px; font-size: .76rem; font-weight: 400; color: var(--mud-palette-text-secondary); }
.zg-setup-item-detail { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.zg-setup-item-why { font-size: .76rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.zg-setup-confirm-items { margin: 2px 0 6px; padding-left: 18px; font-size: .84rem; color: var(--mud-palette-text-secondary); }
/* Item 1307: area filter bar + area group headers. */
.zg-setup-filter { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; font-size: .88rem; }
.zg-setup-filter-label { font-weight: 600; }
.zg-setup-filter-sep { color: var(--mud-palette-text-secondary); }
.zg-setup-area-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 18px 4px 6px; border-bottom: 2px solid var(--mud-palette-divider);
}
.zg-setup-area-head:first-child { padding-top: 2px; }
.zg-setup-area-title { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.zg-setup-row.is-focus { box-shadow: inset 3px 0 0 var(--mud-palette-primary); padding-left: 10px; }

/* Money inputs inside numeric table cells read as numbers — right-align (owner 2026-08-20, Pay Bills Pay column). */
td.num .ant-input-number-input { text-align: right; }

/* Fly-in (SidePanel) header reads like a grid column header (owner 2026-08-20): alt band + a real title.
   Global (not scoped) because the title is a child component — the scope attribute never reaches it. */
.zg-sp-header {
    background: var(--zg-surface-soft);
    border-bottom: 1px solid rgba(var(--mud-palette-lines-default-rgb, 128, 128, 128), 0.35);
}
.zg-sp-header .zg-sp-title { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }

/* Rich header (SidePanel HeaderContent): title + a summary sub-line stacked; close button aligns to the top. */
.zg-sp-header-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zg-sp-header--rich { align-items: flex-start; }
.zg-sp-subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.zg-sp-subhead .zg-sp-amount { font-weight: 700; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
/* Item 1028: why the footer Save is disabled ("Still needed: City, ZIP"), beside the buttons. */
.zg-sp-footer-hint { align-self: center; max-width: 22rem; font-size: .8rem; line-height: 1.3; text-align: right;
    color: var(--mud-palette-text-secondary); }

/* SidePanel shell (was the scoped SidePanel.razor.css, item 1027). Kept AFTER the header polish above on purpose:
   the scoped rules outranked it (header border, --rich alignment); source order now preserves that rendering. */
/* Scrim: below the fixed top bar (ADR-0013) and under MudBlazor dialogs (1400) so popovers inside a form stay on top. */
.zg-sp-scrim {
    position: fixed;
    inset: var(--app-topbar-height, 44px) 0 0 0;
    background: rgba(0, 0, 0, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1390;
}
.zg-sp-scrim--open { opacity: 1; pointer-events: auto; }

/* The panel: full height at the right, slides in via transform. */
.zg-sp {
    position: fixed;
    top: var(--app-topbar-height, 44px);
    right: 0;
    bottom: 0;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, inherit);
    box-shadow: -4px 0 18px rgba(0, 0, 0, .22);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1391;
    overflow: hidden;
}
.zg-sp--open { transform: translateX(0); }

.zg-sp--quarter   { width: 25vw; min-width: 360px; }
.zg-sp--third     { width: 33vw; min-width: 400px; }
.zg-sp--half      { width: 50vw; min-width: 480px; }
.zg-sp--twothirds { width: 66vw; min-width: 560px; }
.zg-sp--wide      { width: 90vw; max-width: 1400px; min-width: 560px; }
.zg-sp--full      { width: 100vw; }

.zg-sp-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 20px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
}
.zg-sp-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
.zg-sp-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-divider, #e0e0e0);
}
.zg-sp-footer-extra { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.zg-sp-footer-main  { display: flex; gap: .5rem; margin-left: auto; }

/* Owner 2026-07-18: footer buttons a size up from the app default (page-supplied ones too). */
.zg-sp .zg-sp-footer button {
    font-size: 1rem;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 10px;
}

/* Tablet / mobile: take the whole screen. */
@media (max-width: 768px) {
    .zg-sp { width: 100vw !important; min-width: 0 !important; }
}

/* Item 1027: reduced motion — side panels, dialogs, toasts and scrims appear in place, no slide or fade. */
@media (prefers-reduced-motion: reduce) {
    .zg-sp, .zg-sp-scrim { transition: none; }
    .zg-dialog-panel, .zg-toast, .zg-busy-overlay { animation: none; }
}

/* Manage panel sections — a labelled block per operation group (Receipt / Coding / Operations). */
.zg-btm-section { padding: 14px 0; border-top: 1px solid var(--mud-palette-divider); }
.zg-btm-section:first-of-type { border-top: none; padding-top: 4px; }
.zg-btm-section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); margin-bottom: 8px; }

/* Long coding memos in the Details fly-ins wrap instead of clipping (owner 2026-08-20). */
.zg-btm-section .zg-btm-line { min-width: 0; flex: 1 1 240px; white-space: normal; overflow-wrap: anywhere; }

/* ADR-0181 — Admin › Companies project-membership editor (SidePanel). */
.zg-proj-rows { display: flex; flex-direction: column; gap: 8px; }
.zg-proj-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border: 1px solid var(--zg-border);
    border-radius: 6px;
    background: var(--zg-surface-soft);
}
.zg-proj-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-proj-role { min-width: 130px; }
.zg-proj-add { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 8px; }
.zg-proj-add-project { flex: 1 1 220px; min-width: 200px; }
.zg-proj-add-role { flex: 0 0 150px; min-width: 130px; }

/* ---- ADR-0182 B4 pay-application record: G702 cards, checker findings, bypass callout ---- */
.zg-sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.zg-findings { margin: 4px 0 0; padding-left: 0; list-style: none; }
.zg-findings li { padding: 6px 0; border-bottom: 1px solid var(--mud-palette-lines-default, #f0e9dc);
                  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 0.85rem; }
.zg-findings li:last-child { border-bottom: 0; }
.zg-bypass { border-color: var(--mud-palette-warning) !important;
             background: rgba(var(--mud-palette-warning-rgb), 0.06); }
.text-success { color: var(--mud-palette-success); }
.text-error { color: var(--mud-palette-error); }
/* 1297 — an over-applied bill/supplier balance is a credit: red frame, never a quiet $0. */
.zg-overpaid-tile { min-width: 140px; border-color: var(--mud-palette-error) !important;
                    background: rgba(var(--mud-palette-error-rgb), 0.08); }
.zg-sup-stat.zg-overpaid-tile .zg-sup-stat-value { color: var(--mud-palette-error); }
.zg-overpaid-list { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
/* ADR-0182 B5 — construction-admin register pages (submittals/RFIs/directives/open-items/meeting-prep) */
.zg-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.75rem; }
.zg-kv > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.zg-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); }
.zg-v { font-size: .9rem; color: var(--mud-palette-text-primary); }
@media (max-width: 640px) { .zg-kv { grid-template-columns: 1fr; } }

.zg-timeline { display: flex; flex-direction: column; }
.zg-timeline-item { display: flex; gap: .6rem; padding-bottom: .75rem; }
.zg-timeline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .3rem; background: var(--mud-palette-primary); flex: 0 0 auto; }
.zg-timeline-body { flex: 1; min-width: 0; }
.zg-timeline-meta { font-size: .72rem; color: var(--mud-palette-text-secondary); margin-bottom: .1rem; }

.zg-overdue { color: var(--mud-palette-error); font-weight: 600; }

.zg-mprep { color: var(--mud-palette-text-primary); }
.zg-mprep-head h2 { margin: 0; }
.zg-mprep-section { margin-top: 1.25rem; }
.zg-mprep-section h3 { margin: 0 0 .4rem; font-size: 1rem; border-bottom: 2px solid var(--mud-palette-lines-default); padding-bottom: .2rem; }
.zg-mprep-count { color: var(--mud-palette-text-secondary); font-weight: 400; font-size: .85rem; }
.zg-mprep-table { width: 100%; }
/* ADR-0182 B3 — owner change-order response letter preview (edited above in a textarea; this styled region is
   what the ADR-0045 print button hands to the browser print pipeline). Theme vars keep dark mode correct. */
.co-letter-print {
    white-space: pre-wrap;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--zg-border);
    border-radius: 6px;
    padding: 2rem;
    margin-top: 1rem;
    max-width: 8.5in;
}

/* ==================== ADR-0184 F2 (D3): drawing-sheet viewer ==================== */
/* Pan/zoom raster canvas. A single transform on .sheet-stage moves the raster AND its overlay together, so
   overlay children (search highlights; ADR-0185 E2 pins) place by % == normalised 0..1 with no pan/zoom math. */
.sheet-canvas { display: flex; flex-direction: column; gap: .4rem; }
.sheet-canvas-toolbar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sheet-viewport {
    position: relative; overflow: hidden; width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-grey, var(--mud-palette-surface));
    touch-action: none; cursor: grab; user-select: none;
}
.sheet-viewport.is-panning { cursor: grabbing; }
.sheet-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.sheet-raster { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.sheet-overlay { position: absolute; inset: 0; pointer-events: none; }
/* Search word-box highlight (amber wash). Boxes are point-sized when the word has no w/h; min-size keeps them hittable. */
.sheet-hl {
    position: absolute; box-sizing: border-box; min-width: 6px; min-height: 6px;
    background: rgba(var(--mud-palette-warning-rgb), .32);
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .9);
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(var(--mud-palette-warning-rgb), .25);
}
/* ADR-0185 E2 seam: interactive overlay children (pins) opt back into pointer events. */
.sheet-overlay-interactive { pointer-events: auto; }

/* Version ladder (viewer side panel). */
.sheet-ladder { display: flex; flex-direction: column; gap: .3rem; }
.sheet-ladder-row {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .6rem; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px; background: var(--mud-palette-surface); cursor: pointer; width: 100%; text-align: left;
}
.sheet-ladder-row:hover { border-color: var(--mud-palette-primary); }
.sheet-ladder-row.is-current { border-color: var(--mud-palette-primary); box-shadow: inset 3px 0 0 var(--mud-palette-primary); }

/* Compare: side-by-side rasters + diff overlay + text diff. */
.sheet-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sheet-compare-pane { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.sheet-compare-pane img, .sheet-compare-diff img {
    width: 100%; height: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: #fff;
}
.sheet-textdiff { font-family: var(--mud-typography-code-family, monospace); font-size: .8rem; line-height: 1.5;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; overflow: auto; max-height: 40vh; }
.sheet-textdiff div { padding: 0 .5rem; white-space: pre-wrap; word-break: break-word; }
.sheet-textdiff .d-add { background: rgba(var(--mud-palette-success-rgb), .16); color: var(--mud-palette-text-primary); }
.sheet-textdiff .d-rem { background: rgba(var(--mud-palette-error-rgb), .16); color: var(--mud-palette-text-primary); }
.sheet-textdiff .d-gap { color: var(--mud-palette-text-secondary); text-align: center; opacity: .7; }
@media (max-width: 900px) { .sheet-compare-grid { grid-template-columns: 1fr; } }

/* Viewer page layout: canvas + version-ladder side panel. */
.sheet-viewer-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
.sheet-viewer-main { min-width: 0; }
.sheet-viewer-side { min-width: 0; }
@media (max-width: 1100px) { .sheet-viewer-layout { grid-template-columns: 1fr; } }

/* ---- ADR-0185 F4 (E2) sheet callouts: numbered pins/regions over the raster + fly-in + list ---- */
.callout-toolbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.callout-toolbar-sep { width: 1px; align-self: stretch; background: var(--mud-palette-lines-default); margin: 0 .25rem; }
.callout-layer-off { opacity: .5; text-decoration: line-through; }
.sheet-viewport.is-placing { cursor: crosshair; }

/* A pin anchor is a 0-size point; the badge centres on it and counter-scales (--sv-scale = live zoom, set in JS)
   so pins stay a constant screen size at any zoom. A region box scales with the raster (it marks a real area). */
.callout-pin-anchor { position: absolute; width: 0; height: 0; }
.callout-region { position: absolute; box-sizing: border-box; border: 2px solid var(--cc, var(--mud-palette-info));
                  background: rgba(var(--mud-palette-info-rgb), .07); }
.callout-badge {
    position: absolute; left: 0; top: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px;
    font-size: 12px; font-weight: 700; line-height: 1; color: #fff;
    background: var(--cc, var(--mud-palette-info)); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);
    cursor: pointer; transform: translate(-50%, -50%) scale(calc(1 / var(--sv-scale, 1))); transform-origin: center;
}
.callout-badge.status-closed { opacity: .55; }
.callout-badge.is-static { position: static; transform: none; box-shadow: none; flex: none; }
.callout-rubber { position: absolute; border: 2px dashed var(--mud-palette-primary);
                  background: rgba(var(--mud-palette-primary-rgb), .1); pointer-events: none; }

/* Category colours via theme vars so light/dark both work (the callout-sheet PDF mirrors these as concrete hex). */
.cat-question { --cc: var(--mud-palette-info); }
.cat-flag { --cc: var(--mud-palette-warning); }
.cat-change { --cc: var(--mud-palette-secondary); }
.cat-ownerdecision { --cc: var(--mud-palette-primary); }
.cat-fyi { --cc: var(--mud-palette-text-secondary); }
.cat-contradiction { --cc: var(--mud-palette-error); }

/* Keyboard-accessible callout list beside the canvas. */
.callout-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.callout-list-row { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none;
                    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: .35rem .5rem;
                    cursor: pointer; color: inherit; }
.callout-list-row:hover, .callout-list-row:focus-visible { border-color: var(--mud-palette-primary); outline: none; }
.callout-list-text { display: flex; flex-direction: column; min-width: 0; }
.callout-list-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.callout-list-meta { font-size: .72rem; color: var(--mud-palette-text-secondary); }

/* Fly-in sections (links + thread). */
.callout-section { margin-top: 1rem; border-top: 1px solid var(--mud-palette-lines-default); padding-top: .75rem; }
.callout-link-row { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.callout-addlink { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.callout-thread { display: flex; flex-direction: column; gap: .5rem; max-height: 240px; overflow-y: auto; }
.callout-comment { border-left: 2px solid var(--mud-palette-lines-default); padding-left: .5rem; }
.callout-comment-text { white-space: pre-wrap; word-break: break-word; }
.callout-addcomment { display: flex; align-items: flex-end; gap: .4rem; margin-top: .5rem; }

/* ===== ADR-0187 accordion nav (global; NavAccordionGroup lives in its own component scope) =====
   The left rail is a constant dark surface (--zg-sidebar-* slots) in BOTH themes, so these reuse the nav's
   existing warm palette from NavMenu.razor.css rather than content-area theme vars — matching the rest of the
   rail in light and dark alike. */
.nav-group-headerrow { display: flex; align-items: stretch; margin: 0.9rem 0 0.3rem; }
.nav-group:first-child .nav-group-headerrow { margin-top: 0.5rem; }

.nav-group-header {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 0.4rem;
    justify-content: flex-start;   /* a global button rule centers flex buttons — the title must hug the left */
    appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
    padding: 0.2rem 0.35rem 0.2rem 0.75rem;  /* owner 2026-08-25: flush with the item column (12px) */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(228, 190, 132, 0.85);
    border-radius: 7px;
    transition: color .12s ease, background-color .12s ease;
}
.nav-group-header:hover { color: rgba(217, 173, 109, 0.92); background-color: rgba(217, 173, 109, 0.08); }

.nav-group-chevron {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 2.2rem; margin-right: 0.6rem;
    appearance: none; background: none; border: 0; cursor: pointer;
    color: rgba(228, 190, 132, 0.7);
    border-radius: 7px;
    transition: color .12s ease, background-color .12s ease;
}
.nav-group-chevron:hover { color: rgba(217, 173, 109, 0.92); background-color: rgba(217, 173, 109, 0.08); }

.nav-group-chevron-icon { width: 1.05rem; height: 1.05rem; transition: transform .15s ease; transform: rotate(-90deg); }
.nav-group--open .nav-group-chevron-icon { transform: rotate(0deg); }

.nav-group--closed .nav-group-body { display: none; }

/* Keyboard focus — visible ring on both controls (ADR-0187 §4). */
.nav-group-header:focus-visible,
.nav-group-chevron:focus-visible {
    outline: 2px solid rgba(217, 173, 109, 0.75);
    outline-offset: -2px;
    color: rgba(245, 233, 213, 0.95);
}

/* Compact (64px) rail: drop the accordion chrome — hide headers, force every group's items visible (icon-only,
   like ADR-0013) so the collapsed rail stays fully navigable. */
.page.compact .sidebar .nav-group-headerrow { display: none; }
.page.compact .sidebar .nav-group--closed .nav-group-body { display: block; }

/* Item 983: Gusto connection card on Payroll settings - sync results + recent activity. */
.gusto-sync-list { list-style: none; padding-left: 0; margin: 4px 0 0; }
.gusto-sync-list li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 0.8125rem;
}
.gusto-sync-list li:last-child { border-bottom: 0; }

/* Employee record → Direct deposit tab (ACH authorization card, signed attestation, history). */
.dd-panel { display: flex; flex-direction: column; gap: 1rem; max-width: 62rem; }
.dd-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; padding: 1rem 1.25rem; min-width: 0;
}
.dd-title {
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--mud-palette-text-secondary); margin: 0 0 .6rem;
}
.dd-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.dd-fields { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.dd-fields dt {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--mud-palette-text-secondary); align-self: center;
}
.dd-fields dd { margin: 0; font-size: .875rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.dd-attestation {
    border-left: 3px solid var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .06);
    border-radius: 4px; padding: .6rem .8rem;
    font-size: .8125rem; line-height: 1.45; color: var(--mud-palette-text-primary);
}
.dd-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.dd-upload-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.dd-history th, .dd-history td { font-size: .8125rem; }
@media (max-width: 700px) { .dd-fields { grid-template-columns: 1fr; } }

/* ADR 205: employee record > Certifications */
.cert-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.cert-title {
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--mud-palette-text-secondary);
}
.cert-list { display: flex; flex-direction: column; }
.cert-row { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--mud-palette-lines-default); }
.cert-row:first-child { border-top: 0; padding-top: 0; }
.cert-row--inactive { opacity: .6; }
.cert-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.cert-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--mud-palette-text-primary); }
.cert-row-meta { font-size: .8125rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.cert-row-notes { font-size: .8rem; font-style: italic; color: var(--mud-palette-text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.cert-row-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.cert-scan-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--mud-palette-text-secondary); }

/* Item 1074: paystub (Employee record > Pay history, and its PDF). --zg-* vars: the print skin inks them on white. */
.paystub-detail-cell { background: var(--zg-surface-soft); padding: .6rem 1.5rem; }
.paystub {
    background: var(--zg-surface); border: 1px solid var(--zg-border); border-radius: 6px;
    padding: 1.25rem; max-width: 560px; font-size: .875rem;
}
.paystub-head {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid currentColor; padding-bottom: .4rem;
}
.paystub-title { font-size: 1.05rem; }
.paystub-who { margin: .5rem 0 .25rem; }
.paystub-name { font-weight: 700; }
.paystub-muted { color: var(--zg-muted); }
.paystub-section { width: 100%; border-collapse: collapse; margin-top: .75rem; }
.paystub-section th {
    text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--zg-muted); border-bottom: 1px solid var(--zg-border-strong); padding: .25rem 0;
}
.paystub-section td { padding: .2rem 0; vertical-align: baseline; }
.paystub-section td:nth-child(2) { padding-left: .75rem; font-size: .8rem; }
.paystub .paystub-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.paystub-total td { border-top: 1px solid var(--zg-border-strong); font-weight: 600; }
.paystub-section[data-section="employer"] td { color: var(--zg-muted); }
.paystub-net td { border-top: 2px solid currentColor; font-weight: 700; font-size: .95rem; padding-top: .35rem; }

/* Item 997: DevTools verification fixtures + cleanup preview (the panel's older rules still live in its <style> block). */
.dev-tools-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.dev-tools-result-list { margin: 4px 0 8px; padding-left: 16px; font-size: 12px; color: var(--mud-palette-text-primary); }
.dev-tools-result { margin-bottom: 4px; line-height: 1.35; word-break: break-word; }
.dev-tools-result.is-created { color: var(--mud-palette-success); }
.dev-tools-result.is-present { color: var(--mud-palette-text-secondary); }
.dev-tools-result.is-refused, .dev-tools-status.is-refused { color: var(--mud-palette-warning); }
.dev-tools-result.is-failed, .dev-tools-status.is-failed { color: var(--mud-palette-error); }
.dev-tools-result.is-note { color: var(--mud-palette-text-secondary); font-style: italic; }
.dev-tools-plan-group { margin-top: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--mud-palette-text-secondary); }

/* Item 1144: Backfill 3D links report lines */
.zg-backfill-list { margin: 0; padding-left: 1.25rem; font-size: 0.85rem; line-height: 1.5; color: var(--mud-palette-text-primary); }
.zg-backfill-list li { overflow-wrap: anywhere; }

/* Item 1148: smallware edit panel - where the row came from + its verbatim placement note */
.zg-smallware-source { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; font-size: 0.85rem; color: var(--mud-palette-text-primary); display: flex; flex-direction: column; gap: 6px; }
.zg-smallware-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); margin-right: 4px; }
.zg-smallware-hint { white-space: pre-line; overflow-wrap: anywhere; color: var(--mud-palette-text-secondary); }
/* ADR #206: the import / Link inventory preview — a paged grid needs a sized flex column inside the fly-in */
.zg-smallware-report { display: flex; flex-direction: column; height: calc(100vh - 240px); min-height: 360px; }
.zg-smallware-report > .erp-grid-v2 { margin-top: 12px; }

/* Item 1185: Food > Named drinks - recipe drafts (current vs proposed) + description import preview */
.ndr-name { font-weight: 600; }
.ndr-sub { font-size: 0.75rem; line-height: 1.25; color: var(--mud-palette-text-secondary); }
/* both recipe grids (Recipe tab + Drink recipes diff): a line's notes under its ingredient */
.recipe-line-note { font-size: 0.75rem; line-height: 1.2; margin-top: 2px; color: var(--mud-palette-text-secondary); }
.ndr-desc-cell { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem; }
.ndr-count { font-variant-numeric: tabular-nums; font-size: 0.8rem; margin-left: 6px; }
.ndr-count--added { color: var(--mud-palette-success); }
.ndr-count--removed { color: var(--mud-palette-error); }
.ndr-count--changed { color: var(--mud-palette-warning); }
.ndr-detail { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.ndr-desc { font-size: 0.875rem; color: var(--mud-palette-text-primary); }
.ndr-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); margin-right: 6px; }
.ndr-flags { margin: 0; padding-left: 1.1rem; font-size: 0.83rem; line-height: 1.45; }
.ndr-flag--review { color: var(--mud-palette-text-primary); }
.ndr-flag--review::marker { color: var(--mud-palette-warning); }
.ndr-flag--note { color: var(--mud-palette-text-secondary); }
.erp-grid-v2-table tbody tr.ndr-row--review td { background: rgba(var(--mud-palette-warning-rgb), 0.06); }
.erp-grid-v2-table tbody tr.ndr-diff--added td { background: rgba(var(--mud-palette-success-rgb), 0.08); }
.erp-grid-v2-table tbody tr.ndr-diff--removed td { background: rgba(var(--mud-palette-error-rgb), 0.07); }
.erp-grid-v2-table tbody tr.ndr-diff--removed td:nth-child(2) { text-decoration: line-through; }
.erp-grid-v2-table tbody tr.ndr-diff--changed td { background: rgba(var(--mud-palette-warning-rgb), 0.08); }
.erp-grid-v2-table tbody tr.ndr-diff--same td { color: var(--mud-palette-text-secondary); }

/* Food > Modifiers — item 1383: POS modifiers | Modifier rules side by side on desktop; stacked (fixed-height
   columns, the tab scrolls) when narrow. Each column is a flex column so its grid fills it and scrolls its own body. */
.modifier-grids { display:flex; flex-direction:column; gap:1rem; flex:0 0 auto; }
.modifier-grids > .modifier-grids-col { display:flex; flex-direction:column; min-width:0; flex:0 0 auto; height:60vh; min-height:360px; }
@media (min-width: 1200px) {
    .modifier-grids { flex-direction:row; flex:1 1 auto; min-height:0; }
    .modifier-grids > .modifier-grids-col { flex:1 1 0; height:auto; min-height:0; }
}
.modifier-change-list { margin: 0; padding-left: 1.1rem; font-size: 0.83rem; line-height: 1.4; }
/* Items 1180/1181: Food > Drink guides - grid, step editor fly-in, the menu item's build steps */
.dg-sub { font-size: 0.75rem; line-height: 1.3; color: var(--mud-palette-text-secondary); }
.erp-grid-v2-table tbody tr.dg-row--superseded td { color: var(--mud-palette-text-secondary); }
.erp-grid-v2-table tbody tr.dg-row--retired td { color: var(--mud-palette-text-disabled); }
.dg-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dg-steps { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 12px; }
.dg-step { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--mud-palette-surface); }
.dg-step--unsure { border-color: rgba(var(--mud-palette-error-rgb), 0.55); background: rgba(var(--mud-palette-error-rgb), 0.04); }
.dg-step-row { display: grid; grid-template-columns: 26px 72px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 0.9fr) auto; gap: 8px; align-items: center; }   /* 1663: + stock item */
.dg-step-row--text { grid-template-columns: 26px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto 84px; }   /* 1537: + runs with */
.dg-steps-head { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); padding: 0 11px; }
.dg-step-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); text-align: right; }
.dg-step-tools { display: inline-flex; gap: 2px; }
.dg-step-conf { display: inline-flex; justify-content: flex-end; }
.trainer-data-note { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; line-height: 1.3; color: var(--mud-palette-text-secondary); }   /* 1662 */
.trainer-data-note svg { width: 16px; height: 16px; flex: none; color: var(--mud-palette-info); }
.dg-step-chart { font-size: 0.78rem; color: var(--mud-palette-text-secondary); padding-left: 34px; }
.dg-checks { padding: 4px 2px 12px; }
.dg-flags, .dg-charts, .dg-items { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.5; }
.dg-flag--review::marker { color: var(--mud-palette-warning); }
.dg-flag--note { color: var(--mud-palette-text-secondary); }
.dg-flag-kind { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); margin-right: 6px; }
.dg-notes { white-space: pre-line; font-size: 0.85rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.dg-item-name { font-weight: 600; }
.dg-page-frame { width: 100%; height: calc(100vh - 260px); min-height: 420px; border: 0; display: block; }
.dg-page-img { min-height: 420px; }
.dg-item-guides { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.dg-item-guide { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 10px 14px; background: var(--mud-palette-surface); }
.dg-item-guide-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.dg-item-guide-title { font-weight: 600; }
.dg-item-steps { margin: 0; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.55; }
/* RF-0a: the menu item's composed build plan (record Training tab, recipe editor) */
.bp-panel { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 10px 14px; margin: 12px 0 16px; background: var(--mud-palette-surface); }
.bp-panel--compact { margin-top: 14px; }
.bp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.bp-title { font-weight: 600; }
.bp-toggle { margin-left: auto; }
.bp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.bp-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 6px; border-radius: 6px; }
.bp-step:nth-child(odd) { background: rgba(var(--mud-palette-text-primary-rgb), 0.025); }
.bp-step--opt { opacity: 0.75; }
.bp-g { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; border-radius: 10px; padding: 1px 0; color: var(--mud-palette-text-secondary); }
.bp-g--shared { background: rgba(var(--mud-palette-info-rgb), 0.14); color: var(--mud-palette-info); }
.bp-step-body { min-width: 0; overflow-wrap: anywhere; }
.bp-act { display: inline-block; min-width: 52px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); }
.bp-amt { margin-left: 6px; font-variant-numeric: tabular-nums; }
.bp-src { margin-top: 1px; }
/* 1797: the size's depletion with the chosen extras */
.bp-resolved { margin-top: 2px; font-size: 0.85rem; }
.bp-resolved--changed td { font-weight: 600; }
.bp-warn-head { margin: 10px 0 2px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); }
.bp-source { margin-top: 12px; }
/* 1593: each plan step's baked picture (recipe editor) */
.bp-pics { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 0.8rem; }
.bp-pics + .bp-toggle { margin-left: 0; }
/* 1834: the plan's modifiers in one compact picker */
.bp-mods { flex: 0 1 26rem; min-width: 14rem; margin-left: 0; }   /* no jump when the pictures line comes and goes */
.bp-mods + .bp-toggle { margin-left: auto; }
.bp-mods .app-msel-compact { width: 100%; }
.bp-steps--pics .bp-step { grid-template-columns: 28px auto minmax(0, 1fr); align-items: center; }
.bp-pic-cell { display: block; min-width: 84px; }
.bp-pic { display: flex; align-items: center; justify-content: center; width: 84px; height: 63px; object-fit: contain; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); cursor: zoom-in; }
.bp-pic--big { width: 336px; height: 252px; cursor: zoom-out; }
.bp-pic--none { border-style: dashed; cursor: default; font-size: 0.68rem; text-align: center; color: var(--mud-palette-text-secondary); }
/* Item 1524: the drink view (record Training tab, Drink guides > Drinks) - steps per method, source page, other pages */
.dv-panel { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 10px 14px; margin: 12px 0 16px; background: var(--mud-palette-surface); }
.dv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.dv-title { font-weight: 600; }
.dv-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.dv-from { font-size: 0.9rem; }
.dv-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.dv-note { margin: 2px 0 6px; }
.dv-steps { margin: 6px 0 0; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.55; }
.dv-step--opt { opacity: 0.8; }
.dv-amts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 1px 0 4px; font-size: 0.78rem; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.dv-amt b { color: var(--mud-palette-text-primary); margin-right: 2px; }
.dv-amt--bad { color: var(--mud-palette-error); }
.dv-sub-head { margin: 12px 0 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); }
.dv-cands { display: flex; flex-direction: column; gap: 6px; }
.dv-cand { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 6px 10px; }
.dv-cand-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-diffs { margin: 4px 0 0; padding-left: 1.1rem; font-size: 0.82rem; line-height: 1.45; }
.dv-diffs li::marker { color: var(--mud-palette-error); }
/* 1991: the Steps tab's live preview beside the drink view */
.dv-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; margin: 12px 0 16px; }
.dv-split > .dv-panel { margin: 0; }
.dv-split .dv-steps li { padding: 3px 6px; border-radius: 6px; margin: 1px 0; }
.dv-step--hl { background: rgba(var(--mud-palette-primary-rgb), 0.08); outline: 1px solid rgba(var(--mud-palette-primary-rgb), 0.25); }
@media (max-width: 1100px) { .dv-split { grid-template-columns: minmax(0, 1fr); } }
.dp-panel { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 10px 14px; background: var(--mud-palette-surface); position: sticky; top: 8px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-sizes { flex: 0 0 auto; }
.dp-hero { display: flex; gap: 12px; align-items: flex-end; margin: 10px 0 6px; }
.dp-big { flex: 0 0 120px; }
.dp-facts { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; line-height: 1.55; }
.dp-facts-head { font-weight: 600; margin-bottom: 3px; }
.dp-row { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.dp-row > span:last-child { text-align: right; color: var(--mud-palette-text-secondary); }
.dp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--sw); border: 1px solid var(--mud-palette-lines-default); }
.dp-total { border-top: 1px solid var(--mud-palette-lines-default); margin-top: 3px; padding-top: 3px; }
.dp-flag { margin-top: 6px; font-size: 0.75rem; color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); background: rgba(var(--mud-palette-warning-rgb), 0.08); border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.35); border-radius: 6px; padding: 5px 7px; }
.dp-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--mud-palette-lines-default); }
.dp-st { flex: 0 0 auto; width: 40px; text-align: center; font-size: 0.62rem; line-height: 1.2; color: var(--mud-palette-text-secondary); cursor: pointer; border-radius: 4px; padding: 2px 0; }
.dp-st svg { display: block; margin: 0 auto 2px; }
.dp-st:hover, .dp-st:focus-visible { background: rgba(var(--mud-palette-primary-rgb), 0.05); outline: none; }
.dp-st--hl { color: var(--mud-palette-primary); font-weight: 700; }
.dp-st--hl svg, .dp-st--hl .dp-pic { outline: 2px solid rgba(var(--mud-palette-primary-rgb), 0.35); border-radius: 4px; }
/* 1991: baked 3D stills (transparent PNGs, mostly 2:3); a 2D sketch pulses while its still is drawn */
.dp-pic { display: block; width: 34px; height: 51px; margin: 0 auto 2px; object-fit: contain; object-position: 50% 100%; }
.dp-big-pic { width: 120px; height: 180px; object-fit: contain; object-position: 50% 100%; }
.dp-st--drawing svg, .dp-drawing { animation: dp-drawing 1.4s ease-in-out infinite; }
@keyframes dp-drawing { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .dp-st--drawing svg, .dp-drawing { animation: none; opacity: 0.6; } }
.dp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.75rem; }
.dp-note { font-size: 0.7rem; color: var(--mud-palette-text-secondary); margin-top: 6px; }
.dp-vessel { overflow: visible; }
.dp-body { fill: rgba(var(--mud-palette-text-primary-rgb), 0.03); stroke: none; }
.dp-wall { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 0.8; stroke-linejoin: round; opacity: 0.7; }
.dp-vessel--hot .dp-body { fill: var(--mud-palette-surface); }
.dp-vessel--hot .dp-wall, .dp-vessel--pitcher .dp-wall { stroke-width: 1.1; }
.dp-base { fill: rgba(var(--mud-palette-text-primary-rgb), 0.35); }
.dp-sleeve { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 0.6; opacity: 0.6; }
.dp-ice { fill: rgba(255, 255, 255, 0.16); stroke: rgba(255, 255, 255, 0.45); stroke-width: 0.4; }
.dp-ice--dry { fill: rgba(255, 255, 255, 0.8); stroke: rgba(var(--mud-palette-info-rgb), 0.35); }
.dp-crisp { stroke: rgba(var(--mud-palette-text-primary-rgb), 0.35); stroke-width: 0.4; }
.dp-whip { fill: #fbf8f2; stroke: rgba(var(--mud-palette-text-primary-rgb), 0.2); stroke-width: 0.4; }
.dp-drizzle { fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.dp-lid { fill: rgba(var(--mud-palette-info-rgb), 0.12); stroke: var(--mud-palette-text-secondary); stroke-width: 0.6; opacity: 0.85; }
.dp-topline { stroke: var(--mud-palette-text-secondary); stroke-width: 0.5; stroke-dasharray: 1.5 1.5; }
.dp-topline-label { font-size: 2.6px; fill: var(--mud-palette-text-secondary); paint-order: stroke; stroke: var(--mud-palette-surface); stroke-width: 0.8px; }
/* RF-0b: Food > Recipe <-> steps health */
.erp-grid-v2-table tbody tr.rh-row--refused td { background: rgba(var(--mud-palette-error-rgb), 0.05); }
.erp-grid-v2-table tbody tr.rh-row--muted td { color: var(--mud-palette-text-secondary); }
.rh-reason { font-size: 0.82rem; overflow-wrap: anywhere; }
.rh-detail { display: flex; flex-direction: column; gap: 6px; padding: 6px 12px 10px; font-size: 0.85rem; }
.rh-sub { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mud-palette-text-secondary); }
@media (max-width: 768px) {
    .dg-step-row, .dg-step-row--text { grid-template-columns: 1fr 1fr; }
    .dg-steps-head { display: none; }
}
/* Food > Drink guides nav icon (Bootstrap Icons journal-text, white like the other nav glyphs) */
.bi-journal-text-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2'/%3E%3Cpath d='M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z'/%3E%3C/svg%3E");
}
/* POS > Sizes: days with sized drinks that came through without a size */
.erp-grid-v2-table tbody tr.pos-size-gap td { background: rgba(var(--mud-palette-warning-rgb), 0.07); }

/* item 998: /pos Drawer counts sheet — the word (Over / Short / Balanced) carries the meaning; colour only backs it */
.dcs-ok { color: var(--mud-palette-success); font-weight: 600; }
.dcs-short { color: var(--mud-palette-error); font-weight: 700; }
.dcs-over { color: var(--mud-palette-warning); font-weight: 700; }
.dcs-variance td { background: rgba(var(--mud-palette-warning-rgb), .06); }

/* Item 1126: Compliance > Logs (task log grid) + the hidden frame that prints a server PDF in place (pdf-export.js printPdf) */
.ctl-task { min-width: 18em; }
.ctl-layout { display: inline-grid; vertical-align: middle; white-space: nowrap; }   /* 1270: sheet vs detailed */
.erp-grid-v2-table tbody tr.ctl-out td { background: rgba(var(--mud-palette-error-rgb), 0.07); }
.zg-print-frame { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
/* Item 1305: Compliance > Tasks filters (on/off + audience toggles, category chips with counts), source and on/off cells */
.ctg-status, .ctg-audience { display: inline-grid; vertical-align: middle; white-space: nowrap; }
.ctg-chips { padding: 2px 0; }
.ctg-chips .zg-chip { height: 30px; padding: 0 12px; font-size: 0.8rem; gap: 6px; }
.ctg-count { font-variant-numeric: tabular-nums; font-weight: 700; opacity: 0.7; }
.ctg-sep { width: 1px; height: 20px; background: var(--mud-palette-lines-default); margin: 0 4px; }
.ctg-title { display: inline-flex; align-items: center; gap: 4px; }
.ctg-auto { color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.ctg-source-none { color: var(--mud-palette-text-disabled); font-style: italic; }
.ctg-source--note { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.ctg-active { display: inline-flex; }
/* Item 1305: AppWeekdayPickerAnt (day toggles + quick sets) and AppTimesPickerAnt (time chips + add box); 44px touch targets */
.app-dow { display: flex; flex-direction: column; gap: 8px; }
.app-dow-days, .app-dow-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.app-dow-day, .app-dow-chip {
    min-height: 44px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--zg-radius-sm);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-weight: 600; cursor: pointer;
}
.app-dow-day { min-width: 48px; padding: 0 8px; }
.app-dow-chip { padding: 0 14px; border-radius: 999px; font-weight: 500; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.app-dow-day:hover, .app-dow-chip:hover { border-color: var(--mud-palette-primary); }
.app-dow-day.is-on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.app-dow-chip.is-on { background: rgba(var(--mud-palette-primary-rgb), 0.12); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.app-dow-day:focus-visible, .app-dow-chip:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.app-dow-day:disabled, .app-dow-chip:disabled { opacity: 0.5; cursor: default; }
.app-times { display: flex; flex-direction: column; gap: 8px; }
.app-times-list { display: flex; flex-wrap: wrap; gap: 6px; }
.app-times-chip.zg-chip { height: 36px; padding: 0 4px 0 12px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.app-times-chip .zg-chip-x { min-width: 28px; min-height: 28px; }
.app-times-empty { font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.app-times-add { max-width: 12rem; }

/* Item 1401 — employee record › Schedule › Kiosk access. */
.kiosk-access { display:flex; flex-direction:column; gap:6px; }
.kiosk-access-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
/* Owner 10/14 — KioskPinSetter web modes (KioskPinDialog) + the never-set callout (record card, landing nudge). */
.kps { display:flex; flex-direction:column; gap:10px; min-width:300px; }
.kps-who { margin:0; font-size:15px; }
.kps-meta { margin:0; font-size:13px; color:var(--mud-palette-text-secondary); }
.kps-warn { font-size:13px; padding:10px 12px; border-radius:8px; color:var(--mud-palette-text-primary);
    background:rgba(var(--mud-palette-warning-rgb), .16); border:1px solid rgba(var(--mud-palette-warning-rgb), .45); }
.kps-err { font-size:13px; font-weight:600; color:var(--mud-palette-error); }
.kps-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.kiosk-pin-callout { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding:14px 18px; border-radius:12px; color:var(--mud-palette-text-primary);
    background:rgba(var(--mud-palette-warning-rgb), .16); border:2px solid var(--mud-palette-warning);
    border-left-width:6px; }
.kiosk-pin-callout-text { display:flex; flex-direction:column; gap:2px; }
.kiosk-pin-callout-text strong { font-size:1.1rem; font-weight:800; }
.kiosk-pin-callout-text span { font-size:.9rem; color:var(--mud-palette-text-secondary); }
.kiosk-pin-callout--landing { margin:0 auto 16px; max-width:960px; }
.kiosk-pin-callout-link.zg-link { display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:8px;
    font-weight:700; text-decoration:none; color:var(--mud-palette-primary-text); background:var(--mud-palette-primary); }
.kiosk-pin-callout-link.zg-link:hover { text-decoration:none; filter:brightness(1.08); }
.kd-pin-hint { margin:-.5rem 0 1rem; color:var(--mud-palette-text-secondary); }
/* Item 1520 — Echo links on Kiosk devices: the one-time code and the phrase to say. */
/* A kiosk device whose sign-in token lapsed (it can't refresh; re-enroll). */
.kd-badge.kd-expired { background:rgba(var(--mud-palette-warning-rgb), .18); color:var(--mud-palette-warning-darken, var(--mud-palette-warning)); white-space:nowrap; }
.kd-alexa-hint { font-size:12px; color:var(--mud-palette-text-secondary); white-space:nowrap; }
.kd-alexa-off { margin-bottom:1rem; }
.kd-alexa-cell { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.kd-alexa-say { font-size:1.1rem; font-weight:700; color:var(--mud-palette-text-primary); }
.kd-alexa-code { margin:12px 0; padding:12px 16px; border-radius:10px; text-align:center; font-size:2.4rem; font-weight:800;
    letter-spacing:.3em; font-variant-numeric:tabular-nums; color:var(--mud-palette-primary);
    background:rgba(var(--mud-palette-primary-rgb), .08); border:1px solid rgba(var(--mud-palette-primary-rgb), .25); }

/* Item 1400 — automatic/planned unpaid breaks: a gray band inside the board block (behind the chips), a line on Week chips. */
.bd-break { position:absolute; left:0; right:0; z-index:0; pointer-events:auto; overflow:hidden;
    background:repeating-linear-gradient(135deg, rgba(var(--mud-palette-text-primary-rgb), .16) 0 6px, rgba(var(--mud-palette-text-primary-rgb), .08) 6px 12px);
    border-top:1px dashed var(--mud-palette-text-disabled); border-bottom:1px dashed var(--mud-palette-text-disabled); }
.bd-break-lbl { display:block; padding:0 4px; font-size:9px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:var(--mud-palette-text-secondary); }
.sched-chip-break { font-size:.7rem; color:var(--mud-palette-text-secondary); padding-left:14px; }

/* Item 1407: Payroll > Timesheets - a punch whose hours were corrected after the fact (who · when under the status). */
.ts-edited { margin-left:4px; }
.ts-edited-sub { font-size:0.75rem; line-height:1.3; margin-top:2px; white-space:nowrap; color:var(--mud-palette-text-secondary); }

/* 699: registration editor covered programs — one card per program; fields wrap to 2 columns at a 640px fly-in. */
.tax-program-card { border:1px solid var(--mud-palette-lines-default, #e3d8c5); border-radius:6px; padding:8px 12px 2px; margin-bottom:10px; }
.tax-program-card__head { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; margin-bottom:6px; }
.tax-program-card__fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); column-gap:14px; }
.tax-program-card__fields > * { min-width:0; }

/* 710: annual-report fee context (display only) on Prepare + Reference. */
.tax-fee-note { font-size:.75rem; line-height:1.3; color:var(--mud-palette-text-secondary); white-space:normal; }
.tax-fee-table { max-width:640px; }

/* ---- Item 1481: AppToggleGroup turns into a select when its buttons would scroll or squeeze (js/toggle-fit.js) ----
   data-zg-fit is JS-owned: absent = before JS (clip, never scroll) · hold = select on its way · try / probe = buttons
   laid out while the select is still rendered (probe is set and cleared in one task, never painted). */
.zg-toggle-fit { position: relative; min-width: 0; }
.zg-toggle-fit:not([data-zg-fit]) { max-width: 100%; overflow: hidden; }
/* the select may shrink in a toolbar (never scroll it), down to a usable width */
.zg-toggle-fit--collapsed:not([data-zg-fit="try"]):not([data-zg-fit="probe"]) { min-width: 6rem; }
.erp-grid-v2-toolbar-left > .zg-toggle-fit:not([data-zg-fit]),
.erp-grid-v2-toolbar-left > .zg-toggle-fit--collapsed:not([data-zg-fit="try"]):not([data-zg-fit="probe"]) { flex-shrink: 1; }
/* hysteresis while measuring a select: the buttons must fit with this much room to spare */
.zg-toggle-fit[data-zg-fit-pad] { padding-inline-end: 16px; }
/* collapsed: the row stays laid out (for measuring) inside a 0x0 clip, so it can't widen any scroll box */
.zg-toggle-fit--collapsed > .zg-toggle-rowbox {
    position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
}
.zg-toggle-fit--collapsed > .zg-toggle-rowbox > .mud-toggle-group { width: max-content; }
/* buttons still rendered, select on its way: keep a select-sized blank slot, never the overflowing row */
.zg-toggle-fit[data-zg-fit="hold"]:not(.zg-toggle-fit--collapsed) > .zg-toggle-rowbox {
    width: var(--zg-toggle-pick-w, 8rem); max-width: 100%; overflow: hidden; visibility: hidden;
}
/* select still rendered, buttons on their way (or being measured): lay the row out in place of the select */
.zg-toggle-fit--collapsed:is([data-zg-fit="try"], [data-zg-fit="probe"]) > .zg-toggle-pick { display: none; }
.zg-toggle-fit--collapsed:is([data-zg-fit="try"], [data-zg-fit="probe"]) > .zg-toggle-rowbox {
    position: static; width: auto; height: auto; overflow: visible; visibility: visible; pointer-events: auto;
}
.zg-toggle-fit--collapsed:is([data-zg-fit="try"], [data-zg-fit="probe"]) > .zg-toggle-rowbox > .mud-toggle-group { width: auto; }
/* the select: as wide as the widest choice, as tall as the row it replaces */
.zg-toggle-pick { width: var(--zg-toggle-pick-w, 12rem); max-width: 100%; }
.zg-toggle-fit--xl > .zg-toggle-pick { width: 100%; }
.zg-toggle-pick .ant-select { width: 100%; }
.zg-toggle-pick .ant-select-selector {
    height: var(--zg-toggle-h, auto) !important; min-height: var(--zg-toggle-h, 0px) !important; align-items: center;
}
.zg-toggle-pick .ant-select-single .ant-select-selector .ant-select-selection-item,
.zg-toggle-pick .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
.zg-toggle-pick .ant-select-single .ant-select-selector .ant-select-selection-search-input {
    height: calc(var(--zg-toggle-h, 32px) - 2px) !important; line-height: calc(var(--zg-toggle-h, 32px) - 2px) !important;
}
.zg-toggle-pick .ant-select-multiple .ant-select-selection-overflow { flex-wrap: nowrap; overflow: hidden; }
.zg-toggle-fit--xl .ant-select-selection-item { font-size: 1.12rem; font-weight: 700; }
.zg-toggle-pick--disabled { opacity: 0.55; cursor: not-allowed; }
/* 1476: Admin > Email templates - editor, placeholder list and plain-text preview (+ its nav icon, bi-envelope). */
.bi-envelope-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3E%3C/svg%3E");
}
.bi-tablet-nav-menu {   /* 2130: Admin > Kiosk devices */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}
.email-tpl-scope { font-size:.85rem; color:var(--mud-palette-text-secondary); }
.erp-grid-v2-toolbar-left > .email-tpl-scope { flex-shrink: 1; min-width: 0; }   /* 1485: wraps, never scrolls the bar */
.email-tpl-editor { display:flex; flex-direction:column; gap:12px; }
.email-tpl-tokens { display:flex; flex-direction:column; gap:4px; }
.email-tpl-token { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.email-tpl-token .zg-chip { cursor:pointer; }
.email-tpl-token-desc { font-size:.8rem; color:var(--mud-palette-text-secondary); }
.email-tpl-preview { border:1px solid var(--mud-palette-lines-default); border-radius:6px; padding:10px 12px;
    background:rgba(var(--mud-palette-text-primary-rgb), .03); }
.email-tpl-preview-subject { font-weight:600; margin:6px 0 8px; overflow-wrap:anywhere; }
.email-tpl-preview-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.9rem; color:var(--mud-palette-text-primary); }
/* 1485: Frozen Order totals - the value side (layer-goal chips, long case/cube text) wraps instead of widening the tab. */
.frozen-totals .zg-stack > :last-child { flex-shrink: 1; min-width: 0; text-align: right; }
/* 1606: the Frozen tab's Cases cell - in store | off-site | on order | = total, wrapping as a unit. */
.frozen-cases { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
/* Employee record merged tabs (owner 10/16): one heading per section. */
.emp-tab-section + .emp-tab-section { margin-top: 1.75rem; }
.emp-tab-section-head {   /* 21px = the record head's inset, so the heading lines up with the card text */
    margin: 0 0 .75rem; padding: 0 0 .35rem 21px; font-size: 1.05rem; font-weight: 700; line-height: 1.3;
    color: var(--mud-palette-text-primary); border-bottom: 1px solid var(--mud-palette-lines-default);
    scroll-margin-top: 1rem;
}
.emp-tab-section-head:focus:not(:focus-visible) { outline: none; }

/* 1503: inventory import possible matches (ErpGridV2 RowClassFunc) */
.erp-grid-v2-table tr.import-match-accepted td { background: rgba(var(--mud-palette-success-rgb), 0.07); }
.erp-grid-v2-table tr.import-match-rejected td { opacity: 0.55; }
.erp-grid-v2-table tr.import-match-blocked td { background: rgba(var(--mud-palette-error-rgb), 0.06); color: var(--mud-palette-text-secondary); }
.erp-grid-v2-table tr.import-match-blocked td strong { text-decoration: line-through; }
/* 1582: item cost history (editor) */
.inv-cost-history { display: flex; flex-direction: column; gap: 6px; }
.import-match-badges { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.import-match-pack { display: flex; gap: 6px; align-items: center; }
.import-match-pack .ant-input-number { width: 110px; }
.import-match-reason { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.import-match-warning { margin-top: 2px; font-size: 0.8rem; color: var(--mud-palette-warning); }

/* Item 1512: a menu item's allergens (MenuAllergenWall), the grid's not-listed / recipe chips */
.menu-allergens { display: flex; flex-direction: column; gap: .35rem; }
.menu-allergens-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* item 1840: AppImageViewer - an image attachment in a document-viewer frame (fit by default, toolbar on top) */
.zg-imgview { display: flex; flex-direction: column; min-height: 0; height: 65vh; box-sizing: border-box; overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-background-gray); }
.zg-imgview-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 6px 2px 12px;
    background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.zg-imgview-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.zg-imgview-group { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.zg-imgview-group + .zg-imgview-group { margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--mud-palette-lines-default); }
.zg-imgview-bar .mud-icon-button { padding: 6px; }
.zg-imgview-bar .mud-icon-button[aria-pressed="true"] { color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .12); }
.zg-imgview-zoom { min-width: 3.4em; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.zg-imgview-stage { flex: 1 1 auto; min-height: 0; overflow: auto; }
.zg-imgview-img { display: block; }
.zg-imgview--fit .zg-imgview-stage { overflow: hidden; padding: 8px; box-sizing: border-box; }
.zg-imgview--fit .zg-imgview-img { width: 100%; height: 100%; object-fit: contain; }
.zg-imgview--zoom .zg-imgview-img { max-width: none; max-height: none; height: auto; margin: 0 auto; }
@media print { .zg-imgview-bar { display: none; } }
/* item 1516: the ZCF recipe screens attach preview lists */
.zcf-files { display: flex; flex-wrap: wrap; gap: 4px; }
.zcf-lists { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 0.85rem; }

/* =============================================================================================
   Item 1514 — special days (closed / short hours) on the schedule boards, the kiosk day header and
   the Admin › Special Days "Apply ZCF holiday hours" panel. Theme vars only — dark-mode safe.
   ============================================================================================= */
.zg-storeday {
    display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px;
    font-size: 10px; font-weight: 700; line-height: 15px; white-space: nowrap; vertical-align: middle;
}
.zg-storeday--closed { background: rgba(var(--mud-palette-error-rgb), .14); color: var(--mud-palette-error); }
.zg-storeday--short { background: rgba(var(--mud-palette-warning-rgb), .18); color: var(--mud-palette-warning-darken); }
.zg-storeday-name { font-weight: 600; }
.bd-colhead .zg-storeday { background: rgba(255, 255, 255, .92); }
.sched-dayhead .zg-storeday { margin: 2px 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }  /* name truncates; full label in the tooltip */
.sched-dayhead--closed { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(var(--mud-palette-error-rgb), .08) 8px 16px); }
/* a closed special day: the column reads dark */
.bd-col--closed .bd-body {
    background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(var(--mud-palette-error-rgb), .06) 8px 16px);
}
.zg-zcf-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.zg-zcf-line { padding: 8px 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; }
.zg-zcf-detail { margin: 2px 0 0 24px; }

/* 1634: Special Day closure checklist (phone-first: one column, wrapping actions). */
.zg-closure-steps { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 14px; }
.zg-closure-step::marker { font-weight: 700; color: var(--mud-palette-text-secondary); }
.zg-closure-how { margin: 2px 0 0 24px; font-size: .875rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.zg-closure-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* 1634: the ZCF door sign. Paper art: white page and the sign's brand ink in both themes. */
.zg-sign-page { min-height: 100vh; padding: 16px; background: var(--mud-palette-background); }
.zg-sign-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 680px; margin: 0 auto 16px; }
.zg-sign-bar > :last-child { margin-left: auto; }
.zg-sign {
    --zg-sign-ink: #3e1a1e;
    --zg-sign-gold: #d5a670;
    container-type: inline-size;
    page: zg-sign;
    width: min(100%, 680px);
    aspect-ratio: 8.5 / 11;
    margin: 0 auto;
    background: #fff;
    color: var(--zg-sign-ink);
}
.zg-sign-frame {
    box-sizing: border-box;
    height: 100%;
    padding: 24cqi 5cqi 11cqi;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1.8cqi solid var(--zg-sign-ink);
    text-align: center;
}
.zg-sign-head {
    font-family: "Brandon Grotesque", "Gotham", "Montserrat", "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
    font-weight: 800;
    font-size: 7.3cqi;
    line-height: 1.12;
    text-transform: uppercase;
    text-wrap: balance;
}
.zg-sign-head--short { font-size: 10cqi; }
.zg-sign-time {
    margin-top: 5cqi;
    font-family: "Brandon Grotesque", "Gotham", "Montserrat", "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 5cqi;
    text-wrap: balance;
}
.zg-sign-rule { width: 45cqi; margin-top: 7cqi; }
.zg-sign-hope { margin-top: 7cqi; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 4.8cqi; }
.zg-sign-logo { width: 50cqi; margin-top: auto; }
@page zg-sign { size: letter portrait; margin: 0.4in; }
@media print {
    .zg-sign-bar { display: none !important; }
    .zg-sign-page { min-height: 0; padding: 0; background: #fff; }
    .zg-sign { width: 100%; aspect-ratio: auto; height: 10.1in; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* 1525: AP intake — attach an invoice to an existing bill (suggestion diff + picker). */
.ap-attach-reasons { margin: 0; padding-left: 18px; font-size: 12px; }
.app-table.ap-attach-diff td, .app-table.ap-attach-pick td { padding: 3px 8px; vertical-align: top; }
.app-table.ap-attach-diff tr.ap-diff--changed td { background: rgba(var(--mud-palette-warning-rgb), 0.08); }
.app-table.ap-attach-diff tr.ap-diff--one-side td { background: rgba(var(--mud-palette-info-rgb), 0.06); }
.app-table.ap-attach-pick tr.ap-attach-pick--paid td { color: var(--mud-palette-text-secondary); }
.ap-attach-other { padding: 2px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ap-attach-other:last-child { border-bottom: 0; }

/* 1527: bill attachments on the Transactions row (badge) and its expanded drill. */
.zg-attach-badge { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px;
    color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; vertical-align: middle; }
.zg-attach-badge .zg-icon { width: 15px; height: 15px; }
.zg-bill-attachments { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 6px; }

/* 1528: combine / edit-source-lines pickers — the bill each candidate line sits on. */
.zg-fa-line { padding: 4px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.zg-fa-line:last-child { border-bottom: 0; }
.zg-fa-line-bill { font-size: 12px; color: var(--mud-palette-text-secondary); }

/* 1534: AppSliderAnt - a native range input in the Ant look (touch drags work; Ant's Slider tracks mousemove only).
   --app-slider-fill is set inline from the value; kiosk.css enlarges the thumb for wall tablets. */
.app-slider { --app-slider-thumb: 20px; --app-slider-track: 6px; position: relative; padding: 4px calc(var(--app-slider-thumb) / 2) 0; }
.app-slider-input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--app-slider-thumb); margin: 0;
    background: transparent; cursor: pointer; touch-action: pan-y; }
.app-slider-input:disabled { cursor: default; opacity: .5; }
.app-slider-input::-webkit-slider-runnable-track { height: var(--app-slider-track); border-radius: 999px;
    background: linear-gradient(to right, var(--app-slider-accent, var(--mud-palette-primary)) var(--app-slider-fill, 0%), rgba(var(--mud-palette-text-primary-rgb), .15) var(--app-slider-fill, 0%)); }
.app-slider-input::-moz-range-track { height: var(--app-slider-track); border-radius: 999px; background: rgba(var(--mud-palette-text-primary-rgb), .15); }
.app-slider-input::-moz-range-progress { height: var(--app-slider-track); border-radius: 999px; background: var(--app-slider-accent, var(--mud-palette-primary)); }
.app-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--app-slider-thumb); height: var(--app-slider-thumb);
    margin-top: calc((var(--app-slider-track) - var(--app-slider-thumb)) / 2); border-radius: 50%; border: 3px solid var(--app-slider-accent, var(--mud-palette-primary));
    background: var(--app-slider-thumb-bg, var(--mud-palette-surface)); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.app-slider-input::-moz-range-thumb { width: var(--app-slider-thumb); height: var(--app-slider-thumb); border-radius: 50%; box-sizing: border-box;
    border: 3px solid var(--app-slider-accent, var(--mud-palette-primary)); background: var(--app-slider-thumb-bg, var(--mud-palette-surface)); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.app-slider-input:focus-visible { outline: none; }
.app-slider-input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--app-slider-accent, var(--mud-palette-primary)); outline-offset: 3px; }
.app-slider-input:focus-visible::-moz-range-thumb { outline: 3px solid var(--app-slider-accent, var(--mud-palette-primary)); outline-offset: 3px; }
.app-slider-marks { position: relative; height: 24px; margin-top: 4px; }
.app-slider-mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: .85rem; color: var(--mud-palette-text-secondary); }

/* 1530: ZCF par import panel — per-row match, picker and the weekday diff. */
.zpi-intro { display: block; margin-bottom: 8px; font-size: 13px; }
.zpi-file, .zpi-actions { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; flex-wrap: wrap; }
.zpi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .zpi-fields { grid-template-columns: 1fr; } }
.zpi-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.zpi-row.is-unmatched { background: rgba(var(--mud-palette-warning-rgb), 0.05); }
.zpi-main { flex: 1; min-width: 0; }
.zpi-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zpi-cat, .zpi-item, .zpi-note { font-size: 12.5px; }
.zpi-note { color: var(--mud-palette-warning-darken, var(--mud-palette-text-secondary)); margin-top: 2px; }
.zpi-pick { margin: 4px 0; max-width: 360px; }
.zpi-days { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.zpi-day { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: 12.5px;
    border: 1px solid var(--mud-palette-lines-default); font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.zpi-day small { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.zpi-day.is-changed { border-color: rgba(var(--mud-palette-primary-rgb), 0.5); background: rgba(var(--mud-palette-primary-rgb), 0.07);
    color: var(--mud-palette-text-primary); }
.zpi-old { text-decoration: line-through; opacity: .7; }

/* 1529/1532: Food › Pull sheet tab — week bar and the ZCF waste record sheet. */
.zps-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.zps-week { display: inline-flex; align-items: center; gap: 4px; }
.zps-waste-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.zps-waste { padding: 12px; overflow-x: auto; }
.zws-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.zws-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.zws-store { font-weight: 600; }
.zws-week { margin-left: auto; }
.zws-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.zws-table th { background: rgba(var(--mud-palette-success-rgb), 0.18); font-weight: 700; text-align: left; }
.zws-table th, .zws-table td { border: 1px solid var(--mud-palette-lines-default); padding: 4px 8px; vertical-align: top; }
.zws-table th.zws-day, .zws-cell { text-align: center; min-width: 64px; font-variant-numeric: tabular-nums; }
.zws-cell { height: 24px; }
.zws-total { font-weight: 700; }
.zws-group, .zws-cat { color: var(--mud-palette-text-secondary); }
.zws-notes { margin-top: 6px; font-size: 12px; color: var(--mud-palette-text-secondary); }
@media print {
    .zws-table th { background: #e6f3ec !important; color: #111 !important; }
    .zws-table th, .zws-table td { border-color: #888 !important; color: #111 !important; }
    .zws-table tr { page-break-inside: avoid; }
    .zws-cell { height: 28px; }
}

/* 1531: the kiosk's printed ZCF set — pull sheet 1 (pastries), 2 (sandwiches & burritos), then the blank waste sheet. */
.zpp-sheet { margin-bottom: 28px; }
.zpp-table { margin-bottom: 10px; }
.zpp-sand th.zws-day, .zpp-sand .zws-cell { min-width: 44px; }
.zpp-qty { font-weight: 700; }
.zpp-notes { font-size: 12.5px; color: var(--mud-palette-text-secondary); display: grid; gap: 2px; }
@media print {
    .zpp-sheet { page-break-after: always; margin: 0; }
    .zpp-sheet:last-child { page-break-after: auto; }
    .zpp-notes { color: #333 !important; }
}

/* 1529-1532 QA: print-page toolbar (Back / Print), the back office's blank waste sheet (print only), the Pars grid cells. */
.zpp-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.zps-print-only { display: none; }
.zps-product, .zps-from { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.zps-from { font-size: 12px; color: var(--mud-palette-text-secondary); }
@media print {
    .zpp-noprint { display: none !important; }
    .zps-print-only.zg-print-target { display: block !important; }
}
.app-switch-label.is-clickable { cursor: pointer; user-select: none; }
/* 1529 QA: the Pars grid's day headers stack "SUN" over "10/18" so a 58px column fits */
.erp-grid-v2-table thead th.zps-day { white-space: pre-line; line-height: 1.25; }
/* 1531 QA: the print pages' Back link reads as ink on the cream sheet (the kiosk's gold link was 1.35:1) */
.zpp-bar .zpp-back { font-size: 15px; font-weight: 700; color: inherit; text-decoration: underline; }   /* the sheet's own ink */
.zpp-for { display: block; font-weight: 400; font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.zps-cooked { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); font-weight: 600; }
/* 1550: training library */
.tg-filter-topic { min-width: 12em; margin-left: 8px; }
.tg-library-link { margin-right: 12px; white-space: nowrap; }
.tg-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.erp-grid-v2-table tbody tr.tg-row--draft td { background: rgba(var(--mud-palette-warning-rgb), 0.04); }
.erp-grid-v2-table tbody tr.tg-row--retired td { color: var(--mud-palette-text-disabled); }
.tg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tg-blocker { font-size: 0.8rem; color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); margin-left: 6px; }
.tg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.tg-body-edit textarea { font-family: var(--mud-typography-default-family, inherit); min-height: 22em; }
.tg-preview { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 10px 14px; min-height: 22em; max-height: 60vh; overflow: auto; background: var(--mud-palette-surface); }
@media (max-width: 900px) { .tg-body { grid-template-columns: minmax(0, 1fr); } }
.tg-section { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.tg-file { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.tg-file-name { min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-file-label { flex: 1 1 12em; min-width: 8em; }
.tg-link-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tg-link-kind { min-width: 11em; }
.tg-link-target { flex: 1 1 16em; min-width: 14em; max-width: 32em; }
.tg-howtos { margin: 12px 0 16px; }
.tg-chip-status { margin-left: 4px; color: var(--mud-palette-text-secondary); }
.tg-reader-summary { color: var(--mud-palette-text-secondary); margin-bottom: 8px; }
.tg-reader-body { margin-bottom: 12px; }
.tg-reader-file { margin: 12px 0; }
.tg-reader-img { display: block; max-width: 100%; height: auto; margin-top: 6px; border-radius: 6px; }
.tg-reader-frame { display: block; width: 100%; height: 70vh; border: 0; margin-top: 6px; }
/* item 1659: guide videos in the library panel */
.tg-video-move { flex: 1 1 14em; min-width: 10em; }
.tg-video-player { display: block; width: 100%; max-height: 60vh; aspect-ratio: 16 / 9; margin: 4px 0 10px; border-radius: 8px; background: var(--mud-palette-black); }
.tg-video-frame { margin: 0; }
/* item 1659 slice 2: AppGuideBody's play line */
.zg-body-play { margin: 8px 0 12px; }
/* 1786: a body photo line (GuidePhotos); a span so it can sit inside a step's paragraph */
.zg-photo { display: block; width: fit-content; max-width: 100%; margin: 10px 0 14px; }
.zg-photo-cap { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.35; color: var(--mud-palette-text-secondary); }
/* 1843: never wider than its own pixels (no upscaling); tap opens the native popover at full size */
.zg-photo-open { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; cursor: zoom-in; }
.zg-photo-open img { display: block; width: auto; max-width: min(100%, 26rem); height: auto; border-radius: 10px;
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default); }
.zg-photo-open:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.zg-photo-full { max-width: 96vw; max-height: 96vh; margin: auto; padding: 0; border: 0; overflow: auto; background: transparent; }
.zg-photo-full::backdrop { background: color-mix(in srgb, var(--mud-palette-black, #000) 80%, transparent); }
.zg-photo-close { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-out; }
.zg-photo-close img { display: block; width: auto; height: auto; max-width: 94vw; max-height: 86vh; border-radius: 12px; }
.zg-photo-close .zg-photo-cap { max-width: 60ch; font-size: 0.95rem; text-align: center; color: var(--mud-palette-white); }
/* 1843: guide bodies (GuideBodyLayout): steps, sub-steps (a., b.), photos and headings breathe */
.zg-guide-body { line-height: 1.6; }
.zg-guide-body p { margin: 0 0 .75em; }
.zg-guide-body :is(h1, h2, h3, h4) { margin: 1.5em 0 .5em; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--mud-palette-text-primary); }
.zg-guide-body h1 { font-size: 1.2rem; }
.zg-guide-body :is(ol, ul) { margin: .3em 0 1em; padding-left: 1.9em; }
.zg-guide-body li + li { margin-top: .8em; }
.zg-guide-body li > p { margin: 0 0 .45em; }
.zg-guide-body li > :last-child { margin-bottom: 0; }
.zg-guide-body li > :is(ol, ul) { margin: .5em 0 .3em; padding-left: 1.6em; }
.zg-guide-body li li + li { margin-top: .4em; }
.zg-guide-body ol[type="a"] { list-style-type: lower-alpha; }
.zg-guide-body ol > li::marker { font-weight: 700; }
/* 1788: change log (header button + dialog list) */
.tg-log-btn { margin-left: 2px; }
.tg-log { list-style: none; margin: 0; padding: 0; }
.tg-log-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.tg-log-row:first-child { border-top: 0; }
.tg-log-at { font-weight: 600; white-space: nowrap; color: var(--mud-palette-text-secondary); }
/* 1889: guide first-seen / expiry dates */
.erp-grid-v2-table td.tg-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.erp-grid-v2-table tbody tr.tg-row--expired > td { background: rgba(var(--mud-palette-text-primary-rgb), 0.025); color: var(--mud-palette-text-secondary); }
.erp-grid-v2-table tbody tr:not(.tg-row--expired) + tr.tg-row--expired > td { border-top: 2px solid var(--mud-palette-lines-default); }
.tg-ro-field { position: relative; }
.tg-ro-field .ant-input.tg-ro[disabled] { border-style: dashed; background: rgba(var(--mud-palette-text-primary-rgb), 0.035);
    color: var(--mud-palette-text-primary); cursor: default; padding-right: 32px; }
.tg-ro-field .tg-ro-lock { position: absolute; right: 10px; bottom: 10px; color: var(--mud-palette-text-secondary); pointer-events: none; }
.tg-dates-hint { margin-bottom: 14px; }
.tg-dates-line { margin-top: 6px; }

/* 1539e: Food > Prep recipes edit panel */
.prep-edit-hint { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--mud-palette-text-secondary); }

/* 1567: Food > Step pictures (the kiosk step-still bake runner) */
.ss-thumb { display: block; width: 48px; height: 60px; object-fit: contain; border-radius: 6px; background: var(--mud-palette-background-gray); }
.ss-thumb--empty { border: 1px dashed var(--mud-palette-lines-default); background: none; }
.erp-grid-v2-table tbody tr.ss-row--failed td { background: rgba(var(--mud-palette-error-rgb), 0.06); }
.erp-grid-v2-table tbody tr.ss-row--muted td { color: var(--mud-palette-text-secondary); }
.ss-detail { overflow-wrap: anywhere; color: var(--mud-palette-error); }
.ss-errors { margin-top: 4px; font-size: 0.82rem; overflow-wrap: anywhere; }
.ss-progress { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.ss-progress-text { font-variant-numeric: tabular-nums; }
/* Nav split 10/26: the Inventory nav icon (bi-box-seam). */
.bi-box-seam-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/%3E%3C/svg%3E");
}
/* 1578: item editor Recipe units tab. */
.app-table tbody tr.ru-missing td { background: rgba(var(--mud-palette-warning-rgb), .15); }
.ru-table td { vertical-align: middle; }
.ru-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ru-foot .ru-hint { margin-left: auto; font-size: .8rem; color: var(--mud-palette-text-secondary); }

/* 1607: a thaw item's freezer + thaw fridge boxes on the count sheet */
.count-thaw-boxes { display: inline-flex; align-items: center; gap: 6px; }

/* ADR 219: Food > Featured campaign card (status, summary, timeline, ordering guide) */
.fc-card { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fc-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-actions { display: flex; align-items: center; gap: 8px; }
.fc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.fc-summary > span { display: inline-flex; align-items: center; gap: 6px; }
.fc-summary > span + span::before { content: "·"; margin: 0 10px; }
.fc-drinks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fc-timeline { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px 2px; overflow-x: auto; }
.fc-timeline::before { content: ""; position: absolute; left: 24px; right: 24px; top: 15px; height: 2px; background: var(--mud-palette-lines-default); }
.fc-dot { position: relative; flex: 1 1 0; min-width: 88px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.fc-dot-mark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mud-palette-primary); background: var(--mud-palette-surface); margin-bottom: 4px; }
.fc-dot-label { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.fc-dot-date { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.fc-dot.is-done .fc-dot-mark { background: var(--mud-palette-primary); }
.fc-dot--launch .fc-dot-mark { border-color: var(--mud-palette-success); }
.fc-dot.is-missed .fc-dot-mark { border-color: var(--mud-palette-error); background: var(--mud-palette-error); }
.fc-dot.is-missed .fc-dot-label, .fc-dot.is-missed .fc-dot-date, .fc-missed { color: var(--mud-palette-error); font-weight: 600; }

/* ADR 219 slice 2 (1767): campaign AI draft review beside the source page */
.cr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 42%); gap: 16px; align-items: start; }
.cr-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cr-files { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; cursor: pointer; font-size: .8125rem; background: var(--mud-palette-surface); }
.cr-block { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); cursor: pointer; }
.cr-file.is-focus, .cr-block.is-focus { border-color: var(--mud-palette-primary); }
.cr-cell .cr-meta { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-block.is-skipped { opacity: .6; }
.cr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-meta { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.cr-cell { display: inline-flex; align-items: center; gap: 6px; }
.cr-cell > .ant-select { min-width: 220px; }   /* owner 11/3: an inline match select collapsed to the search text while typing */
.cr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
tr.cr-off td { color: var(--mud-palette-text-disabled); text-decoration: line-through; }
.cr-page { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-page-frame { width: 100%; height: calc(100vh - 150px); min-height: 420px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); }
@media (max-width: 900px) { .cr-split { grid-template-columns: 1fr; } .cr-page { position: static; } }
.cr-need { color: var(--mud-palette-warning-darken); font-style: italic; border-bottom: 1px dashed var(--mud-palette-warning); }
.cr-block .cr-cell { max-width: 100%; min-width: 0; }
.cr-block .cr-cell > span:not(.cr-meta) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ADR 219 slice 3 (1768): buy-in POs, Launch now, End campaign */
.fc-drink { display: inline-flex; align-items: center; gap: 6px; }
.fc-buyins { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.fc-end-sum { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .875rem; color: var(--mud-palette-text-secondary); }
/* 1899: items the buy-in left off */
.fc-left { margin: 4px 0 2px; padding-left: 18px; }
.fc-left li { margin: 1px 0; }
.fc-left-why { color: var(--mud-palette-text-secondary); }
/* 1798: campaign Rack & fridge plan (CampaignShelfPanel); teal = the 3D featured lanes and spare rack */
:root { --featured-rgb: 14, 127, 113; }
:root[data-theme="dark"] { --featured-rgb: 92, 198, 192; }
.csp { margin: 12px 0 4px; padding: 12px 16px; border: 1px solid var(--mud-palette-lines-default); border-left: 4px solid rgb(var(--featured-rgb)); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.csp .csp-chip { background: rgba(var(--featured-rgb), .14) !important; color: rgb(var(--featured-rgb)) !important; }
.csp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.csp-title { font-weight: 600; }
.csp-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.csp-table th { text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); padding: 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.csp-table td { padding: 8px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; }
.csp-section td { background: var(--mud-palette-background-gray); font-size: .75rem; letter-spacing: .03em; color: var(--mud-palette-text-secondary); }
.csp-row--nospot td { background: rgba(var(--mud-palette-error-rgb), .08); }
.csp-row--nospot .csp-spot { color: var(--mud-palette-error); font-weight: 600; }
.csp-row--overflow .csp-spot { color: var(--mud-palette-warning); font-weight: 600; }
.csp-row--free td, .csp-row--backstock td { color: var(--mud-palette-text-secondary); }
.csp .csp-move { margin-left: 8px; font-weight: 600; white-space: nowrap; }

/* ADR-220 (1757): inventory books card + CountReconcile month-end panel */
.inventory-books-select { min-width: 16em; }
.count-month-end-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 16px; margin-top: 12px; }
/* 1834: AppMultiSelectAnt Compact - an inline label, then one line of tags with Ant's "+N" overflow */
.app-msel-compact { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.app-msel-label { font-size: 0.85rem; font-weight: 600; white-space: nowrap; color: var(--mud-palette-text-secondary); }
.app-msel-compact > .ant-select { flex: 1 1 auto; min-width: 10rem; }
.app-msel-compact .ant-select-selection-overflow { flex-wrap: nowrap; overflow: hidden; }
.app-msel-compact .ant-select-selection-item { border-radius: 999px; border-color: rgba(var(--mud-palette-primary-rgb), 0.3);
    background: rgba(var(--mud-palette-primary-rgb), 0.1); color: var(--mud-palette-primary); font-weight: 600; }
.app-msel-compact .ant-select-selection-item-remove { color: inherit; }
/* 1895: AppMultiSelectAnt grouped mode - a chip box, then a searchable list under group headers; --app-gsel-c is a group's colour */
.app-gsel { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.app-gsel-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 12rem; min-height: 40px; padding: 5px 8px; border-radius: 10px;
    cursor: pointer; font: inherit; text-align: left; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-inputs); }
.app-gsel-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    color: var(--mud-palette-white); background: var(--app-gsel-c, var(--mud-palette-primary)); }
.app-gsel-hint { margin-left: 6px; font-style: normal; font-weight: 400; font-size: .85em; opacity: .8; }
.app-gsel-add { padding: 3px 6px; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.app-gsel-scrim { position: fixed; inset: 0; z-index: 1049; }
.app-gsel-dd { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050; display: block; min-width: max(100%, 18rem); max-height: 390px; overflow: auto;
    border-radius: 10px; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-inputs);
    box-shadow: 0 6px 18px rgba(var(--mud-palette-dark-rgb), .18); }
.app-gsel-search { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: inherit;
    border-bottom: 1px solid var(--mud-palette-lines-inputs); color: var(--mud-palette-text-secondary); }
.app-gsel-search-icon { flex: none; width: 18px; height: 18px; }
.app-gsel-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0; font: inherit; color: var(--mud-palette-text-primary); background: transparent; }
.app-gsel-group { display: block; padding-bottom: 4px; }
.app-gsel-grp { display: flex; align-items: center; gap: 6px; padding: 6px 10px 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-gsel-grp::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--app-gsel-c, var(--mud-palette-text-secondary)); }
.app-gsel-grp small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mud-palette-text-secondary); }
.app-gsel-opt { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px 10px 5px 24px; border: 0; cursor: pointer;
    font: inherit; text-align: left; color: inherit; background: transparent; }
.app-gsel-opt:hover { background: var(--mud-palette-action-default-hover); }
.app-gsel-opt--on { font-weight: 600; background: rgba(var(--mud-palette-primary-rgb), .08); }
.app-gsel-opt--on::after { content: "\2713"; color: var(--mud-palette-primary); }
.app-gsel-empty { display: block; padding: 8px 10px; color: var(--mud-palette-text-secondary); }

/* 1913: item editor History tab (mock docs/ops-manual/images/samples/1913-item-history.html). Theme vars only. */
.ih-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ih-tile { min-width: 140px; padding: 8px 12px; border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); }
.ih-tile-k { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zg-muted); }
.ih-tile-v { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ih-plus { color: var(--mud-palette-success); font-weight: 700; }
.ih-minus { color: var(--mud-palette-error); font-weight: 700; }
.ih-pend { color: var(--mud-palette-warning-darken); }
.ih-sub { color: var(--zg-muted); font-size: 0.75rem; }
.erp-grid-v2-table tr.ih-pending td { background: rgba(var(--mud-palette-warning-rgb), 0.07); }

/* 1914: item editor Projection tab (mock docs/ops-manual/images/samples/1914-item-projection.html); shares History's ih- tiles. */
.ih-tile.pj-alert { border-color: rgba(var(--mud-palette-error-rgb), 0.35); background: rgba(var(--mud-palette-error-rgb), 0.06); }
.ih-tile.pj-alert .ih-tile-v { color: var(--mud-palette-error); }
.ih-tile.pj-sug { border-color: rgba(var(--mud-palette-info-rgb), 0.35); background: rgba(var(--mud-palette-info-rgb), 0.06); }
.ih-tile.pj-sug .ih-tile-v { color: var(--mud-palette-info); }
.pj-whatif { border: 1px dashed var(--zg-border-strong); border-radius: var(--zg-radius-sm); padding: 10px 12px; margin-bottom: 12px; background: var(--zg-surface-soft); }
.pj-whatif-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zg-muted); }
.pj-whatif-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 0.85rem; }
.pj-ctl { display: inline-flex; align-items: center; gap: 6px; }
.pj-ctl .ant-input-number { width: 84px; }
.pj-show .ant-select { min-width: 150px; }
.pj-vendor { margin-left: auto; color: var(--zg-muted); font-size: 0.8rem; }
.pj-spark { display: block; width: 100%; height: 70px; margin: 4px 0 10px; border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); background: var(--zg-surface-soft); }
.pj-spark-line { fill: none; stroke: var(--mud-palette-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pj-spark-rp { stroke: var(--mud-palette-warning); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.pj-spark-zero { stroke: rgba(var(--mud-palette-error-rgb), 0.45); vector-effect: non-scaling-stroke; }
.pj-spark-out-dot { stroke: var(--mud-palette-error); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pj-spark-label { font-size: 11px; color: var(--mud-palette-error); }
.pj-spark-rp-label { font-size: 10px; color: var(--mud-palette-warning-darken); }
.pj-spark-wrap { position: relative; }
.pj-spark-wrap .pj-spark-label, .pj-spark-wrap .pj-spark-rp-label { position: absolute; pointer-events: none; }
.pj-car { color: var(--zg-muted); }
.pj-note { display: block; margin-top: 10px; font-size: 0.75rem; color: var(--zg-muted); }
.erp-grid-v2-table tr.pj-day { cursor: pointer; }
.erp-grid-v2-table tr.pj-oos td { background: rgba(var(--mud-palette-error-rgb), 0.06); }
.erp-grid-v2-table tr.pj-det td { background: var(--zg-surface-soft); font-size: 0.75rem; }
.erp-grid-v2-table tr.pj-det td:first-child { border-left: 3px solid var(--zg-border-strong); }
.erp-grid-v2-table tr.pj-sugg td { background: rgba(var(--mud-palette-info-rgb), 0.07); }
.erp-grid-v2-table tr.pj-more td { text-align: center; color: var(--zg-muted); font-size: 0.75rem; background: var(--zg-surface-soft); }
.pj-sb { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 1919: suggested reorder point / par beside the current ones (Stock & ordering, Projection). */
.sl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; margin: 4px 0 10px; border-radius: var(--zg-radius-sm); background: rgba(var(--mud-palette-info-rgb), 0.06); font-size: 0.85rem; }
.sl-line .sl-basis { flex-basis: 100%; }
/* item 717: SUT 202 worksheet panel (sample 717-sut202-worksheet.html). */
.sut-sub { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--zg-muted); }
.sut-ws { font-size: .85rem; }
.sut-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sut-k { border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); padding: 8px 12px; min-width: 170px; }
.sut-k > span { display: block; font-size: .7rem; color: var(--zg-muted); text-transform: uppercase; letter-spacing: .05em; }
.sut-k b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.sut-k small { display: block; font-size: .75rem; color: var(--zg-muted); }
.sut-k--prime { border-left: 4px solid var(--mud-palette-secondary); min-width: 230px; }
.sut-k--ok b, .sut-ok { color: var(--mud-palette-success); font-weight: 700; }
.sut-k--bad b, .sut-bad { color: var(--mud-palette-error); font-weight: 700; }
.sut-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sut-blk { border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); overflow: hidden; margin-bottom: 14px; }
.sut-blk h3 { margin: 0; padding: 8px 12px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-primary);
    background: var(--zg-surface-soft); border-bottom: 1px solid var(--zg-border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sut-src { font-size: .7rem; letter-spacing: 0; text-transform: none; color: var(--zg-muted); font-weight: 400; }
.sut-blk table { width: 100%; border-collapse: collapse; }
.sut-blk td { padding: 6px 12px; border-bottom: 1px solid var(--zg-border); vertical-align: top; }
.sut-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sut-d1 { padding-left: 28px !important; }
.sut-d2 { padding-left: 46px !important; font-size: .8rem; }
.sut-muted td { color: var(--zg-text-faint, var(--zg-muted)); }
.sut-note { color: var(--zg-muted); font-size: .75rem; }
.sut-tot td { font-weight: 700; border-top: 1px solid var(--zg-border-strong); background: rgba(var(--mud-palette-primary-rgb), .06); }
.sut-key td { font-weight: 700; }
.sut-key td.sut-n { color: var(--mud-palette-primary); }
.sut-pl { display: inline-block; min-width: 34px; font-size: .7rem; font-weight: 700; color: var(--mud-palette-primary-text, #fff); background: var(--mud-palette-primary);
    border-radius: 4px; padding: 1px 5px; text-align: center; margin-right: 6px; }
.sut-pl--o { background: var(--zg-surface); color: var(--mud-palette-primary); border: 1px solid var(--zg-border-strong); }
.sut-eq { font-size: .75rem; color: var(--zg-muted); padding: 6px 12px 10px; border-top: 1px dashed var(--zg-border); background: var(--zg-surface-soft); }
.sut-a { font-size: inherit !important; }
.sut-warnline, .sut-errline { margin: 0 0 12px; border-radius: var(--zg-radius-sm); padding: 8px 12px; font-size: .85rem; }
.sut-warnline { border: 1px solid rgba(var(--mud-palette-warning-rgb), .45); background: rgba(var(--mud-palette-warning-rgb), .08); }
.sut-errline { border: 1px solid rgba(var(--mud-palette-error-rgb), .35); background: rgba(var(--mud-palette-error-rgb), .06); }
.sut-portal { border: 2px solid var(--mud-palette-primary); border-radius: var(--zg-radius); overflow: hidden; }
.sut-portal-h { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sut-portal-h span { font-size: .75rem; opacity: .85; }
.sut-step { padding: 6px 12px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--zg-muted);
    background: var(--zg-surface-soft); border-top: 1px solid var(--zg-border); border-bottom: 1px solid var(--zg-border); }
.sut-chk { padding: 8px 12px; border-bottom: 1px solid var(--zg-border); display: flex; flex-direction: column; gap: 3px; }
.sut-pr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 108px 30px 56px; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--zg-border); }
.sut-pr--calc { grid-template-columns: 56px minmax(0, 1fr) 96px 110px 26px; }
.sut-pr--head { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--zg-muted); padding-top: 5px; padding-bottom: 5px; background: var(--zg-surface-soft); }
.sut-pr small { display: block; color: var(--zg-muted); font-size: .72rem; }
.sut-ln { font-weight: 800; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }
.sut-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }
.sut-v--z { color: var(--zg-muted); font-weight: 500; }
.sut-r { text-align: right; }
.sut-c { text-align: center; }
.sut-pfoot { padding: 9px 12px; background: var(--zg-surface-soft); font-size: .8rem; }
.sut-tie-chip { margin-left: 4px; }
@media (max-width: 1100px) { .sut-cols { grid-template-columns: 1fr; } }
/* Item 1890: a guide's "Check yourself" (GuideCheckYourself, owner sample 11/9); the kiosk stage's sizes and colours are in kiosk.css. */
.gq { --gq-hi: var(--mud-palette-primary-rgb); --gq-ok: var(--mud-palette-success-rgb); --gq-bad: var(--mud-palette-error-rgb);
    --gq-ok-ink: var(--mud-palette-success-text); --gq-bad-ink: var(--mud-palette-error-text); --gq-ink: var(--mud-palette-text-primary);
    --gq-mute: var(--mud-palette-text-secondary); display: flex; flex-direction: column; gap: 14px; color: var(--gq-ink); font-size: 15px; }
.gq:focus { outline: none; }
.gq-top { display: flex; align-items: center; gap: 14px; }
.gq-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: rgb(var(--gq-hi)); }
.gq-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; color: var(--gq-mute); }
.gq-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--gq-hi), .45); }
.gq-dot--right { background: rgb(var(--gq-ok)); box-shadow: none; }
.gq-dot--wrong { background: rgb(var(--gq-bad)); box-shadow: none; }
.gq-dot--now { background: rgba(var(--gq-hi), .2); box-shadow: inset 0 0 0 3px rgb(var(--gq-hi)); }
.gq-n { margin-left: 6px; }
.gq :is(.gq-opt, .gq-step, .gq-btn, .gq-x) { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gq :is(.gq-opt, .gq-step, .gq-btn, .gq-x):focus-visible { outline: 3px solid rgb(var(--gq-ok)); outline-offset: 2px; }
.gq :is(.gq-opt, .gq-step):disabled { cursor: default; }
.gq-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; border-radius: 16px; background: rgba(var(--gq-hi), .04);
    box-shadow: inset 0 0 0 1px rgba(var(--gq-hi), .16); }
.gq-type { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--gq-ok)); }
.gq-q { margin: 0; max-width: 980px; font-family: 'Fraunces', Georgia, serif; font-size: 1.45rem; font-weight: 600; line-height: 1.25; }
.gq-ch { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.gq .gq-opt { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 18px; border-radius: 14px; font-size: 17px; font-weight: 700;
    background: rgba(var(--gq-hi), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--gq-hi), .35); }
.gq .gq-opt--on { background: rgba(var(--gq-hi), .14); box-shadow: inset 0 0 0 3px rgb(var(--gq-hi)); }
.gq .gq-opt--right { background: rgb(var(--gq-ok)); color: var(--gq-ok-ink); box-shadow: none; }
.gq .gq-opt--wrong { background: rgba(var(--gq-bad), .14); color: rgb(var(--gq-bad)); box-shadow: inset 0 0 0 2px rgb(var(--gq-bad)); }
.gq .gq-opt--dim { opacity: .45; }
.gq-lt { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; box-shadow: inset 0 0 0 1.5px currentColor; }
.gq-mk { margin-left: auto; font-size: 13px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.gq-pic { height: 96px; max-width: 180px; object-fit: contain; border-radius: 8px; background: var(--mud-palette-surface); }
.gq-why { max-width: 900px; padding: 12px 18px; border-radius: 12px; line-height: 1.45; background: rgba(var(--gq-ok), .10); box-shadow: inset 4px 0 0 rgb(var(--gq-ok)); }
.gq-why b { color: rgb(var(--gq-ok)); }
.gq-why--bad { background: rgba(var(--gq-bad), .10); box-shadow: inset 4px 0 0 rgb(var(--gq-bad)); }
.gq-why--bad b { color: rgb(var(--gq-bad)); }
.gq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.gq-sp { flex: 1; }
.gq-hint, .gq-fine { color: var(--gq-mute); }
.gq .gq-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 800; white-space: nowrap;
    color: var(--gq-ink); background: rgba(var(--gq-hi), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--gq-hi), .4); }
.gq .gq-btn--p { background: rgb(var(--gq-hi)); color: var(--mud-palette-primary-text); box-shadow: none; }
.gq .gq-btn--yes { background: rgb(var(--gq-ok)); color: var(--gq-ok-ink); box-shadow: none; }
.gq .gq-btn--ghost { background: transparent; }
.gq .gq-btn:disabled { opacity: .4; cursor: default; }
.gq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1080px; }
.gq-h { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gq-mute); }
.gq .gq-step { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin-bottom: 8px; padding: 6px 16px; border-radius: 12px; font-weight: 700;
    background: rgba(var(--gq-hi), .06); box-shadow: inset 0 0 0 1.5px rgba(var(--gq-hi), .3); }
.gq .gq-step--now { box-shadow: inset 0 0 0 3px rgb(var(--gq-hi)); }
.gq .gq-step--ok { box-shadow: inset 0 0 0 2px rgb(var(--gq-ok)); }
.gq .gq-step--bad { background: rgba(var(--gq-bad), .14); color: rgb(var(--gq-bad)); box-shadow: inset 0 0 0 2px rgb(var(--gq-bad)); }
.gq-sn { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--gq-hi), .14); }
.gq-step--ok .gq-sn { background: rgb(var(--gq-ok)); color: var(--gq-ok-ink); }
.gq-step--bad .gq-sn { background: rgb(var(--gq-bad)); color: var(--gq-bad-ink); }
.gq-tag { margin-left: auto; font-size: 13px; font-weight: 800; }
.gq-model { max-width: 900px; padding: 14px 20px; border-radius: 14px; background: rgba(var(--gq-hi), .07); box-shadow: inset 0 0 0 1.5px rgba(var(--gq-hi), .35); }
.gq-model small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gq-mute); }
.gq-model p { margin: 0; font-size: 1.2rem; font-weight: 700; }
.gq-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.gq-big { font-family: 'Fraunces', Georgia, serif; font-size: 2.2rem; font-weight: 600; line-height: 1; color: rgb(var(--gq-hi)); }
.gq-s { font-size: 1.05rem; color: var(--gq-mute); }
.gq-miss { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1100px; }
.gq-mc { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: 14px; background: rgba(var(--gq-hi), .05); box-shadow: inset 0 0 0 1px rgba(var(--gq-hi), .2); }
.gq-qn { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--gq-bad)); }
.gq-qq { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.gq-row b { display: inline-block; width: 110px; color: var(--gq-mute); }
.gq-row--why { color: var(--gq-mute); }
.gq-r { font-weight: 700; color: rgb(var(--gq-ok)); }
.gq-w { color: rgb(var(--gq-bad)); text-decoration: line-through; }
.gq-got { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gq-mute); }
.gq-got span { padding: 4px 12px; border-radius: 999px; font-weight: 700; color: rgb(var(--gq-ok)); background: rgba(var(--gq-ok), .10); }
/* the way in, at the guide's end (staff reader; the kiosk's in kiosk.css) */
.gq-start { display: flex; align-items: center; gap: 16px; max-width: 980px; margin-top: 16px; padding: 14px 18px; border-radius: 14px;
    background: rgba(var(--mud-palette-success-rgb), .08); box-shadow: inset 0 0 0 1.5px rgba(var(--mud-palette-success-rgb), .5); }
.gq-start-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; font-weight: 700;
    color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), .18); }
.gq-start b { display: block; font-size: 1.1rem; }
.gq-start div span { color: var(--mud-palette-text-secondary); }
.gq-start > :last-child { margin-left: auto; }
/* 1963: the guide editor's Quiz section */
.gqe-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.gqe-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.gqe-table td { vertical-align: top; }
.gqe-table tr[draggable="true"] { cursor: grab; }
.gqe-table tr.gqe-dragging td { opacity: .5; }
.gqe-table tr.gqe-editing td, .gqe-table tr.gqe-form-row td { background: rgba(var(--mud-palette-primary-rgb), .03); }
.gqe-table tr.gqe-editing td { border-bottom: 0; }
.gqe-table tr.gqe-form-row td { padding: 4px 14px 14px 56px; }
.gqe-ord { width: 56px; white-space: nowrap; color: var(--mud-palette-text-secondary); }
.gqe-grip { vertical-align: middle; opacity: .6; }
.gqe-row-acts { width: 1%; white-space: nowrap; text-align: right; }
.gqe-ty { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap;
    color: var(--mud-palette-text-secondary); background: rgba(var(--mud-palette-text-primary-rgb), .07); }
.gqe-ty--one { color: var(--mud-palette-info); background: rgba(var(--mud-palette-info-rgb), .12); }
.gqe-ty--all { color: var(--mud-palette-secondary); background: rgba(var(--mud-palette-secondary-rgb), .12); }
.gqe-ty--truefalse { color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), .12); }
.gqe-ty--order { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .12); }
.gqe-ty--matching { color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .10); }
.gqe-ok { font-weight: 700; color: var(--mud-palette-success); }
.gqe-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gqe-grow { flex: 1 1 10em; min-width: 0; }
.gqe-pic { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px 12px; }
.gqe-thumb { height: 40px; max-width: 80px; object-fit: contain; border-radius: 4px; background: var(--mud-palette-surface); }
.gqe-sn { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 700;
    background: rgba(var(--mud-palette-text-primary-rgb), .08); }
.gqe-formbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }

/* 1440: policy re-accept prompt after sign-in, and Admin › Users › Policies */
.zg-dialog-panel.prc-dlg { width: min(620px, calc(100vw - 48px)); max-width: 620px; }
.prc-dlg .zg-dialog-titlebar { display: block; padding: 18px 22px 6px; border-bottom: 0; }
.prc-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--mud-palette-text-primary); }
.prc-sub { margin: 4px 0 0; font-size: 13.5px; font-weight: 400; color: var(--mud-palette-text-secondary); }
.prc-dlg .zg-dialog-content { padding: 10px 22px 4px; }
.prc-doc { margin-bottom: 10px; padding: 11px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.prc-doc-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.prc-doc ul { margin: 6px 0 6px 18px; padding: 0; font-size: 13.5px; }
.prc-doc li { margin: 3px 0; }
.prc-read { font-size: 13px; color: var(--mud-palette-info); text-decoration: none; }
.prc-dlg .zg-dialog-actions { align-items: center; padding: 12px 22px 16px; border-top: 0; }
.prc-hint { margin-right: auto; max-width: 280px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.pol-pick { display: inline-block; min-width: 240px; }
.pol-sum { display: flex; align-items: baseline; gap: 18px; padding: 6px 4px; font-size: 13.5px; }
.pol-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pol-meter { flex: 0 0 220px; align-self: center; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(var(--mud-palette-primary-rgb), .1); }
.pol-meter i { display: block; height: 100%; background: var(--mud-palette-success); }
.pol-who { display: inline-flex; align-items: center; gap: 8px; }
.pol-who i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 11px;
    color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .12); }
.pol-status { display: inline-flex; align-items: center; gap: 6px; }
.pol-status .text-muted { font-size: 12px; }
tr.pol-open td { background: rgba(var(--mud-palette-warning-rgb), .06); }

/* Item 1950: Trainer check (Food > Trainer check): drink-QA cards, KPIs, detail panel. Sample: docs/ops-manual/images/samples/1950-trainer-check.png */
.tqc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tqc-pick { display: inline-block; min-width: 150px; }
.tqc-search { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 4px 9px; min-width: 180px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.tqc-mode { margin-left: auto; }
.tqc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.tqc-kpi { display: flex; flex-direction: column; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 8px 10px; }
.tqc-kpi-label, .tqc-kpi-sub { font-size: 11px; color: var(--mud-palette-text-secondary); }
.tqc-kpi-value { font-size: 20px; font-weight: 700; line-height: 1.3; }
.tqc-good { color: var(--mud-palette-success); }
.tqc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-content: start; }
.tqc-card { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 9px; padding: 8px; cursor: pointer; font-size: 12.5px; }
.tqc-card:hover { border-color: rgba(var(--mud-palette-primary-rgb), .45); }
.tqc-card--sel { outline: 2px solid rgba(var(--mud-palette-primary-rgb), .4); }
.tqc-pics { display: flex; gap: 4px; align-items: flex-end; justify-content: center; background: rgba(var(--mud-palette-primary-rgb), .05); border-radius: 6px; padding: 6px 4px; }
.tqc-pics .tqc-photo, .tqc-pics .tqc-still { height: 120px; }
.tqc-photo { display: block; max-width: 45%; object-fit: contain; }
.tqc-photo--none, .tqc-still--none { display: grid; place-items: center; width: 70px; font-size: 11px; color: var(--mud-palette-text-secondary); }
.tqc-strip { display: flex; flex-direction: column; width: 14px; height: 120px; border-radius: 3px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); }
.tqc-strip i { display: block; flex: 1; }
.tqc-strip--none { background: repeating-linear-gradient(45deg, rgba(var(--mud-palette-text-primary-rgb), .08) 0 4px, transparent 4px 8px); }
.tqc-still { display: block; position: relative; overflow: hidden; }
.tqc-still img { position: absolute; height: auto; max-width: none; }
.tqc-still--full img { position: static; height: 100%; width: auto; }
.tqc-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin: 6px 0 4px; }
.tqc-hd small { display: block; color: var(--mud-palette-text-secondary); font-size: 11px; }
.tqc-pill { font-weight: 700; border-radius: 12px; padding: 2px 8px; font-size: 13px; color: var(--mud-palette-text-secondary); background: rgba(var(--mud-palette-text-primary-rgb), .06); }
.tqc-pill--g { background: rgba(var(--mud-palette-success-rgb), .15); color: var(--mud-palette-success); }
.tqc-pill--y { background: rgba(var(--mud-palette-warning-rgb), .18); color: var(--mud-palette-warning-darken); }
.tqc-pill--r { background: rgba(var(--mud-palette-error-rgb), .12); color: var(--mud-palette-error); }
.tqc-bar { display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 4px; font-size: 10.5px; color: var(--mud-palette-text-secondary); }
.tqc-bar b { display: block; height: 5px; border-radius: 3px; background: rgba(var(--mud-palette-primary-rgb), .08); }
.tqc-bar b i { display: block; height: 5px; border-radius: 3px; background: rgba(var(--mud-palette-primary-rgb), .45); }
.tqc-bar em { font-style: normal; text-align: right; }
.tqc-ft { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 11px; }
.tqc-up, .tqc-down, .tqc-same { font-style: normal; }
.tqc-up { color: var(--mud-palette-success); }
.tqc-down { color: var(--mud-palette-error); }
.tqc-note { display: block; margin-top: 10px; font-size: 11px; color: var(--mud-palette-text-secondary); }
.tqc-sub { font-size: 12px; color: var(--mud-palette-text-secondary); margin-right: 8px; }
.tqc-big { display: flex; gap: 10px; justify-content: center; align-items: flex-end; background: rgba(var(--mud-palette-primary-rgb), .05); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.tqc-big figure { margin: 0; text-align: center; }
.tqc-big .tqc-photo, .tqc-big .tqc-still { height: 220px; max-width: none; margin: 0 auto; }
.tqc-big figcaption { font-size: 11px; color: var(--mud-palette-text-secondary); }
.tqc-h { margin: 12px 0 4px; font-size: 13px; font-weight: 600; }
.tqc-h small { font-weight: 400; color: var(--mud-palette-text-secondary); }
.tqc-bands { border-collapse: collapse; font-size: 11px; }
.tqc-bands td, .tqc-bands th { padding: 1px 6px 1px 0; text-align: left; color: var(--mud-palette-text-secondary); font-weight: 600; }
.tqc-sw { display: inline-block; width: 46px; height: 12px; border-radius: 2px; border: 1px solid var(--mud-palette-lines-default); }
.tqc-sw--none { background: transparent; }
.tqc-debar { display: block; width: 120px; height: 6px; border-radius: 3px; background: rgba(var(--mud-palette-warning-rgb), .12); }
.tqc-debar i { display: block; height: 6px; border-radius: 3px; background: rgba(var(--mud-palette-warning-rgb), .8); }
.tqc-hist { display: flex; gap: 16px; flex-wrap: wrap; }
.tqc-hist > div { display: flex; flex-direction: column; }
.tqc-hist span, .tqc-hist small { font-size: 11px; color: var(--mud-palette-text-secondary); }
.tqc-spark polyline { fill: none; stroke: var(--mud-palette-success); stroke-width: 2; }
.tqc-spark circle { fill: var(--mud-palette-primary); }
.tqc-findings { margin: 0; padding-left: 16px; }
.tqc-findings li { margin: 3px 0; font-size: 12px; }
.tqc-backlog { margin-left: 4px; font-size: 12px; }
.tqc-src { width: 100%; border-collapse: collapse; font-size: 11px; }
.tqc-src td { padding: 3px 4px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; }
.tqc-src td:first-child { color: var(--mud-palette-text-secondary); white-space: nowrap; }
.tqc-ok { color: var(--mud-palette-success); }
.tqc-warn { color: var(--mud-palette-warning-darken); cursor: help; }
@media (max-width: 1100px) { .tqc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 2125: EmployeeRecord > Account & sign-in - the employee's sign-up access code, easy to read out or copy. */
.emp-access-code {
    display: inline-block; margin: 2px 0 8px; padding: 6px 12px; border-radius: 6px; user-select: all;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .08em;
    color: var(--mud-palette-text-primary); background: rgba(var(--mud-palette-primary-rgb), .08);
    border: 1px dashed rgba(var(--mud-palette-primary-rgb), .35);
}
/* Item 2180: AppPdfView. Defaults sit in :where() so a caller's frame class (height, border, background) always wins. */
:where(.zg-pdf-frame) { display: block; width: 100%; border: 0; }
.zg-pdf-host { position: relative; overflow: hidden; }
:where(.zg-pdf-host) { display: block; width: 100%; min-height: 240px; box-sizing: border-box; background: var(--mud-palette-background-gray); }
.zg-pdf-host iframe { display: block; width: 100%; height: 100%; border: 0; }
.zg-pdf-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; touch-action: manipulation; }
.zg-pdf-pages { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 10px; box-sizing: border-box; }
.zg-pdf-pages--zoom { width: 200%; }
/* paper stays white in dark mode: the PDF draws onto it */
.zg-pdf-page { width: 100%; background: var(--mud-palette-white); box-shadow: 0 1px 4px rgba(var(--mud-palette-dark-rgb), .3); }
.zg-pdf-page canvas { display: block; width: 100%; height: auto; }
.zg-pdf-chip { position: absolute; top: 8px; right: 18px; z-index: 1; padding: 2px 10px; border-radius: 999px; pointer-events: none;
    font-size: .8rem; color: var(--mud-palette-white); background: rgba(var(--mud-palette-dark-rgb), .65); }
.zg-pdf-msg { padding: 32px 16px; text-align: center; color: var(--mud-palette-text-secondary); }

/* ---- 2FA card on the access editor (item 2185, mock 3) ---------------------------------- */
.zg-2fa-card {
    padding: 12px 14px;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius);
    background: var(--zg-surface);
}
.zg-2fa-card-title { margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.zg-2fa-rows {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 4px 12px;
    margin: 0 0 10px;
    font-size: .82rem;
}
.zg-2fa-rows dt { font-weight: 400; color: var(--zg-muted); }
.zg-2fa-rows dd { margin: 0; color: var(--mud-palette-text-primary); }
.zg-2fa-reset ul { margin: 0 0 12px; padding-left: 1.2rem; }
.zg-2fa-reset li { margin-bottom: 2px; }
.zg-2fa-reset-lede { margin: 0 0 6px; color: var(--zg-muted); }