/* ═══════════════════════════════════════════════════════════════════════
   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);
}
/* WI 2733 — Add All / Add Selected / Close read as plain text, not buttons: .doc-btn is
   border:none and .doc-btn-secondary's background resolves to the same #f2f2f2 as this
   header strip, so there was zero affordance and the reporter concluded there was "no way
   to add them to order". Lift them onto the surface color with a real border. Scoped to
   the header so the global secondary button style is untouched. */
.item-search-results-header .doc-btn {
    background: var(--mp-color-surface);
    border: 1px solid var(--mp-color-border);
    border-radius: 6px;
}
.item-search-results-header .doc-btn:hover:not(:disabled) {
    background: var(--mp-color-border-lighter);
    border-color: var(--mp-color-primary);
}
.item-search-results-header .doc-btn:disabled { opacity: 0.45; }

.item-search-grid-wrap { max-height: 250px; overflow-y: auto; }
/* WI 2733 — the results list is a 250px scroller and the header row was position:static,
   so scrolling even one row hid the SKU / Name / Size / Qty-Cs / Cost / Retail labels and
   left bare numbers on screen. An opaque background on the th is required: sticky cells
   render over the rows beneath them. */
.item-search-grid-wrap .po-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mp-color-surface-sunken);
}

/* ── 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 2799 — every host page pins `html, body { height: 100%; overflow: hidden }`
       so the app shell scrolls internally instead of the document. That clipping
       box survives into print media, and a root with a fixed height plus
       overflow:hidden cannot paginate — Chromium lays out page 1 and clips the
       rest, so a multi-item ticket run printed only the first tag no matter how
       many items were queued (and raising the copy count just repeated that one
       tag). The shell resets below release .mud-layout / .mud-main-content /
       .dev-shell, but nothing released the root itself. */
    html, body { height: auto !important; overflow: visible !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;
}