/* =====================================================================================
   SVA Quote Ingest — design system (Phase 1 foundation). Brand navy + gold; Sora display /
   IBM Plex Sans body / IBM Plex Mono. Theme-aware: light is the bare :root; dark is applied by
   data-theme="dark" on <html> (server-stamped from the user's saved preference) OR by the OS
   setting when no explicit choice is made. Never hard-code a colour — always a token.
   ===================================================================================== */
:root {
    /* Type */
    --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;

    /* Brand */
    --navy: #00205c;
    --gold: #fbac00;
    --gold2: #e79a00;          /* gold that reads as text on light surfaces */
    --gold-hover: #d99400;

    /* Surfaces / text (LIGHT) */
    --bg: #eef1f7;
    --panel: #ffffff;
    --card: #ffffff;
    --card2: #f4f6fc;
    --line: #dce3f0;
    --line2: #eaeef7;
    --ink: #0d1b3e;
    --strong: var(--navy);     /* emphasis text — remapped to ink in dark */
    --muted: #5a6889;
    --dim: #8b97b5;
    --beige: #fdf1da;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 32, 80, .05), 0 10px 26px -20px rgba(16, 32, 80, .35);

    /* Links / actions */
    --link: #2563c9;
    --link-hover: #1d4ea0;
    --blue: var(--link);
    --blue-hover: var(--link-hover);
    --primary: var(--gold);
    --primary-ink: var(--navy);
    --focus-ring: rgba(37, 99, 201, .40);

    /* Status */
    --ok: #0f9d63;   --ok-bg: #e4f6ee;
    --warn: #b7791f; --warn-bg: #fdf1da;
    --err: #d64545;  --err-bg: #fbe9e9;
    --info: #2563c9; --info-bg: #e7f0fd;
    /* Legacy aliases (kept so existing markup keeps resolving) */
    --ok-ink: var(--ok); --warn-ink: var(--warn); --err-ink: var(--err); --info-ink: var(--info);

    /* Left icon rail — brand navy in BOTH themes for continuity */
    --rail-bg: var(--navy);
    --rail-line: #0c2c63;
    --rail-ink: rgba(255, 255, 255, .55);
    --rail-ink-strong: #ffffff;
    --rail-hover: rgba(255, 255, 255, .08);
    --rail-active-bg: rgba(251, 172, 0, .18);
    --rail-avatar-bg: #16305f;
    --rail-avatar-ink: #cdd8ef;
}

/* Dark, chosen explicitly (wins over an opposing OS setting) */
:root[data-theme="dark"] {
    --bg: #070f24; --panel: #0b1631; --card: #0e1c3d; --card2: #122349;
    --line: #20315b; --line2: #182746;
    --ink: #eaf1ff; --strong: var(--ink); --muted: #8ea0c9; --dim: #63739b;
    --beige: rgba(255, 194, 61, .08); --gold2: #ffc23d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .7);
    --link: #8fbaff; --link-hover: #b6d2ff; --focus-ring: rgba(91, 155, 255, .50);
    --ok: #37d495;   --ok-bg: rgba(55, 212, 149, .14);
    --warn: #ffc23d; --warn-bg: rgba(255, 194, 61, .14);
    --err: #ff6b6b;  --err-bg: rgba(255, 107, 107, .14);
    --info: #5b9bff; --info-bg: rgba(91, 155, 255, .14);
}

/* Dark by OS setting — unless the user explicitly picked light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #070f24; --panel: #0b1631; --card: #0e1c3d; --card2: #122349;
        --line: #20315b; --line2: #182746;
        --ink: #eaf1ff; --strong: var(--ink); --muted: #8ea0c9; --dim: #63739b;
        --beige: rgba(255, 194, 61, .08); --gold2: #ffc23d;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .7);
        --link: #8fbaff; --link-hover: #b6d2ff; --focus-ring: rgba(91, 155, 255, .50);
        --ok: #37d495;   --ok-bg: rgba(55, 212, 149, .14);
        --warn: #ffc23d; --warn-bg: rgba(255, 194, 61, .14);
        --err: #ff6b6b;  --err-bg: rgba(255, 107, 107, .14);
        --info: #5b9bff; --info-bg: rgba(91, 155, 255, .14);
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbars — one brand style everywhere. A slim token-coloured pill inset by a
   transparent border (background-clip keeps it inset over any surface). */
html { scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

button, input, select, textarea { font-family: inherit; }

h1 { font-family: var(--font-display); font-size: 1.4rem; margin: 0; color: var(--strong); font-weight: 600; letter-spacing: -.01em; }
h2.h5 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 .75rem; font-weight: 600; color: var(--strong); }
.h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--strong); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: var(--font-mono); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- App shell (global so it reaches NavLink / ThemeToggle child components) ---------- */
.app { display: grid; grid-template-columns: 64px 1fr; min-height: 100vh; background: var(--bg); }
.navrail {
    background: var(--rail-bg); border-right: 1px solid var(--rail-line);
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 0; gap: 6px; position: sticky; top: 0; height: 100vh;
}
.rail-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--gold), #d99400);
    display: flex; align-items: center; justify-content: center;
    color: #0b1631; font-family: var(--font-display); font-weight: 700; font-size: 17px;
    margin-bottom: 14px; text-decoration: none;
}
.rail-mark:hover { text-decoration: none; }
.rail-nav { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-btn {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: var(--rail-ink); cursor: pointer; border: none; background: none;
    transition: background .12s ease, color .12s ease;
}
.rail-btn:hover { background: var(--rail-hover); color: var(--rail-ink-strong); text-decoration: none; }
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn.active { background: var(--rail-active-bg); color: var(--gold); }
.rail-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.rail-spacer { flex: 1; }
.rail-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--rail-avatar-bg); color: var(--rail-avatar-ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px; text-decoration: none;
}
.rail-avatar:hover { text-decoration: none; filter: brightness(1.12); }
.app-main { min-width: 0; padding: 26px 30px; }

/* Cards & layout */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.card.narrow, .narrow { max-width: 560px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; gap: 1rem; }
.head-actions { display: flex; gap: .5rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
/* While a page navigation is in flight (e.g. opening a draft), show a wait cursor over the list. */
.await-nav, .await-nav * { cursor: wait !important; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    padding: .45rem .9rem; border-radius: var(--radius); font-size: .9rem; font-weight: 500; text-decoration: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { border-color: var(--dim); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 88, 252, .30); border-color: var(--blue); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--primary-ink); font-weight: 600; }
.btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #fff; }
.btn-sm { padding: .25rem .55rem; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; margin-top: .5rem; }
.btn-link { border: none; background: none; color: var(--blue); }
.btn .danger, .btn.danger { color: var(--err-ink); border-color: #f0c9c9; }
.linkbtn { border: none; background: none; color: var(--blue); cursor: pointer; padding: 0 .25rem; font-size: .82rem; }
.linkbtn:hover { color: var(--blue-hover); text-decoration: underline; }

/* Forms */
.field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; flex: 1; }
.field > span { font-size: .82rem; color: var(--muted); }
.input { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem; font-size: .9rem; width: 100%; background: var(--card); color: var(--ink); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 88, 252, .25); }
.input.sm { padding: .25rem .4rem; font-size: .82rem; }

/* Settings page */
.settings-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.h6 { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1.1rem 0 .5rem; }
.settings-fs { border: none; margin: 0; padding: 0; min-width: 0; }
.settings-fs:disabled .input { background: var(--card); opacity: .8; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .25rem 1rem; }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.approve-row { display: flex; gap: .75rem; align-items: flex-end; margin-bottom: .5rem; }

/* Tables */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
table.grid tr.dup { background: var(--beige); }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover { background: var(--card2); }
table.grid tr.explain-row td { background: var(--card2); }
.row-actions { display: flex; gap: .35rem; white-space: nowrap; }

/* Badges */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.err { background: var(--err-bg); color: var(--err-ink); }
.badge.info { background: var(--info-bg); color: var(--info-ink); }
.badge.lock { background: var(--card2); color: var(--muted); }

/* UI-07: one unified sourcing-tier cue (mirrors the MATCH-03 tiers) — square-ish + uppercase so it reads as a
   distinct taxonomy from the pill status badges. In stock / Acumatica / Vendor only / Unresolved. */
.tier { display: inline-block; padding: .1rem .45rem; border-radius: 5px; font-size: .7rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .03em; border: 1px solid transparent; white-space: nowrap; }
.tier-stock { background: var(--ok-bg); color: var(--ok-ink); border-color: #bfe3cd; }
.tier-acu { background: var(--info-bg); color: var(--info-ink); border-color: #c3d8ff; }
.tier-vendor { background: var(--warn-bg); color: var(--warn-ink); border-color: #f0dfae; }
.tier-unresolved { background: var(--err-bg); color: var(--err-ink); border-color: #f4c9c9; }

/* Task 1.6: provenance pills — where a resolved value came from. A third, distinct axis from the round status
   .badge and the square .tier chip: a soft pill with a color-keyed dot, low-weight so it annotates, not shouts. */
.prov { display: inline-flex; align-items: center; gap: 5px; padding: .05rem .5rem; border-radius: 999px;
        font-size: .72rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.prov .prov-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.prov-doc { background: var(--info-bg); color: var(--info-ink); } .prov-doc .prov-dot { background: var(--blue); }
.prov-matched { background: var(--info-bg); color: var(--info); } .prov-matched .prov-dot { background: var(--info); }
.prov-history { background: var(--ok-bg); color: var(--ok-ink); } .prov-history .prov-dot { background: var(--ok-ink); }
.prov-vendor { background: var(--warn-bg); color: var(--warn-ink); } .prov-vendor .prov-dot { background: var(--gold-hover); }
.prov-user { background: var(--card2); color: var(--ink); } .prov-user .prov-dot { background: var(--muted); }
.prov-default { background: var(--card2); color: var(--muted); } .prov-default .prov-dot { background: var(--dim); }

/* Banners */
.banner { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; border-left: 3px solid transparent; }
.banner.ok { background: var(--ok-bg); color: var(--ok-ink); border-left-color: var(--ok-ink); }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); border-left-color: var(--gold); }
.banner.err { background: var(--err-bg); color: var(--err-ink); border-left-color: var(--err-ink); }
.error { color: var(--err-ink); margin-top: .5rem; }

/* Summary grid */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem 1.25rem; }
.summary-grid .k { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Issues + explanation */
.issues { margin: 0; padding-left: 1.1rem; }
.issues li { margin-bottom: .3rem; }
.detail { display: flex; flex-direction: column; gap: .6rem; padding: .2rem 0; }
.detail-section { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--strong); border-bottom: 1px solid var(--line); padding-bottom: .25rem; }
.explain-why { font-size: .74rem; font-weight: 600; color: var(--muted); margin-top: .1rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .4rem 1.25rem; }
.detail-grid .k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Units: source request vs matched-item selling unit, with an editable order qty/UOM */
.units { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.5rem; margin: .1rem 0 .4rem; }
.units .k { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.units .unit-val { font-size: .95rem; }
.units .uom { font-weight: 600; }
.units .unit-edit { display: flex; flex-direction: column; gap: .2rem; }
.units .unit-edit .k { margin-bottom: .05rem; }
.units .unit-edit input { display: inline-block; }
.units .input.num { width: 6rem; text-align: right; }
.units .input.uom-in { width: 6rem; margin-left: .35rem; }
.units .unit-edit > input:first-of-type { margin-left: 0; }
.units .unit-suggest { display: flex; align-items: center; gap: .5rem; flex-basis: 100%; margin-top: .15rem; }

.newitem-panel { border: 1px solid #f0dfae; background: var(--beige); border-radius: var(--radius); padding: .6rem .8rem; }
.newitem-panel p { margin: .3rem 0 .5rem; }
.explain ul { margin: .3rem 0; padding-left: 1.1rem; }
.explain li.penalty { color: var(--err-ink); }
.explain .fk { font-weight: 600; }
.explain .fw { color: var(--muted); font-size: .8rem; }
.search-results { list-style: none; margin: .4rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.search-results li { padding: .2rem .5rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .4rem; }
.search-results li:last-child { border-bottom: none; }

/* Compact match/candidate tables + ranked customer candidates (Phase 6) */
table.grid.sm th, table.grid.sm td { padding: .3rem .5rem; font-size: .85rem; }
table.grid tr.sel { background: var(--ok-bg); }
.candidates { margin-top: .6rem; }
.candidate-list { list-style: none; margin: .3rem 0 0; padding: 0; }
.candidate-list li { display: flex; align-items: center; gap: .5rem; padding: .3rem .1rem; border-bottom: 1px solid var(--line); }
.candidate-list li:last-child { border-bottom: none; }
.candidate-list li.sel { background: var(--ok-bg); }

/* Line-detail match cards (Acumatica / Vendor Price List sections) */
.match-group { display: flex; flex-direction: column; gap: .4rem; margin-top: .2rem; }
.detail-section .count { display: inline-block; margin-left: .45rem; min-width: 1.1rem; text-align: center;
    padding: .02rem .4rem; background: var(--line); color: var(--muted); border-radius: 999px; font-size: .7rem; font-weight: 700; }

.match { display: grid; grid-template-columns: 84px 1fr 116px; gap: .75rem; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; }
.match.is-sel { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); background: var(--beige); }
.match-select { display: flex; }
.match-body { min-width: 0; }
.match-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.match-id { font-size: .88rem; font-weight: 600; color: var(--strong); }
.match-desc { margin-top: .15rem; }
.match-terms { margin-top: .1rem; }
.tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
    border: 1px solid var(--line); border-radius: 2px; padding: 0 .3rem; line-height: 1.35; }

.chip { font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px;
    background: var(--card2); color: var(--muted); white-space: nowrap; }
.chip-strong { background: var(--ok-bg); color: var(--ok-ink); }
.chip-mod { background: var(--warn-bg); color: var(--warn-ink); }
.chip-vendor { background: var(--info-bg); color: var(--info-ink); }
.chip-stock { background: var(--card2); color: var(--ink); }
.chip-price { background: var(--ok-bg); color: var(--ok-ink); font-variant-numeric: tabular-nums; }
.chip-uom { background: var(--card2); color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }

.match-score { text-align: right; }
.score-pct { font-size: 1.15rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.score-pct .pct { font-size: .7rem; font-weight: 600; margin-left: 1px; }
.score-pct.ok { color: var(--ok-ink); } .score-pct.warn { color: var(--warn-ink); } .score-pct.err { color: var(--err-ink); }
.meter { height: 5px; background: var(--line); border-radius: 999px; margin: .3rem 0 .25rem; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; }
.meter > i.ok { background: var(--ok-ink); } .meter > i.warn { background: var(--gold); } .meter > i.err { background: var(--err-ink); }
.match-source { font-size: .66rem; color: var(--muted); }

/* Labeled vendor row inside a match card */
.match-vendor { display: flex; align-items: baseline; gap: .45rem; margin-top: .2rem; font-size: .82rem; }
.match-vendor .vlabel, .match-vendors .vlabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.match-vendor .vval { color: var(--ink); }

/* All-vendors ("sources") list inside a match card */
.match-vendors { margin-top: .25rem; font-size: .82rem; }
.match-vendors ul { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.match-vendors li { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.match-vendors .vname { color: var(--ink); font-weight: 600; }
.match-vendors .vmeta { font-variant-numeric: tabular-nums; }
.match-vendors .pref { font-size: .66rem; font-weight: 700; color: var(--ok-ink); background: var(--ok-bg); border-radius: 999px; padding: 0 .4rem; }
/* See-all-vendors control + expanded vendor table (inline expand) */
.match-vendors .vhead { display: flex; align-items: center; gap: .5rem; }
.match-vendors .see-all { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--line); background: var(--beige); color: var(--gold-hover); border-radius: 999px;
    padding: .1rem .55rem; font-size: .72rem; font-weight: 600; cursor: pointer; }
.match-vendors .see-all:hover { border-color: var(--gold); }
.match-vendors .see-all svg { width: 11px; height: 11px; }
.match-vendors .vpref { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }
.match-vendors .vtable { margin-top: .3rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.match-vendors .vrow { display: grid; grid-template-columns: 1.5fr .7fr .6fr 1.1fr; gap: .5rem; align-items: center;
    padding: .3rem .55rem; font-size: .8rem; border-top: 1px solid var(--line); }
.match-vendors .vrow:first-child { border-top: none; }
.match-vendors .vrow.head { background: var(--card2); color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.match-vendors .vrow.is-pref { background: var(--beige); box-shadow: inset 3px 0 0 var(--gold); }
.match-vendors .vrow .num { font-variant-numeric: tabular-nums; }
.match-vendors .vrow .vn { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .35rem; }
.match-vendors .vrow .vpart { font-family: "Cascadia Code", ui-monospace, monospace; font-size: .74rem; color: var(--muted); }

/* Source tags on manual-search results */
.tag-acu { color: var(--info-ink); border-color: #c6d8ff; background: var(--info-bg); }
.tag-vendor { color: var(--warn-ink); border-color: #f0dfae; background: var(--warn-bg); }

/* Document → Acumatica mapping (Order Details) */
.map { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 .75rem; }
.map-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.3fr); gap: .75rem; align-items: start; }
.map-headrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600;
    border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.map-label { font-size: .82rem; font-weight: 600; color: var(--strong); padding-top: .5rem; }
.map-source { font-size: .85rem; color: var(--muted); padding-top: .5rem; word-break: break-word; }
.req { color: var(--gold-hover); font-weight: 700; }
.src-line { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; margin: 0 0 .6rem; }
.src-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--info-ink);
    background: var(--info-bg); border-radius: 999px; padding: .05rem .45rem; }

@media (max-width: 640px) {
    .map-row { grid-template-columns: 1fr; gap: .15rem; }
    .map-label, .map-source { padding-top: 0; }
    .map-headrow { display: none; }
}

/* Why / score breakdown (native disclosure) */
details.why { margin-top: .1rem; }
details.why > summary { cursor: pointer; font-size: .74rem; font-weight: 600; color: var(--blue); list-style: none; }
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::before { content: "▸ "; }
details.why[open] > summary::before { content: "▾ "; }
details.why[open] > summary { margin-bottom: .35rem; }
ul.factors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ul.factors li { display: grid; grid-template-columns: 132px 1fr auto; gap: .5rem; align-items: baseline;
    font-size: .82rem; padding: .18rem 0; border-bottom: 1px dashed var(--line); }
ul.factors li:last-child { border-bottom: none; }
ul.factors .f-kind { color: var(--strong); font-weight: 600; }
ul.factors .f-weight { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
ul.factors li.pos .f-weight { color: var(--ok-ink); }
ul.factors li.neg .f-weight { color: var(--err-ink); }
ul.factors li.neg .f-detail { color: var(--err-ink); }

@media (max-width: 640px) {
    .match { grid-template-columns: 1fr; gap: .4rem; }
    .match-score { text-align: left; }
    ul.factors li { grid-template-columns: 1fr auto; }
    ul.factors .f-detail { grid-column: 1 / -1; }
}

/* Login */
.login-card { width: 360px; border-top: 3px solid var(--gold); }
.login-card .btn-block { margin-top: 1rem; }
.login-logo { display: block; height: 34px; width: auto; margin-bottom: 1.25rem; }

/* Source-file download link (truncates long names) */
.file-link { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Modal dialog */
.modal-overlay {
    position: fixed; inset: 0; z-index: 50; padding: 1rem;
    display: grid; place-items: center;
    background: rgba(0, 32, 92, .45);           /* navy scrim */
    animation: fade-in .12s ease;
}
.modal {
    background: var(--card); width: 460px; max-width: 100%;
    border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius);
    padding: 1.25rem 1.35rem; box-shadow: 0 24px 60px -24px rgba(0, 32, 92, .5);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.modal-head h2 { margin: 0; }
.modal-close { border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .25rem; }
.modal-close:hover { color: var(--ink); }
.modal-close:disabled { opacity: .4; cursor: not-allowed; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
/* Line-items bulk-action toolbar (Review grid: batch assign to Temp ID) */
.linetools { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; padding: .5rem .7rem; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius); }
.linetools .lt-count { font-weight: 600; color: var(--ink); margin-right: auto; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Document preview modal */
.preview-modal { width: min(1080px, 96vw); height: min(88vh, 900px); display: flex; flex-direction: column; }
.preview-modal > :not(.modal-head) { min-height: 0; overflow: auto; }
.preview-actions { display: flex; align-items: center; gap: .5rem; }
.preview-modal .modal-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Document/message previews render source content authored for paper — always a
   white surface with dark text, regardless of the app theme (the modal chrome
   around them stays themed). */
.preview-frame { width: 100%; height: 100%; min-height: 60vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preview-frame.email-body { min-height: 40vh; }
.preview-text { margin: .3rem 0; padding: .6rem .8rem; background: #fff; color: #1e1e1e; border: 1px solid #e2e7ef; border-radius: var(--radius);
    font-family: "Cascadia Code", ui-monospace, monospace; font-size: .82rem; white-space: pre-wrap; word-break: break-word; }
.preview-sheet { margin-bottom: 1rem; }
.preview-tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); max-height: 60vh; background: #fff; }
table.preview-xl td { border: 1px solid #e2e7ef; color: #1e1e1e; padding: .2rem .45rem; white-space: nowrap; font-size: .82rem; }
table.preview-xl tr:nth-child(odd) td { background: #f7f9fc; }
.email-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .25rem 1.25rem;
    padding: .6rem .8rem; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; }
.email-head .k { display: inline-block; min-width: 3.5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.email-atts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.email-atts .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.att-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .82rem; }

/* Quote Header screen — SO header form + Acumatica-style lookup fields */
.soh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.1rem; }
.lookup { display: flex; gap: .35rem; }
.lookup .input { flex: 1; min-width: 0; }
.lookup-btn { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 0 .6rem; cursor: pointer; font-size: 1rem; line-height: 1; }
.lookup-btn:hover { border-color: var(--blue); }
.lookup-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Fixed size so the dialog doesn't grow/shrink as results filter — only the results table scrolls. */
.picker-modal { width: min(840px, 96vw); height: min(70vh, 620px); display: flex; flex-direction: column; }
.picker-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.picker-wrap table.grid tr.clickable:hover { background: var(--card2); }
/* Task 2.2: one-click search seeds from the document's own values */
.picker-seeds { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip-btn { border: 1px solid var(--line); background: var(--beige); color: var(--gold-hover); border-radius: 999px;
    padding: .1rem .6rem; font-size: .78rem; font-weight: 600; cursor: pointer; }
.chip-btn:hover { border-color: var(--gold); }

/* Quote Header: form beside the source preview */
.header-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.header-form { margin-bottom: 0; }
.header-preview { position: sticky; top: 1rem; }
.preview-embed-inner { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold);
    border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 7rem); }
.preview-embed-inner > :not(.modal-head) { min-height: 0; overflow: auto; }
.preview-embed-inner .preview-frame { min-height: 55vh; }
@media (max-width: 1000px) { .header-2col { grid-template-columns: 1fr; } .header-preview { position: static; } }

/* Upload dropzone (wraps a hidden InputFile) */
.dropzone {
    display: block; margin-top: .75rem; padding: 1.5rem 1rem; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--card2); color: var(--muted);
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.dropzone:hover { border-color: var(--gold); background: var(--beige); color: var(--ink); }
.dropzone.busy { cursor: default; border-style: solid; border-color: var(--gold); background: var(--beige); color: var(--ink); }
.dropzone.disabled { cursor: not-allowed; opacity: .55; }
.dropzone.disabled:hover { border-color: var(--line); background: var(--card2); color: var(--muted); }
.dropzone input[type=file] { display: none; }
.dropzone-text { font-size: .92rem; }

/* ============================================================================
   Quote Review Redesign — Order-review dashboard + line-match workspace.
   Extends the existing vocabulary (.card, .tier*, .chip*, .match, .factors);
   these rules add only the new dashboard hero, KPI tiles, triage list and the
   focused line-workspace chrome. Brand tokens + tier colors are reused as-is.
   ============================================================================ */

/* ---- Order-health hero (dashboard) ---- */
.health-hero { border-top: 3px solid var(--gold); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.05fr); gap: 1.5rem; align-items: center; }
.hero .divider { background: var(--line); align-self: stretch; }
.health { display: flex; align-items: center; gap: 1.25rem; }
.ring { flex: none; }
.health-copy .lead { font-size: 1.35rem; font-weight: 600; color: var(--strong); letter-spacing: -.01em; line-height: 1.25; }
.health-copy .lead b { color: var(--ok-ink); }
.health-copy p { margin: .35rem 0 0; color: var(--muted); }
.health-copy .attn { color: var(--err-ink); font-weight: 600; }
.health-copy .ok-text { color: var(--ok-ink); font-weight: 600; }

.mix-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.mix-head .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.mixbar { display: flex; height: 20px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.mixbar > span { display: block; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.25rem; margin-top: .7rem; }
.legend .lg { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.legend .dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend .lg .n { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--strong); }

/* ---- KPI tiles ---- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.kpi.flag { border-top: 3px solid var(--gold); }
.kpi .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.kpi .v { font-size: 1.65rem; font-weight: 700; color: var(--strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .v.warnv { color: var(--warn-ink); } .kpi .v.errv { color: var(--err-ink); } .kpi .v.okv { color: var(--ok-ink); }
.kpi .s { font-size: .76rem; color: var(--muted); }

/* ---- Triage "needs attention" list ---- */
.issue-list { display: flex; flex-direction: column; gap: .6rem; }
.issue { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .9rem; align-items: center;
    border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; background: var(--card); }
.issue.sev-err { border-left-color: var(--err-ink); } .issue.sev-warn { border-left-color: var(--gold); }
.issue .ln { font-family: "Cascadia Code", ui-monospace, monospace; font-size: .9rem; color: var(--muted); text-align: center; }
.issue .desc { font-weight: 500; color: var(--ink); }
.issue .why { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.issue .meta { display: flex; align-items: center; gap: .6rem; }
.issue .stack { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.issue .conf { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; text-align: right; }
.issue .conf.ok { color: var(--ok-ink); } .issue .conf.warn { color: var(--warn-ink); } .issue .conf.err { color: var(--err-ink); }
.issue .conf small { font-weight: 600; font-size: .66rem; color: var(--muted); display: block; letter-spacing: .03em; }

/* ---- Line workspace: navigator + queue ---- */
.linenav { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .55rem .8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.linenav .pos { font-weight: 600; color: var(--strong); }
.linenav .pos .of { color: var(--muted); font-weight: 500; }
.queue { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.queue .qlabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-right: .2rem; }
.qchip { font-family: "Cascadia Code", ui-monospace, monospace; font-size: .8rem; padding: .15rem .5rem; border-radius: 999px;
    border: 1px solid var(--line); color: var(--muted); background: var(--card); cursor: pointer; }
.qchip.done { color: var(--ok-ink); background: var(--ok-bg); border-color: #bfe3cd; }
.qchip.cur { color: #fff; background: var(--navy); border-color: var(--strong); font-weight: 700; }
.qchip.err { color: var(--err-ink); background: var(--err-bg); border-color: #f4c9c9; }

/* ---- Line workspace: two-column body ---- */
.work { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 1.1rem; align-items: start; margin-bottom: 1.1rem; }
/* Left column stacks the customer request + the score breakdown at the same width; matches stay in the right column. */
.work-left { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.src-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.src-desc { font-size: 1.15rem; font-weight: 600; color: var(--strong); line-height: 1.3; }
.kv { display: flex; flex-direction: column; gap: .55rem; margin-top: .3rem; }
.kv .row { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; align-items: baseline; }
.kv .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.kv .v { color: var(--ink); }
.kv .uom { font-weight: 600; }

/* ---- Line workspace: unit suggestion + footer ---- */
.unit-suggest .grow { flex: 1; }
.footer-actions { display: flex; align-items: center; gap: .75rem; justify-content: flex-end;
    background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius);
    padding: .8rem 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.footer-actions .spacer { margin-right: auto; color: var(--muted); font-size: .88rem; }
.btn.btn-lg { padding: .55rem 1.1rem; font-size: .95rem; }
/* Action-bar groups: nav pair + the "resolve this line" tray that holds the no-match actions (incl. Assign to Temp ID). */
.fgroup { display: flex; align-items: center; gap: .5rem; }
.resolve-tray { display: flex; align-items: center; gap: .5rem; background: var(--beige); border: 1px solid #f0dfae;
    border-radius: var(--radius); padding: .3rem .5rem; }
.resolve-tray .rt-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-hover); font-weight: 700; }
.btn.btn-navy { background: var(--navy); border-color: var(--strong); color: #fff; font-weight: 600; }
.btn.btn-navy:hover { background: #001743; border-color: #001743; color: #fff; }
/* Persistent "this line's selected item" strip in the workspace — shows the current pick even when it came from
   the search box and isn't one of the ranked candidates. Mirrors the selected-match look (beige + gold rail). */
.selected-item { display: flex; align-items: center; gap: .55rem; background: var(--beige); border: 1px solid var(--line);
    border-left: 3px solid var(--gold); border-radius: var(--radius); padding: .5rem .7rem; margin-bottom: .7rem; }
.selected-item svg { color: var(--ok-ink); flex: none; }
.selected-item .sel-body { flex: 1; min-width: 0; }
.selected-item .sel-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-hover); font-weight: 700; margin-right: .35rem; }
.selected-item .sel-desc { color: var(--ink); font-size: .9rem; }
.search-results li.is-sel { background: var(--beige); box-shadow: inset 3px 0 0 var(--gold); }
/* Per-warehouse on-hand rows on a match card (line workspace) — each selects the item + that warehouse in one click. */
.wh-rows { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.wh-rows .vlabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.wh-row { display: inline-flex; align-items: baseline; gap: .35rem; cursor: pointer; border: 1px solid var(--line);
    background: var(--card); color: var(--ink); border-radius: 999px; padding: .1rem .55rem; font-size: .8rem; }
.wh-row:hover { border-color: var(--gold); }
.wh-row .wh-code { font-weight: 600; }
.wh-row .wh-qty { color: var(--muted); font-variant-numeric: tabular-nums; }
.wh-row.is-sel { background: var(--beige); border-color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
.wh-row.is-sel .wh-qty { color: var(--gold-hover); }
.wh-row:disabled { opacity: .6; cursor: default; }

/* Enriched availability + min/max levels table (MinMaxLevels GI) — MatchCard. */
.chip-repl { background: var(--info-bg); color: var(--info-ink); }
.wh-sec .wh-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin: .35rem 0 .3rem; }
.lvltab { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .8rem; }
.lvl-row { display: grid; grid-template-columns: 84px 1fr 1fr .7fr .7fr 1.1fr; gap: .5rem; align-items: center;
    padding: .3rem .6rem; border-top: 1px solid var(--line); width: 100%; background: var(--card); text-align: left;
    font: inherit; color: var(--ink); border-left: none; border-right: none; cursor: pointer; }
.lvl-row:first-child { border-top: none; }
.lvl-row.head { background: var(--card2); color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; cursor: default; }
.lvl-row.low { background: var(--warn-bg); }
.lvl-row.out { color: var(--muted); }
.lvl-row.is-src { background: var(--beige); box-shadow: inset 3px 0 0 var(--gold); }
button.lvl-row:hover:not(:disabled):not(.head) { background: var(--card2); }
button.lvl-row:disabled { cursor: default; }
.lvl-row .whc { font-weight: 700; color: var(--strong); display: flex; align-items: center; gap: .35rem; }
.lvl-row .srctag { font-size: .58rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--gold-hover); background: var(--card); border: 1px solid #f0dfae; border-radius: 999px; padding: 0 .3rem; }
.lvl-row .n { text-align: right; font-variant-numeric: tabular-nums; }
.lvl-row .n.avail { font-weight: 700; color: var(--ok-ink); }
.lvl-row.low .n.avail { color: var(--warn-ink); }
.lvl-row.out .n.avail { color: var(--err-ink); }
.lvl-row .st { justify-self: start; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .02rem .45rem; }
.lvl-row .st.ok { background: var(--ok-bg); color: var(--ok-ink); }
.lvl-row .st.warn { background: var(--warn-bg); color: var(--warn-ink); }
.lvl-row .st.err { background: var(--err-bg); color: var(--err-ink); }

/* ---- Drafts list: faceted sidebar + search ---- */
.qsearch { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: .45rem .55rem; margin-bottom: 1rem; }
.qsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 88, 252, .14); }
.qsearch input { border: none; outline: none; flex: 1; min-width: 0; font: inherit; font-size: .88rem; color: var(--ink); background: transparent; }
.qsearch svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.qsearch-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .15rem; }
.facet { margin-bottom: 1.1rem; }
.facet-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--strong); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: .3rem; margin-bottom: .5rem; }
.frow { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; cursor: pointer; font-size: .88rem; color: var(--ink); }
.frow input { accent-color: var(--strong); }
.frow .fn { flex: 1; }
.frow .fc { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .8rem; }
.frow.on { color: var(--strong); font-weight: 600; }
.frow.on .fc { color: var(--gold-hover); }
.result-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; flex-wrap: wrap; }
.result-head .count { color: var(--muted); font-size: .88rem; }
.result-head .count b { color: var(--ink); }
.cust-name { color: var(--strong); font-weight: 600; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.email-badge { font-weight: 600; letter-spacing: .01em; }
.hmeta { margin-top: .2rem; font-size: .78rem; color: var(--muted); display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* Draft queue — card rows (replaces the old table; lock shown inline, not as a column). */
.draft-rows { display: flex; flex-direction: column; gap: .5rem; }
.drow { display: grid; grid-template-columns: 150px 1fr 210px; gap: 1rem; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; }
.drow:hover { border-color: var(--line); }
.dleft { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.dnum { font-weight: 600; color: var(--strong); font-size: .9rem; }
.dmid { min-width: 0; }
.dright { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.dstats { font-size: .8rem; color: var(--muted); display: flex; gap: .55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dstats b { color: var(--ink); font-weight: 600; }
.dactions { display: flex; gap: .4rem; align-items: center; }
.locktag { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; color: var(--muted);
    background: var(--card2); border-radius: 999px; padding: .05rem .5rem; white-space: nowrap; }
@media (max-width: 900px) { .drow { grid-template-columns: 130px 1fr; } .dright { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero .divider { display: none; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .work { grid-template-columns: 1fr; }
    .queue { margin-left: 0; flex-basis: 100%; }
}

/* ---- Ranked customer + location match (Quote Header suggestions) ---- */
.cust-suggest { border-top: 3px solid var(--gold); }
.cust-cands { display: flex; flex-direction: column; gap: .5rem; }
.cust-cand { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .9rem; align-items: center;
    border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; background: var(--card); }
.cust-cand.sel { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); background: var(--beige); }
.cust-cand .cc-score { text-align: center; }
.cust-cand .conf-pct { font-size: 1.35rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cust-cand .conf-pct .pct { font-size: .7rem; font-weight: 600; margin-left: 1px; }
.cust-cand .conf-pct.ok { color: var(--ok-ink); } .cust-cand .conf-pct.warn { color: var(--warn-ink); } .cust-cand .conf-pct.err { color: var(--err-ink); }
.cust-cand .cc-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.cust-cand .cc-name { font-weight: 600; color: var(--strong); font-size: 1rem; }
.cust-cand .cc-terms, .cust-cand .cc-loc { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.cust-cand .vlabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.cust-cand .cc-locval { color: var(--ink); font-weight: 500; }

@media (max-width: 640px) {
    .cust-cand { grid-template-columns: 52px minmax(0, 1fr); }
    .cust-cand .cc-action { grid-column: 1 / -1; }
}

/* Task 2.2: Customer/Location reconcile — the document (source) on the left, Acumatica resolution on the right. */
.reconcile { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
.src-panel { background: var(--beige); border: 1px solid #e8dcc0; border-radius: var(--radius); padding: .9rem 1rem; }
.src-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-hover); font-weight: 700; margin-bottom: .7rem; }
.src-panel .src-row { display: flex; flex-direction: column; gap: 1px; margin-bottom: .6rem; }
.src-panel .vlabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.src-panel .src-val { font-size: .9rem; color: var(--ink); font-weight: 500; }
.src-panel .src-file { margin-top: .3rem; padding-top: .6rem; border-top: 1px solid #e8dcc0; }
.resolve-panel { display: flex; flex-direction: column; gap: 1.1rem; }
.resolve-head { font-size: .95rem; font-weight: 600; color: var(--strong); margin-bottom: .5rem; }
@media (max-width: 720px) { .reconcile { grid-template-columns: 1fr; } }

/* Phase 3 — Quote Header field cells (Direction B): a labelled row per SO-header field, value + provenance +
   an optional search-dialog "Change". Mirrors the reconcile source/resolve split above. */
.fcells { display: flex; flex-direction: column; gap: .5rem; }
.fcell { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .7rem; }
.fcell.attn { border-color: #f0dfae; background: var(--beige); }
.fcell .flabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.fcell .fval { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.fcell .fval b { font-weight: 600; color: var(--ink); }
.fcell .fval .unset { color: var(--warn-ink); font-weight: 600; font-style: italic; }
.fcell .fval .input.sm { min-width: 12rem; max-width: 100%; }
.clearbtn { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1;
    padding: 0 .2rem; border-radius: var(--radius); }
.clearbtn:hover { color: var(--err-ink); }
.pending-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--beige);
    border: 1px solid #e8dcc0; border-radius: var(--radius); padding: .5rem .7rem; }
@media (max-width: 720px) { .fcell { grid-template-columns: 1fr; } }

/* ===== Unified tabbed Review screen ===== */
.review-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rt-left { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: .16rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.sp-info { background: var(--info-bg); color: var(--info-ink); }
.status-pill.sp-warn { background: var(--warn-bg); color: var(--warn-ink); }
.status-pill.sp-err { background: var(--err-bg); color: var(--err-ink); }
.status-pill.sp-ok { background: var(--ok-bg); color: var(--ok-ink); }
.srclink { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--blue); }
.srclink .linkbtn { font-size: .85rem; }
.goldline { height: 3px; background: var(--gold); border-radius: 2px; margin: .7rem 0 14px; }
.dash-pending { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 1px dashed var(--line);
    border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 12px; }
.dash-pending .dp-title { font-weight: 600; color: var(--ink); }
.rtabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); }
.rtab { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; font-size: .92rem; font-weight: 600;
    color: var(--muted); cursor: pointer; border: none; background: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.rtab:hover:not(:disabled) { color: var(--ink); }
.rtab.active { color: var(--strong); border-bottom-color: var(--gold); }
.rtab.locked, .rtab:disabled { color: #b4bcc8; cursor: not-allowed; }
.rtab .cnt { background: var(--warn-bg); color: var(--warn-ink); border-radius: 999px; padding: .02rem .42rem; font-size: .72rem; font-weight: 700; }
.rtab .lockico { width: 13px; height: 13px; }
.tabpanel { background: var(--card); border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius) var(--radius);
    padding: 1rem 1.15rem; max-height: 62vh; overflow: auto; }
/* Quote Header tab: the "From the document" panel stays put — only the resolve column scrolls. */
.tabpanel.header { max-height: none; overflow: visible; }
.tabpanel.header .resolve-panel { max-height: 440px; overflow-y: auto; padding-right: .4rem; }
@media (max-width: 720px) { .tabpanel.header .resolve-panel { max-height: none; overflow: visible; } }

/* Processing stages */
.stages { list-style: none; margin: 0; padding: 0; }
.stages li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; color: var(--muted); }
.stages li .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); flex: none; }
.stages li.active { color: var(--ink); font-weight: 600; }
.stages li.active .dot { background: var(--gold); animation: pulse 1s infinite; }
.stages li.done { color: var(--ok-ink); }
.stages li.done .dot { background: var(--ok-ink); }
.stages li .count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--strong); font-weight: 600; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---- Intake queues admin (/settings/queues) — extends .card/.grid/.badge/.modal vocab ---- */
.grid td.row-actions, td.row-actions { white-space: nowrap; text-align: right; }
.row-actions { display: inline-flex; gap: .4rem; justify-content: flex-end; }
th.col-actions { width: 1%; }
.picker-confirm { padding: .25rem .1rem; }
.addr-edit { display: flex; align-items: stretch; }
.addr-edit .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.addr-suffix { display: inline-flex; align-items: center; padding: 0 .6rem; border: 1px solid var(--line);
    border-left: none; border-radius: 0 var(--radius) var(--radius) 0; background: var(--beige); color: var(--muted); }
.senders-input { font-family: "Cascadia Code", ui-monospace, monospace; resize: vertical; min-height: 4.5rem; }

/* ============================================================================
   Phase 2 — Draft queue (command center): command bar + status chips + dense
   selectable rows on the left, a readiness detail panel on the right.
   ============================================================================ */
.queue { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.qmain { min-width: 0; }

.cmdbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cmd-title { font-size: 1.4rem; }
.cmd-count { background: var(--card2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px;
    font-size: .8rem; padding: .1rem .5rem; font-variant-numeric: tabular-nums; }
.cmd-find { margin-left: auto; display: flex; align-items: center; gap: .5rem; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .6rem; min-width: 280px; }
.cmd-find:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }
.cmd-find svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.cmd-find input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font: inherit; font-size: .9rem; color: var(--ink); }
.cmd-find-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .15rem; }

.qfilters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fchip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; font-weight: 500; }
.fchip:hover { border-color: var(--dim); }
.fchip .c { font-variant-numeric: tabular-nums; opacity: .8; font-size: .78rem; }
.fchip.on { background: var(--rail-active-bg); border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold2); }
.fchip.clear { color: var(--link); border-style: dashed; }
.fsep { width: 1px; height: 18px; background: var(--line); margin: 0 .1rem; }

.qrows { display: flex; flex-direction: column; gap: .5rem; }
.qrow { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto auto; gap: 1rem; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem;
    cursor: pointer; box-shadow: var(--shadow); transition: border-color .12s ease; }
.qrow:hover { border-color: var(--dim); }
.qrow.sel { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold), var(--shadow); }
.qnum { font-size: .8rem; color: var(--muted); }
.qcust { min-width: 0; }
.qname { font-weight: 600; color: var(--strong); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.qsub { color: var(--muted); font-size: .8rem; margin-top: .2rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.qlines { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.qlines b { color: var(--ink); }

.qpanel { position: sticky; top: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 1rem; }
.qpanel-empty { color: var(--muted); text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.qpanel-empty svg { width: 26px; height: 26px; opacity: .5; }
.qp-head { display: flex; align-items: center; gap: .6rem; }
.qp-num { color: var(--muted); font-size: .8rem; }
.qp-head .status-pill { margin-left: auto; }
.qp-cust { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--strong); margin: -.4rem 0 0; }
.qring-wrap { display: flex; align-items: center; gap: 1rem; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.qring { width: 58px; height: 58px; flex: none; }
.qring-txt { font-family: var(--font-display); font-weight: 700; font-size: 12px; fill: var(--ink); }
.qring-lbl b { display: block; font-size: .95rem; color: var(--ink); }
.qring-lbl span { color: var(--muted); font-size: .82rem; }
.qkv { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.qcell { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .65rem; }
.qcell .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.qcell .v { font-weight: 600; margin-top: .15rem; font-size: .9rem; color: var(--ink); word-break: break-word; }
.qcell .v .linkbtn { font-size: .9rem; padding: 0; }
.qpv { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qpv-h { padding: .5rem .7rem; border-bottom: 1px solid var(--line2); color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.qpv-li { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line2); font-size: .85rem; }
.qpv-li:last-child { border-bottom: none; }
.qpv-li .st { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.qpv-li .desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qpv-li .q { color: var(--muted); font-size: .8rem; }
.qpv-more { padding: .45rem .7rem; color: var(--muted); font-size: .78rem; }
.qacts { display: flex; gap: .6rem; margin-top: auto; }
.qacts .btn { flex: 1; justify-content: center; }
.qacts-note { flex: 1; display: flex; align-items: center; color: var(--muted); font-size: .82rem; }

@media (max-width: 1000px) {
    .queue { grid-template-columns: 1fr; }
    .qpanel { position: static; }
}

/* ============================================================================
   Phase 3 — Line workspace (command center): center work column (line nav +
   customer request/why on the left | item list with the order-unit reconcile
   pinned beneath it on the right) beside a right attention rail (readiness ring +
   needs-attention queue + line actions).
   ============================================================================ */
.wsx { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.1rem; align-items: start; }
.ws-center { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }

.ws-top { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ws-top .back { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; }
.ws-top .back svg { width: 16px; height: 16px; }
.ws-top .sep { color: var(--dim); }
.ws-num { color: var(--dim); font-size: .85rem; }
.ws-cust { font-size: 1.25rem; }

.ws-nav { display: flex; align-items: center; gap: .7rem; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .55rem .8rem; flex-wrap: wrap; }
.ws-nav .nbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--card2);
    color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ws-nav .nbtn:disabled { opacity: .45; cursor: default; }
.ws-nav .nbtn svg { width: 15px; height: 15px; }
.ws-pos { font-family: var(--font-display); font-weight: 600; }
.ws-pos b { color: var(--gold2); } .ws-pos .of { color: var(--muted); font-weight: 500; }
.ws-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.wd { width: 11px; height: 11px; border-radius: 3px; border: none; cursor: pointer; padding: 0; background: var(--ok); }
.wd.warn { background: var(--warn); } .wd.err { background: var(--err); }
.wd.cur { outline: 2px solid var(--gold); outline-offset: 1px; }

.ws-cands { display: flex; flex-direction: column; min-width: 0; }
.ws-scroll { display: flex; flex-direction: column; gap: .4rem; }
/* right work column: item list (grows/scrolls) with the reconcile card pinned beneath it */
.work-right { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

.ws-rail { position: sticky; top: 26px; display: flex; flex-direction: column; gap: 1rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.ws-ring-wrap { display: flex; align-items: center; gap: .9rem; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; }
.ws-ring { width: 54px; height: 54px; flex: none; }
.ws-ring-txt { font-family: var(--font-display); font-weight: 700; font-size: 12px; fill: var(--ink); }
.ws-ring-lbl b { display: block; font-size: .92rem; color: var(--ink); }
.ws-ring-lbl span { color: var(--muted); font-size: .8rem; }
.ws-queue { display: flex; flex-direction: column; gap: .3rem; max-height: 340px; overflow-y: auto; }
.wq-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); font-weight: 700; padding: .1rem .1rem .2rem; }
.wq-item { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; text-align: left;
    border: 1px solid transparent; background: none; border-radius: 9px; padding: .45rem .5rem; cursor: pointer; color: var(--ink); }
.wq-item:hover { background: var(--card2); }
.wq-item.cur { background: var(--rail-active-bg); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.wq-dot { width: 8px; height: 8px; border-radius: 50%; }
.wq-dot.warn { background: var(--warn); } .wq-dot.err { background: var(--err); }
.wq-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.wq-num { font-size: .78rem; color: var(--dim); }
.ws-foot { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--line2); padding-top: .8rem; }
.ws-brow { display: flex; gap: .5rem; }
.ws-brow .btn { flex: 1; justify-content: center; }
/* No-match line actions — quiet secondary buttons (no beige tray/label). */
.resolve-actions { display: flex; flex-direction: column; gap: .5rem; }
.resolve-alt { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
    border: 1px solid var(--line); background: var(--card2); color: var(--muted); border-radius: var(--radius);
    padding: .55rem .8rem; font-weight: 600; font-size: .86rem; cursor: pointer; }
.resolve-alt:hover { border-color: var(--dim); color: var(--ink); }
.resolve-alt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.resolve-alt svg { width: 15px; height: 15px; color: var(--gold2); flex: none; }

@media (max-width: 1100px) {
    .wsx { grid-template-columns: 1fr; }
    .ws-rail { position: static; }
}

/* Wide screens: the workspace fits the viewport and ONLY the ranked-candidate
   list scrolls — the line nav, customer request, the pinned Units + Stock-levels
   row, and the right attention rail all stay in view. (On narrow screens the
   whole page scrolls normally, per the rule above.) 52px = .app-main's 26px top+bottom. */
@media (min-width: 1101px) {
    .wsx { height: calc(100vh - 52px); overflow: hidden; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    .ws-center { min-height: 0; }
    .ws-center > .work { flex: 1 1 auto; min-height: 0; align-items: stretch; margin-bottom: 0; }
    .ws-center > .work > .work-left { min-height: 0; overflow-y: auto; }
    /* the request/why column fills its height — the last card grows to absorb the slack */
    .ws-center > .work > .work-left > .card:last-child { flex: 1 1 auto; }
    .ws-center > .work > .work-right { min-height: 0; }
    /* right column: the item list grows and scrolls; reconcile stays pinned beneath it */
    .work-right > .ws-cands { flex: 1 1 auto; min-height: 0; }
    .ws-cands > .ws-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
    .work-right > .ws-reconcile { flex: none; }
    .ws-rail { position: static; min-height: 0; }
    .ws-rail > .ws-queue { flex: 1 1 auto; min-height: 0; max-height: none; }
}

/* ============================================================================
   Phase 4 — Confirm customer (AwaitingCustomer gate on the Review header tab):
   an explicit hold banner, a prominent customer search, best-match emphasis,
   and the "confirm unlocks the held lines" note.
   ============================================================================ */
.gate { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem;
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: var(--radius); padding: .65rem .9rem; }
.gate svg { width: 20px; height: 20px; color: var(--warn); flex: none; }
.gate b { color: var(--ink); } .gate span { color: var(--muted); }

.cust-search { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; cursor: pointer; color: var(--muted);
    background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .75rem; }
.cust-search:hover { border-color: var(--link); }
.cust-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }

.cust-cand.best { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.best-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold2);
    background: var(--rail-active-bg); border-radius: 999px; padding: .05rem .45rem; }

.branch-wh { display: flex; gap: .9rem; margin: .6rem 0 .2rem; flex-wrap: wrap; }
.branch-wh .field { flex: 1; min-width: 12rem; margin-bottom: 0; }
.confirm-cust { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.confirm-cust .btn { flex: none; }
.confirm-cust span { flex: 1; min-width: 12rem; }

/* ============================================================================
   Phase 6 — Review overview (command center): the tabbed order overview
   (title / OrderHealth dashboard / tabs / triage) beside a right panel with
   the order summary + a "before finalize" checklist.
   ============================================================================ */
.rvx { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.1rem; align-items: start; }
.rv-main { min-width: 0; }
.rt-back { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .85rem; }

.rv-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.rv-cust { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--strong); margin-top: .1rem; }
.rv-cust-id { color: var(--gold2); font-size: .78rem; margin-top: .1rem; }
.rv-ord { display: flex; flex-direction: column; }
.rv-ord .r { display: flex; justify-content: space-between; gap: .75rem; padding: .42rem 0; border-bottom: 1px solid var(--line2); font-size: .85rem; }
.rv-ord .r:last-child { border-bottom: none; }
.rv-ord .r .k { color: var(--dim); }
.rv-ord .r .v { color: var(--ink); font-weight: 500; text-align: right; word-break: break-word; }
.rv-ord .r .v .linkbtn { font-size: .85rem; padding: 0; }
.rv-chk-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 700; }
.rv-chk { display: flex; flex-direction: column; gap: .6rem; }
.ck { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; }
.ck .ic { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.ck .ic svg { width: 12px; height: 12px; }
.ck.done .ic { background: var(--ok-bg); color: var(--ok); }
.ck.pend .ic { background: var(--warn-bg); color: var(--warn); }
.ck.todo .ic { background: var(--card2); color: var(--dim); }
.ck .t { color: var(--ink); font-weight: 500; }
.ck .m { color: var(--muted); font-size: .78rem; margin-top: 1px; }
.rv-fin { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.rv-fin-note { color: var(--muted); font-size: .76rem; text-align: center; }

@media (max-width: 1100px) { .rvx { grid-template-columns: 1fr; } .rv-side { position: static; } }

/* ============================================================================
   Phase 7 — Dashboard (home) + queue active-filter bar.
   The dashboard is the "/" landing screen in front of the queue (which moved to
   "/drafts"): status tiles + a per-customer review worklist + a submitted-quotes
   reference panel. Every tile/card deep-links into the queue with a status or
   customer filter, which the queue echoes back in the active-filter bar below.
   ============================================================================ */

/* ---- queue active-filter bar (DraftList) ---- */
.filterbar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; background: var(--panel);
    border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius);
    padding: .6rem .85rem; margin-bottom: 1rem; }
.fb-lead { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
.fb-lead svg { width: 15px; height: 15px; color: var(--gold2); }
.fb-pill { display: inline-flex; align-items: center; gap: .45rem; background: var(--rail-active-bg);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold2);
    border-radius: 999px; padding: .18rem .3rem .18rem .65rem; font-size: .8rem; font-weight: 600; }
.fb-pill .k { color: var(--dim); font-weight: 500; }
.fb-pill .x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border: none; border-radius: 50%; background: color-mix(in srgb, var(--gold) 18%, transparent);
    color: var(--gold2); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.fb-pill .x:hover { background: color-mix(in srgb, var(--gold) 32%, transparent); }
.fb-count { margin-left: auto; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.fb-clear { color: var(--link); font-size: .8rem; font-weight: 600; cursor: pointer; background: none; border: none; }
.fb-clear:hover { text-decoration: underline; }

/* ---- dashboard (scoped under .dash to avoid collisions) ---- */
.dash { display: flex; flex-direction: column; gap: 1.15rem; }
.dash-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dash-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; color: var(--dim); margin: 0; }
.dash-title .sub { color: var(--dim); font-weight: 600; font-size: .9rem; margin-left: .6rem; }
.dash-find { margin-left: auto; display: flex; align-items: center; gap: .5rem; background: var(--card);
    border: 1px solid var(--line); border-radius: 9px; padding: .5rem .75rem; width: 300px; }
.dash-find:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }
.dash-find svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
.dash-find input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font: inherit; font-size: .9rem; color: var(--ink); }

.dash-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.dash .tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .85rem .9rem .95rem; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: .1rem; }
.dash .tile:hover { border-color: var(--dim); }
.dash .tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tint); }
.dash .tile .ic { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    background: var(--tintbg); color: var(--tint); margin-bottom: .35rem; }
.dash .tile .ic svg { width: 15px; height: 15px; }
.dash .tile .n { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--ink); }
.dash .tile .lbl { color: var(--muted); font-size: .78rem; font-weight: 500; }
.dash .tile .go { position: absolute; right: .7rem; top: .85rem; color: var(--dim); opacity: 0; transition: opacity .12s; }
.dash .tile:hover .go { opacity: 1; }
.dash .tile.t-info { --tint: var(--info); --tintbg: var(--info-bg); }
.dash .tile.t-warn { --tint: var(--gold2); --tintbg: var(--warn-bg); }
.dash .tile.t-gold { --tint: var(--gold); --tintbg: var(--beige); }
.dash .tile.t-ok   { --tint: var(--ok);   --tintbg: var(--ok-bg); }
.dash .tile.t-err  { --tint: var(--err);  --tintbg: var(--err-bg); }

.dash-board { display: grid; grid-template-columns: 1.9fr 1fr; gap: 1.25rem; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.dash-sec-head { display: flex; align-items: center; gap: .6rem; }
.dash-sec-title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; margin: 0; }
.dash-sec-count { font-family: var(--font-mono); font-size: .75rem; color: var(--gold2); background: var(--beige);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 999px; padding: .05rem .55rem; }
.dash-cust-find { margin-left: auto; display: flex; align-items: center; gap: .4rem; background: var(--card);
    border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; width: 230px; }
.dash-cust-find svg { width: 14px; height: 14px; color: var(--dim); flex: none; }
.dash-cust-find input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font: inherit; font-size: .82rem; color: var(--ink); }
.dash-sec-head .sec-hint { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--dim); }
.dash-sec-head .sec-hint svg { width: 13px; height: 13px; }

/* incoming — email intake still identifying the customer (Processing) */
.dash-incoming { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: .8rem .9rem; }
.dash-inc-h { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim);
    margin-bottom: .6rem; display: flex; align-items: center; gap: .45rem; }
.dash-inc-h svg { width: 13px; height: 13px; }
.dash-inc-row { display: flex; gap: .65rem; flex-wrap: wrap; }
.dash-inc { flex: 1 1 240px; min-width: 0; background: var(--card); border: 1px solid var(--line2); border-radius: 9px;
    padding: .65rem .7rem; display: flex; gap: .55rem; align-items: flex-start; }
.dash-inc .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex: none; margin-top: .25rem;
    animation: dashpulse 1.6s ease-out infinite; }
.dash-inc.upl .pulse { background: var(--gold); animation: none; }
@keyframes dashpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--info) 45%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.dash-inc .src { min-width: 0; }
.dash-inc .from { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ink); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-inc .from svg { width: 13px; height: 13px; color: var(--gold2); flex: none; }
.dash-inc .fn { color: var(--dim); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-inc .state { margin-top: .15rem; font-size: .72rem; color: var(--info); font-weight: 600; }
.dash-inc.upl .state { color: var(--gold2); }

/* per-customer worklist cards */
.dash-custgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.custcard { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    cursor: pointer; text-align: left; color: inherit; }
.custcard:hover { border-color: var(--dim); }
.custcard.email { border-left: 3px solid var(--gold); }
.custcard .cc-head { display: flex; align-items: center; gap: .55rem; padding: .8rem .9rem .7rem; border-bottom: 1px solid var(--line2); }
.custcard .cc-name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custcard .cc-badge { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); background: var(--card2);
    border: 1px solid var(--line); border-radius: 999px; padding: .02rem .5rem; flex: none; }
.custcard .cc-email { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase; color: var(--gold2); background: var(--beige);
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 6px; padding: .18rem .45rem; flex: none; }
.custcard .cc-email svg { width: 12px; height: 12px; }
.custcard .drow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .55rem .9rem; border-top: 1px solid var(--line2); }
.custcard .drow:first-child { border-top: none; }
.custcard .drow .dn { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); }
.custcard .drow .mid { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.custcard .drow .need { color: var(--dim); font-size: .74rem; white-space: nowrap; }
.custcard .drow .env { color: var(--gold2); flex: none; display: inline-flex; }
.custcard .drow .env svg { width: 13px; height: 13px; }

/* customer card — summary by status (mini donut) */
.custcard .cc-body { padding: .85rem .9rem; }
.custcard .cc-donut-row { display: flex; align-items: center; gap: .9rem; }
.custcard .cc-donut { width: 76px; height: 76px; flex: none; position: relative; }
.custcard .cc-donut svg { width: 100%; height: 100%; display: block; }
.custcard .cc-donut-track { fill: none; stroke: var(--card2); stroke-width: 5; }
.custcard .cc-donut-arc { fill: none; stroke-width: 5; }
.custcard .cc-donut-ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.custcard .cc-donut-ctr .num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--ink); }
.custcard .cc-donut-ctr .cap { font-size: .58rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.custcard .cc-legend { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.custcard .cc-legend .lg { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); }
.custcard .cc-legend .lg b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.custcard .cc-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.custcard .cc-foot { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-top: 1px solid var(--line2); }
.custcard .cc-foot .cc-need { font-size: .75rem; color: var(--dim); }
.custcard .cc-foot .cc-need b { color: var(--muted); font-weight: 600; }
.custcard .cc-foot .cc-go { color: var(--dim); display: inline-flex; }
.custcard .cc-foot .cc-go svg { width: 16px; height: 16px; }

/* queue cards (top level of the queue-first review board) — reuse .custcard, rendered as a button */
button.custcard { width: 100%; font: inherit; }
.custcard.qcard { border-left: 3px solid var(--info); }
.custcard.qcard.unassigned { border-left: 3px solid var(--line); }
.custcard.qcard .qcard-email { display: flex; align-items: center; gap: .35rem; padding: .5rem .9rem 0; font-size: .72rem; color: var(--muted); }
.custcard.qcard .qcard-email svg { width: 13px; height: 13px; flex: none; color: var(--gold2); }
/* breadcrumb back button in the section head */
.dash-sec-head .crumb-back { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; padding: 0;
    cursor: pointer; font: inherit; font-size: .8rem; color: var(--muted); }
.dash-sec-head .crumb-back:hover { color: var(--ink); }
.dash-sec-head .crumb-back svg { width: 15px; height: 15px; }

/* submitted — reference only, out of the queue */
.subpanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.subpanel .sub-head { display: flex; align-items: center; gap: .55rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line2); }
.subpanel .sub-head svg { width: 17px; height: 17px; color: var(--ok); flex: none; }
.subpanel .sub-head .st-title { font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.subpanel .sub-head .qmark { margin-left: auto; font-size: .72rem; color: var(--dim); }
.subrow { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .65rem .9rem; border-top: 1px solid var(--line2);
    cursor: pointer; text-align: left; width: 100%; background: none; border-left: none; border-right: none; border-bottom: none; color: inherit; }
.subrow:hover { background: var(--card); }
.subrow .sc { font-weight: 600; color: var(--ink); font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subrow .qt { font-family: var(--font-mono); font-size: .76rem; color: var(--ok); text-align: right; white-space: nowrap; }
.subrow .meta { font-family: var(--font-mono); font-size: .72rem; color: var(--dim); }
.subrow .when { font-size: .72rem; color: var(--dim); text-align: right; }
.sub-foot { padding: .7rem .9rem; border-top: 1px solid var(--line2); text-align: center; }
.sub-empty { padding: 1.4rem .9rem; text-align: center; color: var(--muted); font-size: .84rem; }

@media (max-width: 1100px) {
    .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-board { grid-template-columns: 1fr; }
    .dash-custgrid { grid-template-columns: 1fr; }
}