/* ═══════════════════════════════════════════════════════════════════════
   mPower.UI.Shared — app.css
   -----------------------------------------------------------------------
   Global stylesheet. Paired with tokens.css (loaded first) — prefer
   --mp-* custom properties over hardcoded values.

   Cards:      action-card, quick-card, widget, doc-details-card,
               doc-stat-bar, people-card — all share --mp-card-* tokens
               so radius/border/bg stay consistent. Adjust tokens to
               re-skin the whole app.
   Headings:   .mp-page-title, .mp-page-subtitle, .mp-section-heading,
               .mp-widget-title, .mp-micro-label — prefer these over
               inline h1/h2/h3 styles on every page.
   ─ Sidebar (mud-drawer, mp-nav-*)
   ─ Dashboard cards (action-card, quick-card, analytics-grid)
   ─ Widgets (.widget, trend-*, margin-*, health-*, top-item, dept-row)
   ─ Section titles
   ─ Status chips + badges + match badges
   ─ Match drawer / Match workspace
   ─ PO detail / doc-shell / doc-fields / stat-bar / cell-input / row menu
   ─ Toasts / confirm / doc-action footer / status progression
   ─ Login / mPowerGrid / doc-chat / item-search / AI chat / PO print
   ─ Record modal / people-card / Tenders / Tax tabs
   ═══════════════════════════════════════════════════════════════════════ */

.mpg-cell-input[type=number]::-webkit-inner-spin-button,
.mpg-cell-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mpg-cell-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.link-btn {
    background: none; border: none; padding: 0;
    color: var(--mp-color-primary-text); text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--mp-color-text-disabled); cursor: default; text-decoration: none; }

html, body {
    font-family: var(--mp-font-sans);
    background: var(--mp-color-surface-page);
    color: var(--mp-color-text);
    margin: 0;
    padding: 0;
}

/* ── Sidebar base — theme-adaptive drawer ─────────────────────────────── */
.mud-drawer .mud-nav-item a,
.mud-drawer .mud-nav-link,
.mud-drawer .mud-nav-group-header { color: var(--mp-color-text) !important; }
.mud-drawer .mud-nav-link:hover,
.mud-drawer .mud-nav-item a:hover  { background: var(--mp-color-primary-subtle) !important; color: var(--mp-color-text) !important; }
.mud-drawer .mud-nav-link.active   { background: var(--mp-color-primary-subtle) !important; color: var(--mp-color-primary-text) !important; font-weight: 600; }
.mud-drawer .mud-nav-group-header:hover { background: var(--mp-color-primary-subtle) !important; }
/* Home link icon (the top-level MudNavLink before the groups) */
.mud-drawer > .mud-nav-menu > .mud-nav-item > .mud-nav-link .mud-icon-root { color: var(--mp-color-text-secondary) !important; }

/* Tighter sidenav — match OfficeSharp density (~5 more items visible per viewport). */
.mud-drawer .mud-nav-link        { min-height: 36px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
.mud-drawer .mud-nav-group .mud-nav-group-header { min-height: 36px !important; }

/* ── Sidebar nav group labels ─────────────────────────────────────────── */
.mp-nav-buying    > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-buying    > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-buying) !important; }
.mp-nav-inventory > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-inventory > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-inventory) !important; }
.mp-nav-sales     > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-sales     > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-sales) !important; }
.mp-nav-catalog   > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-catalog   > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-catalog) !important; }
.mp-nav-people    > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-people    > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-people) !important; }
.mp-nav-reports   > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-reports   > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-reports) !important; }
.mp-nav-integrations > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-integrations > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-integrations) !important; }
.mp-nav-settings  > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-settings  > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-settings) !important; }
.mp-nav-tools     > .mud-nav-group-header .mud-nav-group-title,
.mp-nav-tools     > .mud-nav-group-header .mud-icon-root { color: var(--mp-color-nav-catalog) !important; }

/* ── Sidebar child nav icon colors ───────────────────────────────────── */
/* Specificity bumped with .mud-drawer prefix so these win over the general
   drawer nav-icon rule above that forces .mp-color-text-secondary. */
.mud-drawer .mp-nav-buying    .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-buying) !important; }
.mud-drawer .mp-nav-inventory .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-inventory) !important; }
.mud-drawer .mp-nav-sales     .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-sales) !important; }
.mud-drawer .mp-nav-catalog   .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-catalog) !important; }
.mud-drawer .mp-nav-people    .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-people) !important; }
.mud-drawer .mp-nav-reports   .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-reports) !important; }
.mud-drawer .mp-nav-integrations .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-integrations) !important; }
.mud-drawer .mp-nav-settings  .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-settings) !important; }
.mud-drawer .mp-nav-tools     .mud-nav-link .mud-icon-root { color: var(--mp-color-nav-catalog) !important; }

/* ── Action cards ─────────────────────────────────────────────────────── */
.action-card {
    background: var(--mp-card-bg);
    border-radius: var(--mp-card-radius-sm);
    padding: var(--mp-space-3) var(--mp-card-padding);
    min-width: 148px;
    flex: 1;
    border: var(--mp-card-border);
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.15s;
    overflow: hidden;
}
.action-card:hover { box-shadow: var(--mp-card-shadow-hover); }
.action-card .stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 8px 8px 0 0;
}
.action-card .ac-count {
    font-size: 28px;
    font-weight: 700;
    margin-top: 6px;
    line-height: 1;
}
.action-card .ac-dollar {
    font-size: 11px;
    color: var(--mp-color-text-muted);
    min-height: 16px;
}
.action-card .ac-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--mp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── Quick action cards ───────────────────────────────────────────────── */
.quick-card {
    background: var(--mp-card-bg);
    border-radius: var(--mp-card-radius-sm);
    padding: var(--mp-space-3) var(--mp-card-padding);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    flex: 1;
    border: var(--mp-card-border);
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.quick-card:hover { box-shadow: var(--mp-card-shadow-hover); }
.quick-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* ── Analytics widgets ────────────────────────────────────────────────── */
.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.widget {
    background: var(--mp-card-bg);
    border-radius: var(--mp-card-radius);
    padding: var(--mp-card-padding-lg);
    border: var(--mp-card-border);
}
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.widget-title  { font-size: 14px; font-weight: 700; color: var(--mp-color-text); }
.widget-period {
    font-size: 11px;
    color: var(--mp-color-primary-text);
    background: var(--mp-color-primary-subtle);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
/* ── V2 report sections (WI 2446) ─────────────────────────────────────────
   The interactive viewer and print page render each section through
   SectionShellV2, which emits the same section / section-card / section-title
   classes as the server-side ReportHtmlRendererV2 so both surfaces agree.
   Scoped under .report-section-v2 because the bare .section-title rule further
   down this file belongs to the dashboard/analytics pages and carries margins
   that don't suit a card heading. */
.report-section-v2 { margin-bottom: 14px; }
.report-section-v2.section-card {
    background: var(--mp-card-bg);
    border: var(--mp-card-border);
    border-radius: var(--mp-card-radius);
    padding: 12px 14px;
}
.report-section-v2 .section-title {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: .8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mp-color-border-light);
}
/* Panels inside a section card are already inside a box — drop the widget's own
   card chrome so sections don't read as boxes nested in boxes. */
.report-section-v2.section-card .widget {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
/* Group blocks (a section repeated per Location / CustomerNo / Employee) lead
   with their key so each block is identifiable on its own. */
.report-section-v2 .v2-group-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--mp-color-border-light);
}
.report-section-v2 .v2-group-heading-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--mp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.report-section-v2 .v2-group-heading-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-color-text);
}
/* WI 2591: shown when a grouped section (e.g. Customer Statement per
   CustomerNo) has more groups than RenderSectionV2 will render as live
   components — each group is a MudDataGrid, so an unbounded count freezes
   the Blazor Server circuit. */
.report-section-v2 .v2-group-truncated-banner {
    font-size: 12px;
    font-weight: 600;
    color: var(--mp-color-warning);
    background: var(--mp-color-warning-soft);
    border: 1px solid var(--mp-color-warning);
    border-radius: var(--mp-radius);
    padding: 8px 12px;
    margin-bottom: 14px;
}

/* Interactive report grids need their own row viewport; otherwise large result
   sets make the report page scroll thousands of pixels and the grid feels inert. */
.report-grid-widget .report-v2-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.report-grid-widget .report-v2-grid .mud-table-container {
    max-height: clamp(280px, 58vh, 680px);
    overflow: auto;
}
.report-grid-widget .report-v2-grid .mud-table-pagination {
    flex: 0 0 auto;
}
/* Stock Levels card action pills */
.stock-pill {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: filter 120ms ease;
}
.stock-pill:hover { filter: brightness(0.95); }
.stock-pill-ghost   { color: var(--mp-color-primary-text); background: var(--mp-color-primary-subtle); }
.stock-pill-primary { color: var(--mp-color-on-primary); background: var(--mp-color-primary); }
.stock-pill-accent  { color: var(--mp-tier-watch-text); background: var(--mp-tier-watch-bg); border-color: var(--mp-tier-watch-border); }
.stock-pill-warning { color: var(--mp-tier-warning-text); background: var(--mp-tier-warning-bg); border-color: var(--mp-tier-warning-border); }
/* Sales Trend */
.trend-big         { font-size: 32px; font-weight: 800; color: var(--mp-color-text); }
.trend-big-label   { font-size: 12px; color: var(--mp-color-text-muted); margin-top: 2px; }
.trend-comparison  { font-size: 13px; color: var(--mp-color-text-muted); margin-top: 4px; }
.trend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mp-color-border-lighter);
}
.trend-row:last-child { border-bottom: none; }
.trend-label  { font-size: 13px; color: var(--mp-color-text-secondary); }
.trend-value  { font-size: 15px; font-weight: 700; }
.change-up    { color: var(--mp-color-success-strong); font-size: 12px; font-weight: 600; margin-left: 6px; }
.change-down  { color: var(--mp-color-error); font-size: 12px; font-weight: 600; margin-left: 6px; }
/* Margin */
.margin-bar-container { margin: 8px 0; }
.margin-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--mp-color-text-secondary);
    margin-bottom: 4px;
}
.margin-bar       { height: 8px; background: var(--mp-color-border-light); border-radius: 4px; overflow: hidden; }
.margin-bar-fill  { height: 100%; border-radius: 4px; }
.margin-good      { background: linear-gradient(90deg, var(--mp-color-success), var(--mp-tier-success-text)); }
.margin-ok        { background: linear-gradient(90deg, var(--mp-color-warning), var(--mp-tier-warning-text)); }
.margin-bad       { background: linear-gradient(90deg, var(--mp-color-error), var(--mp-color-error)); }
.margin-summary   { display: flex; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mp-color-border-light); }
.margin-stat      { flex: 1; text-align: center; }
.margin-stat-value { font-size: 20px; font-weight: 800; }
.margin-stat-label { font-size: 11px; color: var(--mp-color-text-muted); margin-top: 2px; }
/* Health */
.health-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.health-card {
    text-align: center;
    padding: 14px 8px;
    border-radius: 8px;
}
.health-card .grade       { font-size: 28px; font-weight: 800; }
.health-card .grade-label { font-size: 11px; font-weight: 600; margin-top: 2px; }
.health-card .grade-count { font-size: 18px; font-weight: 700; margin-top: 6px; }
.health-card .grade-pct   { font-size: 11px; opacity: 0.5; }
.grade-a { background: var(--mp-tier-success-bg); color: var(--mp-tier-success-text); }
.grade-b { background: var(--mp-tier-watch-bg); color: var(--mp-tier-watch-text); }
.grade-c { background: var(--mp-tier-warning-bg); color: var(--mp-tier-warning-text); }
.grade-d { background: var(--mp-tier-critical-bg); color: var(--mp-tier-critical-text); }
.health-grid-5 { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; }
.grade-5 { background: var(--mp-tier-critical-bg); color: var(--mp-color-error); }
.grade-4 { background: var(--mp-tier-success-bg); color: var(--mp-tier-success-text); }
.grade-3 { background: var(--mp-tier-watch-bg); color: var(--mp-tier-watch-text); }
.grade-2 { background: var(--mp-tier-warning-bg); color: var(--mp-tier-warning-text); }
.grade-1 { background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); }
.health-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.health-bar-pcts { display: flex; justify-content: space-between; font-size: 11px; color: var(--mp-color-text-muted); margin-top: 4px; }
/* Top sellers */
.top-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--mp-color-surface-sunken);
}
.top-item:last-child { border-bottom: none; }
.top-rank {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    margin-right: 10px; flex-shrink: 0;
}
/* Real-world metallic ranks — gold/silver/bronze stay as concrete hex (not
   theme tokens) because their meaning IS the metal color; flipping them in
   dark mode would break the medal metaphor. Brightness reads on light + dark. */
.rank-1 { background: #f1c40f; color: var(--mp-color-text); } /* gold */
.rank-2 { background: #95a5a6; }                              /* silver */
.rank-3 { background: #cd7f32; }                              /* bronze */
.rank-4, .rank-5 { background: var(--mp-color-border); color: var(--mp-color-text-secondary); }
.top-name        { flex: 1; font-size: 13px; line-height: 1.3; }
.top-name small  { color: var(--mp-color-text-muted); font-size: 11px; }
.top-units       { font-size: 12px; color: var(--mp-color-text-muted); margin-right: 12px; }
.top-sales-val   { font-size: 13px; font-weight: 700; }
/* Department breakdown */
.dept-row {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--mp-color-surface-sunken);
}
.dept-row:last-child { border-bottom: none; }
.dept-name     { width: 100px; font-size: 12px; font-weight: 600; }
.dept-bar-wrap { flex: 1; margin: 0 12px; }
.dept-bar      { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mp-color-primary), var(--mp-color-primary-hover)); }
.dept-value    { font-size: 12px; font-weight: 700; width: 70px; text-align: right; }
.dept-change   { font-size: 11px; width: 55px; text-align: right; font-weight: 600; }

/* ── Section title ────────────────────────────────────────────────────── */
.section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--mp-color-primary-text);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 28px 0 12px;
}

/* ── Canonical headings — use these instead of inline h1/h2 styles ──── */
.mp-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--mp-color-text);
    margin: 0 0 var(--mp-space-1);
    line-height: var(--mp-line-height-tight);
}
.mp-page-subtitle {
    font-size: 13px;
    color: var(--mp-color-text-muted);
    margin: 0;
}
.mp-section-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--mp-color-text);
    margin: var(--mp-space-5) 0 var(--mp-space-3);
}
.mp-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mp-color-text);
}
.mp-micro-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--mp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── PageHeader layout ────────────────────────────────────────────────── */
.mp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--mp-space-3);
    margin-bottom: var(--mp-space-4);
}
.mp-page-header-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-page-header-actions { display: flex; gap: var(--mp-space-2); align-items: center; flex-wrap: wrap; }

/* ── Status filter chips ──────────────────────────────────────────────── */
.status-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    background: var(--mp-color-surface-page);
    color: var(--mp-color-text-secondary);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.12s;
    user-select: none;
}
.status-chip:hover { background: var(--mp-color-border-light); }
.status-chip-active { background: var(--mp-color-primary); color: var(--mp-color-on-primary); border-color: var(--mp-color-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   Document list system — status pills, page header, bulk bar, filter bar,
   empty/loading/error states. All paired with Razor components under
   mPower.UI.Shared/Documents/Shared/ (DocStatus, DocListHeader,
   DocListBulkBar, DocListState). Keep these together so the whole list
   system can be themed as one surface.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Canonical status pill ──────────────────────────────────────────────
   Single utility for every document status anywhere in the app. The 6px
   leading dot (generated) is the signature — reads from a row glance in a
   dense table without color-only coding. Use <DocStatus> for the mapping. */
.mp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    letter-spacing: 0.015em;
    white-space: nowrap;
    user-select: none;
}
.mp-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 15%, transparent);
}

.mp-status--neutral  { background: var(--mp-color-border-lighter); color: var(--mp-color-text-secondary); border-color: var(--mp-color-border); }
.mp-status--info     { background: var(--mp-tier-watch-bg);        color: var(--mp-tier-watch-text);      border-color: var(--mp-tier-watch-border); }
.mp-status--success  { background: var(--mp-tier-success-bg);      color: var(--mp-tier-success-text);    border-color: var(--mp-tier-success-border); }
.mp-status--warning  { background: var(--mp-tier-warning-bg);      color: var(--mp-tier-warning-text);    border-color: var(--mp-tier-warning-border); }
.mp-status--critical { background: var(--mp-tier-critical-bg);     color: var(--mp-tier-critical-text);   border-color: var(--mp-tier-critical-border); }
.mp-status--brand    { background: var(--mp-color-primary-subtle); color: var(--mp-color-primary-text);        border-color: color-mix(in srgb, var(--mp-color-primary) 25%, transparent); }

/* ── Document list header bar ─────────────────────────────────────────── */
/* Bound to APPBAR (not primary) so chrome stays dark in both modes — same
   reasoning as .doc-header. Appbar is the chrome band token; primary is for
   focal accents (buttons, pills, dots), not full-width bands. */
.doc-list-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    margin-bottom: 16px;
    /* Neutral appbar header. The per-section color tint was removed; SectionHeader
       still sets --mp-section-color but nothing reads it (kept inert, not wired). */
    background: var(--mp-color-appbar);
    color: var(--mp-color-on-appbar);
    border-radius: var(--mp-card-radius);
    box-shadow: var(--mp-shadow-xs);
}
.doc-list-header .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.doc-list-header .spacer { flex: 1; }
.doc-list-header .subtitle {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
    margin-left: 12px;
    text-transform: none;
    letter-spacing: 0.01em;
}
.doc-list-header .back-arrow {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    transition: background var(--mp-transition-fast);
}
.doc-list-header .back-arrow:hover { background: color-mix(in srgb, var(--mp-color-on-appbar) 15%, transparent); }

/* Inline tag/badge that sits next to the title text — used for things like
   "WAREHOUSE", "MANUFACTURER", or status hints that belong visually with the
   title rather than the right-side actions. */
.doc-list-header .header-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--mp-color-on-appbar);
    background: color-mix(in srgb, var(--mp-color-on-appbar) 20%, transparent);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* "+ New X" button on the dark header bar — Orange CTA tile, the conversion
   action for each list page. White text on orange reads in both modes. */
.doc-list-header .primary {
    background: var(--mp-color-cta);
    color: var(--mp-color-on-cta);
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--mp-transition-fast);
}
.doc-list-header .primary:hover { background: var(--mp-color-cta-hover); }

/* Secondary action on the dark header bar — translucent-light tile next to the
   solid `.primary` chip. Used when a list page has two new-document entry points
   (e.g. RTV: "+ New RTV" plus "New (from PO)"). */
.doc-list-header .secondary {
    background: color-mix(in srgb, var(--mp-color-on-appbar) 18%, transparent);
    color: var(--mp-color-on-appbar);
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 4px;
    transition: background var(--mp-transition-fast);
}
.doc-list-header .secondary:hover { background: color-mix(in srgb, var(--mp-color-on-appbar) 28%, transparent); }

/* MudButtons inside SectionHeader sit on dark plum appbar chrome. Mud's normal
   outlined colors use palette text/error/secondary, which can collapse into the
   appbar color. Use on-appbar tokens so header actions stay legible everywhere. */
.doc-list-header .mud-button-root {
    color: var(--mp-color-on-appbar) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.36) !important;
}
.doc-list-header .mud-button-root.mud-button-outlined {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.10) !important;
}
.doc-list-header .mud-button-root.mud-button-outlined:hover:not(:disabled):not(.mud-disabled) {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.20) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.58) !important;
}
.doc-list-header .mud-button-root.mud-button-filled {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.22) !important;
    border: 1px solid rgba(var(--mp-color-on-appbar-rgb), 0.34) !important;
    box-shadow: none;
}
.doc-list-header .mud-button-root.mud-button-filled:hover:not(:disabled):not(.mud-disabled) {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.32) !important;
}
.doc-list-header .mud-button-root:disabled,
.doc-list-header .mud-button-root.mud-disabled {
    color: rgba(var(--mp-color-on-appbar-rgb), 0.68) !important;
    background: rgba(var(--mp-color-on-appbar-rgb), 0.06) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.20) !important;
}

.ntt-page {
    display: flex;
    flex-direction: column;
    height: calc(100% + 16px);
    min-height: 0;
}

.ntt-page .doc-list-header {
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 6px;
}

.ntt-page .doc-list-header .subtitle {
    max-width: 560px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ntt-page .doc-list-header .mud-button-root {
    min-height: 30px;
    white-space: nowrap;
}

.ntt-page .doc-list-header .ntt-header-btn.mud-button-outlined {
    color: var(--mp-color-on-appbar) !important;
    background-color: rgba(var(--mp-color-on-appbar-rgb), 0.12) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.48) !important;
}

.ntt-page .doc-list-header .ntt-header-btn.mud-button-outlined:hover:not(:disabled):not(.mud-disabled) {
    background-color: rgba(var(--mp-color-on-appbar-rgb), 0.22) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.68) !important;
}

.ntt-page .doc-list-header .ntt-header-btn.mud-button-outlined:disabled,
.ntt-page .doc-list-header .ntt-header-btn.mud-button-outlined.mud-disabled {
    color: rgba(var(--mp-color-on-appbar-rgb), 0.78) !important;
    background-color: rgba(var(--mp-color-on-appbar-rgb), 0.08) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.24) !important;
}

.ntt-page .doc-list-header .ntt-header-cta.mud-button-filled {
    min-width: 200px;
    color: var(--mp-color-on-cta) !important;
    background-color: var(--mp-color-cta) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.ntt-page .doc-list-header .ntt-header-cta.mud-button-filled:hover:not(:disabled):not(.mud-disabled) {
    background-color: var(--mp-color-cta-hover) !important;
}

.ntt-page .doc-list-header .ntt-header-cta.mud-button-filled:disabled,
.ntt-page .doc-list-header .ntt-header-cta.mud-button-filled.mud-disabled {
    opacity: 0.78;
    color: rgba(255, 255, 255, 0.92) !important;
    background-color: color-mix(in srgb, var(--mp-color-cta) 78%, transparent) !important;
    border-color: rgba(255, 255, 255, 0.18);
}

.ntt-filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
    min-width: 0;
}

.ntt-search {
    flex: 0 1 320px;
    min-width: 240px;
}

.ntt-destination-filter {
    flex: 0 0 220px;
    min-width: 180px;
}

.ntt-urgency-filters,
.ntt-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ntt-row-actions {
    margin-left: auto;
}

.ntt-urgency-filters .mud-button-root,
.ntt-row-actions .mud-button-root {
    min-height: 30px;
    white-space: nowrap;
}

@media (max-width: 1500px) {
    .ntt-filterbar {
        flex-wrap: wrap;
    }

    .ntt-row-actions {
        margin-left: 0;
    }
}

/* ── Document list bulk action bar ──────────────────────────────────────
   Lives inside .doc-list-header so it sits on the appbar-tinted band.
   Uses on-appbar tokens so chrome alpha overlays stay light in both modes. */
.doc-list-bulkbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(var(--mp-color-on-appbar-rgb), 0.08);
    border: 1px solid rgba(var(--mp-color-on-appbar-rgb), 0.18);
    transition: opacity var(--mp-transition-fast), background var(--mp-transition-fast);
}
.doc-list-bulkbar[data-empty="true"] {
    opacity: 0.55;
    background: rgba(var(--mp-color-on-appbar-rgb), 0.04);
}
.doc-list-bulkbar .count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mp-color-appbar);
    background: var(--mp-color-on-appbar);
    border-radius: 999px;
}
.doc-list-bulkbar .empty-hint {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
    padding: 0 4px;
}
.doc-list-bulkbar .divider {
    width: 1px;
    height: 18px;
    background: rgba(var(--mp-color-on-appbar-rgb), 0.22);
    margin: 0 4px;
}
.doc-list-bulkbar button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--mp-color-on-appbar);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast);
}
.doc-list-bulkbar button:hover:not(:disabled) {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.14);
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.25);
}
.doc-list-bulkbar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Document list filter bar ─────────────────────────────────────────── */
.doc-list-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--mp-card-bg);
    border: var(--mp-card-border);
    border-radius: var(--mp-card-radius);
}
.doc-list-filters .group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.doc-list-filters .divider {
    width: 1px;
    align-self: stretch;
    background: var(--mp-color-border-light);
}
.doc-list-filters .spacer { flex: 1; }

/* ── Document list empty / loading / error state ──────────────────────── */
.doc-list-state {
    padding: 48px 24px;
    text-align: center;
    background: var(--mp-card-bg);
    border: var(--mp-card-border);
    border-radius: var(--mp-card-radius);
    color: var(--mp-color-text-muted);
}
.doc-list-state .icon {
    font-size: 32px;
    opacity: 0.4;
    margin-bottom: 10px;
}
.doc-list-state .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-color-text-secondary);
    margin-bottom: 4px;
}
.doc-list-state .subtitle {
    font-size: 12px;
    color: var(--mp-color-text-muted);
    max-width: 320px;
    margin: 0 auto;
}
.doc-list-state .actions { margin-top: 14px; }

/* ── Document list MudTable styling ───────────────────────────────────── */
/* Applied via Class="mp-doc-list" on MudTable in every document list page.
   Matches the old hand-rolled .po-table look: widget chrome, sunken uppercase
   header row, subtle hover, tight padding. */
.mp-doc-list.mud-table {
    background: var(--mp-card-bg);
    border-radius: var(--mp-card-radius);
    border: var(--mp-card-border);
    overflow: hidden;
    font-size: 13px;
}
.mp-doc-list .mud-table-head .mud-table-cell {
    background: var(--mp-color-surface-sunken);
    font-size: 11px;
    font-weight: 700;
    color: var(--mp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    border-bottom: 2px solid var(--mp-color-border-lighter);
}
/* MudTable sort labels inherit text color by default — force them to match the
   muted uppercase header style. */
.mp-doc-list .mud-table-head .mud-table-sort-label-inner,
.mp-doc-list .mud-table-head .mud-button-root {
    color: var(--mp-color-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    font-weight: 700;
}
.mp-doc-list .mud-table-cell {
    padding: 11px 16px;
    border-bottom: 1px solid var(--mp-color-border-lighter);
}
.mp-doc-list .mud-table-body .mud-table-row { cursor: pointer; transition: background 0.1s; }
.mp-doc-list .mud-table-body .mud-table-row:hover { background: var(--mp-color-primary-subtle); }
.mp-doc-list .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none; }

/* ── PO Table ─────────────────────────────────────────────────────────── */
.po-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.po-table thead tr {
    background: var(--mp-color-surface-sunken);
    border-bottom: 2px solid var(--mp-color-border-lighter);
}
.po-table th {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}
.po-table td { padding: 11px 16px; border-bottom: 1px solid var(--mp-color-border-lighter); }
.po-row { cursor: pointer; transition: background 0.1s; }
.po-row:hover { background: var(--mp-color-primary-subtle); }
.po-row:last-child td { border-bottom: none; }
.po-number { font-weight: 700; color: var(--mp-color-info); }

/* ── Status badges ──────────────────────────────────────────────────────
   Legacy class kept working for un-migrated pages; new pages use <DocStatus>.
   Casing normalized to title-case to match <DocStatus>. */
.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0.015em;
}
.status-draft      { background: var(--mp-color-info-soft); color: var(--mp-color-info); }
.status-confirmed  { background: var(--mp-color-success-soft); color: var(--mp-color-success-strong); }
.status-inprocess  { background: var(--mp-color-warning-soft); color: var(--mp-color-warning); }
.status-closed     { background: var(--mp-color-border-light); color: var(--mp-color-text-secondary); }
.status-cancelled  { background: var(--mp-tier-critical-bg); color: var(--mp-color-error); }
.status-shipcomplete { background: var(--mp-color-success-soft); color: var(--mp-color-success-strong); }

/* ── Match status badges (3-way match) ────────────────────────────────── */
.match-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--mp-color-border-light);
    color: var(--mp-color-text-secondary);
    transition: transform 0.1s ease;
}
.match-badge:hover { transform: translateY(-1px); }
.match-badge.match-ok       { background: var(--mp-tier-success-bg); color: var(--mp-color-success-strong); border-color: var(--mp-tier-success-border); }
.match-badge.match-warn     { background: var(--mp-tier-warning-bg); color: var(--mp-tier-warning-text); border-color: var(--mp-tier-warning-border); }
.match-badge.match-fail     { background: var(--mp-tier-critical-bg); color: var(--mp-tier-critical-text); border-color: var(--mp-tier-critical-border); }
.match-badge.match-missing  { background: var(--mp-color-primary-subtle); color: var(--mp-color-primary-text); border-color: var(--mp-color-editable-header); }
.match-badge.match-unmatched { background: var(--mp-color-border-light); color: var(--mp-color-text-secondary); }
.doc-header .match-badge    { background: rgba(var(--mp-color-on-appbar-rgb), 0.2) !important; color: var(--mp-color-on-appbar) !important; border-color: rgba(var(--mp-color-on-appbar-rgb), 0.3) !important; }

/* ── Match drawer ──────────────────────────────────────────────────────── */
/* The wrapper around <DocShell> on every doc page. Two responsibilities:
   1) height:100% keeps the doc-shell percentage-height chain unbroken — without
      it, doc-shell falls back to content-height and the action footer drifts off
      the bottom of the viewport on tall content (PRs with hundreds of lines etc.).
   2) position:relative scopes any drawer (e.g. MatchDrawer on PO) to this panel
      so it doesn't overlap app chrome (TestHost banner, browser toolbar, etc.). */
.doc-panel-root { position: relative; height: 100%; }
.vendor-deal-doc-root {
    height: 100%;
}
.match-drawer-overlay { position: absolute; inset: 0; background: rgba(15,23,42,0.18); z-index: 90; }
.match-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; background: var(--mp-color-surface); border-left: 1px solid var(--mp-color-border); box-shadow: -4px 0 24px rgba(15,23,42,0.12); z-index: 100; display: flex; flex-direction: column; font-size: 13px; }
.match-drawer-head { padding: 14px 16px; border-bottom: 1px solid var(--mp-color-border); display: flex; align-items: center; gap: 10px; }
.match-drawer-head.warn { background: var(--mp-tier-warning-bg); }
.match-drawer-head.fail { background: var(--mp-tier-critical-bg); }
.match-drawer-head.ok { background: var(--mp-tier-success-bg); }
.match-drawer-head .title { font-weight: 600; font-size: 13px; }
.match-drawer-head.warn .title { color: var(--mp-tier-warning-text); }
.match-drawer-head.fail .title { color: var(--mp-tier-critical-text); }
.match-drawer-head.ok .title { color: var(--mp-color-success-strong); }
.match-drawer-head .spacer { flex: 1; }
.match-drawer-head .close { background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--mp-color-text-secondary); padding: 0 4px; }
.match-drawer-meta { padding: 12px 16px; border-bottom: 1px solid var(--mp-color-border); }
.match-drawer-meta .doc { font-weight: 600; font-size: 13px; }
.match-drawer-meta .vendor { color: var(--mp-color-text-secondary); margin-top: 2px; font-size: 12px; }
.match-drawer-summary { padding: 12px 16px; border-bottom: 1px solid var(--mp-color-border); }
.match-drawer-summary .row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.match-drawer-summary .row .count { font-weight: 600; font-size: 13px; min-width: 20px; text-align: right; margin-left: auto; font-variant-numeric: tabular-nums; }
.match-drawer-summary .row.ok { color: var(--mp-color-success-strong); }
.match-drawer-summary .row.warn { color: var(--mp-tier-warning-text); }
.match-drawer-summary .row.fail { color: var(--mp-tier-critical-text); }
.match-drawer-summary .row.missing { color: var(--mp-color-primary-text); }
.match-drawer-variances { flex: 1; overflow-y: auto; padding: 8px 16px; }
.match-drawer-variances h4 { margin: 10px 0 8px 0; font-size: 11px; text-transform: uppercase; color: var(--mp-color-text-secondary); letter-spacing: 0.5px; font-weight: 600; }
.match-variance-card { padding: 10px; border: 1px solid var(--mp-color-border); border-radius: 4px; margin-bottom: 8px; background: var(--mp-color-surface); }
.match-variance-card.warn { border-left: 3px solid var(--mp-tier-warning-text); }
.match-variance-card.fail { border-left: 3px solid var(--mp-tier-critical-text); }
.match-variance-card.missing { border-left: 3px solid var(--mp-color-primary); }
.match-variance-card .name { font-weight: 600; font-size: 12px; margin-bottom: 5px; }
.match-variance-card .line { display: flex; justify-content: space-between; font-size: 11px; color: var(--mp-color-text-secondary); padding: 1px 0; }
.match-variance-card .line strong { color: var(--mp-color-text); font-variant-numeric: tabular-nums; }
.match-variance-card .delta { margin-top: 5px; font-size: 11px; font-weight: 600; }
.match-variance-card.warn .delta { color: var(--mp-tier-warning-text); }
.match-variance-card.fail .delta { color: var(--mp-tier-critical-text); }
.match-variance-card.missing .delta { color: var(--mp-color-primary-text); }
.match-drawer-foot { padding: 12px 16px; border-top: 1px solid var(--mp-color-border); background: var(--mp-color-surface-sunken); }
.match-drawer-foot .policy { font-size: 11px; color: var(--mp-color-text-secondary); margin-top: 10px; }
.match-drawer-foot .policy strong { color: var(--mp-color-text); }
.match-drawer-foot .open-workspace { width: 100%; padding: 9px; font-weight: 600; background: var(--mp-tier-watch-text); color: var(--mp-color-on-primary); border: 1px solid var(--mp-tier-watch-text); border-radius: 4px; cursor: pointer; font-size: 13px; }
.match-drawer-foot .open-workspace:hover { filter: brightness(0.92); }

/* ── Decision (Approve / Hold / Reject) ────────────────────────────────── */
.match-drawer-decision { padding: 12px 16px; border-top: 1px solid var(--mp-color-border); display: flex; flex-direction: column; gap: 8px; }
.match-drawer-decision.multi-invoice-note { font-size: 11px; color: var(--mp-color-text-secondary); font-style: italic; }
.match-drawer-decision .prior { padding: 8px 10px; border-radius: 4px; font-size: 12px; border-left: 3px solid var(--mp-color-border); background: var(--mp-color-surface-sunken); }
.match-drawer-decision .prior.approved { border-left-color: var(--mp-color-success-strong); }
.match-drawer-decision .prior.held { border-left-color: var(--mp-tier-warning-text); }
.match-drawer-decision .prior.rejected { border-left-color: var(--mp-tier-critical-text); }
.match-drawer-decision .prior .head { display: flex; align-items: baseline; gap: 8px; }
.match-drawer-decision .prior .head strong { font-size: 13px; }
.match-drawer-decision .prior .head .when { font-size: 11px; color: var(--mp-color-text-secondary); margin-left: auto; }
.match-drawer-decision .prior .notes { margin-top: 4px; color: var(--mp-color-text-secondary); }
.match-drawer-decision .notes-input { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 12px; border: 1px solid var(--mp-color-border); border-radius: 4px; background: var(--mp-color-surface); color: var(--mp-color-text); resize: vertical; font-family: inherit; }
.match-drawer-decision .actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.match-drawer-decision .btn { padding: 7px; font-weight: 600; border-radius: 4px; cursor: pointer; font-size: 12px; border: 1px solid var(--mp-color-border); background: var(--mp-color-surface); color: var(--mp-color-text); }
.match-drawer-decision .btn:hover:not([disabled]) { filter: brightness(0.95); }
.match-drawer-decision .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.match-drawer-decision .btn.approve { border-color: var(--mp-color-success-strong); color: var(--mp-color-success-strong); }
.match-drawer-decision .btn.hold { border-color: var(--mp-tier-warning-text); color: var(--mp-tier-warning-text); }
.match-drawer-decision .btn.reject { border-color: var(--mp-tier-critical-text); color: var(--mp-tier-critical-text); }

/* ── Match workspace page ──────────────────────────────────────────────── */
.match-ws { background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: 6px; overflow: hidden; font-size: 13px; }
.match-ws-head { padding: 14px 18px; border-bottom: 1px solid var(--mp-color-border); background: linear-gradient(to bottom, var(--mp-color-surface-sunken), var(--mp-color-surface)); }
.match-ws-head .title-row { display: flex; align-items: center; gap: 14px; }
.match-ws-head h1 { margin: 0; font-size: 18px; font-weight: 600; }
.match-ws-head .sub { color: var(--mp-color-text-secondary); font-size: 12px; margin-top: 3px; }
.match-ws-head .spacer { flex: 1; }
.match-ws-srcs { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; }
.match-ws-srcs .src { display: flex; align-items: center; gap: 5px; color: var(--mp-color-text-secondary); }
.match-ws-srcs .src a { color: var(--mp-tier-watch-text); text-decoration: none; font-weight: 600; }
.match-ws-srcs .src a:hover { text-decoration: underline; }
.match-ws-summary { display: flex; align-items: center; gap: 18px; padding: 12px 18px; background: var(--mp-color-surface-sunken); border-bottom: 1px solid var(--mp-color-border); font-size: 12px; flex-wrap: wrap; }
.match-ws-summary .stat { display: flex; align-items: center; gap: 6px; }
.match-ws-summary .stat .n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.match-ws-summary .stat.ok .n { color: var(--mp-color-success-strong); }
.match-ws-summary .stat.warn .n { color: var(--mp-tier-warning-text); }
.match-ws-summary .stat.fail .n { color: var(--mp-tier-critical-text); }
.match-ws-summary .stat.missing .n { color: var(--mp-color-primary-text); }
.match-ws-summary .sep { width: 1px; height: 26px; background: var(--mp-color-border); }
.match-ws-policy { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--mp-tier-watch-bg); border-bottom: 1px solid var(--mp-tier-watch-border); font-size: 12px; color: var(--mp-tier-watch-text); }
.match-ws-policy .policy-text { flex: 1; }
.match-ws-policy button { background: transparent; border: 1px solid var(--mp-tier-watch-border); color: var(--mp-tier-watch-text); padding: 3px 10px; border-radius: 3px; cursor: pointer; font: inherit; }
.match-ws-policy button:hover { background: var(--mp-tier-watch-bg); filter: brightness(0.95); }
.match-ws-actions { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--mp-color-surface); border-bottom: 1px solid var(--mp-color-border); flex-wrap: wrap; }
.match-ws-actions .selected { color: var(--mp-color-text-secondary); font-size: 12px; margin-right: 10px; }
.match-ws-actions .spacer { flex: 1; }
.match-ws-btn { font: inherit; padding: 5px 12px; border-radius: 4px; border: 1px solid var(--mp-color-border); background: var(--mp-color-surface); color: var(--mp-color-text); cursor: pointer; font-size: 12px; }
.match-ws-btn:hover { background: var(--mp-color-border-light); }
.match-ws-btn.primary { background: var(--mp-tier-watch-text); color: var(--mp-color-on-primary); border-color: var(--mp-tier-watch-text); }
.match-ws-btn.ok { background: var(--mp-color-success-strong); color: var(--mp-color-on-success); border-color: var(--mp-color-success-strong); }
.match-ws-btn.warn { background: var(--mp-tier-warning-text); color: var(--mp-color-on-primary); border-color: var(--mp-tier-warning-text); }
.match-ws-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.match-ws-tabs { display: flex; padding: 0 18px; background: var(--mp-color-surface); border-bottom: 1px solid var(--mp-color-border); }
.match-ws-tab { padding: 9px 14px; cursor: pointer; font-size: 12px; color: var(--mp-color-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.match-ws-tab:hover { color: var(--mp-color-text); }
.match-ws-tab.active { color: var(--mp-tier-watch-text); border-bottom-color: var(--mp-tier-watch-text); font-weight: 600; }
.match-ws-tab .n { background: var(--mp-color-border-light); padding: 1px 7px; border-radius: 999px; font-size: 10px; margin-left: 5px; }
.match-ws-tab.active .n { background: var(--mp-tier-watch-bg); color: var(--mp-tier-watch-text); }
.match-ws-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.match-ws-grid th { background: var(--mp-color-surface-sunken); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--mp-color-border); font-weight: 600; color: var(--mp-color-text-secondary); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.match-ws-grid td { padding: 9px 10px; border-bottom: 1px solid var(--mp-color-border-light); vertical-align: middle; }
.match-ws-grid tr:hover td { background: var(--mp-color-surface-sunken); }
.match-ws-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.match-ws-grid td.item { font-weight: 500; }
.match-ws-grid .sku { color: var(--mp-color-text-secondary); font-size: 11px; }
.match-ws-grid .delta-pos { color: var(--mp-tier-warning-text); font-weight: 600; }
.match-ws-grid .delta-neg { color: var(--mp-tier-critical-text); font-weight: 600; }
.match-ws-grid .delta-zero { color: var(--mp-color-text-secondary); }
.match-ws-grid .src-po { color: var(--mp-tier-watch-text); font-weight: 600; text-decoration: none; }
.match-ws-grid .src-po:hover { text-decoration: underline; }
.match-ws-header-charges { padding: 14px 18px; background: var(--mp-color-surface-sunken); border-top: 1px solid var(--mp-color-border); font-size: 12px; }
.match-ws-header-charges h4 { margin: 0 0 8px 0; font-size: 11px; text-transform: uppercase; color: var(--mp-color-text-secondary); letter-spacing: 0.5px; font-weight: 600; }
.match-ws-header-charges .row { display: flex; gap: 20px; flex-wrap: wrap; }
.match-ws-header-charges .item { display: flex; align-items: center; gap: 6px; }
.match-ws-header-charges .item .val { font-weight: 600; font-variant-numeric: tabular-nums; }
.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.status-pill.ok { background: var(--mp-tier-success-bg); color: var(--mp-color-success-strong); }
.status-pill.warn { background: var(--mp-tier-warning-bg); color: var(--mp-tier-warning-text); }
.status-pill.fail { background: var(--mp-tier-critical-bg); color: var(--mp-tier-critical-text); }
.status-pill.missing { background: var(--mp-color-primary-subtle); color: var(--mp-color-primary-text); }
.status-pill.unmatched { background: var(--mp-color-border-light); color: var(--mp-color-text-secondary); }

/* ── PO Detail ────────────────────────────────────────────────────────── */
.back-link {
    font-size: 12px;
    color: var(--mp-color-primary-text);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.info-card {
    background: var(--mp-color-surface);
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 12px 18px;
    min-width: 100px;
}
.info-label { font-size: 10px; font-weight: 700; color: var(--mp-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.info-value { font-size: 16px; font-weight: 700; color: var(--mp-color-text); margin-top: 2px; }

/* ── Document shell ───────────────────────────────────────────────────── */
/* Page itself must not scroll — the doc-shell fills its flex-parent (the
   MPowerShell content wrapper, which is already height-constrained by the
   flex chain). Three flex children:
   - .doc-shell-fixed: header + details, pinned at top (flex:none)
   - .doc-shell-body: the body slot — flex:1 / min-height:0. The grid inside
     (MudDataGrid via MPowerGrid with Height:100%) is the primary scroll region
     and absorbs its own overflow, so the body's overflow-y:auto does NOT
     double-scroll in normal operation (verified WI 2510) — the body only
     scrolls when NON-grid content (e.g. the Price Change location picker)
     overflows a short viewport, which otherwise bled past the body and was
     painted over by the opaque pinned footer, hiding buttons like the picker's
     "All (Clear)" behind Delete. overflow-x is hidden so the wide doc grids
     never sprout a spurious horizontal bar. NOTE for future pages: a bespoke
     wide/scrolling body region must own its own nested overflow container
     (e.g. VendorInvoiceDetail's .vi-line-table wrapper), not lean on the body.
   - .doc-shell-footer: action bar, pinned at bottom (flex:none)
   Using height:100% rather than 100vh so the layout stays correct under any
   host chrome (TestHost dev banner, WinBlazor desktop, future hosts) without
   hard-coding a topbar height. */
.doc-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0;
}
.doc-shell-fixed { flex: none; }
.doc-shell-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;   /* engages only when non-grid content overflows a short viewport (WI 2510) */
    overflow-x: hidden; /* hold horizontal behavior unchanged — never a spurious h-scrollbar */
}
.doc-shell-footer { flex: none; }
/* Document header bar — bound to APPBAR (not primary) so the chrome stays
   dark in both modes. In light: appbar = Plum 3 (same as primary). In dark:
   appbar = deep plum #2E1226 chrome, while primary lifts to Plum 2 for focal
   accents — so a band bound to primary would diverge from chrome in dark. */
.doc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    /* Neutral appbar header. The per-section color tint was removed; DocHeader.Section
       still sets --mp-section-color but nothing reads it (kept inert, not wired). */
    background: var(--mp-color-appbar);
    color: var(--mp-color-on-appbar);
    padding: 10px 16px;
    border-radius: 6px;
}
.doc-header h2 { color: var(--mp-color-on-appbar); font-size: 16px; font-weight: 600; margin: 0; }
.doc-header .back-link { color: color-mix(in srgb, var(--mp-color-on-appbar) 80%, transparent); cursor: pointer; }
.doc-header .back-link:hover { color: var(--mp-color-on-appbar); }
.doc-header .doc-subtitle { color: rgba(var(--mp-color-on-appbar-rgb), 0.7); }
/* Dense inline metadata strip rendered when the header is collapsed. Each
   child <span> auto-separates with a "·" so each page just lists the facts. */
.doc-header .doc-collapsed-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    color: rgba(var(--mp-color-on-appbar-rgb), 0.78);
    font-size: 12px; line-height: 1.3; margin-top: 2px;
}
.doc-header .doc-collapsed-meta > span:not(:last-child)::after {
    content: " ·"; color: rgba(var(--mp-color-on-appbar-rgb), 0.45);
    margin-left: 6px;
}
.doc-header .doc-ai-btn { color: var(--mp-color-on-appbar); background: rgba(var(--mp-color-on-appbar-rgb), 0.15); border: 1px solid rgba(var(--mp-color-on-appbar-rgb), 0.22); border-radius: 6px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1; transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast); }
.doc-header .doc-ai-btn:hover { background: rgba(var(--mp-color-on-appbar-rgb), 0.25); border-color: rgba(var(--mp-color-on-appbar-rgb), 0.35); }
.doc-header .doc-ai-btn .sparkle { font-size: 13px; line-height: 1; filter: saturate(1.2); }
.doc-header .status-badge { background: rgba(var(--mp-color-on-appbar-rgb), 0.2) !important; color: var(--mp-color-on-appbar) !important; }
.doc-header .doc-header-toggle {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.12); border: 1px solid rgba(var(--mp-color-on-appbar-rgb), 0.22);
    color: var(--mp-color-on-appbar); border-radius: 6px; padding: 4px 8px;
    cursor: pointer; display: inline-flex; align-items: center; line-height: 1;
    transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast);
}
.doc-header .doc-header-toggle:hover { background: rgba(var(--mp-color-on-appbar-rgb), 0.22); border-color: rgba(var(--mp-color-on-appbar-rgb), 0.35); }
/* Auto-collapse: when the page sets .doc-header-collapsed on the doc-panel-root,
   hide the status stepper, details card, and locations row to maximise the line-item
   work surface. The DocHeader bar (Number, SubTitle, Status, AI, toggle) stays for
   context, as does the page's search bar / action area below the locations row. A page
   may also opt into a pinned .doc-summary-strip (below) that survives the collapse. */
.doc-header-collapsed .status-progression,
.doc-header-collapsed .doc-details-card,
.doc-header-collapsed .doc-locations-row { display: none; }

/* WI 2369 — pinned summary strip. Lives in .doc-shell-fixed but OUTSIDE
   .doc-details-card, so the collapse rule above never hides it: a compact
   totals/summary widget stays in view while the header collapses to give the
   line-item grid the screen. Horizontal inset matches .doc-details-card so the
   widget lines up with the fields above it. */
.doc-summary-strip { padding: 0 var(--mp-card-padding-lg); }

/* MudButtons inside the dark doc-header bar — Mud's default palette would
   render dark text on dark plum chrome. Force the same translucent-white
   treatment used by .doc-ai-btn so action labels stay legible. */
.doc-header .mud-button-root {
    color: var(--mp-color-on-appbar) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.3) !important;
}
.doc-header .mud-button-root.mud-button-outlined {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.1);
}
.doc-header .mud-button-root.mud-button-outlined:hover {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.2);
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.45) !important;
}
.doc-header .mud-button-root.mud-button-filled {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.22);
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.35) !important;
}
.doc-header .mud-button-root.mud-button-filled:hover {
    background: rgba(var(--mp-color-on-appbar-rgb), 0.32);
}
.doc-title { font-size: 22px; font-weight: 700; color: var(--mp-color-text); margin: 4px 0 0; }
.doc-subtitle { font-size: 13px; color: var(--mp-color-text-muted); margin-top: 2px; }
.doc-details-card {
    background: var(--mp-card-bg);
    border-radius: var(--mp-card-radius);
    border: var(--mp-card-border);
    border-top: 3px solid var(--mp-color-secondary);
    padding: var(--mp-card-padding) var(--mp-card-padding-lg);
    margin-bottom: var(--mp-card-padding);
}
/* min-height:0 is critical: without it, doc-body inherits min-height:auto and
   refuses to shrink below content size, breaking the flex chain so the grid
   can't fill remaining space and the body sprouts its own scroll. */
.doc-body { display: flex; flex-direction: column; gap: 0; min-height: 0; flex: 1; }

.vendor-deal-body-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
    padding-right: 4px;
}

/* ── Doc details fields ───────────────────────────────────────────────── */
.doc-fields { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.doc-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.doc-field-label { font-size: 10px; font-weight: 700; color: var(--mp-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.doc-field-value { font-size: 14px; font-weight: 600; color: var(--mp-color-text); }
.doc-field-value-locked {
    display: inline-block; padding: 4px 10px;
    background: var(--mp-color-editable-cell);
    border-left: 3px solid var(--mp-color-primary);
    border-radius: 4px;
    color: var(--mp-color-text);
}
.doc-field-input {
    font-size: 13px;
    border: 1px solid var(--mp-color-border);
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.doc-field-input:focus { border-color: var(--mp-color-primary); }

/* Password/secret input with an inline show/hide eye toggle (see IntegrationEditDialog). */
.secret-wrap { position: relative; width: 100%; }
.secret-input { padding-right: 34px; }
.secret-eye {
    position: absolute; top: 0; right: 0; height: 100%; width: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--mp-color-text-muted);
}
.secret-eye:hover { color: var(--mp-color-text); }

/* Compact Mud inputs inside doc-fields — match vendor-lookup density */
.doc-fields .mud-input-control { margin: 0; }
.doc-fields .mud-input.mud-input-outlined { font-size: 13px; }
.doc-fields .mud-input.mud-input-outlined input.mud-input-slot {
    padding: 4px 8px; min-height: 0; height: 28px;
}
.doc-fields .mud-input.mud-input-underline::before,
.doc-fields .mud-input.mud-input-underline::after { bottom: 0; }
.doc-fields .mud-input.mud-input-underline input.mud-input-slot {
    padding: 4px 0; min-height: 0; height: 28px; font-size: 13px;
}
.doc-fields .mud-input-adornment .mud-icon-button { padding: 2px; }
.doc-fields .mud-input-adornment .mud-icon-root { font-size: 18px; }
.doc-fields .mud-input-helper-text { display: none; }

/* ── Label-above for MudBlazor Outlined fields (app-wide) ──────────────────
   The mPower form idiom is the label ABOVE the box (see .doc-field-label and
   IntegrationEditDialog), not Mud's floating label notched into the border.
   Instead of converting every MudSelect/MudTextField/MudNumericField to raw
   inputs, this restyles the Outlined variant in place: the label drops to a
   static uppercase caption above the field and the border becomes a plain
   rectangle. Scoped via :has() to Outlined only, so Text/underline inputs
   (inline setup-grid cells) are untouched. Also fixes the empty-field case
   where Mud parks the label inside the box as a faux-placeholder. */
.mud-input-control-input-container:has(> .mud-input-outlined) {
    display: flex;
    flex-direction: column;
}
.mud-input-control-input-container:has(> .mud-input-outlined) > .mud-input-label-outlined {
    position: static;
    transform: none !important;
    order: -1;                       /* caption sits above the input box */
    margin: 0 0 3px 1px;
    max-width: 100%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mp-color-text-muted);
}
/* Plain rectangle border now that the label no longer overlaps it (kill the
   negative top Mud uses to make room for the floating-label notch). */
.mud-input-control-input-container:has(> .mud-input-outlined) > .mud-input-outlined > .mud-input-outlined-border {
    top: 0;
}
.mud-input-control-input-container:has(> .mud-input-outlined) > .mud-input-outlined > .mud-input-outlined-border > legend {
    display: none;
}

/* ── Stat bar ─────────────────────────────────────────────────────────── */
.doc-stat-bar {
    display: flex;
    gap: 0;
    background: var(--mp-card-bg);
    border-radius: var(--mp-card-radius);
    border: var(--mp-card-border);
    overflow: hidden;
    margin-bottom: 0;
}
.doc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-right: 1px solid color-mix(in srgb, var(--mp-color-secondary) 35%, transparent);
}
.doc-stat:last-child { border-right: none; }
.doc-stat-label { font-size: 10px; font-weight: 700; color: var(--mp-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.doc-stat-value { font-size: 18px; font-weight: 700; color: var(--mp-color-text); margin-top: 2px; }
.doc-stat-highlight .doc-stat-value { color: var(--mp-color-info); }

/* ── Inline grid editing ──────────────────────────────────────────────── */
.cell-input {
    width: 80px;
    border: 1px solid var(--mp-color-border);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 13px;
    text-align: right;
    font-family: inherit;
    outline: none;
}
.cell-input:focus { border-color: var(--mp-color-primary); }
.cell-delete-btn {
    background: none;
    border: none;
    color: var(--mp-color-error);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}
.cell-delete-btn:hover { background: var(--mp-tier-critical-bg); }

/* ── Row context menu ────────────────────────────────────────────────── */
.cell-ctx-btn {
    background: none; border: none; cursor: pointer; font-size: 16px;
    color: var(--mp-color-text-muted); padding: 0 4px; line-height: 1;
}
.cell-ctx-btn:hover { color: var(--mp-color-text); }
.cell-ctx-menu {
    position: absolute; right: 0; top: 100%; z-index: 50;
    background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 180px;
    padding: 4px 0; font-size: 12px;
}
.cell-ctx-option {
    padding: 6px 14px; cursor: pointer; white-space: nowrap;
}
.cell-ctx-option:hover { background: var(--mp-color-surface-page); }

/* ── Receiving toast ─────────────────────────────────────────────────── */
.recv-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: var(--mp-color-success-strong); color: var(--mp-color-on-success); padding: 12px 28px;
    border-radius: 8px; font-size: 14px; font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 1000;
    animation: toast-in 0.3s ease;
}
@keyframes toast-in { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ── Retail confirm dialog ───────────────────────────────────────────── */
.recv-confirm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center; z-index: 900;
}
.recv-confirm-dialog {
    background: var(--mp-color-surface); border-radius: 10px; padding: 24px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-width: 400px; width: 90%;
}

/* ── Doc action footer ────────────────────────────────────────────────── */
/* Pinned to the bottom of the doc-shell by being the last flex child, so
   Save / Approve / Delete are always reachable on long item grids. Backed
   by an opaque surface to separate from the scrolling grid above. */
.doc-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--mp-color-border-light);
    background: var(--mp-color-surface);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}
.doc-actions-left { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.doc-actions-right { display: flex; gap: 8px; flex: none; }
.doc-action-error {
    color: var(--mp-color-error);
    font-size: 12px;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}
.doc-body-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.doc-body-toolbar-left { display: flex; gap: 8px; align-items: center; }
.doc-body-toolbar-right { display: flex; gap: 12px; align-items: center; }
.doc-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.doc-btn:disabled { opacity: 0.5; cursor: default; }
.doc-btn-primary { background: var(--mp-color-cta); color: var(--mp-color-on-cta); }
.doc-btn-primary:hover:not(:disabled) { background: var(--mp-color-cta-hover); }

/* CTA override for MudBlazor Filled buttons in DocActions
   (Confirm / Confirm Ship / Confirm Receive / Approve / Apply / Ship / Receive).
   Higher specificity beats Mud's .mud-button-filled-primary background rule. */
.cta-action.mud-button-filled.mud-button-filled-primary {
    background-color: var(--mp-color-cta) !important;
    color: #FFFFFF !important;
}
.cta-action.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--mp-color-cta-hover) !important;
}
.doc-btn-secondary { background: var(--mp-color-surface-page); color: var(--mp-color-text); }
.doc-btn-secondary:hover:not(:disabled) { background: var(--mp-color-border); }
.doc-btn-danger { background: var(--mp-tier-critical-bg); color: var(--mp-color-error); }
.doc-btn-danger:hover:not(:disabled) { background: var(--mp-tier-critical-border); }
.doc-error { font-size: 12px; color: var(--mp-color-error); margin-top: 6px; text-align: right; }

/* ── Status progression stepper ──────────────────────────────────────── */
.status-progression {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 16px 24px;
    margin-bottom: 16px;
    background: var(--mp-color-surface);
    border-radius: 10px;
    border: 1px solid var(--mp-color-border-light);
}
.status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}
.status-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-color-on-primary);
    transition: all 0.2s;
}
.status-dot-completed { background: var(--mp-color-primary); }
.status-dot-active { background: var(--mp-color-secondary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-color-secondary) 25%, transparent); }
.status-dot-upcoming { background: var(--mp-color-border-subtle); }
.status-dot-cancelled { background: var(--mp-color-error); }
.status-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.status-label-completed { color: var(--mp-color-primary-text); }
.status-label-active { color: var(--mp-color-secondary-dark); font-weight: 700; }
.status-label-upcoming { color: var(--mp-color-text-disabled); }
.status-connector {
    flex: 1;
    height: 3px;
    min-width: 30px;
    margin-top: 13px;
    border-radius: 2px;
}
.status-connector-filled { background: var(--mp-color-primary); }
.status-connector-empty { background: var(--mp-color-border-subtle); }
.status-cancelled-state { justify-content: center; }
.status-step-cancelled .status-label { color: var(--mp-color-error); font-weight: 700; font-size: 13px; }

/* ── Login page ──────────────────────────────────────────────────────── */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--mp-color-surface-page);
}
.login-card {
    background: var(--mp-color-surface); border-radius: 12px; padding: 40px 36px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 360px;
}
.login-logo {
    font-size: 24px; font-weight: 700; color: var(--mp-color-primary-text); text-align: center;
    margin-bottom: 4px;
}
.login-subtitle {
    font-size: 13px; color: var(--mp-color-text-muted); text-align: center; margin-bottom: 28px;
}
.login-field { margin-bottom: 16px; }
.login-label { display: block; font-size: 12px; font-weight: 600; color: var(--mp-color-text-secondary); margin-bottom: 4px; }
.login-input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--mp-color-border); border-radius: 6px;
    font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box;
}
.login-input:focus { border-color: var(--mp-color-primary); box-shadow: 0 0 0 2px rgba(90,48,110,0.12); }
.login-btn {
    width: 100%; padding: 11px; background: var(--mp-color-primary); color: var(--mp-color-on-primary); border: none;
    border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: inherit; margin-top: 8px;
}
.login-btn:disabled { opacity: 0.5; cursor: default; }
.login-btn:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(90,48,110,0.3); }
.login-error {
    font-size: 12px; color: var(--mp-color-error); text-align: center;
    margin-bottom: 8px; padding: 8px; background: var(--mp-tier-critical-bg); border-radius: 6px;
}

/* ── mPowerGrid ──────────────────────────────────────────────────────── */
/* Always a flex column so when the caller passes Style="flex:1; min-height:0;"
   (PR/PO/Transfer pages with large grids) the inner MudDataGrid (with Height:100%)
   fills the wrapper and scrolls internally. For callers that don't pass Style,
   .mpg-wrap collapses to content height — flex column with one child behaves
   identically to a block container. */
.mpg-wrap {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* The MudDataGrid root takes flex:1 so it absorbs the wrapper's available
   space; the summary row that follows is pinned at the bottom (flex:none). */
.mpg-wrap > .mud-table { flex: 1; min-height: 0; }
.mpg-summary { flex: none; }
/* MudDataGrid emits its own class tree — override both the shared .mud-table-cell
   and MudBlazor 8+ data-grid-specific selectors to guarantee tight rows.
   tabular-nums + lining-nums lock digit widths so numeric columns scan cleanly
   in Montserrat (proportional by default — without this, 0/1 columns wobble). */
.mpg-grid .mud-table-cell,
.mpg-grid .mud-table-dense .mud-table-cell {
    padding: 3px 8px !important;
    font-size: 12px; line-height: 1.3; height: auto;
    font-variant-numeric: tabular-nums lining-nums;
}
.mpg-grid .mud-table-row,
.mpg-grid .mud-table-dense .mud-table-row { height: auto !important; }
.mpg-grid .mud-table-head .mud-table-cell,
.mpg-grid .mud-table-dense .mud-table-head .mud-table-cell { font-size: 11px; font-weight: 600; text-transform: none; padding: 4px 8px !important; line-height: 1.2; height: auto; letter-spacing: 0.2px; }
.mpg-grid .mud-table-body .mud-table-row { min-height: 0 !important; }
.mpg-grid .mud-table-cell > * { margin: 0; }
/* Row-click selection model — clicking a row toggles selection, shift+click
   extends a range. Suppress browser text-selection across rows so shift+click
   never paints a text-highlight from the prior anchor through every cell in
   between. Editable inputs re-enable selection so users can still drag-select
   a value to edit. Bulk copy lives in the right-click "Export CSV" / "Copy All". */
.mpg-grid .mud-table-row,
.mpg-grid .mud-table-row * {
    user-select: none !important;
    -webkit-user-select: none !important;
}
.mpg-grid .mpg-cell-input {
    user-select: text !important;
    -webkit-user-select: text !important;
}
/* Selected row highlight — primary-subtle background with a left edge for
   scanability. Targets MudDataGrid's row markup; !important wins over the
   default zebra/hover states. */
.mpg-grid .mud-table-row.mpg-row-selected,
.mpg-grid .mud-table-row.mpg-row-selected:hover {
    background: var(--mp-color-primary-subtle) !important;
    box-shadow: inset 3px 0 0 var(--mp-color-primary);
}
/* Active sort chevron: teal accent on the column the user is composing/exploring. */
.mpg-grid .mud-table-sort-label .mud-table-sort-label-icon,
.mpg-grid .mud-table-sort-label.mud-direction-asc .mud-table-sort-label-icon,
.mpg-grid .mud-table-sort-label.mud-direction-desc .mud-table-sort-label-icon { color: var(--mp-color-secondary) !important; }
.mpg-grid .mud-input-slot,
.mpg-grid .mud-input-control { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
.mpg-cell-input {
    width: 100%; border: 1px solid transparent; border-radius: 3px; padding: 0 2px;
    font-size: 12px; line-height: 1.2; font-family: inherit; outline: none;
    background: transparent; color: var(--mp-color-text);
    box-sizing: border-box;
    font-variant-numeric: tabular-nums lining-nums;
}
.mpg-cell-input:focus { border-color: var(--mp-color-primary); background: var(--mp-color-surface); }
.mpg-cell-readonly {
    display: block; width: 100%; padding: 0 2px;
    font-size: 12px; line-height: 1.2;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums lining-nums;
}
.mp-item-link {
    border: 0;
    background: transparent;
    color: var(--mp-color-primary-text);
    cursor: pointer;
    font: inherit;
    padding: 0 2px;
    text-align: left;
    text-decoration: none;
}
.mp-item-link:hover,
.mp-item-link:focus {
    color: var(--mp-color-primary-text);
    text-decoration: underline;
}
.mp-item-link.mpg-right { text-align: right; }
.report-item-link,
.vi-item-link {
    display: inline;
    max-width: 100%;
}
.mpg-right { text-align: right; }
.mpg-summary {
    display: flex; gap: 12px; align-items: center;
    padding: 8px 12px; font-size: 12px; color: var(--mp-color-text-secondary);
    border-top: 1px solid var(--mp-color-border-light); background: var(--mp-color-surface-sunken); border-radius: 0 0 8px 8px;
}
.mpg-summary-sep { color: var(--mp-color-border); }

/* ── mPowerGrid context menu (right-click) ───────────────────────────── */
.mpg-ctx-overlay { position: fixed; inset: 0; z-index: 9998; background: transparent; }
.mpg-ctx-menu { position: fixed; z-index: 9999; min-width: 220px; background: var(--mp-color-surface);
    border: 1px solid var(--mp-color-border); border-radius: 4px; box-shadow: var(--mp-shadow);
    padding: 4px 0; font-size: 13px; }
.mpg-ctx-item { display: block; width: 100%; text-align: left; padding: 6px 14px; border: none;
    background: transparent; cursor: pointer; font: inherit; color: var(--mp-color-text); }
.mpg-ctx-item:hover { background: var(--mp-color-surface-sunken); }
.mpg-ctx-item-danger { color: var(--mp-color-error); font-weight: 600; }
.mpg-ctx-item-danger:hover { background: var(--mp-tier-critical-bg); }
.mpg-ctx-sep { height: 1px; margin: 4px 0; background: var(--mp-color-border-light); }

/* ── Doc AI button ───────────────────────────────────────────────────── */
/* Default (light surface) variant — used when the button sits on a page
   background rather than a purple doc-header bar. Same pill shape, sparkle
   leading icon, brand-color accent. The .doc-header scoped rule above
   overrides this with a translucent-white-on-purple variant. */
.doc-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--mp-color-border);
    background: var(--mp-color-surface);
    color: var(--mp-color-primary-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast), box-shadow var(--mp-transition-fast);
}
.doc-ai-btn:hover {
    background: var(--mp-color-primary-subtle);
    border-color: color-mix(in srgb, var(--mp-color-primary) 40%, transparent);
    box-shadow: 0 2px 8px rgba(90,48,110,0.12);
}
.doc-ai-btn .sparkle { font-size: 13px; line-height: 1; filter: saturate(1.2); }
.doc-with-chat { margin-right: 328px; transition: margin-right 0.25s ease; }

/* ── Location cards ──────────────────────────────────────────────────── */
.loc-card {
    background: var(--mp-color-surface); border: 1px solid var(--mp-color-border-subtle); border-radius: 10px;
    padding: 16px 20px; width: 260px; cursor: pointer; transition: all 0.15s;
}
.loc-card:hover { border-color: var(--mp-color-primary); box-shadow: 0 2px 8px rgba(90,48,110,0.1); }
.loc-card-selected { border-color: var(--mp-color-primary); box-shadow: 0 2px 12px rgba(90,48,110,0.18); background: var(--mp-color-primary-subtle); }
.loc-card-name { font-size: 15px; font-weight: 700; color: var(--mp-color-text); margin-bottom: 4px; }
.loc-card-detail { font-size: 12px; color: var(--mp-color-text-secondary); line-height: 1.4; }
.loc-card-tag {
    display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 10px;
    font-weight: 600; background: var(--mp-color-warning); color: var(--mp-color-on-warning); border-radius: 4px;
}

/* ── Doc chat panel (docked right, like OfficeSharp ChatPanel) ────────── */
/* top:72px clears the fixed MudAppBar so the panel's own header isn't tucked
   under the app bar. 72px matches MPowerShell's MudMainContent padding-top
   (the shared shell for WinBlazor / TestHost / Register) — keep the two in
   sync. position:fixed is required: .doc-with-chat pushes the doc-panel-root
   in via margin-right, and the panel must stay anchored to the viewport, not
   ride that margin. */
.doc-chat {
    position: fixed; top: 72px; right: -340px; bottom: 0; width: 340px;
    background: var(--mp-color-surface-sunken); border-left: 2px solid var(--mp-color-border-subtle);
    display: flex; flex-direction: column; z-index: 100;
    transition: right 0.25s ease; box-shadow: -4px 0 20px rgba(90,48,110,0.10);
}
.doc-chat-open { right: 0; }
.doc-chat-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; background: linear-gradient(135deg, var(--mp-color-primary), var(--mp-color-primary-hover)); color: var(--mp-color-on-primary);
    font-size: 13px; font-weight: 700; flex-shrink: 0;
    letter-spacing: 0.2px;
}
.doc-chat-header-title { display: flex; align-items: center; gap: 8px; }
.doc-chat-header-icon { font-size: 16px; opacity: 0.9; }
.doc-chat-live-status {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--mp-color-on-primary); font-size: 10px; font-weight: 700;
    line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.88;
}
.doc-chat-live-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--mp-color-success);
    box-shadow: 0 0 0 2px rgba(var(--mp-color-on-primary-rgb), 0.18);
}
.doc-chat-close {
    background: rgba(var(--mp-color-on-primary-rgb), 0.15); border: none; color: var(--mp-color-on-primary); cursor: pointer;
    font-size: 13px; line-height: 1; border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.doc-chat-close:hover { background: rgba(var(--mp-color-on-primary-rgb), 0.3); }
.doc-chat-messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.doc-chat-greeting {
    display: flex; flex-direction: column; align-items: center;
    color: var(--mp-color-text-secondary); font-size: 12.5px; padding: 16px 4px 8px;
}
.doc-chat-greeting-text { text-align: center; margin-bottom: 16px; line-height: 1.5; color: var(--mp-color-text-secondary); }
.doc-chat-prompts-label {
    width: 100%; font-size: 11px; font-weight: 700; color: var(--mp-color-primary-hover);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
    border-bottom: 1px solid var(--mp-color-primary-subtle); padding-bottom: 4px;
}
.doc-chat-suggestion {
    width: 100%; cursor: pointer; padding: 7px 10px; margin: 2px 0;
    border-radius: 8px; font-size: 12px; color: var(--mp-color-text-secondary);
    text-align: left; transition: all 0.15s;
    background: var(--mp-color-surface); border: 1px solid var(--mp-color-primary-subtle);
    display: flex; gap: 8px; align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.doc-chat-suggestion:hover { background: var(--mp-color-secondary-subtle); border-color: var(--mp-color-secondary); color: var(--mp-color-secondary-dark); box-shadow: 0 2px 6px color-mix(in srgb, var(--mp-color-secondary) 18%, transparent); }
.doc-chat-suggestion-num { color: var(--mp-color-primary-hover); font-weight: 700; font-size: 11px; min-width: 16px; }
.doc-chat-msg { display: flex; }
.doc-chat-msg-user { justify-content: flex-end; }
.doc-chat-msg-assistant { justify-content: flex-start; }
.doc-chat-bubble {
    max-width: 88%; padding: 8px 12px; border-radius: 14px;
    font-size: 12.5px; line-height: 1.5; word-wrap: break-word;
}
.doc-chat-bubble-user {
    background: linear-gradient(135deg, var(--mp-color-primary), var(--mp-color-primary-hover)); color: var(--mp-color-on-primary);
    border-bottom-right-radius: 4px; box-shadow: 0 2px 6px rgba(90,48,110,0.25);
}
.doc-chat-bubble-assistant {
    background: var(--mp-color-surface); color: var(--mp-color-text); border: 1px solid var(--mp-color-border-subtle);
    border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.doc-chat-bubble-assistant code { background: var(--mp-color-primary-subtle); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--mp-color-primary-text); }
/* Persistent shortcuts strip above the input bar — horizontal, scrollable,
   keeps saved prompts reachable once a conversation is in progress. */
.doc-chat-shortcuts {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px 0; flex-shrink: 0;
}
.doc-chat-shortcut-chip {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    max-width: 100%;
    padding: 5px 10px;
    background: var(--mp-color-surface);
    border: 1px solid var(--mp-color-primary-subtle);
    border-radius: 14px;
    font-size: 11px; color: var(--mp-color-text-secondary);
    font-family: inherit; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.doc-chat-shortcut-chip:hover:not(:disabled) {
    background: var(--mp-color-primary-subtle);
    border-color: var(--mp-color-editable-header);
    color: var(--mp-color-primary-dark);
}
.doc-chat-shortcut-chip:disabled { opacity: 0.5; cursor: default; }
.doc-chat-shortcut-num {
    color: var(--mp-color-primary-hover); font-weight: 700; font-size: 10px;
    flex-shrink: 0;
}
.doc-chat-shortcut-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.doc-chat-input-bar {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid var(--mp-color-primary-subtle); flex-shrink: 0;
    background: var(--mp-color-surface); box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.doc-chat-input {
    flex: 1; padding: 8px 12px; border: 1.5px solid var(--mp-color-border); border-radius: 20px;
    font-size: 12.5px; font-family: inherit; outline: none; background: var(--mp-color-surface-sunken);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-chat-input:focus {
    border-color: var(--mp-color-primary-hover); background: var(--mp-color-surface);
    box-shadow: 0 0 0 3px rgba(90,48,110,0.10);
}
.doc-chat-send {
    background: linear-gradient(135deg, var(--mp-color-primary), var(--mp-color-primary-hover)); color: var(--mp-color-on-primary);
    border: none; border-radius: 50%; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(90,48,110,0.3); transition: opacity 0.15s;
}
.doc-chat-send:hover { opacity: 0.88; }
.doc-chat-send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.doc-chat-results { background: var(--mp-color-surface); border: 1px solid var(--mp-color-border-subtle); border-radius: 8px; overflow: hidden; }
.doc-chat-results-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; background: var(--mp-color-border-lighter); font-size: 11px; font-weight: 600; color: var(--mp-color-text-secondary);
}
.doc-chat-results-btn {
    background: var(--mp-color-primary); color: var(--mp-color-on-primary); border: none; border-radius: 4px;
    padding: 3px 10px; font-size: 10px; font-weight: 600; cursor: pointer;
}
.doc-chat-results-btn:hover { opacity: 0.85; }
.doc-chat-result-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 10px; border-top: 1px solid var(--mp-color-border-light); font-size: 11px;
}
.doc-chat-result-row:hover { background: var(--mp-color-surface-sunken); }
.doc-chat-result-info { display: flex; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.doc-chat-result-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-chat-result-add {
    background: var(--mp-color-success-strong); color: var(--mp-color-on-success); border: none; border-radius: 50%;
    width: 22px; height: 22px; font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-chat-result-add:hover { filter: brightness(0.92); }

/* ── Item search panel ────────────────────────────────────────────────── */
.item-search { margin-bottom: 16px; }
.item-search-bar { display: flex; gap: 8px; margin-bottom: 8px; }
.item-search-input {
    flex: 1; padding: 8px 12px; border: 1px solid var(--mp-color-border); border-radius: 6px;
    font-size: 13px; font-family: inherit; outline: none;
}
.item-search-input:focus { border-color: var(--mp-color-primary); box-shadow: 0 0 0 2px rgba(90,48,110,0.12); }
.item-search-error { font-size: 12px; color: var(--mp-color-error); margin-bottom: 8px; }
.item-search-no-results { font-size: 13px; color: var(--mp-color-text-muted); padding: 12px; text-align: center; }
.item-search-results {
    border: 1px solid var(--mp-color-border); border-radius: 8px; overflow: hidden;
    background: var(--mp-color-surface); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.item-search-results-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; background: var(--mp-color-border-lighter); font-size: 12px; color: var(--mp-color-text-secondary);
}
.item-search-grid-wrap { max-height: 250px; overflow-y: auto; }

/* ── Dashboard analytics ──────────────────────────────────────────────── */
/* 2-column layout when ≥2 widgets fit; collapses to 1 column when only one widget renders
   (e.g. when sibling widgets are conditional or commented out) so we don't leave a blank cell. */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; }
.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.widget-title  { font-size: 14px; font-weight: 700; color: var(--mp-color-text); }
.widget-period { font-size: 11px; color: var(--mp-color-primary-text); background: var(--mp-color-primary-subtle); padding: 3px 10px; border-radius: 12px; font-weight: 600; cursor: pointer; user-select: none; }
.trend-big         { font-size: 32px; font-weight: 800; color: var(--mp-color-text); }
.trend-big-label   { font-size: 12px; color: var(--mp-color-text-muted); margin-top: 2px; }
.trend-comparison  { font-size: 13px; color: var(--mp-color-text-muted); margin-top: 4px; }
.trend-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--mp-color-border-lighter); }
.trend-row:last-child { border-bottom: none; }
.trend-label { font-size: 13px; color: var(--mp-color-text-secondary); }
.trend-value { font-size: 15px; font-weight: 700; }
.change-up   { color: var(--mp-color-success-strong); font-size: 12px; font-weight: 600; margin-left: 6px; }
.change-down { color: var(--mp-color-error); font-size: 12px; font-weight: 600; margin-left: 6px; }
.margin-bar-container { margin: 8px 0; }
.margin-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--mp-color-text-secondary); margin-bottom: 4px; }
.margin-bar       { height: 8px; background: var(--mp-color-border-light); border-radius: 4px; overflow: hidden; }
.margin-bar-fill  { height: 100%; border-radius: 4px; }
.margin-good      { background: linear-gradient(90deg, var(--mp-color-success), var(--mp-tier-success-text)); }
.margin-ok        { background: linear-gradient(90deg, var(--mp-color-warning), var(--mp-tier-warning-text)); }
.margin-bad       { background: linear-gradient(90deg, var(--mp-color-error), var(--mp-color-error)); }
.margin-summary   { display: flex; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mp-color-border-light); }
.margin-stat      { flex: 1; text-align: center; }
.margin-stat-value { font-size: 20px; font-weight: 800; }
.margin-stat-label { font-size: 11px; color: var(--mp-color-text-muted); margin-top: 2px; }
.health-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.health-card { text-align: center; padding: 14px 8px; border-radius: 8px; }
.health-card .grade       { font-size: 28px; font-weight: 800; }
.health-card .grade-label { font-size: 11px; font-weight: 600; margin-top: 2px; }
.health-card .grade-count { font-size: 18px; font-weight: 700; margin-top: 6px; }
.health-card .grade-pct   { font-size: 11px; opacity: 0.5; }
.grade-a { background: var(--mp-tier-success-bg); color: var(--mp-tier-success-text); }
.grade-b { background: var(--mp-tier-watch-bg); color: var(--mp-tier-watch-text); }
.grade-c { background: var(--mp-tier-warning-bg); color: var(--mp-tier-warning-text); }
.grade-d { background: var(--mp-tier-critical-bg); color: var(--mp-tier-critical-text); }
.health-grid-5 { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; }
.grade-5 { background: var(--mp-tier-critical-bg); color: var(--mp-color-error); }
.grade-4 { background: var(--mp-tier-success-bg); color: var(--mp-tier-success-text); }
.grade-3 { background: var(--mp-tier-watch-bg); color: var(--mp-tier-watch-text); }
.grade-2 { background: var(--mp-tier-warning-bg); color: var(--mp-tier-warning-text); }
.grade-1 { background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); }
.health-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }
.health-bar-pcts { display: flex; justify-content: space-between; font-size: 11px; color: var(--mp-color-text-muted); margin-top: 4px; }
.top-item { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--mp-color-surface-sunken); }
.top-item:last-child { border-bottom: none; }
.top-rank { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; margin-right: 10px; flex-shrink: 0; }
/* Real-world metallic ranks — gold/silver/bronze stay as concrete hex (not
   theme tokens) because their meaning IS the metal color; flipping them in
   dark mode would break the medal metaphor. Brightness reads on light + dark. */
.rank-1 { background: #f1c40f; color: var(--mp-color-text); } /* gold */
.rank-2 { background: #95a5a6; }                              /* silver */
.rank-3 { background: #cd7f32; }                              /* bronze */
.rank-4, .rank-5 { background: var(--mp-color-border); color: var(--mp-color-text-secondary); }
.top-name        { flex: 1; font-size: 13px; line-height: 1.3; }
.top-name small  { color: var(--mp-color-text-muted); font-size: 11px; }
.top-units       { font-size: 12px; color: var(--mp-color-text-muted); margin-right: 12px; }
.top-sales-val   { font-size: 13px; font-weight: 700; }
.dept-row { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--mp-color-surface-sunken); }
.dept-row:last-child { border-bottom: none; }
.dept-name     { width: 100px; font-size: 12px; font-weight: 600; }
.dept-bar-wrap { flex: 1; margin: 0 12px; }
.dept-bar      { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mp-color-primary), var(--mp-color-primary-hover)); }
.dept-value    { font-size: 12px; font-weight: 700; width: 70px; text-align: right; }
.dept-change   { font-size: 11px; width: 55px; text-align: right; font-weight: 600; }
.section-title { font-size: 11px; font-weight: 700; color: var(--mp-color-primary-text); letter-spacing: 1.5px; text-transform: uppercase; margin: 28px 0 12px; }

/* ── Card section label (used in edit forms) ──────────────────────────── */
.card-section-label { font-size: 11px; font-weight: 700; color: var(--mp-color-text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }

/* ── Selected table row ───────────────────────────────────────────────── */
.po-row-selected { background: var(--mp-color-primary-subtle) !important; }

/* ── Vendor lookup ────────────────────────────────────────────────────── */
.vendor-lookup {
    position: relative; display: flex; align-items: stretch;
    height: 36px; width: 100%; min-width: 0;
}
.vendor-lookup-input {
    flex: 1; min-width: 0; height: 100%;
    border: 1px solid var(--mp-color-border); border-right: none;
    border-radius: 4px 0 0 4px; padding: 2px 8px;
    font-size: 13px; font-family: inherit; outline: none;
    background: var(--mp-color-surface); color: var(--mp-color-text);
}
.vendor-lookup-input:focus { border-color: var(--mp-color-primary); }
.vendor-lookup-input:disabled { background: var(--mp-color-border-lighter); color: var(--mp-color-text-muted); }
.vendor-lookup-input-locked {
    background: var(--mp-color-editable-cell);
    border-color: var(--mp-color-primary) !important;
    font-weight: 600; color: var(--mp-color-text);
}
.vendor-lookup-btn {
    flex-shrink: 0; width: 32px; height: 100%;
    border: 1px solid transparent; border-radius: 0 4px 4px 0;
    font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.vendor-lookup-btn:disabled { opacity: 0.4; cursor: default; }
.vendor-lookup-btn-browse {
    background: var(--mp-color-primary); color: var(--mp-color-on-primary);
    border-color: var(--mp-color-primary);
}
.vendor-lookup-btn-browse:hover:not(:disabled) { background: var(--mp-color-primary-dark); }
.vendor-lookup-btn-clear {
    background: var(--mp-color-error); color: var(--mp-color-on-error);
    border-color: var(--mp-color-error); font-size: 18px;
}
.vendor-lookup-btn-clear:hover:not(:disabled) { filter: brightness(0.88); }
.vendor-lookup-list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-height: 200px;
    overflow-y: auto; margin-top: 2px;
}
.vendor-lookup-item {
    padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.vendor-lookup-item:hover, .vendor-lookup-item-active {
    background: var(--mp-color-surface-page);
}

/* ── AI Assistant chat ────────────────────────────────────────────────── */
.ai-chat {
    display: flex; flex-direction: column; height: calc(100vh - 80px);
    max-width: 800px; margin: 0 auto;
}
.ai-messages {
    flex: 1; overflow-y: auto; padding: 20px 0;
    display: flex; flex-direction: column; gap: 12px;
}
.ai-welcome { text-align: center; padding: 60px 20px 30px; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.ai-suggestion {
    padding: 8px 16px; background: var(--mp-color-surface-page); border-radius: 20px;
    font-size: 13px; color: var(--mp-color-primary-text); cursor: pointer; border: 1px solid var(--mp-color-border-subtle);
    transition: all 0.15s;
}
.ai-suggestion:hover { background: var(--mp-color-primary-subtle); border-color: var(--mp-color-primary); }
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble {
    max-width: 75%; padding: 10px 16px; border-radius: 14px;
    font-size: 14px; line-height: 1.5; word-wrap: break-word;
}
.ai-msg-bubble-user {
    background: var(--mp-color-primary); color: var(--mp-color-on-primary); border-bottom-right-radius: 4px;
}
.ai-msg-bubble-assistant {
    background: var(--mp-color-surface); color: var(--mp-color-text); border: 1px solid var(--mp-color-border-subtle); border-bottom-left-radius: 4px;
}
.ai-msg-bubble-assistant code {
    background: var(--mp-color-surface-page); padding: 1px 5px; border-radius: 3px; font-size: 12px;
}
.ai-typing { opacity: 0.6; font-style: italic; }
.ai-input-bar {
    display: flex; gap: 8px; padding: 12px 0; border-top: 1px solid var(--mp-color-border-light);
}
.ai-input {
    flex: 1; padding: 10px 16px; border: 1px solid var(--mp-color-border); border-radius: 24px;
    font-size: 14px; font-family: inherit; outline: none;
}
.ai-input:focus { border-color: var(--mp-color-primary); box-shadow: 0 0 0 2px rgba(90,48,110,0.12); }
.ai-send-btn {
    padding: 10px 24px; background: var(--mp-color-primary); color: var(--mp-color-on-primary); border: none;
    border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: inherit;
}
.ai-send-btn:disabled { opacity: 0.4; cursor: default; }
.ai-send-btn:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(90,48,110,0.3); }
.ai-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 8px; border-bottom: 1px solid var(--mp-color-border-light); margin-bottom: 8px; }
.ai-header-btn { padding: 4px 12px; background: var(--mp-color-border-lighter); border: 1px solid var(--mp-color-border-subtle); border-radius: 14px; font-size: 12px; color: var(--mp-color-text-secondary); cursor: pointer; }
.ai-header-btn:hover { background: var(--mp-color-primary-subtle); color: var(--mp-color-primary-text); border-color: var(--mp-color-primary); }
.ai-result-panel { background: var(--mp-color-surface); border: 1px solid var(--mp-color-border-subtle); border-radius: 8px; overflow: hidden; max-width: 96%; }
.ai-result-header { padding: 8px 14px; background: var(--mp-color-primary-subtle); font-size: 12px; font-weight: 600; color: var(--mp-color-primary-text); border-bottom: 1px solid var(--mp-color-border-subtle); }
.ai-open-btn { padding: 3px 10px; background: var(--mp-color-primary); color: var(--mp-color-on-primary); border: none; border-radius: 4px; font-size: 11px; cursor: pointer; }
.ai-open-btn:hover { background: var(--mp-color-primary-hover); }
.ai-alternative { padding: 10px 14px; background: var(--mp-color-warning-soft); border: 1px dashed var(--mp-color-secondary-dark); border-radius: 8px; max-width: 75%; }
.ai-alt-btn { padding: 5px 12px; background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: 16px; font-size: 12px; cursor: pointer; color: var(--mp-color-text-secondary); }
.ai-alt-btn:hover { background: var(--mp-color-border-lighter); }
.ai-alt-btn-yes { background: var(--mp-color-primary); color: var(--mp-color-on-primary); border-color: var(--mp-color-primary); }
.ai-alt-btn-yes:hover { background: var(--mp-color-primary-hover); }

/* ── PO Print page ───────────────────────────────────────────────────── */
.po-print { max-width: 850px; margin: 0 auto; }
.po-print-toolbar {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 0; margin-bottom: 8px;
}
.po-print-page {
    background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: 4px;
    padding: 40px 48px; font-size: 12px; color: var(--mp-color-text);
}
.po-print-title { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--mp-color-text); }
.po-print-number { font-size: 16px; font-weight: 600; color: var(--mp-color-primary-text); margin-top: 2px; }
.po-print-status { font-size: 11px; font-weight: 600; color: var(--mp-color-text-muted); text-transform: uppercase; margin-top: 2px; }
.po-print-head-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.po-print-date-row { font-size: 12px; color: var(--mp-color-text-secondary); margin-bottom: 2px; }
.po-print-date-row span { font-weight: 600; color: var(--mp-color-text-secondary); }
.po-print-addr-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.po-print-addr-cell { width: 50%; vertical-align: top; padding: 10px 16px 10px 0; }
.po-print-addr-cell:last-child { padding-right: 0; padding-left: 16px; }
.po-print-addr-label { font-size: 10px; font-weight: 700; color: var(--mp-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.po-print-addr { font-family: inherit; font-size: 12px; white-space: pre-line; margin: 0; line-height: 1.5; }
.po-print-notes { font-size: 12px; color: var(--mp-color-text-secondary); margin-bottom: 16px; padding: 8px 10px; background: var(--mp-color-surface-sunken); border-radius: 4px; }
.po-print-items { width: 100%; border-collapse: collapse; font-size: 11px; }
.po-print-items thead th {
    background: var(--mp-color-border-lighter); border-bottom: 2px solid var(--mp-color-border); padding: 6px 8px;
    font-weight: 700; font-size: 10px; text-transform: uppercase; color: var(--mp-color-text-secondary); letter-spacing: 0.3px;
}
.po-print-items tbody td { padding: 5px 8px; border-bottom: 1px solid var(--mp-color-border-light); }
.po-print-items tbody tr:nth-child(even) { background: var(--mp-color-surface-sunken); }
.po-print-total-row td { border-top: 2px solid var(--mp-color-text-muted); padding-top: 8px; font-size: 12px; }
.po-print-footer {
    margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--mp-color-border);
    font-size: 11px; color: var(--mp-color-text-muted); text-align: center;
}

@media print {
    body { background: #fff !important; }
    /* WI 2221 — original rule blanket-hid .mud-layout, which kills the entire
       app shell including the actual document content inside MudMainContent
       (every Blazor page that prints from inside the Mud layout — Ticket
       Print, future Receiving print, etc.). The PO print page rendered fine
       only because po-print-page lives outside the Mud layout. Hide only the
       chrome: drawer, appbar, and explicit .no-print elements; keep the
       layout container visible so its contents can flow. */
    .mud-drawer, .mud-appbar, .po-print-toolbar, .no-print { display: none !important; }
    .mud-layout { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; }
    /* MudMainContent's inline `height: 100vh; overflow: hidden;` would still
       clip content past viewport during print. Release it. */
    .mud-main-content { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; background: #fff !important; max-width: none !important; }
    .po-print-page { border: none; padding: 0; box-shadow: none; }
    .po-print { max-width: none; }
    .po-print-items { font-size: 10px; }
    .po-print-items thead th { background: var(--mp-color-border-light) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .po-print-items tbody tr:nth-child(even) { background: var(--mp-color-border-lighter) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Ticket print pages: drop shadow + auto-margins so each .print-page sits
       at the top-left of its @page (which has margin:0). */
    .print-page { box-shadow: none !important; margin: 0 !important; }

    /* ─── V2 report print rules ─────────────────────────────────────────────
       Researched failure modes for CSS page breaks in MudBlazor + Blazor:
         1. .mud-layout / .mud-main-content default to height:100vh +
            overflow:hidden — that scroll viewport prevents pagination.
            Already reset by the WI 2221 rules above.
         2. ANY ancestor with display:flex/grid silently swallows
            break-before/break-after on its children (Chrome bug 130857 +
            related). The V2 viewer's outermost wrapper is
            `display:flex; flex-direction:column` — `.v2-viewer-shell`.
            Flatten it to block here.
         3. `break-before: page` is more reliable than `break-after: page`
            because the browser opens a fresh page before laying out the
            new element, instead of trying to retroactively split prior
            content.
         4. `break-inside: avoid` on an element TALLER than a printed
            page is unfulfillable — Chrome silently disables surrounding
            break-before/after to make space. Do NOT put it on .v2-group.
       ────────────────────────────────────────────────────────────────────── */

    /* Flatten the outermost TestHost shell (display:flex; overflow:hidden)
       + the V2 viewer's flex container + the inner scroll wrapper. ALL
       three suppress break-before/break-after on their descendants. The
       WI 2221 rules above handle .mud-layout / .mud-main-content. */
    .dev-shell,
    .v2-viewer-shell,
    .v2-viewer-scroll {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
    }

    /* Hide chrome via display:none. Enumerate leaf classes — do NOT touch
       container wrappers (.dev-shell, .mud-layout) which contain the print
       area. */
    .testhost-banner,
    .mud-drawer,
    .mud-appbar,
    .mud-popover-provider,
    .mud-popover,
    .doc-list-header,
    .doc-page-toolbar,
    [class*="criteria-strip"] { display: none !important; }

    /* Hide siblings at each viewer layer:
         - Inside v2-viewer-shell: keep only v2-viewer-scroll
         - Inside v2-viewer-scroll: keep only v2-report-print
       Together this peels away DocListHeader, criteria strip, subtitle /
       description / progress / no-results placeholder while leaving the
       print area visible. */
    .v2-viewer-shell > *:not(.v2-viewer-scroll) { display: none !important; }
    .v2-viewer-scroll > *:not(.v2-report-print) { display: none !important; }

    /* Print area stays in normal flow at the top of the page once siblings
       are gone. No position changes — those would suppress page breaks. */
    .v2-report-print {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100%;
        display: block !important;
    }

    /* MudMainContent host: flatten residual padding/margin. */
    .mud-main-content { padding: 0 !important; }

    /* Title row at the top of the first page. */
    .v2-report-print-title {
        display: block !important;
        font-size: 13px; font-weight: 700; letter-spacing: .6px;
        text-transform: uppercase; color: #333;
        padding: 6px 0 10px; border-bottom: 1px solid #999;
        margin-bottom: 10px;
    }

    /* Per-group page break.
       Renderer adds `.v2-group-break-before` to every iteration EXCEPT the
       first when its parent Group has PageBreakAfter=true. Each new
       Location/Batch starts on a fresh page; the first group rides on
       page 1 alongside the title. */
    .v2-group-break-before {
        break-before: page !important;
        page-break-before: always !important;
        display: block !important;
    }

    /* Widget chrome (rounded card with shadow) doesn't print well — flat
       background + thin border + no shadow keeps the structure but feels
       like a printed document. */
    .v2-report-print .widget {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #fff !important;
        margin-bottom: 8px !important;
    }

    /* The section card is a screen affordance; on paper the widget border below
       already boxes the content, so flatten the outer card and keep only the
       section heading (WI 2446). */
    .report-section-v2.section-card {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .report-section-v2.section-card .widget {
        border: 1px solid #ccc !important;
        background: #fff !important;
        padding: 8px !important;
    }
    .report-section-v2 .section-title {
        font-size: 12px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .5px; color: #333;
        border-bottom: 1px solid #999 !important;
    }

    /* Table borders should print (Chrome strips backgrounds by default). */
    .v2-report-print table { color-adjust: exact; -webkit-print-color-adjust: exact; }
    .v2-report-print th { background: #f0f0f0 !important; color-adjust: exact; -webkit-print-color-adjust: exact; }
}

@page {
    /* Default print margins — about half-inch on all sides. Browser print
       dialog can override. The page footer (Page X of Y, generated
       timestamp) is rendered via running CSS on each .v2-group. */
    margin: 0.5in;
}

/* The print title is for print only — hide on screen. */
.v2-report-print-title { display: none; }

/* ── Record modal (people pages: vendors, employees, etc.) ───────────────── */
.record-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 500;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.record-modal {
    background: var(--mp-color-surface); border-radius: 12px;
    width: min(720px, 100%); max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
/* Modal title bar — bound to APPBAR (not Mud's primary) so it stays dark
   plum chrome in both modes; primary is reserved for focal accents (filled
   buttons, pills) and would diverge from chrome in dark. */
.record-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; flex-shrink: 0; border-radius: 12px 12px 0 0;
    background: var(--mp-color-appbar); color: var(--mp-color-on-appbar);
}
.record-modal-header-title { font-size: 15px; font-weight: 700; color: var(--mp-color-on-appbar); }
.record-modal-header-close {
    background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px;
    font-size: 20px; line-height: 1;
    color: rgba(var(--mp-color-on-appbar-rgb), 0.7); transition: color 0.15s;
}
.record-modal-header-close:hover { color: var(--mp-color-on-appbar); }
.record-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.record-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; border-top: 1px solid var(--mp-color-border-light); flex-shrink: 0;
}

/* ── Compact vendor/employee card ────────────────────────────────────────── */
.people-card {
    background: var(--mp-card-bg); border-radius: var(--mp-card-radius); border: var(--mp-card-border);
    padding: 14px var(--mp-card-padding); min-width: 200px; flex: 0 0 200px; cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.people-card:hover { box-shadow: var(--mp-card-shadow-hover); border-color: var(--mp-color-primary); }
.people-card-name { font-weight: 600; font-size: 14px; color: var(--mp-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-card-sub { font-size: 12px; color: var(--mp-color-text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-card-sub2 { font-size: 12px; color: var(--mp-color-text-disabled); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Settings: shared setup-list page (template — see mPower.UI.Shared/CLAUDE.md) ─── */
/* Per-page header bar; each page sets --setup-header-color to its nav section color.
   The appbar mix pulls pastel section colors to a saturation that holds on-appbar text. */
.setup-header-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: color-mix(in srgb, var(--setup-header-color, var(--mp-color-primary)) 55%, var(--mp-color-appbar));
    color: var(--mp-color-on-appbar);
    padding: 6px 16px; border-radius: 6px; margin-bottom: 12px;
}
/* Compact the MudButtons in the header bar — default MudBlazor padding is too airy here. */
.setup-header-bar .mud-button-root { padding: 4px 11px !important; min-height: 0 !important; }
.setup-header-icon { color: var(--mp-color-on-appbar) !important; }
.setup-header-outline {
    color: var(--mp-color-on-appbar) !important;
    border-color: rgba(var(--mp-color-on-appbar-rgb), 0.6) !important;
}
.setup-header-save {
    background-color: var(--mp-color-on-appbar) !important;
    color: var(--mp-color-primary-text) !important;
}

/* Scroll shell — keeps the grid inside the viewport, body scrolls, header sticks.
   10px radius matches OfficeSharp's .widget convention. */
.setup-scroll {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    border-radius: 10px;
    background: var(--mp-color-surface);
}

/* table-layout:fixed + explicit column widths keeps form controls from drifting
   between Web.Office (browser) and OfficeSharp (WebView). */
.setup-table                 { table-layout: fixed; width: 100%; }
/* Colors and proportions match OfficeSharp's .po-table (padding 11px 16px / 10px 16px,
   border-bottom 1px solid #f5f5f5, header bg #fafafa, header text #888). The visual
   row gap comes from cell padding — the 1px border is a hairline. High-specificity
   selectors (html body … td.mud-table-cell) are needed to win over MudBlazor's
   .mud-table-dense .mud-table-cell rule that loads after this stylesheet. */
.setup-table thead th {
    text-align: left; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
    border-bottom: 2px solid var(--mp-color-border-light);
}
/* Doubled-class on .mud-table-cell brings selector to (0,4,5) — beats Mud's
   (0,3,0) `.mud-table-dense * .mud-table-row .mud-table-cell`. Logical-property
   resets are needed because padding shorthand doesn't always cascade to
   padding-inline-*; Mud sets padding-inline-end:24px which would otherwise persist. */
html body .setup-table tbody tr td.mud-table-cell.mud-table-cell {
    padding: 11px 16px !important;
    padding-inline-start: 16px !important;
    padding-inline-end: 16px !important;
    background: transparent !important;
    border-bottom: 3px solid var(--mp-color-surface-page) !important;
}
html body .setup-table thead tr th.mud-table-cell.mud-table-cell {
    padding: 10px 16px !important;
    padding-inline-start: 16px !important;
    padding-inline-end: 16px !important;
    color: var(--mp-color-text-muted) !important;
    background: var(--mp-color-surface-sunken) !important;
}
.setup-table tbody tr:hover td { background: var(--mp-color-primary-subtle); }

/* Chromeless inline form controls — strip MudBlazor's baseline underline. */
.setup-table .mud-input-control > .mud-input-control-input-container::before,
.setup-table .mud-input-control > .mud-input-control-input-container::after,
.setup-table .mud-input-slot::before,
.setup-table .mud-input-slot::after,
.setup-table .mud-input.mud-input-underline::before,
.setup-table .mud-input.mud-input-underline::after { border: none !important; }

/* Collapse MudBlazor's stacked margin + padding so row height is driven by content. */
.setup-table .mud-input-control                 { margin-top: 0 !important; margin-bottom: 0 !important; }
.setup-table .mud-input-control-input-container { padding-top: 0 !important; padding-bottom: 0 !important; }
.setup-table .mud-input                         { min-height: 0 !important; }
.setup-table .mud-input-slot                    { padding-top: 2px !important; padding-bottom: 2px !important; font-size: 13px !important; }
.setup-table .mud-select-input                  { font-size: 13px !important; }
.setup-table tbody tr.mud-table-row             { height: auto !important; }

/* Deleted-row affordance — matches the Items page convention (light pink bg + italic) +
   strikethrough on the editable form slots. */
.setup-table tbody tr.setup-row-deleted td {
    background: var(--mp-color-deleted-soft);
    font-style: italic;
}
.setup-table tbody tr.setup-row-deleted td .mud-input-slot,
.setup-table tbody tr.setup-row-deleted td .mud-select-input { text-decoration: line-through; }

/* ── Dashboard layout ────────────────────────────────────────────────────── */
/* Grid scrolls inside the available height; each widget stretches to fill its
   MudItem slot so widgets in the same row visually align. */
.dashboard-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 12px;
    box-sizing: border-box;
}
.dashboard-scroll .widget { height: 100%; box-sizing: border-box; }

/* ── Settings: Tax Management tabs ──────────────────────────────────────── */
.tax-tab {
    padding: 8px 18px; font-size: 13px; font-weight: 600; border: none;
    background: none; cursor: pointer; color: var(--mp-color-text-muted); border-bottom: 3px solid transparent;
    margin-bottom: -2px; font-family: inherit; transition: color 0.15s;
}
.tax-tab:hover { color: var(--mp-color-text-secondary); }
.tax-tab-active { color: var(--mp-color-primary-text); border-bottom-color: var(--mp-color-primary); }

/* ── Dark-mode overrides ─────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* MudBlazor plum-as-text — the Mud half of the --mp-color-primary-text split.
       MudBlazor 8.x ships `.mud-primary-text { color: var(--mud-palette-primary)
       !important }`, and MudText/MudLink/MudIcon Color="Primary" all render through
       it. Two consequences: (1) dark Mud Primary #B30069 lands at 2.48:1 on a card,
       the same failure the CSS-var sweep fixed everywhere else; (2) the !important
       means a per-site inline `Style="color:..."` is silently ignored — verified live
       on the Catalog Health breadcrumb, whose inline token resolved to #B30069
       anyway. So this has to be an override, not a call-site fix.
       Scoped to typography/icons/outlined chips: filled buttons, filled chips, the
       appbar, switch tracks, progress and active nav keep Mud Primary as a FILL,
       which is the role that value is correct for. */
    .mud-typography.mud-primary-text,
    .mud-icon-root.mud-primary-text { color: var(--mp-color-primary-text) !important; }
    .mud-chip-outlined.mud-chip-color-primary { color: var(--mp-color-primary-text); }

    /* Status filter chips */
    .status-chip:hover { background: var(--mp-color-border); }

    /* Document list table */
    .po-table thead tr { border-bottom-color: var(--mp-color-border); }
    .po-row:hover { background: var(--mp-color-surface-sunken); }
    .po-row-selected { background: var(--mp-color-primary-subtle) !important; }
    .po-number { color: var(--mp-color-info); }

    /* Status badges — replace hard light backgrounds with alpha tints */
    .status-draft     { background: rgba(46,134,222,0.14);  color: var(--mp-color-info); }
    .status-confirmed { background: rgba(79,181,181,0.14);  color: var(--mp-color-success); }
    .status-inprocess { background: rgba(227,178,104,0.14); color: var(--mp-color-warning); }
    .status-shipcomplete { background: rgba(79,181,181,0.14); color: var(--mp-color-success); }

    /* Match badge — missing variant (light purple → alpha plum) */
    .match-badge.match-missing { background: rgba(199,155,217,0.14); border-color: rgba(199,155,217,0.30); }
    .match-badge.match-ok { border-color: rgba(79,181,181,0.40); }

    /* AI panel */
    .ai-header-btn:hover { background: var(--mp-color-primary-subtle); }
    .ai-result-header { border-bottom-color: var(--mp-color-border); }
    .ai-alternative { background: rgba(225,192,106,0.10); border-color: rgba(225,192,106,0.35); }

    /* Grade badges */
    .grade-d { background: rgba(224,107,95,0.14); color: var(--mp-tier-critical-text); }
    .grade-1 { background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); }

    /* Rank badges — light grey disappears on dark */
    .rank-4, .rank-5 { background: var(--mp-color-border); color: var(--mp-color-text-secondary); }

    /* Setup-list tables (shared template) */
    .setup-table td { border-bottom-color: var(--mp-color-border-lighter); }

    /* Print borders (used at screen too; map to token) */
    .po-print-items thead th { border-bottom-color: var(--mp-color-border); }
    .po-print-total-row td   { border-top-color: var(--mp-color-border); }
    .po-print-footer         { border-top-color: var(--mp-color-border); }

    /* Neutral status pill on dark appbar/doc-header — the global rule uses
       border-lighter (#1A1218) which sits darker than the doc-header band,
       creating a near-invisible smudge. Lift it with a Light Plum alpha tint
       so the pill reads as chrome-aligned. */
    .doc-header .mp-status--neutral,
    .doc-list-header .mp-status--neutral,
    .record-modal-header .mp-status--neutral {
        background: rgba(var(--mp-color-on-appbar-rgb), 0.15);
        color: var(--mp-color-on-appbar);
        border-color: rgba(var(--mp-color-on-appbar-rgb), 0.30);
    }

    /* MudBlazor outlined Color.Default — Close / Save Draft / Ship All / Print
       Packing Slip render with low-contrast border + text on the dark page bg.
       Bump text to TextPrimary and border to a visible plum-tinted line. */
    .mud-button-outlined.mud-button-outlined-default {
        color: var(--mp-color-text) !important;
        border-color: var(--mp-color-border) !important;
    }
    .mud-button-outlined.mud-button-outlined-default:hover {
        background: var(--mp-color-surface-sunken) !important;
        border-color: var(--mp-color-text-secondary) !important;
    }

    /* Scrollbars — default browser scrollbar in WebView2 / Chrome on near-black
       surfaces is barely visible. Use plum-tinted track + lighter thumb so the
       scroll position is always discoverable. WebKit only; Firefox uses
       color-scheme: dark which is already set on :root. */
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: var(--mp-color-surface-page); }
    ::-webkit-scrollbar-thumb {
        background: var(--mp-color-border);
        border: 2px solid var(--mp-color-surface-page);
        border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--mp-color-text-muted); }
    ::-webkit-scrollbar-corner { background: var(--mp-color-surface-page); }
}

/* ==========================================================================
   Register touch targets (WI 2473)
   The POS runs on touchscreen lanes, so every tap target inside the register
   surface gets a 44px minimum box (WCAG 2.5.5 AAA / Apple HIG; Material says
   48dp). .reg-touch is set by RegisterLayout on the fullscreen shell AND on a
   wrapper around its dialog/popover providers, so DialogService dialogs and
   select popovers opened from register pages inherit the scope with no
   per-dialog plumbing. MudBlazor renders Size.Small buttons ~30px and default
   MudButtons ~36px otherwise. Numeric spin buttons can't meet 44px without
   wrecking field layout, so they are hidden below; the line grid ships
   dedicated 44px +/- steppers and amounts stay keyboard-editable.
   ========================================================================== */
.reg-touch .mud-button { min-height: 44px; }
.reg-touch .mud-icon-button { min-width: 44px; min-height: 44px; }
/* Select/menu popover rows are tap targets too (tender pickers, reason lists). */
.reg-touch .mud-list-item { min-height: 44px; }
/* Clickable chips (MudChip renders a <button> when it has OnClick — display-only
   status chips render as spans and keep their compact size). */
.reg-touch button.mud-chip { min-height: 44px; }
/* Numeric spin buttons render ~20x24 and can't grow without wrecking field
   layout — hide them on the register; every numeric field stays keyboard-
   editable and the hot paths have dedicated 44px steppers / quick amounts. */
.reg-touch .mud-input-control.mud-input-number-control .mud-input-numeric-spin { display: none; }
/* Inputs are tap-to-focus targets (scan box, dialog filters, amount fields) —
   size the inner input element, not just the wrapper, because taps on wrapper
   padding don't focus the field. */
.reg-touch .mud-input,
.reg-touch .mud-input-slot { min-height: 44px; }
/* Dense tables are tap surfaces on the register (line grid, pick grid, item
   lookup rows all select on tap): pad rows up to a >=44px touch height. */
.reg-touch .mud-table-dense * .mud-table-row .mud-table-cell {
    padding-top: 12px;
    padding-bottom: 12px;
}
/* The ticket line grid's rows are already >=44px from the qty stepper cluster —
   keep their padding tight so long transactions show more lines. */
.reg-touch .reg-grid .mud-table-dense * .mud-table-row .mud-table-cell {
    padding-top: 4px;
    padding-bottom: 4px;
}