/* ============================================================================
 * parts-redesign.css — PARTS-REDESIGN-20261028
 *
 * Complete makeover of the PARTS SECTION ONLY: the Parts Dashboard overlay
 * (Today / Late / Orders / Receiving / Inventory / Returns & cores /
 * Suppliers / Reports), the PartsTech inbox + settings, Parts Chat,
 * Request-a-Part, the new-order and supplier dialogs, the Purchases overlay,
 * the job form's parts-order editor rows, and the Shop Management Parts
 * Inventory panel (ops-hub inventory module).
 *
 * Why this file exists: the Today board's cards were rendered with classes
 * (.parts2-card / .parts2-top / .parts2-flags / .parts2-diag / .parts2-id)
 * that NO stylesheet defined, so on a wide shop monitor the cards stretched
 * full-width unstyled and their buttons (Mark in / Messages / Car) floated
 * detached from the card. This file defines those classes and restyles
 * every other parts surface to match.
 *
 * Method (same pattern as maint-redesign.css / mgmt-sections.css): light
 * design tokens are pinned on the parts overlay roots, so Parts renders in
 * the Shop Management light language — white surfaces, near-black text,
 * gold #C9A53F accent — regardless of the app's dark/light theme. The dark
 * parts look goes away; that is deliberate (Donny, Oct 28: "complete
 * redesigned and make over every button every parts page").
 *
 * Presentation only: no ids, endpoints, permissions, data flow or behavior
 * change. Owners-only money scrubbing (scrubTekMoney) is untouched — the
 * Tekmetric parts list shows exactly the fields it showed before.
 * Every rule is scoped to the roots below; nothing outside Parts changes.
 * ========================================================================== */

/* --- pinned light tokens (mirror of maint-redesign.css) ------------------- */
#partsOverlay,
#purchasesOverlay,
#partsChatOverlay,
#partsRequestOverlay,
#newOrderModal,
#supplierModal,
#partstechOverlay {
  --bg: #eef0f3; --surface: #ffffff; --surface-2: #f6f7f9;
  --border: #dfe3e8; --border-strong: #c9d1d9;
  --text: #1d2733; --muted: #5d6b78; --faint: #626d76;
  --gold: #c9a53f; --gold-strong: #a8862a; --gold-tint: #faf3dd;
  --blue: #1f6fd6; --blue-bg: #e9f2fd;
  --green: #1f8a4c; --green-dark: #17703c; --green-bg: #e9f6ec;
  --amber: #b97a12; --amber-bg: #fdf3e3;
  --red: #d64545; --red-dark: #b23333; --red-bg: #fdeeee;
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-lift: 0 4px 12px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.08);
  --steel: #eef0f3; --panel: #ffffff; --panel2: #f6f7f9; --line: #dfe3e8;
  --paper: #1d2733; --ink: #171a1f; --ink-soft: #5d6b78;
  --yellow: #c9a53f; --orange: #ff6b35; --pink: #ff1053;
  --card-paper: #ffffff;
  --on-accent: #171204;
  --link-blue: #1f6fd6; --yellow-text: #a8862a;
  --dash-panel-bg: #eef0f3; --dash-panel-border: #c8d0da; --dash-accent: #c9a53f;
  --orange-text: #a03d16; --overdue-count-text: #b71c1c;
  --muted2: #626d76;
  --tint-rgb: 0,0,0;
  --shadow-color: rgba(16,24,40,0.12);
  --line-subtle: #e4e7ec;
  --tag-bg: #eef1f5; --tag-border: #c9d1d9;
  color-scheme: light;
}

/* --- modal chrome --------------------------------------------------------- */
#partsOverlay .modal-box,
#purchasesOverlay .modal-box,
#partsChatOverlay .modal-box,
#partsRequestOverlay .modal-box,
#newOrderModal .modal-box,
#supplierModal .modal-box,
#partstechOverlay .modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.10);
  color: var(--text);
}
/* The Parts Dashboard is a full page, not a narrow pop-up: wide enough for
   a shop monitor, capped so lines stay readable. */
#partsOverlay .modal-box.parts-dash,
#purchasesOverlay .modal-box.parts-dash {
  width: min(1180px, 96vw);
  max-width: 96vw;
}

/* --- header --------------------------------------------------------------- */
#partsOverlay .parts-dash-header,
#purchasesOverlay .parts-dash-header,
#partsChatOverlay .parts-dash-header {
  border-bottom: 2px solid var(--gold);
  align-items: center;
}
#partsOverlay .parts-dash-header h1,
#purchasesOverlay .parts-dash-header h1,
#partsChatOverlay .parts-dash-header h1,
#partsRequestOverlay h1,
#newOrderModal h1,
#supplierModal h1,
#partstechOverlay h1 { color: var(--ink); }
#partsOverlay .parts-tek-sync-line { color: var(--muted); font-size: calc(12px * var(--font-scale, 1)); }

/* --- buttons: one sizing system across every parts page ------------------- */
#partsOverlay .btn,
#purchasesOverlay .btn,
#partsChatOverlay .btn,
#partsRequestOverlay .btn,
#newOrderModal .btn,
#supplierModal .btn,
#partstechOverlay .btn {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: calc(12.5px * var(--font-scale, 1));
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#partsOverlay .btn:hover,
#purchasesOverlay .btn:hover,
#partsChatOverlay .btn:hover,
#partsRequestOverlay .btn:hover,
#newOrderModal .btn:hover,
#supplierModal .btn:hover,
#partstechOverlay .btn:hover { border-color: var(--gold-strong); }
#partsOverlay .btn-primary,
#purchasesOverlay .btn-primary,
#partsChatOverlay .btn-primary,
#partsRequestOverlay .btn-primary,
#newOrderModal .btn-primary,
#supplierModal .btn-primary,
#partstechOverlay .btn-primary {
  background: var(--gold); border-color: var(--gold-strong); color: #171204;
}
#partsOverlay .btn-primary:hover,
#purchasesOverlay .btn-primary:hover,
#partsChatOverlay .btn-primary:hover,
#partsRequestOverlay .btn-primary:hover,
#newOrderModal .btn-primary:hover,
#supplierModal .btn-primary:hover { background: #d8ba5e; }
#partsOverlay .btn-sm,
#purchasesOverlay .btn-sm,
#partsChatOverlay .btn-sm { min-height: 36px; padding: 6px 11px; }
#partsOverlay .btn-danger,
#purchasesOverlay .btn-danger { color: var(--red-dark); border-color: #f0c4c4; background: #fff; }
#partsOverlay .btn-danger:hover,
#purchasesOverlay .btn-danger:hover { background: var(--red-bg); border-color: var(--red); }

/* --- search + form inputs --------------------------------------------------- */
#partsOverlay .dash-search-input,
#purchasesOverlay input,
#partsChatOverlay input,
#partsRequestOverlay input,
#partsRequestOverlay select,
#newOrderModal input,
#newOrderModal select,
#newOrderModal textarea,
#supplierModal input,
#supplierModal select,
#supplierModal textarea,
#partstechOverlay input {
  background: #fff; color: var(--ink); border: 1px solid var(--border-strong);
  border-radius: 9px; min-height: 40px;
}
#partsOverlay .dash-search-input { min-height: 44px; font-size: calc(13.5px * var(--font-scale, 1)); }
#partsOverlay .dash-search-input:focus,
#purchasesOverlay input:focus,
#partsRequestOverlay input:focus,
#newOrderModal input:focus,
#supplierModal input:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold-strong); }
#partsOverlay .dash-search-clear { color: var(--muted); min-width: 36px; min-height: 36px; }
#partsOverlay .dash-search-nomatch,
#purchasesOverlay .dash-search-nomatch { color: var(--muted); font-style: normal; }
#partsOverlay .field label,
#newOrderModal .field label,
#supplierModal .field label,
#partstechOverlay .field label { color: var(--muted); }

/* --- tabs ------------------------------------------------------------------- */
#partsOverlay .parts-tabs,
#purchasesOverlay .parts-tabs {
  display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto;
  border-bottom: 1px solid var(--border); margin: 8px 0 16px;
  scrollbar-width: thin;
}
#partsOverlay .parts-tab,
#purchasesOverlay .parts-tab {
  color: var(--muted); font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 600;
  padding: 10px 16px; min-height: 44px; white-space: nowrap;
  border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0;
}
#partsOverlay .parts-tab:hover,
#purchasesOverlay .parts-tab:hover { color: var(--ink); background: var(--surface-2); }
#partsOverlay .parts-tab.is-active,
#purchasesOverlay .parts-tab.is-active { color: var(--ink); border-bottom-color: var(--gold); }

/* --- vendor overview strip ---------------------------------------------------- */
#partsOverlay #vendorOverview { align-items: center; gap: 8px; }
#partsOverlay .vendor-chip {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 5px 6px 5px 12px; min-height: 32px;
}
#partsOverlay .vendor-chip .vc-name { color: var(--ink); font-weight: 700; }
#partsOverlay .vendor-chip .vc-count {
  background: #fff; border: 1px solid var(--border); color: var(--ink);
  font-weight: 700;
}
#partsOverlay .vendor-chip.vc-has-overdue { border-color: var(--red); background: var(--red-bg); }
#partsOverlay .vendor-chip.vc-has-overdue .vc-count { background: #fff; color: var(--red-dark); border-color: var(--red); }

/* ============================================================================
   TODAY — the board in Donny's photo. These are the classes the renderer
   always used; they simply never had styles before this file.
   ============================================================================ */
#partsList { display: flex; flex-direction: column; gap: 12px; }
.parts2-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.parts2-card:hover { box-shadow: var(--shadow-lift); }
.parts2-card.parts2-overdue { border-left: 4px solid var(--red); background: linear-gradient(90deg, var(--red-bg), var(--surface) 34%); }
.parts2-card.parts2-received { opacity: 0.62; }
.parts2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.parts2-id { min-width: 0; }
#partsOverlay .parts2-vehicle {
  font-size: calc(16px * var(--font-scale, 1)); font-weight: 800; color: var(--ink); line-height: 1.25;
}
#partsOverlay .parts2-meta {
  font-size: calc(12.5px * var(--font-scale, 1)); color: var(--muted); margin-top: 3px; line-height: 1.45;
}
/* ETA as a clean labeled field on the card's right edge — never floating. */
#partsOverlay .parts2-eta {
  flex: 0 0 auto; text-align: right; white-space: normal;
  font-family: inherit; font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 700; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 11px; line-height: 1.3;
}
#partsOverlay .parts2-eta-label {
  display: block; font-size: calc(10px * var(--font-scale, 1)); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-bottom: 1px;
}
#partsOverlay .parts2-eta-note {
  display: block; font-size: calc(11px * var(--font-scale, 1)); font-weight: 600;
  text-transform: none; letter-spacing: 0; margin-top: 1px;
}
#partsOverlay .parts2-eta.eta-overdue { background: var(--red-bg); border-color: var(--red); color: var(--red-dark); }
#partsOverlay .parts2-eta.eta-overdue .parts2-eta-note { color: var(--red-dark); }
#partsOverlay .parts2-eta.eta-today { background: var(--amber-bg); border-color: var(--amber); color: #7a5b00; }
#partsOverlay .parts2-eta.eta-today .parts2-eta-note { color: #7a5b00; }
#partsOverlay .parts2-eta.eta-future { color: var(--ink); }
#partsOverlay .parts2-eta.eta-future .parts2-eta-note { color: var(--blue); }
#partsOverlay .parts2-eta.eta-none { color: var(--muted); }
#partsOverlay .parts2-eta.eta-none .parts2-eta-note { color: var(--muted); }

/* flags row: vendor + order count + requests + low stock, on the card */
.parts2-flags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
#partsOverlay .parts-vendor-chip {
  background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--ink);
  font-size: calc(11.5px * var(--font-scale, 1)); font-weight: 700;
  text-transform: none; letter-spacing: 0;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  max-width: 100%; overflow: visible; text-overflow: clip;
}
#partsOverlay .parts-vendor-chip::before { content: "Vendor: "; font-weight: 600; color: var(--muted); }
#partsOverlay .parts-vendor-chip.no-vendor { background: #fff; border-style: dashed; color: var(--muted); }
#partsOverlay .card-parts-count {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  border-radius: 20px; padding: 4px 10px; font-size: calc(11.5px * var(--font-scale, 1)); font-weight: 700;
}
#partsOverlay .parts-request-badge {
  background: var(--amber-bg); border: 1px solid #e5c877; color: #7a5b00;
  font-size: calc(11.5px * var(--font-scale, 1)); font-weight: 700;
  padding: 5px 10px; border-radius: 10px; min-height: 32px;
  display: inline-flex; align-items: center; line-height: 1.4; text-align: left;
}
#partsOverlay .parts-request-badge:hover { background: var(--gold-tint); }
#partsOverlay .parts2-lowstock { background: var(--red-bg); border-color: var(--red); color: var(--red-dark); }

/* Tekmetric parts: a readable list, one part per line, not a truncated
   one-liner in small blue text. Same fields as before — no money added. */
.parts2-tek { margin-top: 10px; background: var(--surface-2); border: 1px solid var(--line-subtle); border-radius: 10px; padding: 9px 12px; }
.parts2-tek-title { font-size: calc(11px * var(--font-scale, 1)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.parts2-tek-list { list-style: none; margin: 0; padding: 0; }
.parts2-tek-list li { padding: 4px 0; border-top: 1px solid var(--line-subtle); line-height: 1.45; }
.parts2-tek-list li:first-child { border-top: none; }
.parts2-tek-name { font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 600; color: var(--ink); }
.parts2-tek-meta { font-size: calc(12px * var(--font-scale, 1)); color: var(--muted); margin-left: 8px; }
.parts2-tek-synced { font-size: calc(11px * var(--font-scale, 1)); color: var(--faint); margin-top: 5px; }

.parts2-diag {
  margin-top: 10px; font-size: calc(12.5px * var(--font-scale, 1)); color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line-subtle); border-radius: 8px; padding: 8px 10px; line-height: 1.5;
}

/* actions: one grouped footer row on the card, right-aligned */
#partsOverlay .parts2-actions {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: flex-end;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-subtle);
}
#partsOverlay .parts2-btn {
  min-height: 44px; padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: #fff; color: var(--ink);
  font-weight: 700; font-size: calc(13px * var(--font-scale, 1)); cursor: pointer;
  font-family: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#partsOverlay .parts2-btn:hover { border-color: var(--gold-strong); filter: none; }
#partsOverlay .parts2-btn:active { transform: scale(0.98); }
#partsOverlay .parts2-btn.primary {
  background: var(--gold); border-color: var(--gold-strong); color: #171204;
  text-transform: none; letter-spacing: 0;
}
#partsOverlay .parts2-btn.primary:hover { background: #d8ba5e; }
#partsOverlay .parts2-btn.primary.is-received {
  background: var(--green-bg); border-color: var(--green); color: var(--green-dark);
}
#partsOverlay .parts-dash-empty { color: var(--muted); }

/* legacy .parts-row (kept for any surface still rendering it) */
#partsOverlay .parts-row { border-bottom-color: var(--line-subtle); }
#partsOverlay .parts-stage-chip { text-transform: none; letter-spacing: 0; font-size: calc(11px * var(--font-scale, 1)); }

/* ============================================================================
   ORDERS tab + RECEIVING tab — shared order cards
   ============================================================================ */
#partsOverlay .parts-order-card,
#partsOverlay .supplier-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 10px; box-shadow: var(--shadow-card); color: var(--text);
}
#partsOverlay .parts-order-card:hover,
#partsOverlay .supplier-card:hover { box-shadow: var(--shadow-lift); }
#partsOverlay .parts-order-card.is-late,
#partsOverlay .supplier-card.is-late { border-color: var(--red); background: linear-gradient(90deg, var(--red-bg), var(--surface) 30%); }
#partsOverlay .supplier-card.is-inactive { opacity: 0.55; }
#partsOverlay .supplier-card-name { color: var(--ink); font-size: calc(14.5px * var(--font-scale, 1)); }
#partsOverlay .supplier-card-meta { color: var(--muted); font-size: calc(12.5px * var(--font-scale, 1)); line-height: 1.55; }
#partsOverlay .supplier-card-actions { margin-top: 10px; gap: 8px; flex-wrap: wrap; }

/* PartsTech inbox (inside Orders) */
#partsOverlay .parts-tek-inbox {
  border: 1px solid var(--amber) !important; background: var(--amber-bg);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 14px;
}
#partsOverlay .parts-tek-inbox-row { border-top-color: var(--border) !important; }
#partsOverlay .pt-inbox-job { min-height: 40px; border-radius: 9px; background: #fff; color: var(--ink); border: 1px solid var(--border-strong); }

/* Receiving lines */
#partsOverlay .recv-line { border-top-color: var(--line-subtle) !important; flex-wrap: wrap; row-gap: 8px !important; }
#partsOverlay .recv-qty { min-height: 40px; border-radius: 9px; background: #fff; color: var(--ink); border: 1px solid var(--border-strong); text-align: center; font-weight: 700; }

/* New-order line rows */
#newOrderModal .po-line-row { grid-template-columns: 1fr 2fr 64px 88px 40px; }
#newOrderModal .po-line-row .po-line-del { min-height: 40px; min-width: 40px; }

/* ============================================================================
   INVENTORY tab (Parts Dashboard rollup table)
   ============================================================================ */
#partsOverlay #inventoryList { overflow-x: auto; }
#partsOverlay .usage-table { min-width: 580px; }
#partsOverlay .usage-table th {
  color: var(--muted); border-bottom: 2px solid var(--border); text-transform: uppercase;
  font-size: calc(11px * var(--font-scale, 1)); letter-spacing: 0.03em; padding: 8px;
}
#partsOverlay .usage-table td { color: var(--text); border-bottom-color: var(--line-subtle); padding: 9px 8px; }
#partsOverlay .usage-table tbody tr:hover { background: var(--surface-2); }

/* ============================================================================
   LATE tab
   ============================================================================ */
#partsOverlay #partsLateSummary .chip,
#partsOverlay #coresSummary .chip { color: #fff; }
#partsOverlay #partsLateList .supplier-card { align-items: center; }

/* ============================================================================
   REPORTS tab
   ============================================================================ */
#partsOverlay #partsReportsContent table { width: 100%; }
#partsOverlay #partsReportsContent th { color: var(--muted); }
#partsOverlay #partsReportsContent td { color: var(--text); }

/* ============================================================================
   SUPPLIERS tab — supplier calls panel
   ============================================================================ */
#partsOverlay #supplierCallsBox .supplier-card a { color: var(--blue); }

/* ============================================================================
   PARTS CHAT + part requests inside it
   ============================================================================ */
#partsChatOverlay #partsChatThread { background: var(--surface-2) !important; border-color: var(--border) !important; }
#partsChatOverlay .chat-msg { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; }
#partsChatOverlay .chat-msg.is-request { border-color: var(--gold); background: var(--gold-tint); }
#partsChatOverlay .chat-msg-author { color: var(--ink); font-weight: 700; }
#partsChatOverlay .chat-msg-time { color: var(--faint); }
#partsChatOverlay .chat-msg-text { color: var(--text); }
#partsChatOverlay .chat-empty { color: var(--muted); text-align: center; padding: 18px 8px; }
#partsChatOverlay .part-req-row {
  display: grid; grid-template-columns: 1fr 130px 130px auto; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line-subtle);
}
#partsChatOverlay .part-req-name { font-weight: 700; color: var(--ink); }
#partsChatOverlay .part-req-meta { color: var(--muted); font-size: calc(11.5px * var(--font-scale, 1)); margin-top: 2px; }
#partsChatOverlay .part-req-vendor-input,
#partsChatOverlay .part-req-status-select { min-height: 38px; border-radius: 8px; background: #fff; color: var(--ink); border: 1px solid var(--border-strong); }

/* ============================================================================
   PURCHASES overlay (purchase / expense requests)
   ============================================================================ */
#purchasesOverlay #purchasesList .purch-card,
#purchasesOverlay #purchasesList .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-card); color: var(--text);
}
#purchasesOverlay .purch-receipt-section { border-top-color: var(--line-subtle); }
#purchasesOverlay .parts-dash-header { border-bottom-color: var(--gold) !important; }

/* ============================================================================
   JOB FORM — parts order editor rows (inside the job modal / RO detail).
   Scoped to #jobOverlay only; colors follow that surface's own panel vars.
   ============================================================================ */
#jobOverlay .parts-order-row { align-items: center; }
#jobOverlay .parts-order-row .po-del { min-width: 38px; min-height: 38px; }
#jobOverlay .parts-order-add input { min-height: 40px; }
#jobOverlay .parts-order-add .btn { min-height: 40px; }

/* ============================================================================
   SHOP MANAGEMENT — Parts Inventory panel (ops-hub inventory module).
   The ops surfaces are already light; this aligns the inventory panel's
   accent with the Shop Management gold and fixes phone table behaviour.
   Scoped to the inventory panel only — Scheduler / Canned / Inspections /
   Reports keep their own ops chrome.
   ============================================================================ */
#ops-panel-inventory .ops-btn {
  background: var(--gold, #c9a53f); color: #171204; border: 1px solid var(--gold-strong, #a8862a);
  min-height: 40px;
}
#ops-panel-inventory .ops-btn:hover { background: #d8ba5e; }
#ops-panel-inventory .ops-btn-ghost { min-height: 40px; }
#ops-panel-inventory [data-invsub][style*="--ops-blue"] {
  /* !important on background too: ops-hub.css's gold-gradient .ops-btn
     block ties this selector on specificity and loads later. */
  border-color: var(--gold-strong, #a8862a) !important; color: #171204 !important;
  background: var(--gold, #c9a53f) !important;
}
#ops-panel-inventory .ops-card { overflow-x: auto; }
#ops-panel-inventory table.ops-table { min-width: 620px; }
#ops-panel-inventory .ops-pill.low { background: var(--red-bg, #fdeeee); color: var(--red-dark, #b23333); }

/* ============================================================================
   PHONE (<= 720px): cards stack, actions become a full-width footer row,
   tabs scroll, tables scroll sideways instead of crushing.
   ============================================================================ */
@media (max-width: 720px) {
  #partsOverlay .modal-box.parts-dash,
  #purchasesOverlay .modal-box.parts-dash { width: 100vw; max-width: 100vw; border-radius: 0; }
  #partsOverlay .parts-dash-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
  #partsOverlay .parts-dash-header .btn { flex: 1 1 auto; min-height: 44px; }
  .parts2-top { flex-direction: column; gap: 8px; }
  #partsOverlay .parts2-eta { text-align: left; align-self: flex-start; }
  #partsOverlay .parts2-actions { justify-content: stretch; }
  #partsOverlay .parts2-actions .parts2-btn { flex: 1 1 30%; min-height: 48px; }
  #partsOverlay .recv-line > div:first-child { flex: 1 1 100% !important; }
  #partsChatOverlay .part-req-row { grid-template-columns: 1fr; }
  #partsChatOverlay .part-req-row .btn { min-height: 44px; }
  #newOrderModal .po-line-row { grid-template-columns: 1fr 1fr; }
  #jobOverlay .parts-order-row { grid-template-columns: 1fr; gap: 6px; }
  #jobOverlay .parts-order-row .po-del { justify-self: end; }
  #partsOverlay .parts-tab,
  #purchasesOverlay .parts-tab { padding: 10px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .parts2-card, #partsOverlay .parts-order-card, #partsOverlay .supplier-card { transition: none; }
}

/* ============================================================================
   FLASHING PENDING-REQUEST BADGE (addendum, Donny Oct 28 ~10:13)
   Same treatment as the staff board's .header-alert-badge: red pill, white
   800 count, headerBadgePulse (staff.css keyframes, 1.6s opacity pulse) —
   so Parts, Tools and the board all flash the same way. Deliberately NOT
   scoped under the parts overlays: the entry-point badge lives in the main
   header/menu and the phone tab bar. Reduced-motion: the app's global
   reduced-motion / animations-off rules already stop headerBadgePulse;
   the explicit rule below covers this class too.
   ============================================================================ */
.parts-req-flash-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--red, #ff3b30); color: #fff;
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 800; line-height: 1;
  margin-left: 6px; vertical-align: middle;
  animation: headerBadgePulse 1.6s ease-in-out infinite;
}
.parts-req-flash-badge-lg {
  min-width: 26px; height: 26px; padding: 0 12px;
  font-size: calc(12.5px * var(--font-scale, 1)); letter-spacing: 0.01em;
  text-transform: none; vertical-align: middle;
}
#mobileTabBar .parts-req-flash-badge.mtab-count {
  position: absolute; top: 2px; right: calc(50% - 27px);
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 0;
  font-size: 10px; border: 2px solid var(--steel, #16181d); z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .parts-req-flash-badge { animation: none; }
}

/* Text colour must be set, not inherited: the dark parts-dash chrome left
   inherited text near-white (--paper in dark theme), which vanished on
   the new white cards anywhere a rule set background without colour
   (receiving line descriptions were invisible — caught in sim review). */
#partsOverlay .parts-order-card, #partsOverlay .supplier-card,
#partsOverlay .recv-line, #partsOverlay .parts-late-card,
#partsOverlay .parts-report-card, #partsOverlay .pt-inbox,
#purchasesOverlay .purch-card, #partsChatOverlay .part-req-row {
  color: var(--ink);
}
#partsOverlay .modal-box, #purchasesOverlay .modal-box,
#partsChatOverlay .modal-box, #partsRequestOverlay .modal-box,
#newOrderModal .modal-box, #supplierModal .modal-box, #partstechOverlay .modal-box {
  color: var(--ink);
}