/* ═══════════════════════════════════════════════════════════════════════════
   Inventory dashboard v2 — styles.css (the "looks" drawer).
   RELOCATED 1:1 from dashboard.html's <style> block (the 2026-07 file split —
   see Sales Dashboard/SPLIT-HANDOFF.md for the pattern and RULEBOOK Rule 6's
   split rule). Loaded in the same cascade position the inline block had:
   BEFORE /Shared Data/shell.css, so shell.css keeps winning ties exactly as
   it did on the single-file page.
   ═══════════════════════════════════════════════════════════════════════════ */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scrollbar-gutter: stable; }   /* the vertical scrollbar can never appear/vanish and shove the page sideways */
  body { overflow-x: hidden; overflow-x: clip; }   /* the window itself can NEVER pan sideways — wide content scrolls inside its own card */
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f3f5f8; color: #2d3436; padding-bottom: 10px; }

  /* ── Sidebar (copy of Sales/SQP) ── */
  .sidebar { position: fixed; top: 0; left: 0; width: 150px; height: 100vh; background: #1a1f2e; color: #fff; display: flex; flex-direction: column; z-index: 100; }
  .sidebar .logo { padding: 14px 10px; border-bottom: 1px solid #2d3450; display: flex; align-items: center; gap: 8px; }
  .sidebar .logo svg { width: 28px; height: 28px; flex-shrink: 0; }
  .sidebar .logo span { font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: 1.5px; color: #e8eaed; }
  .sidebar nav { flex: 1; padding: 12px 0; }
  .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: #8892a4; text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s; }
  .sidebar nav a:hover { background: #252b3d; color: #fff; }
  .sidebar nav a.active { background: #252b3d; color: #ff9900; border-left: 3px solid #ff9900; }
  .sidebar nav a .icon { width: 18px; text-align: center; font-size: 15px; }
  .sidebar .sidebar-footer { padding: 14px 14px; border-top: 1px solid #2d3450; font-size: 11px; color: #555e70; }

  .main { margin-left: 150px; }

  .topbar { background: #232f3e; color: #fff; padding: 0 28px; display: flex; align-items: stretch; gap: 26px; position: sticky; top: 0; z-index: 50; }
  .topbar .tb-title { padding: 15px 0; align-self: center; }
  .topbar h1 { font-size: 18px; font-weight: 600; letter-spacing: .3px; }
  .topbar h1 .crumb { color: #8a97ab; font-weight: 500; }
  .topbar .subtitle { font-size: 12px; color: #a0aec0; margin-top: 2px; }
  .topbar .subtitle:empty { display: none; }   /* only shows if a load error is written into it */

  /* ── Overview / Orders view switch — pill tabs living in the dark top bar ── */
  .topbar-tabs { display: flex; align-items: center; gap: 8px; }
  .nav-tab { appearance: none; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 8px 22px; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .3px; color: #c3cbd6; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
  .nav-tab:hover { color: #fff; background: rgba(255,255,255,.16); }
  .nav-tab.active { background: #ff9900; border-color: #ff9900; color: #fff; box-shadow: 0 1px 6px rgba(255,153,0,.45); }
  .nav-hint { margin-left: auto; align-self: center; font-size: 11.5px; color: #8a97ab; text-align: right; min-width: 0; }
  .nav-hint b { color: #d7dde5; font-weight: 600; }

  /* ── Mockup banner ── */
  .mockup-banner {
    background: #fff9c4; border-bottom: 2px solid #f9a825;
    padding: 10px 28px; font-size: 12.5px; color: #5d4037; line-height: 1.5;
  }
  .mockup-banner b { color: #bf360c; letter-spacing: .3px; }
  .mockup-banner .chip {
    display: inline-block; background: #f9a825; color: #fff; font-weight: 700;
    padding: 1px 8px; border-radius: 10px; font-size: 11px; margin-right: 6px;
    letter-spacing: .5px;
  }

  /* ── Shared card/section styles ── */
  .section { margin: var(--cg-row, 14px) var(--cg-gutter, 28px); }   /* page rhythm: gaps come from --cg-row / --cg-gutter (shell.css, RULEBOOK Rule 6) */
  .section > h2 { font-size: 15px; font-weight: 600; color: #2d3436; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .section > h2 .note {
    font-size: 11px; font-weight: 400; color: #636e72; background: #edf2f7;
    padding: 2px 8px; border-radius: 10px;
  }
  .card { background: #fff; border: 1px solid #e9edf3; border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04); padding: 18px 20px; }
  .card.flush { padding: 0; overflow: hidden; }

  /* ── Order breakdown (compact editable grid) ── */
  .ord-wrap { text-align: left; background: #eaf1f9; border: 1px solid #c3d4e8; border-left: 4px solid #6b8fc0; border-radius: 8px; margin: 8px 16px 14px 40px; overflow: hidden; display: inline-block; vertical-align: top; width: max-content; max-width: calc(100vw - 270px); }
  .ord-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 10px 14px 12px; background: #dde8f5; border-bottom: 1px solid #c3d4e8; }
  .ord-bar h4 { font-size: 14px; font-weight: 700; color: #1f2937; margin: 0; width: 100%; }
  .ord-bar label { font-size: 10.5px; font-weight: 600; color: #5a6b85; display: flex; flex-direction: column; gap: 4px; }
  .ord-bar label .lbl-t { display: flex; align-items: center; gap: 4px; }
  .ord-bar input, .ord-bar select { font-size: 12px; padding: 0 7px; height: 28px; border: 1px solid #c3d4e8; border-radius: 5px; background: #fff; color: #1f2937; box-sizing: border-box; }
  .ord-bar .dsel input.ds-date { height: 28px; padding: 0 4px; }
  .ord-bar .status-pill { height: 28px; display: inline-flex; align-items: center; box-sizing: border-box; }
  .ord-bar input:focus, .ord-bar select:focus { outline: none; border-color: #ff9900; }
  .ord-bar .meta { font-size: 12px; color: #5a6b85; align-self: flex-end; padding-bottom: 6px; white-space: nowrap; }
  .ord-bar .meta b { color: #1f2937; }
  /* section headers inside an order panel (Production order / Shipment order) */
  .ord-sec { display: flex; align-items: center; gap: 12px; padding: 10px 14px 4px; }
  .ord-sec h5 { font-size: 13px; font-weight: 700; color: #1f2937; margin: 0; }
  .od-del { margin-left: auto; border: 1px solid #f1a9a9; background: #fdeceb; color: #b91c1c; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; height: fit-content; align-self: flex-end; }
  .od-del:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
  .ord-tools { display: flex; gap: 10px; padding: 6px 14px; align-items: center; flex-wrap: wrap; }
  .ord-tools .mini-btn { font-size: 11.5px; font-weight: 600; border: 1px solid #9db6d6; background: #fff; color: #34507a; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
  .ord-tools .mini-btn:hover { border-color: #ff9900; color: #ff9900; }
  select.add-model { font-size: 11.5px; padding: 4px 8px; border: 1px solid #9db6d6; border-radius: 6px; background: #fff; cursor: pointer; }
  .ord-grid-scroll { overflow-x: auto; max-width: 100%; padding: 0 12px 5px; }
  table.ord-grid { border-collapse: collapse; font-size: 11px; white-space: nowrap; background: #fff; border: 1px solid #c3d4e8; border-radius: 6px; }
  table.ord-grid th { background: #e9eff7; color: #34507a; font-size: 9px; font-weight: 700; padding: 3px 4px; text-align: center; vertical-align: top; border-right: 1px solid #d5e0ee; border-bottom: 1px solid #c3d4e8; }
  table.ord-grid th.shiph { text-align: left; position: sticky; left: 0; z-index: 3; }
  table.ord-grid th.modelh.unmapped { background: #b91c1c; color: #fff; }
  /* model + SKU pickers in a production column header — same width, font and height */
  table.ord-grid th .model-sel { display: block; width: 150px; height: 22px; font-size: 10.5px; padding: 0 3px; border: 1px solid #cbd5e0; border-radius: 4px; background: #fff; color: #1f2937; font-weight: 600; cursor: pointer; box-sizing: border-box; }
  table.ord-grid th .sku-sel { display: block; width: 150px; height: 22px; margin-top: 3px; font-size: 10.5px; padding: 0 3px; border: 1px solid #b6c2d4; border-radius: 4px; background: #fff; color: #374151; cursor: pointer; box-sizing: border-box; }
  table.ord-grid th .ssel { display: block; margin-top: 3px; }
  table.ord-grid th .ssel-btn { width: 150px; max-width: 150px; height: 22px; font-size: 10.5px; padding: 0 6px; border-radius: 4px; justify-content: space-between; box-sizing: border-box; }
  /* centered text in both pickers — text alignment only, widths untouched */
  table.ord-grid th .model-sel, table.ord-grid th .sku-sel { text-align: center; text-align-last: center; }
  table.ord-grid th .ssel-btn .ssel-lbl { max-width: none; flex: 1; text-align: center; }
  table.ord-grid th .ssel-model .ssel-btn { font-weight: 600; }        /* the model picker reads like the old bold select */
  .ssel-add .ssel-btn { font-weight: 600; color: #2d6cdf; border-style: dashed; }
  .sku-line .ssel-btn { width: 100%; box-sizing: border-box; justify-content: space-between; padding: 5px 6px; border-radius: 6px; font-size: 12px; }
  .sku-line .ssel { display: block; }
  table.ord-grid th .del-model { display: block; margin: 2px auto 0; font-size: 8.5px; color: #c26565; background: none; border: none; cursor: pointer; padding: 0; }
  table.ord-grid th .del-model:hover { color: #b91c1c; }
  /* shipment name fills its cell like a spreadsheet cell — the cell border IS the slot */
  table.ord-grid input.ship-name { display: block; width: 100%; min-width: 110px; font-weight: 700; text-align: left; padding: 3px 6px; box-sizing: border-box; }
  table.ord-grid td { padding: 0; border-top: 1px solid #eef1f5; border-right: 1px solid #f1f3f6; text-align: center; }
  table.ord-grid td.ship { text-align: left; font-weight: 700; color: #1f2937; background: #f4f7fb; position: sticky; left: 0; z-index: 1; white-space: nowrap; padding: 0 3px; }
  table.ord-grid td.total { font-weight: 700; background: #f4f7fb; padding: 0 4px; }
  /* flat, spreadsheet-style cells: centered values, no chrome until you click */
  table.ord-grid input, table.ord-grid select { font-size: 11px; padding: 1px 1px; border: 1px solid transparent; border-radius: 0; background: transparent; color: #1f2937; text-align: center; box-sizing: border-box; }
  table.ord-grid input:hover, table.ord-grid select:hover { border-color: #d8dee7; }
  table.ord-grid input:focus, table.ord-grid select:focus { outline: none; border-color: #ff9900; background: #fff; }
  /* strip number spinners and the date calendar icon — that hidden chrome wasted space */
  table.ord-grid input[type=number]::-webkit-inner-spin-button, table.ord-grid input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  table.ord-grid input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  table.ord-grid input[type=date] { min-width: 0; }
  table.ord-grid input.qty { width: 40px; font-weight: 600; }
  table.ord-grid input.w-date { width: 132px; } table.ord-grid input.w-wh { width: 46px; } table.ord-grid input.w-fwd { width: 54px; }
  /* Native calendar date picker (one box, click opens the calendar) */
  .dsel { display: inline-flex; gap: 3px; align-items: center; }
  .dsel input.ds-date { font-size: 11px; padding: 2px 4px; border: 1px solid #cbd5e0; border-radius: 4px; background: #fff; color: #1f2937; font-family: inherit; width: 148px; cursor: pointer; }
  table.ord-grid input.w-ship { width: 80px; } table.ord-grid input.w-cart { width: 40px; }
  table.ord-grid input.w-notes { width: 150px; text-align: left; }
  table.ord-grid input.w-fba { width: 90px; } table.ord-grid input.w-amz { width: 70px; }
  table.ord-grid select.w-ctry { width: 42px; } table.ord-grid select.w-type { width: 48px; } table.ord-grid select.w-stat { width: 82px; }
  table.ord-grid tr.foot td { background: #eef3f9; font-weight: 700; border-top: 2px solid #c3d4e8; }
  table.ord-grid tr.foot td.lbl { text-align: left; color: #34507a; }
  /* shipped-vs-produced mismatch flags on the shipment total row */
  table.ord-grid tr.foot td.mm-over  { background: #fde2e1; color: #b91c1c; }
  table.ord-grid tr.foot td.mm-under { background: #fef3c7; color: #92670a; }
  table.ord-grid tr.foot td.mm-note  { text-align: left; font-weight: 600; padding: 2px 8px; }
  table.ord-grid tr.foot td.mm-note .mm-bad  { color: #b91c1c; }
  table.ord-grid tr.foot td.mm-note .mm-warn { color: #92670a; }
  table.ord-grid tr.foot td.mm-note .mm-good { color: #0e7d5a; }
  table.ord-grid .del-ship { border: 1px solid #f3c2c2; background: #fff; color: #c0392b; border-radius: 4px; font-size: 11px; line-height: 1; padding: 1px 5px; cursor: pointer; }
  table.ord-grid .del-ship:hover { background: #c0392b; color: #fff; }
  table.ord-grid th.ship-del-head, table.ord-grid td.ship-del-cell { width: 26px; text-align: center; padding: 0 3px; }

  /* ── Product-tab style grid (days × shipments countdown) ── */
  .grid-card { margin: 4px 28px 20px; background: #fff; border-radius: 10px; border: 1px solid #e9edf3; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
  .grid-card > h3 { font-size: 14px; font-weight: 600; padding: 12px 18px; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; gap: 8px; }
  .grid-scroll { overflow-x: auto; max-height: 520px; overflow-y: auto; }
  table.grid { border-collapse: collapse; font-size: 11.5px; font-family: 'SF Mono','Consolas',monospace; }
  table.grid thead th {
    position: sticky; top: 0; background: var(--cg-th-bg); color: var(--cg-th-fg); z-index: 5;
    font-weight: 700; font-size: 10.5px; padding: 4px 6px; white-space: nowrap;
    text-align: center; border-right: 1px solid #e6ebf2; border-bottom: 1px solid #e2e8f0; letter-spacing: .3px;
  }
  table.grid thead th.ship-head { min-width: 62px; max-width: 62px; }
  table.grid thead th.meta-head { background: #e3ecfc; min-width: 72px; }
  table.grid thead tr.sub th { background: #e3ecfc; font-size: 10px; padding: 2px 6px; font-weight: 500; }
  table.grid thead tr.sub th.ship-status { font-weight: 700; letter-spacing: .2px; }
  table.grid tbody td { padding: 3px 6px; text-align: center; border-right: 1px solid #edf2f7; border-top: 1px solid #f4f6f9; white-space: nowrap; }
  table.grid tbody td.col-date { font-weight: 600; color: #2d3436; background: #fbfcfe; text-align: left; padding-left: 10px; position: sticky; left: 0; z-index: 3; }
  table.grid tbody td.col-ratio { color: #ff9900; font-weight: 600; }
  table.grid tbody td.col-fba   { background: #ecf4fb; font-weight: 600; color: #1e3a5f; }
  table.grid tbody td.col-fbm   { background: #f1eefe; color: #4a3a8a; }
  table.grid tbody td.col-3pl   { background: #fff8e1; color: #6b4a05; }
  table.grid tbody td.col-sold  { color: #c62828; font-weight: 500; }
  table.grid tbody td.muted     { color: #cbd5e0; }
  table.grid tbody tr.today-row td { background: #fff3cd !important; border-top: 2px solid #f9a825; border-bottom: 2px solid #f9a825; font-weight: 700; }
  table.grid tbody tr:hover td:not(.col-date) { background: #fffaf0; }
  table.grid tbody td.arrive-cell { background: #c8e6c9; color: #1b5e20; font-weight: 700; }
  table.grid tbody td.countdown-cell { color: #607d8b; }
  .grid-legend { font-size: 11px; color: #636e72; padding: 8px 18px; background: #fbfcfe; border-top: 1px solid #edf2f7; }
  .grid-legend span { display: inline-block; margin-right: 14px; }
  .grid-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

  /* ── Data health / gaps ── */
  .health-card { margin: 4px 28px 16px; background: #fff; border-radius: 10px; border: 1px solid #e9edf3; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
  .health-card h2 { font-size: 14px; font-weight: 600; padding: 12px 18px; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; gap: 10px; cursor: pointer; }
  .health-card h2:hover { background: #fbfcfe; }
  .health-card .toggle-arrow { display: inline-block; transition: transform .15s; font-size: 10px; color: #ff9900; }
  .health-card .toggle-arrow.open { transform: rotate(90deg); }
  .health-body { padding: 14px 18px; display: none; }
  .health-body.open { display: block; }
  .health-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .health-stat { padding: 8px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
  .hs-ok   { background: #d1f2eb; color: #065f46; }
  .hs-warn { background: #fff3cd; color: #856404; }
  .hs-bad  { background: #ffccbc; color: #bf360c; }
  .gap-table { border-collapse: collapse; font-size: 12px; width: 100%; }
  .gap-table th { padding: 6px 10px; background: var(--cg-th-bg); text-align: left; font-weight: 600; font-size: 11px; color: var(--cg-th-fg); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--cg-th-line); }
  .gap-table td { padding: 5px 10px; border-bottom: 1px solid #f4f6f9; }
  .gap-table tr:hover { background: #fffaf0; }
  .gap-tag { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 600; margin-right: 4px; }
  .gt-miss { background: #ffccbc; color: #bf360c; }
  .gt-warn { background: #fff3cd; color: #856404; }
  .gt-info { background: #dbeafe; color: #1e40af; }
  /* the "gaps" tag is enough — no row highlight/borders */

  /* ── Filter bar ──
     Layout, labels, chip size and the search box are the HOUSE filter bar in
     Shared Data/shell.css (RULEBOOK Rule 6) — this page must not re-declare
     them. Only the ACCENT is set here, and it is the Sales dashboard's blue,
     which is the benchmark (owner 2026-08-06). The old page-local .chip pills
     (orange, inline labels, a second row of Frequent presets) are gone. */
  .filter-chip:hover { border-color: #2563eb; color: #1d4ed8; }
  .filter-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; }
  /* a Frequent view whose catalog name no longer exists — kept for any other
     .chip-gone user; the Frequent row itself was removed */
  .chip.chip-gone { color: #a0aab8; border-style: dashed; cursor: help; text-decoration: line-through; }

  /* ── Entry form stubs + modal ── */
  /* first block under the topbar — the only one that owns a TOP gap */
  .action-bar { margin: var(--cg-row, 14px) var(--cg-gutter, 28px) var(--cg-row, 14px); display: flex; gap: 10px; flex-wrap: wrap; }
  .action-btn {
    background: #ff9900; color: #fff; border: none; border-radius: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; letter-spacing: .2px;
  }
  .action-btn:hover { background: #e68a00; }
  .action-btn.lo { background: #fff3e2; color: #9a5a00; border: 1px solid #f0c58c; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
  .action-btn.lo:hover { background: #ffe9cb; border-color: #e8ab55; color: #7a4600; }
  .action-btn.secondary { background: #fff; color: #2d3436; border: 1px solid #cbd5e0; }
  .action-btn.secondary:hover { border-color: #ff9900; color: #ff9900; }

  .modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(35,47,62,0.55);
    z-index: 500; justify-content: center; align-items: flex-start; padding-top: 80px;
  }
  .modal-backdrop.open { display: flex; }
  .modal { background: #fff; border-radius: 12px; width: 520px; max-width: 92vw; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; transition: width .2s; }
  .modal.wide { width: 960px; }
  .modal-head { background: #232f3e; color: #fff; padding: 12px 18px; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
  .modal-head .x { cursor: pointer; opacity: .8; font-size: 18px; }
  .modal-head .x:hover { opacity: 1; }
  .modal-body { padding: 18px; }
  .modal-body .stub-banner {
    background: #fff9c4; border: 1px solid #f9a825; color: #5d4037;
    border-radius: 6px; padding: 8px 10px; font-size: 12px; margin-bottom: 14px;
    line-height: 1.5;
  }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .form-grid.full { grid-template-columns: 1fr; }
  .form-field { display: flex; flex-direction: column; gap: 3px; }
  .form-field label { font-size: 11px; font-weight: 600; color: #636e72; text-transform: uppercase; letter-spacing: .4px; }
  .form-field input, .form-field select, .form-field textarea {
    padding: 6px 10px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 13px;
    font-family: inherit; background: #fff;
  }
  .modal-foot { padding: 12px 18px; border-top: 1px solid #edf2f7; display: flex; justify-content: flex-end; gap: 8px; }
  /* "⧉ Same as last shipment" / "⧉ Order text" buttons inside dialogs & section headers */
  .modal .mini-btn, .oh-box .mini-btn, .ord-sec .mini-btn { font-size: 11.5px; font-weight: 600; border: 1px solid #9db6d6; background: #fff; color: #34507a; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
  .modal .mini-btn:hover, .oh-box .mini-btn:hover, .ord-sec .mini-btn:hover { border-color: #ff9900; color: #b45309; }

  /* ── Orders view ── */
  .ord-card { margin: 4px 28px 20px; background: #fff; border-radius: 10px; border: 1px solid #e9edf3; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow-x: auto; }
  .ord-card h2 { font-size: 15px; font-weight: 600; padding: 14px 20px; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; gap: 8px; }
  table.ord { border-collapse: collapse; font-size: 13px; width: 100%; }
  table.ord thead th { padding: 9px 10px; background: var(--cg-th-bg); color: var(--cg-th-fg); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; text-align: left; border-bottom: 2px solid var(--cg-th-line); }
  table.ord thead th.right { text-align: right; }
  table.ord tbody td { padding: 8px 10px; border-top: 1px solid #edf2f7; }
  table.ord tbody tr.parent { background: #f8fafc; cursor: pointer; }
  table.ord tbody tr.parent:hover { background: #fff8e1; }
  table.ord tbody tr.child td { background: #fff; padding: 6px 10px 6px 40px; font-size: 12px; color: #4a5568; border-top: 1px dashed #edf2f7; }
  table.ord .expand-icon { display: inline-block; width: 14px; color: #ff9900; font-size: 10px; transition: transform .15s; margin-right: 6px; }
  table.ord .expand-icon.open { transform: rotate(90deg); }
  .qty-right { text-align: right; font-weight: 600; }

  /* ── Product detail panel ── */
  /* identity strip spanning both cards — everything below it belongs to this product */
  .detail-head { margin: 4px 28px 0; padding: 12px 20px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e9edf3; border-left: 4px solid #ff9900; border-bottom: 2px solid #eef1f6; border-radius: 10px 10px 0 0; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
  .detail-wrap { margin: 0 28px 20px; display: grid; grid-template-columns: var(--dw-l, 2fr) 8px var(--dw-r, 3fr); gap: 8px; background: #f0f2f6; border: 1px solid #e9edf3; border-top: none; border-radius: 0 0 10px 10px; padding: 12px; }
  /* draggable gutter between the ledger column and the charts column */
  .dw-split { order: 2; cursor: col-resize; border-radius: 4px; position: relative; touch-action: none; }
  .dw-split::after { content: ''; position: absolute; left: 3px; right: 3px; top: 0; bottom: 0; border-radius: 2px; background: #dde3ea; }
  .dw-split:hover::after, .dw-split.active::after { background: #ff9900; }
  /* the separator inside the charts card doubles as a height handle */
  #forecast-card .card-sep { cursor: row-resize; padding: 4px 0; margin: 16px -20px 12px; border-top: none; position: relative; touch-action: none; }
  #forecast-card .card-sep::after { content: ''; position: absolute; left: 20px; right: 20px; top: 5px; height: 3px; border-radius: 2px; background: #dde3ea; }
  #forecast-card .card-sep:hover::after, #forecast-card .card-sep.active::after { background: #ff9900; }
  /* profile + ledger on the LEFT, charts on the RIGHT (swapped via order, markup untouched) */
  .detail-wrap #ledger-card { order: 1; }
  .detail-wrap #forecast-card { order: 3; }
  /* min-width:0 stops a wide ledger from blowing the grid column out past the viewport
     (THE source of the page's sideways jump); the ledger scrolls inside its card instead */
  .detail-wrap .detail-card { box-shadow: none; min-width: 0; }
  #ledger-table-wrap { overflow-x: auto; }
  .detail-head .dh-stats { display: inline-flex; gap: 8px; margin-left: 18px; }
  .detail-head .dh-chip { font-size: 12px; color: #667085; background: #f4f6fa; border: 1px solid #e9edf3; border-radius: 8px; padding: 4px 10px; white-space: nowrap; }
  .detail-head .dh-chip b { color: #1f2937; margin-left: 3px; }
  .detail-card { background: #fff; border-radius: 10px; border: 1px solid #e9edf3; box-shadow: 0 1px 2px rgba(16,24,40,.04); padding: 16px 20px; }
  .detail-card h3 { font-size: 14px; font-weight: 600; color: #2d3436; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  /* Left "forecast" card: lay out as a column so the two charts grow to fill the
     card's height (which the grid stretches to match the taller ledger card on
     the right), instead of leaving blank space underneath. */
  #forecast-card { display: flex; flex-direction: column; }
  #forecast-card .chart-box { position: relative; width: 100%; }
  #forecast-card .chart-box-proj { flex: 0 0 auto; height: 340px; }   /* fixed — doesn't stretch with the taller ledger */
  #forecast-card .chart-box-ratio { flex: 1 1 0; min-height: 260px; }  /* absorbs the extra height so both cards share one bottom line */
  .detail-title { font-size: 16px; font-weight: 700; color: #2d3436; display: flex; align-items: center; gap: 10px; }
  .detail-title img { width: 42px; height: 42px; object-fit: contain; border-radius: 6px; background: #f5f6fa; }
  .detail-meta { font-size: 12px; color: #636e72; margin-top: 2px; }
  .ship-mini { font-size: 12px; }
  .ship-mini table { width: 100%; border-collapse: collapse; }
  .ship-mini td { padding: 6px 4px; border-top: 1px dashed #edf2f7; }
  .ship-mini th { padding: 6px 4px; text-align: left; font-weight: 600; font-size: 11px; color: var(--cg-th-fg); text-transform: uppercase; letter-spacing: .3px; }
  .status-pill { display: inline-block; padding: 1px 7px; font-size: 10.5px; font-weight: 600; border-radius: 8px; }
  .st-1 { background: #e2e8f0; color: #4a5568; }
  .st-2 { background: #dbeafe; color: #1e40af; }
  .st-3 { background: #fef3c7; color: #92400e; }
  .st-4 { background: #cffafe; color: #155e75; }
  .st-5 { background: #d1fae5; color: #065f46; }
  .dest-chip { display: inline-block; padding: 1px 7px; font-size: 10.5px; font-weight: 700; border-radius: 8px; letter-spacing: .3px; }
  .d-FBA { background: #4aa3df; color: #fff; }
  .d-FBM { background: #a29bfe; color: #fff; }
  .d-3PL { background: #fdcb6e; color: #5d4037; }
  .prof-btn.on { background: #1f7a52; color: #fff; border-color: #1f7a52; }
  .rf-row { align-items: center; gap: 8px; flex-wrap: wrap; }
  .rf-row .rf-lbl { font-size: 11px; font-weight: 700; color: #6b21a8; text-transform: uppercase; letter-spacing: .3px; }
  .rf-row label { font-size: 12px; color: #4a5568; display: inline-flex; gap: 4px; align-items: center; }
  .rf-row input[type=date] { font-size: 12px; padding: 2px 5px; border: 1px solid #cbd5e0; border-radius: 4px; }
  /* centered, consistent dialogs (replace native alert/confirm/prompt) */
  #uiDlg { position: fixed; inset: 0; background: rgba(35,47,62,.55); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .uidlg-box { background: #fff; border-radius: 12px; width: 460px; max-width: 94vw; box-shadow: 0 20px 50px rgba(0,0,0,.3); overflow: hidden; }
  .uidlg-title { background: #232f3e; color: #fff; padding: 11px 18px; font-weight: 600; font-size: 14px; }
  .uidlg-msg { padding: 16px 18px 6px; font-size: 13.5px; color: #2d3436; line-height: 1.55; white-space: pre-line; max-height: 50vh; overflow-y: auto; }
  .uidlg-in { margin: 8px 18px 0; width: calc(100% - 36px); padding: 8px 10px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 13px; }
  .uidlg-in:focus { outline: none; border-color: #ff9900; }
  .uidlg-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }
  .uidlg-ok { background: #ff9900; color: #fff; border: none; border-radius: 6px; padding: 7px 22px; font-size: 13px; font-weight: 700; cursor: pointer; }
  .uidlg-ok:hover { background: #e68a00; }
  .uidlg-ok.danger { background: #d63031; }
  .uidlg-ok.danger:hover { background: #b71c1c; }
  .uidlg-cancel { background: #fff; color: #475569; border: 1px solid #cbd5e0; border-radius: 6px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .uidlg-cancel:hover { border-color: #8a94a6; color: #1f2937; }

  /* floating unsaved-changes bar (order edits save manually now) */
  #saveBar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 900; background: #232f3e; color: #fff; font-size: 13px; padding: 10px 14px 10px 18px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.35); display: flex; align-items: center; gap: 12px; }
  #saveBar .sb-save { background: #ff9900; color: #fff; border: none; border-radius: 6px; padding: 6px 20px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
  #saveBar .sb-save:hover { background: #e68a00; }
  #saveBar .sb-discard { background: none; color: #c3cbd6; border: 1px solid #4a5568; border-radius: 6px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
  #saveBar .sb-discard:hover { color: #fff; border-color: #8892a4; }
  #saveBar button:disabled { opacity: .5; cursor: default; }

  /* compact legend under a chart title — replaces the old explainer paragraphs */
  .chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 12px; color: #667085; margin-bottom: 8px; }
  .chart-legend .lg-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
  .chart-legend .lg-toggle input { accent-color: #ff9900; margin: 0; cursor: pointer; }
  /* the profile section is its own boxed sub-panel — it's shared config, not part of the ledger */
  .prof-box { background: #f8fafc; border: 1px solid #e9edf3; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
  /* full-bleed divider between a card's sections (forecast chart vs seasonality curve) */
  .card-sep { border-top: 2px solid #eef1f6; margin: 20px -20px 16px; }
  /* date-range fill bar (start date+ratio → end date+ratio, linear in between) */
  .fill-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
  .fill-bar .fb-lbl { font-size: 11px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
  .fill-bar input[type=date] { font-size: 12px; padding: 3px 5px; border: 1px solid #cbd5e0; border-radius: 5px; color: #2d3436; }
  .fill-bar input[type=number] { width: 54px; font-size: 12px; padding: 3px 5px; border: 1px solid #cbd5e0; border-radius: 5px; text-align: center; }
  .fill-bar input:focus { outline: none; border-color: #ff9900; }
  .fill-bar .fb-arrow { color: #94a3b8; }
  .zoom-hint { font-size: 11px; color: #9ca3af; white-space: nowrap; cursor: help; }
  /* Fixed horizontal scrollbar proxy at the viewport bottom (same as the Sales
     dashboard) — scroll the overview table sideways without hunting for the
     real scrollbar at the bottom of a tall table. */
  .sticky-scrollbar-wrap {
    position: fixed; bottom: 0; z-index: 100; overflow-x: auto; overflow-y: hidden;
    height: 16px; background: rgba(245,246,248,0.95); border-top: 1px solid #cbd5e0;
    display: none;
  }
  .sticky-scrollbar-inner { height: 1px; }
  .zoom-ctrls { display: inline-flex; align-items: center; gap: 6px; }
  .zoom-ctrls .prof-btn { min-width: 30px; }
  .ratio-editor { margin-top: 10px; }
  .ratio-editor input[type=number] { width: 56px; padding: 2px 5px; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 12px; text-align: center; }
  .ratio-editor label { font-size: 12px; color: #4a5568; margin-right: 10px; display: inline-flex; gap: 4px; align-items: center; }
  /* Reusable-profile editor */
  .prof-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 8px 0; }
  .prof-meta > label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: #636e72; margin: 0; align-items: stretch; min-width: 0; max-width: 100%; }
  .prof-meta > label.grow { flex: 1 1 200px; }   /* the dropdown / name field fill the row and shrink instead of overflowing */
  .prof-meta input, .prof-meta select { padding: 5px 7px; border: 1px solid #cbd5e0; border-radius: 5px; font-size: 12px; background: #fff; height: 30px; box-sizing: border-box; max-width: 100%; }
  .prof-meta select, .prof-meta input[type="text"] { width: 100%; }
  /* secondary action buttons — soft filled so they clearly read as buttons */
  .prof-btn { background: #e8f0fe; border: 1px solid #b9d2fb; border-radius: 6px; padding: 0 12px; height: 30px; font-size: 12px; font-weight: 600; color: #1a56b8; cursor: pointer; box-sizing: border-box; }
  .prof-btn:hover { background: #d7e6fd; }
  .prof-btn.sm { height: 26px; padding: 0 9px; font-size: 11px; }
  .prof-btn.danger { background: #fdeceb; border-color: #f5b5b0; color: #b91c1c; }
  .prof-btn.danger:hover { background: #fbdcd9; }
  .prof-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12px; padding: 6px 10px; border-radius: 6px; margin: 6px 0; }
  /* "model only" chip on the Orders header when a product is selected above */
  .ord-modelchip { margin-left: 12px; font-size: 12px; font-weight: 600; color: #1a56b8; background: #e8f0fe; border: 1px solid #b9d2fb; border-radius: 14px; padding: 3px 6px 3px 10px; display: inline-flex; align-items: center; gap: 4px; }
  .ord-modelchip button { border: none; background: #c7dbfb; color: #1a56b8; border-radius: 50%; width: 16px; height: 16px; line-height: 14px; font-size: 11px; cursor: pointer; padding: 0; }
  .ord-modelchip button:hover { background: #aecdf9; }
  /* Total Inventory column — a summary, so make it stand out */
  table.ov td.ov-total { font-weight: 700; background: #f3f7ff; color: #1a3a6b; }
  table.ov thead th.ov-total-h { background: #edf1fd; color: #3b4d9b; border-bottom-color: #aebbf0; }
  table.ov thead th.ov-total-h.sortable:hover { background: #e2e9fb; color: #2d3c7d; }
  table.ov thead th.ov-checkin { background: #f0f5fb; color: #3b5f8a; }
  .ratio-grid { max-height: 320px; overflow-y: auto; border: 1px solid #edf2f7; border-radius: 8px; padding: 8px 10px; }
  .ratio-month { margin-bottom: 6px; }
  .ratio-month-h { position: sticky; top: -8px; background: #fff; font-size: 11px; font-weight: 700; color: #2d3748; padding: 3px 0; z-index: 1; }
  .ratio-month-days { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .ratio-grid label { font-size: 12px; color: #4a5568; display: inline-flex; gap: 3px; align-items: center; margin: 0; }
  .ratio-grid label span { min-width: 16px; color: #94a3b8; font-size: 10px; text-align: right; }
  .ratio-grid label.hot input { border-color: #8b5cf6; background: #f5f3ff; font-weight: 700; }
  .ratio-grid input[type=number] { width: 50px; padding: 2px 4px; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 12px; text-align: center; }
  .detail-empty { background: #fff; border-radius: 10px; padding: 24px; text-align: center; color: #636e72; font-size: 13px; margin: 4px 28px 20px; }
  @media (max-width: 1100px) { .detail-wrap { grid-template-columns: 1fr !important; } .dw-split { display: none; } }

  /* ── Day-by-day ledger (detail right card) ── */
  .ledger-fields { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; margin: 8px 0; }
  .ledger-fields .fld { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: #636e72; text-transform: uppercase; letter-spacing: .3px; margin: 0; }
  .ledger-fields input { padding: 5px 7px; border: 1px solid #cbd5e0; border-radius: 5px; font-size: 12px; width: 84px; height: 30px; box-sizing: border-box; }
  .ledger-fields input[type=date] { width: 138px; }
  .ledger-fields .ledger-hint { font-size: 12px; color: #636e72; align-self: flex-end; padding-bottom: 7px; }
  /* grouped 3PL block — same yellow theme as the 3PL column, shows it's one topic */
  .tpl-group { background: #fffae9; border: 1px solid #f3e2b0; border-radius: 8px; padding: 8px 10px; }
  .tpl-group .fld { color: #6b4a05; }
  .tpl-group .prof-btn { align-self: flex-end; }
  .tpl-group .move-sep { color: #d9c587; align-self: flex-end; padding: 0 2px 6px; }
  /* Action-needed warnings banner (collapsed by default) */
  .warn-card { margin: 0 var(--cg-gutter, 28px) var(--cg-row, 14px); border: 1px solid #f0d2c0; border-radius: 10px; background: #fff8f4; overflow: hidden; }
  .warn-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left; font: inherit; }
  .warn-pill-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
  .warn-caret { color: #8a6100; font-size: 12px; }
  .warn-pill { font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
  /* The inventory-mismatch pill is the loudest thing on the page on purpose:
     a number that cannot be true (owner 2026-08-25). Solid red, not a tint. */
  .warn-pill.warn-mismatch { background: #b42318; color: #fff; box-shadow: 0 0 0 3px rgba(180,35,24,.18); }
  /* ⛔ PAST DUE is ORANGE, not red (owner 2026-09-01: every type of issue its
     own colour). It was the same red as the ≠ mismatch pill above, and those
     are the two loudest things on the banner — the one you must never miss is
     the impossible number, so red stays with it and a passed date reads as the
     hot-but-ordinary urgency it is. The class is `warn-due`, not `warn-red`:
     a class named after a colour it no longer is, is the next reader's trap. */
  .warn-pill.warn-due { background: #ffe6d5; color: #c2410c; }
  .warn-pill.warn-amber { background: #fbeec3; color: #8a6100; }
  .warn-pill.warn-draft { background: #f5f3ff; color: #6d28d9; border: 1px dashed #a78bfa; }
  .warn-pill.warn-soon { background: #dbeafe; color: #1d4ed8; }
  .warn-kd { color: #7c3aed; }   /* small ✎ mark: this past-due line is a draft */
  .warn-hint { font-size: 11px; color: #9a7b5a; margin-left: auto; }
  .warn-body { max-height: 240px; overflow-y: auto; padding: 4px 12px 10px; border-top: 1px solid #f0d2c0; }
  .warn-list { margin: 6px 0 0; padding-left: 20px; }
  .warn-li { font-size: 12px; line-height: 1.55; }
  /* ONE COLOUR PER TYPE OF ISSUE — the line matches the pill you clicked to
     open it (owner 2026-09-01). Before this, three of the five pills opened
     lists printed in the SAME dark red, because the lines were coloured by an
     internal severity flag instead of by the bucket they were filed in. The
     class is warn-b-<bucket key> so a new bucket cannot be added without also
     being given its colour here. */
  .warn-li.warn-b-mismatch { color: #b42318; font-weight: 600; }   /* ≠ a number that cannot be true — the loudest, like its solid pill */
  .warn-li.warn-b-late     { color: #c2410c; }                     /* ⛔ past due — orange, so it is never the mismatch red */
  .warn-li.warn-b-soon     { color: #1d4ed8; }                     /* 📅 coming up — the blue of its pill */
  .warn-li.warn-b-data     { color: #8a6100; }                     /* ⚠ data fixes — the amber of its pill */
  .warn-li.warn-b-off      { color: #334155; }                     /* ▦ units not on a graph — slate */
  /* OVERDUE items ("… days ago") read urgent: bolder than the rest. The COLOUR
     is the bucket's (above) — it used to force red here, which is how a violet
     draft line turned red the day it went past due. */
  .warn-li.warn-late { font-weight: 600; }
  /* a "used" entry in the ledger — parts consumed, not moved. Amber, so it can
     never be mistaken for the blue 3PL→FBA transfer chip beside it. */
  /* the COMPONENTS block heading — the house archived-block look, its own tint
     so the two blocks at the bottom of the table are never confused */
  /* a COMPONENT's panel has no forecast card, so the ledger takes the whole
     width instead of sitting in the right-hand column of a two-column split */
  .detail-wrap.dw-solo { display: block; }
  .detail-wrap.dw-solo > .detail-card { width: auto; max-width: none; }
  tbody tr.ov-comp-head td { background: #f6f8fb; color: #5b6a85; border-top-color: #c3d0e2; }
  /* A COMPONENT ROW READS AS A DIFFERENT KIND OF THING — gently (owner
     2026-09-01). A soft neutral grey, not a meaning colour: green is stock,
     blue is totals, amber is a warning, violet is a draft, and the greyed
     .cg-archived look means "put aside", which a part is not. Neutral says
     "not a product" and claims nothing else.
     The tint deliberately SKIPS the columns that carry their own meaning —
     3PL / FBA stock (green) and Total inventory (blue) still read normally on
     a part, because those are the figures you open it for. */
  tbody tr.ov-component td.model-cell { color: #4a5568; }
  .lg-xfer.lg-used { background: #fdf4e3; border-color: #e8d5a8; color: #8a6100; }
  .warn-go { text-decoration: underline; cursor: pointer; color: inherit; }
  .warn-go:hover { opacity: .75; }
  tr.warn-flash td { animation: lgflash 2s; }
  /* the order card a link just opened — a 2s glow, so you see WHICH one opened */
  .ord-wrap.ord-flash { animation: ordflash 2s; }
  @keyframes ordflash { 0% { box-shadow: 0 0 0 3px #ffcf6b; } 70% { box-shadow: 0 0 0 3px #ffcf6b; } 100% { box-shadow: 0 0 0 3px rgba(255,207,107,0); } }
  /* short "units not on graph" rows */
  .uu-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 10px 4px 3px; }
  .uu-row { font-size: 13px; color: #2d3436; padding: 4px 6px; border-top: 1px solid #eef2f7; line-height: 1.5; }
  .uu-row b { font-weight: 700; }
  .uu-tag { color: #8a94a6; font-size: 11.5px; }
  /* off-graph label + colour-key button on the warnings line */
  .warn-pill.warn-off { background: #eef2f7; color: #334155; }
  .warn-allclear { font-size: 12.5px; font-weight: 700; color: #15803d; }
  .warn-legend-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #e2c9b6; border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 600; color: #8a6100; cursor: pointer; }
  .warn-legend-btn:hover { background: #fffbf7; border-color: #d9a066; }
  /* legend popup */
  .lg-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #64748b; margin: 12px 0 5px; }
  .lg-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #2d3436; padding: 3px 0; line-height: 1.4; }
  .lg-sw { display: inline-block; width: 26px; height: 12px; border-radius: 2px; flex: none; }
  /* Per-product warnings card inside the detail panel. It IS the page-top
     .warn-card (same markup, same pills, same collapsed-by-default) — this only
     seats it inside the panel: flush under the panel head, square top corners. */
  .warn-card.dw-card { margin: 0 28px 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
  .warn-lead { font-size: 12.5px; color: #6b4a05; }
  .warn-sub { font-size: 11px; color: #9a7b5a; }
  /* stale-tab refresh bar */
  #staleBar { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; background: #b42318; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  #staleBar button { margin-left: 10px; background: #fff; color: #b42318; border: none; border-radius: 6px; padding: 4px 12px; font-weight: 700; cursor: pointer; }
  /* per-order change-history viewer */
  #ordHist { position: fixed; inset: 0; z-index: 2500; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; }
  .oh-box { background: #fff; border-radius: 12px; width: min(860px, 94vw); max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
  .oh-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e9edf3; font-size: 14px; }
  .oh-sub { font-size: 11px; color: #8a94a6; font-weight: 400; }
  .oh-close { margin-left: auto; background: none; border: 1px solid #cbd5e0; border-radius: 6px; padding: 4px 12px; font-size: 12px; color: #636e72; cursor: pointer; }
  .oh-list { overflow-y: auto; padding: 8px 16px 14px; }
  .oh-row { padding: 8px 10px; border-bottom: 1px solid #f1f4f8; font-size: 12px; }
  .oh-row.oh-delete { background: #fff5f5; }
  .oh-row.oh-insert { background: #f4faf7; }
  .oh-when { font-weight: 700; color: #1f2937; margin-right: 10px; white-space: nowrap; }
  .oh-tbl { color: #636e72; margin-right: 10px; }
  .oh-app { font-size: 10.5px; background: #eef2ff; color: #3730a3; border-radius: 5px; padding: 1px 7px; }
  .oh-app.oh-old { background: #fde2e1; color: #b42318; font-weight: 700; }
  .oh-diff { margin-top: 3px; color: #374151; line-height: 1.5; }
  .od-hist { background: none; border: 1px solid #cbd5e0; border-radius: 6px; padding: 5px 12px; font-size: 12px; color: #4b5563; cursor: pointer; margin-right: 8px; }
  .od-hist:hover { border-color: #90a4c4; }
  /* Expected-cost table for draft production orders (reuses the #ordHist overlay) */
  .dc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .dc-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; background: var(--cg-th-bg); color: var(--cg-th-fg); padding: 8px 10px; border-bottom: 2px solid var(--cg-th-line); }
  .dc-table td { padding: 7px 10px; border-bottom: 1px solid #f1f4f8; }
  .dc-table th.num, .dc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .dc-table tr.dc-order td { font-weight: 700; background: #faf9ff; border-top: 2px solid #ddd6fe; color: #5b21b6; }
  .dc-table tr.dc-grand td { font-weight: 800; font-size: 13.5px; background: #f1f5f9; border-top: 3px double #94a3b8; }
  .dc-missing { color: #b42318; font-weight: 700; }
  /* On the LINE rows the three COGS parts (production / shipment / additional)
     sit slightly quieter than the all-in COGS + total columns next to them.
     The bold subtotal / grand-total rows carry money in those columns and keep
     their own row colour (dc-sub-prod / -ship / -add, no dc-part class). */
  .dc-table td.dc-part { color: #64748b; }
  .dc-qty { width: 80px; text-align: right; padding: 3px 6px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .dc-qty:focus { outline: none; border-color: #8b5cf6; }
  /* "units not on this graph" chip on the forecast chart */
  .unseen-chip { cursor: pointer; font-weight: 700; border-radius: 14px; padding: 2px 10px; font-size: 11px; white-space: nowrap; }
  .unseen-chip.bad { background: #fef2f2; color: #b42318; border: 1px solid #fecaca; }
  .unseen-chip.bad:hover { background: #b42318; color: #fff; }
  .unseen-chip.ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
  /* which orders those units are in — a quieter weight, so the figure still leads */
  .unseen-chip .unseen-from { font-weight: 600; opacity: .8; }
  .unseen-chip.bad:hover .unseen-from { opacity: .9; }
  .uu-from { color: #8a94a6; font-size: 11.5px; }
  .dc-btn { background: #faf5ff; border: 1px dashed #8b5cf6; border-radius: 6px; padding: 4px 12px; font-size: 11px; font-weight: 700; color: #6d28d9; cursor: pointer; }
  .dc-btn:hover { background: #8b5cf6; color: #fff; }
  /* Set-range input flash when a chart click fills it */
  @keyframes rfFlash { 0% { background: #ede9fe; border-color: #8b5cf6; } 100% { background: #fff; } }
  .rf-flash { animation: rfFlash 1.2s ease-out; }
  /* 3PL stock now read-only (auto) */
  .tpl-auto { font-weight: 700; font-size: 14px; color: #6b4a05; height: 30px; display: inline-flex; align-items: center; }
  /* Pipeline column tints in the overview */
  th.ov-checkin, td.ov-checkin { background: #f3f7fc; }
  table.ov tbody td.ov-profile { font-size: 11px; color: #5a6678; white-space: normal; max-width: 120px; line-height: 1.2; }
  select.prof-sel { font-size: 11px; padding: 3px 4px; border: 1px solid #cbd5e0; border-radius: 5px; max-width: 116px; background: #fff; color: #2d3436; cursor: pointer; }
  input.avg-edit { width: 56px; font-size: 12px; padding: 3px 5px; text-align: center; border: 1px solid #cbd5e0; border-radius: 5px; background: #fff; }
  input.avg-edit:focus { border-color: #4aa3df; outline: none; }
  /* Daily Avg tinted when it drifts from the recommended figure — same palette as
     the Days-Left cover tiers (system colours): >15% yellow, >25% orange, >40% red. */
  input.avg-edit.avg-off-yellow { background: #fef9c3; color: #854d0e; border-color: #e4d27a; font-weight: 600; }
  input.avg-edit.avg-off-orange { background: #ffedd5; color: #c2410c; border-color: #f3b581; font-weight: 600; }
  input.avg-edit.avg-off-red    { background: #fde2e1; color: #b42318; border-color: #f0a6a2; font-weight: 600; }
  /* Worst case: no daily average set at all, yet there IS a recommended figure. */
  input.avg-edit.avg-off-red-strong { background: #dc2626; color: #fff; border-color: #991b1b; font-weight: 700; }
  input.avg-edit.avg-off-red-strong::placeholder { color: #fff; opacity: 1; }
  /* family-row flag: worst child's Daily-Avg drift, shown while collapsed */
  .ov-avg-flag { display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 4px; padding: 0 5px; margin-top: 2px; white-space: nowrap; }
  .ov-avg-flag.avg-off-yellow { background: #fef9c3; color: #854d0e; }
  .ov-avg-flag.avg-off-orange { background: #ffedd5; color: #c2410c; }
  .ov-avg-flag.avg-off-red    { background: #fde2e1; color: #b42318; }
  .ov-avg-flag.avg-off-red-strong { background: #dc2626; color: #fff; }
  /* in-country, sellable stock (FBA + 3PL) — the important ones, highlighted.
     Header gets a dark green so its white label stays readable. */
  table.ov thead th.ov-instock { background: #e7f5ec; color: #15803d; border-bottom-color: #86d3a5; }
  table.ov thead th.ov-instock.sortable:hover { background: #d9efe1; color: #0f6b33; }
  table.ov thead th.ov-instock.sorted { color: #0a5c2a; }
  table.ov tbody td.ov-instock { background: #eef9f1; font-weight: 600; }
  table.ov tbody tr:hover td.ov-instock { background: #e1f2e7; }
  /* move dialog: "likely source orders" informational panel */
  /* "next free number in this series" under the Order name box */
  .oname-hint { display: block; font-size: 11px; color: #636e72; margin-top: 3px; min-height: 13px; }
  .oname-take { color: #1a56b8; font-weight: 600; text-decoration: underline; cursor: pointer; }
  .oname-take:hover { opacity: .75; }
  .mv-src-wrap { margin-top: 14px; }
  .mv-src { border: 1px solid #dbe4ef; background: #f6f9fd; border-radius: 8px; padding: 9px 12px; }
  .mv-src-h { font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 6px; }
  .mv-src-sub { font-weight: 500; font-size: 11px; color: #8a94a6; margin-left: 6px; }
  .mv-src-row { font-size: 12.5px; color: #2d3436; padding: 3px 0; border-top: 1px solid #e6edf5; line-height: 1.5; }
  .mv-src-row:first-of-type { border-top: none; }
  .mv-src-go { color: #1a56b8; font-weight: 600; text-decoration: underline; cursor: pointer; }
  .mv-src-go:hover { opacity: .75; }
  .mv-src-none { color: #8a94a6; }
  .mv-src-tag { font-size: 11px; font-weight: 700; color: #6d28d9; }
  .mv-src-tag.late { color: #b45309; }
  .mv-src-empty { font-size: 12px; color: #8a94a6; }
  .mv-src-foot { font-size: 11.5px; color: #64748b; margin-top: 7px; padding-top: 6px; border-top: 1px dashed #d7e0ec; line-height: 1.5; }
  .mv-arrived-btn { border: 1px solid #cbd5e0; background: #eafaf1; color: #0e7d5a; border-radius: 4px; font-size: 10px; padding: 1px 5px; cursor: pointer; margin-left: 4px; }
  .mv-arrived-yes { font-size: 10px; color: #0e7d5a; margin-left: 4px; }
  button.mv-undo { border: 1px solid transparent; background: none; cursor: pointer; border-radius: 4px; padding: 1px 5px; }
  button.mv-undo:hover { border-color: #f0a13c; color: #b45309; background: #fff4e5; }
  /* Derived shipment status cell: pill on top, two confirm checkboxes below */
  .ship-stat-cell { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 116px; }
  .ship-confirm { font-size: 10px; color: #4a5568; display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
  .ship-confirm input { margin: 0; }
  /* editable production-order name (in the order bar) */
  .ord-name { font-size: 15px; font-weight: 700; color: inherit; border: 1px solid transparent; border-radius: 5px; padding: 2px 6px; background: transparent; width: 130px; }
  .ord-name:hover { border-color: #cbd5e0; background: #fff; }
  .ord-name:focus { border-color: #ff9900; background: #fff; outline: none; }
  .ship-days { font-size: 11px; color: #636e72; text-align: center; white-space: nowrap; }
  /* live inline per-order warnings (under the shipments grid) */
  .ord-warn:empty { display: none; }
  .ord-warn { margin: 8px 2px 2px; padding: 8px 12px; background: #fff8f4; border: 1px solid #f0d2c0; border-radius: 8px; text-align: left; }
  .ord-warn .ow-head { font-size: 12px; font-weight: 700; color: #8a6100; margin-bottom: 3px; }
  .ord-warn ul { margin: 0; padding-left: 18px; }
  .ord-warn li { font-size: 11.5px; line-height: 1.5; }
  .ord-warn li.ow-red { color: #7a271a; }
  .ord-warn li.ow-amber { color: #6b4a05; }
  .ledger-page { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 12px; color: #4a5568; }
  /* Keep the Later/Today buttons pinned right so they don't shift when the
     "Today" button appears/disappears or the date range text changes width. */
  .ledger-page .lg-page-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
  /* pager + table share one shrink-wrapped box, so Earlier/Later hug the table edges */
  .ledger-inner { width: max-content; max-width: 100%; }
  .ledger-scroll { max-height: 695px; overflow: auto; border: 1px solid #edf2f7; border-radius: 8px; }   /* ~5 history + today + ~25 future rows in view; the ratio chart flexes down with it */
  .ledger-table { width: auto; border-collapse: collapse; font-size: 12px; }
  .ledger-table th { position: sticky; top: 0; background: var(--cg-th-bg); z-index: 1; padding: 5px 10px; text-align: right; font-size: 10px; font-weight: 700; color: var(--cg-th-fg); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--cg-th-line); }
  .ledger-table th:first-child { text-align: left; }
  .ledger-table td { padding: 2px 10px; text-align: right; border-top: 1px solid #f3f6f9; white-space: nowrap; }
  .ledger-table td.lg-date { text-align: left; color: #2d3748; padding-right: 18px; }
  .lg-wd { color: #b2bec3; font-size: 10px; }
  .lg-yr { color: #94a3b8; font-size: 10.5px; }
  .ledger-page .prof-btn:disabled { opacity: .45; cursor: default; }
  .ledger-table tr.lg-today td { background: #fff7ed; font-weight: 700; box-shadow: inset 0 1px 0 #f59e0b, inset 0 -1px 0 #f59e0b; }
  .ledger-table tr.lg-past td { color: #94a3b8; }
  .ledger-table td.lg-proj { color: #2563eb; }                 /* projected units */
  .ledger-table td.col-3pl { background: #fff8e1; color: #6b4a05; }
  /* arrival days: subtle green tint only — the running TOTAL stays normal text,
     the green +N chip is the only highlighted bit (it's the units being added). */
  .ledger-table td.col-arrival { background: #eafbf0; }
  .lg-bump { color: #16a34a; font-size: 10px; font-weight: 700; }
  .lg-xfer { color: #6b4a05; font-weight: 700; }
  .lg-x { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 0 0 2px; }
  .lg-x:hover { color: #e74c3c; }
  .lg-ratio { width: 100%; max-width: 52px; padding: 1px 3px; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 12px; text-align: center; box-sizing: border-box; }
  .ledger-table tr.lg-today .lg-ratio { border-color: #f59e0b; }
  /* flash a row when a shipment bar on the chart is clicked */
  @keyframes lgflash { 0%, 55% { background: #fde68a; } 100% { background: transparent; } }
  .ledger-table tr.lg-flash td { animation: lgflash 1.8s; }

  /* ── Overview table ── */
  /* Own scroll pane (same mechanism as the Sales table) so the header row and
     the frozen Pic/Model columns stay put while the rows scroll under them.
     max-height keeps the frozen header just below the sticky topbar. */
  /* The CARD does not scroll — its one-row title bar (with the Excel button)
     stays put. .ov-pane inside it is the scroll pane; the shell sizes that to
     10 rows including the header (RULEBOOK Rule 6). */
  .ov-card { margin: 0 var(--cg-gutter, 28px) var(--cg-row, 14px); background: #fff; border-radius: 10px; border: 1px solid #e9edf3; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
  .ov-pane { overflow: auto; max-height: calc(100vh - 180px); position: relative; }
  /* ONE row, compact — the hint sentences that made it two rows are gone. */
  .ov-card h2 { font-size: 15px; font-weight: 600; padding: 9px 20px; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; gap: 8px; }
  table.ov { border-collapse: collapse; font-size: 13px; width: 100%; }
  /* Header COLOURS are the shell's house table tokens (RULEBOOK Rule 6 §5a).
     This rule is scoped to table.ov, so it outranks the shell and has to ask
     for the tokens by name — the values themselves still live in ONE place. */
  table.ov thead th {
    text-align: center; padding: 6px 6px;
    background: var(--cg-th-bg); color: var(--cg-th-fg);
    font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
    white-space: normal; height: 46px; vertical-align: middle; line-height: 1.18;
    border-bottom: 2px solid var(--cg-th-line);
  }
  /* Headers wrap to exactly two lines via an explicit <br> in the label; nowrap
     keeps each line whole so nothing ever spills onto a third line. */
  table.ov thead th .thl { display: inline-block; white-space: nowrap; line-height: 1.18; vertical-align: middle; }
  table.ov thead th.left { text-align: left; }
  table.ov thead th.sortable { cursor: pointer; user-select: none; }
  table.ov thead th.sortable:hover { color: #2563eb; }
  table.ov thead th.sorted { color: #2563eb; }
  table.ov thead th .sort-arrow { font-size: 9px; margin-left: 3px; }
  table.ov tbody td { padding: 9px 8px; border-top: 1px solid #edf2f7; white-space: nowrap; text-align: center; }
  table.ov tbody td.left { text-align: left; }
  table.ov tbody td.model-cell { white-space: normal; }   /* let long names wrap */
  table.ov tbody tr.ov-component { background: #f7f8fa; }   /* see the note lower down */
  table.ov tbody tr:hover { background: #fffaf0; }
  table.ov tbody tr.selected { background: #fff8e1; }
  /* Only the Pic + Model cells open the forecast/projection panel — so clicking a
     figure or dropdown elsewhere in the row no longer jumps the page down. */
  table.ov tbody td.ov-openable { cursor: pointer; }
  /* Days-of-cover colour coding (number only, no "d"). !important so the colour
     wins over row tint / hover / selected backgrounds. */
  table.ov tbody td.cov { font-weight: 600; }
  table.ov tbody td.cov-red    { background: #fde2e1 !important; color: #b42318; }
  table.ov tbody td.cov-orange { background: #ffedd5 !important; color: #c2410c; }
  table.ov tbody td.cov-yellow { background: #fef9c3 !important; color: #854d0e; }
  table.ov tbody td.cov-green  { background: #dcfce7 !important; color: #15803d; }
  /* Importance: High rows get a soft, calm tint (cov + Total Inventory cells keep their own colour) */
  table.ov tbody tr.imp-section > td { background: #eef1f6; text-align: left; padding: 7px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #475569; cursor: default; }
  table.ov tbody tr.imp-section.clickable > td { cursor: pointer; }
  table.ov tbody tr.imp-section.clickable:hover > td { background: #e2e8f0; }
  table.ov tbody tr.imp-section .imp-caret { color: #94a3b8; margin-right: 4px; display: inline-block; }
  .imp-sel { font-size: 11px; padding: 2px 4px; border: 1px solid #cbd5e0; border-radius: 5px; background: #fff; color: #2d3436; cursor: pointer; }
  .imp-sel.High { border-color: #8fd9e2; background: #eefcfd; color: #0e7490; font-weight: 600; }
  /* Frozen Pic + Model pane + resizable columns — the SAME mechanism as the
     Sales/PPC dashboards: table-layout fixed, explicit per-column widths set by
     initOvColumnResize(), drag a header's right edge to resize. The model
     column's sticky offset tracks the (resizable) pic width via --ov-frozen-left. */
  table.ov { table-layout: fixed; }
  /* Header cells freeze on top as the pane scrolls; sticky also provides the
     positioning context the resize handles need (like the Sales table). */
  table.ov thead th { position: sticky; top: 0; z-index: 5; box-sizing: border-box; }
  table.ov tbody td { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
  table.ov .col-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; user-select: none; z-index: 10; border-right: 2px solid rgba(100,116,139,.5); }
  table.ov .col-resize-handle:hover, table.ov .col-resize-handle.active { background: #ff9900; border-right-color: #ff9900; }
  /* Frozen left pane: checkbox (col 1) · Pic (col 2) · Model (col 3). */
  table.ov thead th:nth-child(1), table.ov tbody td.chk-cell { position: sticky; left: 0; }
  table.ov thead th:nth-child(2), table.ov tbody td.pic-cell { position: sticky; left: var(--ov-pic-left, 34px); padding-left: 4px; padding-right: 4px; }
  table.ov thead th:nth-child(3), table.ov tbody td.model-cell { position: sticky; left: var(--ov-frozen-left, 80px); box-shadow: inset -1px 0 0 #e2e8f0; }
  /* The stacking number is the BODY cells' only — a header cell's belongs to
     the shell (--cg-th-z, just below), and a number written here would win
     against it and flatten the frozen corners back under the sliding ones. */
  table.ov tbody td.chk-cell, table.ov tbody td.pic-cell, table.ov tbody td.model-cell { z-index: 2; }
  /* Corner cells (frozen both ways) must cover the sticky body cells AND the other header cells. */
  table.ov thead th:nth-child(1), table.ov thead th:nth-child(2), table.ov thead th:nth-child(3) { --cg-th-z: 21; }
  table.ov td.chk-cell, table.ov th.chk-head { text-align: center; padding: 0 4px; }
  table.ov td.chk-cell input, table.ov th.chk-head input { accent-color: #ff9900; cursor: pointer; width: 14px; height: 14px; vertical-align: middle; margin: 0; }
  table.ov tbody td.chk-cell, table.ov tbody td.pic-cell, table.ov tbody td.model-cell { background: #fff; }
  /* A COMPONENT ROW READS AS A DIFFERENT KIND OF THING — gently (owner
     2026-09-01). Soft neutral grey, deliberately NOT a meaning colour: green is
     stock, blue is totals, amber is a warning, violet is a draft, and the greyed
     .cg-archived look means "put aside", which a part is not. Neutral says "not
     a product" and claims nothing more.
     On the ROW, not the cells — so 3PL / FBA stock and Total inventory keep
     their own colours (those are the figures you open a part for), and hover
     and selection still win. The three frozen columns are named because they
     carry a solid background of their own to stay readable when the table is
     scrolled sideways; they sit ABOVE the hover/selected pair below, which
     match their specificity and therefore win on source order. */
  table.ov tbody tr.ov-component td.chk-cell,
  table.ov tbody tr.ov-component td.pic-cell,
  table.ov tbody tr.ov-component td.model-cell { background: #f7f8fa; }
  table.ov tbody tr:hover td.chk-cell, table.ov tbody tr:hover td.pic-cell, table.ov tbody tr:hover td.model-cell { background: #fffaf0; }
  table.ov tbody tr.selected td.chk-cell, table.ov tbody tr.selected td.pic-cell, table.ov tbody tr.selected td.model-cell { background: #fff8e1; }
  /* Parent-family summary row (variations rolled up under one internal parent) */
  table.ov tbody tr.ov-parent-row { background: #f1f5fb; cursor: pointer; font-weight: 600; }
  table.ov tbody tr.ov-parent-row.open,
  table.ov tbody tr.ov-parent-row:hover { background: #e6edf9; }
  table.ov tbody tr.ov-parent-row td.chk-cell, table.ov tbody tr.ov-parent-row td.pic-cell, table.ov tbody tr.ov-parent-row td.model-cell { background: #f1f5fb; }
  table.ov tbody tr.ov-parent-row.open td.chk-cell, table.ov tbody tr.ov-parent-row.open td.pic-cell, table.ov tbody tr.ov-parent-row.open td.model-cell,
  table.ov tbody tr.ov-parent-row:hover td.chk-cell, table.ov tbody tr.ov-parent-row:hover td.pic-cell, table.ov tbody tr.ov-parent-row:hover td.model-cell { background: #e6edf9; }
  .ov-parent-name { color: #1f3a63; font-weight: 700; }
  .ov-parent-count { font-size: 10px; font-weight: 600; color: #64748b; background: #e2e8f0; border-radius: 8px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
  .ov-parent-dim { color: #94a3b8; }
  /* Row-selection controls in the table header */
  .ov-sel-hint { font-size: 11px; font-weight: 400; color: #94a3b8; }
  .ov-sel-toggle { font-size: 11px; font-weight: 600; padding: 3px 10px; border: 1px solid #cbd5e0; border-radius: 14px; background: #fff; color: #475569; cursor: pointer; }
  .ov-sel-toggle.active { background: #fff7ed; border-color: #ff9900; color: #c2410c; }
  .ov-sel-clear { font-size: 11px; font-weight: 500; padding: 3px 8px; border: none; background: none; color: #64748b; cursor: pointer; text-decoration: underline; }
  /* Archived products (Model_data.inv_archived) — only visible while "Show
     archived" is on; grayed so they never read as live inventory. The LOOK
     (the greying, the heading row, the glow, the "archived" chip) moved to
     Shared Data/shell.css on 2026-08-25 as the house .cg-archived /
     .cg-arch-head / .cg-arch-flash / .cg-arch-tag, so the Sales dashboard
     shows archived rows identically — RULEBOOK Rule 6. */
  .imp-flat { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 8px; background: #eef2f7; color: #64748b; }
  .imp-flat.imp-High { background: #eefcfd; color: #0e7490; }
  /* Child model row under a parent — indented with a faint connector line */
  table.ov tbody tr.ov-child-row td.ov-child-model { padding-left: 24px; }
  table.ov tbody tr.ov-child-row td.ov-child-model::before {
    content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: #dbe3ef;
  }
  table.ov tbody tr.ov-child-row td.model-cell { position: sticky; }   /* keep the frozen column; ::before anchors here */
  /* hard-capped: while re-created imgs decode, nothing (alt text, placeholder) may widen this column */
  .pic-cell { overflow: hidden; }
  .pic-cell img { display: block; width: 38px; height: 38px; object-fit: contain; border-radius: 4px; background: #f5f6fa; margin: 0 auto; }
  .model-cell { font-weight: 600; color: #2d3436; }
  .model-cell .brand-sub { display: block; font-size: 11px; color: #636e72; font-weight: 400; }
  .mkt-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
  .mkt-us { background: #dfe6e9; color: #2d3436; }
  .mkt-ca { background: #ffeaa7; color: #6c5ce7; }
  .risk-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
  .risk-none { background: #d1f2eb; color: #0e7d5a; }
  .risk-low  { background: #fff3cd; color: #856404; }
  .risk-med  { background: #ffe0b2; color: #b45309; }
  .risk-high { background: #ffccbc; color: #bf360c; }
  .risk-out  { background: #c62828; color: #fff; }
  .stock-bar-cell { min-width: 80px; }
  .stock-bar { display: inline-flex; width: 64px; height: 10px; border-radius: 5px; overflow: hidden; border: 1px solid #e2e8f0; }
  .stock-bar span { display: inline-block; height: 100%; }
  .seg-fba { background: #4aa3df; }
  .seg-fbm { background: #a29bfe; }
  .seg-tpl { background: #fdcb6e; }
  .num-zero { color: #b2bec3; }

  /* ── KPI cards ── */
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding: 0 var(--cg-gutter, 28px) var(--cg-row, 14px); }
  .kpi { background: #fff; border: 1px solid #e9edf3; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); position: relative; }
  .kpi .label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #667085; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
  .kpi .value { font-size: 27px; font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
  .kpi .sub { font-size: 11px; color: #98a2b3; margin-top: 4px; line-height: 1.45; }
  .kpi.warn .value { color: #d63031; }
  .kpi.warn { border-left: 3px solid #d63031; }
  .kpi.ok .value { color: #00b894; }

  /* ── Info i-bubble (copied from Sales Dashboard pattern) ── */
  .i-note {
    display: inline-block; width: 14px; height: 14px; line-height: 14px;
    font-size: 9px; font-weight: 700; text-align: center;
    background: #cbd5e0; color: #fff; border-radius: 50%; cursor: help;
    font-style: italic;
  }
  .i-note { cursor: pointer; }
  .i-note:hover { background: #ff9900; }

  /* ── Info cards on the pipeline/stock cells + headers + i-bubbles ──
     Open on CLICK, not hover (owner decision 2026-07-18 — hover pop-ups were
     everywhere and in the way). The content still lives in a hidden nested
     .tip-box (it survives table re-renders); clicking copies it into ONE
     body-level card (#invTipCard) that floats above everything. */
  .cell-tip { position: relative; cursor: pointer; border-bottom: 1px dotted #b0b8c0; }
  .cell-tip .tip-box, .head-tip .tip-box { display: none; }   /* nested boxes are content storage only */
  .inv-tipcard {
    display: none; position: fixed; z-index: 99999;
    background: #232f3e; color: #e8eaed; font-size: 11px; line-height: 1.6; font-weight: 400;
    padding: 7px 11px; border-radius: 6px; white-space: nowrap; text-align: left;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  }
  .tip-box .tip-head, .inv-tipcard .tip-head { display: block; color: #9aa7b2; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
  .tip-box .tip-row, .inv-tipcard .tip-row { display: flex; justify-content: space-between; gap: 18px; }
  .tip-box .tip-row .l, .inv-tipcard .tip-row .l { color: #b8c4cf; white-space: normal; max-width: 260px; }
  .inv-tipcard .tip-row.strong { font-weight: 700; }
  .inv-tipcard .tip-row.strong .l { color: #e8eaed; }
  .inv-tipcard .muted, .inv-tipcard .muted .l { color: #8b98a5; }
  /* Header variant: hosted by a <th>, body is wrapped readable text */
  .head-tip { cursor: pointer; }
  .tip-box .tip-text, .inv-tipcard .tip-text { display: block; white-space: normal; max-width: 300px; font-weight: 400; color: #dfe6ec; text-transform: none; letter-spacing: normal; line-height: 1.5; }

  @media (max-width: 900px) {
    .sidebar { width: 60px; } .sidebar .logo span { display: none; } .sidebar .logo { padding: 12px 10px; justify-content: center; }
    .sidebar nav a span:not(.icon) { display: none; }
    .main { margin-left: 60px; }
  }

  /* ── Compact tables + column separators (matches Sales dashboard) ── */
  table.ov { width: auto; }                                /* size to content, don't stretch */
  table.ov thead th, table.ov tbody td { border-right: 1px solid #e6ebf2; }
  table.ov thead th:last-child, table.ov tbody td:last-child { border-right: none; }
  table.ov tbody td { padding: 7px 8px; }

  table.ord { width: auto; }                               /* don't stretch to full width */
  table.ord thead th, table.ord tbody td {
    border-right: 1px solid #e6ebf2; text-align: center; white-space: nowrap;
  }
  table.ord thead th:last-child, table.ord tbody td:last-child { border-right: none; }
  table.ord thead th { padding: 8px 14px; }
  table.ord tbody td { padding: 6px 14px; }
  table.ord thead th.left, table.ord tbody td.left { text-align: left; }
  table.ord .qty-right { text-align: center; font-weight: 600; }   /* centre the totals */
  /* Notes column: wide, left-aligned, wraps onto a couple of lines (production
     order notes can be a short sentence). */
  table.ord thead th.notes-h { text-align: left; }
  table.ord tbody td.notes-cell {
    text-align: left; white-space: normal; min-width: 200px; max-width: 320px;
    font-size: 12px; color: #4b5563; line-height: 1.4;
  }
  table.ord tbody td.notes-cell .notes-none { color: #c3cbd6; }
  table.ord thead th.sortable { cursor: pointer; user-select: none; }
  table.ord thead th.sortable:hover { color: #2563eb; }
  table.ord thead th.sorted { color: #2563eb; }
  table.ord thead th .sort-arrow { font-size: 9px; margin-left: 3px; }

  /* compact, wrap-to-two-rows header for the order breakdown grid */
  table.ord-grid th { white-space: normal; vertical-align: middle; line-height: 1.15; }

  /* ── Per-table tools bar (filters + Excel download), sits above the card ── */
  .tbl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 var(--cg-gutter, 28px) var(--cg-row, 14px); }
  .tbl-tools .tt-label { font-size: 11px; font-weight: 700; color: #636e72; text-transform: uppercase; letter-spacing: .4px; }
  /* one visible frame around the backup period + month + download button, so they read as one control */
  .backup-group { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e9edf3; border-radius: 10px; padding: 6px 8px 6px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
  .dl-period { font-size: 12px; padding: 5px 8px; border: 1px solid #cbd5e0; border-radius: 6px; background: #fff; color: #2d3436; }

  /* active-count badge on a column's filter button */
  .cf-dot { display: inline-block; min-width: 15px; height: 15px; line-height: 15px; text-align: center;
    font-size: 9px; font-weight: 700; background: #ff9900; color: #fff; border-radius: 8px; margin-left: 3px; padding: 0 3px; }

  /* download buttons — distinct green so they read as "export/download" */
  .dl-btn { background: #1f8f5f; color: #fff; border: none; border-radius: 16px; padding: 6px 14px;
    font-size: 12px; font-weight: 600; cursor: pointer; }
  .dl-btn:hover { background: #18794f; }

  /* in-header column filter (built into the header, next to sort) */
  .col-filt-btn { cursor: pointer; margin-left: 5px; font-size: 11px; opacity: .65; user-select: none; }
  .col-filt-btn:hover { opacity: 1; }
  .col-filt-btn.on { opacity: 1; color: #c2410c; }
  #colFilterMenu { position: fixed; z-index: 9999; display: none; background: #fff; border: 1px solid #cbd5e0;
    border-radius: 8px; padding: 8px; min-width: 180px; max-height: 300px; overflow: auto; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
  #colFilterMenu.show { display: block; }
  #colFilterMenu label { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 4px; cursor: pointer;
    white-space: nowrap; color: #2d3436; font-weight: 400; }
  #colFilterMenu label:hover { background: #f5f6fa; border-radius: 4px; }
  #colFilterMenu .cf-actions { display: flex; gap: 12px; border-top: 1px solid #edf2f7; margin-top: 6px; padding-top: 6px; }
  #colFilterMenu .cf-actions a { font-size: 11px; color: #ff9900; cursor: pointer; font-weight: 600; }
  /* Searchable SKU dropdown (type-to-filter). Wraps a hidden native <select> so all
     existing change/value logic keeps working unchanged. */
  .ssel { position: relative; display: inline-block; }
  /* The real <select> is only a value-holder — never show it (a page rule setting
     `display` on selects would otherwise override the plain `hidden` attribute and
     leave it visible as an extra box). */
  .ssel > select { display: none !important; }
  .ssel-btn { font: inherit; font-size: 11px; max-width: 150px; padding: 2px 6px; border: 1px solid #cbd5e0;
    border-radius: 5px; background: #fff; color: #2d3436; cursor: pointer; display: inline-flex; align-items: center;
    gap: 4px; white-space: nowrap; }
  .ssel-btn:hover { border-color: #90a4c4; }
  .ssel-lbl { overflow: hidden; text-overflow: ellipsis; max-width: 125px; }
  .ssel-caret { color: #8a94a6; font-size: 9px; }
  /* Fixed (not absolute) so the order grid's overflow:auto/hidden scroll boxes can't
     clip it short — its top/left are set in JS from the button's position. */
  .ssel-pop { position: fixed; z-index: 2000; background: #fff;
    border: 1px solid #cbd5e0; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); min-width: 180px;
    max-width: 300px; }
  .ssel-search { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid #edf2f7; padding: 7px 9px;
    font-size: 12px; outline: none; border-radius: 8px 8px 0 0; }
  .ssel-list { max-height: 320px; overflow: auto; padding: 3px; }   /* ~11-12 SKUs before scrolling */
  .ssel-opt { padding: 5px 8px; font-size: 12px; color: #2d3436; cursor: pointer; white-space: nowrap;
    border-radius: 5px; overflow: hidden; text-overflow: ellipsis; }
  .ssel-opt:hover, .ssel-opt.active { background: #2d6cdf; color: #fff; }
  .ssel-opt.sel { font-weight: 600; }
  .ssel-empty { padding: 7px 9px; font-size: 11px; color: #8a94a6; }
  /* Full-width modal-form variant (the Move form's product picker) — reads like
     the other form fields instead of the tiny in-grid SKU chips. */
  .ssel-wide { display: block; }
  .ssel-wide .ssel-btn { width: 100%; max-width: none; box-sizing: border-box; justify-content: space-between; display: flex; align-items: center; padding: 7px 10px; font-size: 13px; border-radius: 6px; background: #fff; }
  .ssel-wide .ssel-lbl { max-width: none; flex: 1; text-align: left; }

  /* ── Status row tints (orders list + shipment grids) ──────────────────────
     Soft backgrounds only — green = arrived/done, blue = moving on plan,
     amber = needs a human soon, red = overdue, violet dashed = draft.
     The hover rule is re-asserted AFTER these so hover always wins. */
  table.ord tbody tr.parent.st-row-green { background: #f2fbf5; }
  table.ord tbody tr.parent.st-row-blue  { background: #eff6ff; }
  table.ord tbody tr.parent.st-row-amber { background: #fffbeb; }
  table.ord tbody tr.parent.st-row-red   { background: #fef2f2; }
  table.ord tbody tr.parent.st-row-draft { background: #f5f3ff; color: #6d28d9; }
  table.ord tbody tr.parent.st-row-draft > td { border-top: 1px dashed #a78bfa; border-bottom: 1px dashed #a78bfa; }
  table.ord tbody tr.parent.st-row-draft > td:first-child { border-left: 2px dashed #a78bfa; }
  table.ord tbody tr.parent.st-row-draft > td:last-child  { border-right: 2px dashed #a78bfa; }
  table.ord tbody tr.parent:hover { background: #fff8e1; }
  table.ord-grid tbody tr.st-row-green td { background: #f2fbf5; }
  table.ord-grid tbody tr.st-row-blue  td { background: #eff6ff; }
  table.ord-grid tbody tr.st-row-amber td { background: #fffbeb; }
  table.ord-grid tbody tr.st-row-red   td { background: #fef2f2; }
  table.ord-grid tbody tr.st-row-draft td { background: #f5f3ff; border-top: 1px dashed #a78bfa; border-bottom: 1px dashed #a78bfa; }
  table.ord-grid tbody tr.st-row-draft td:first-child { border-left: 2px dashed #a78bfa; }
  table.ord-grid tbody tr.st-row-draft td:last-child  { border-right: 2px dashed #a78bfa; }
  table.ord-grid tbody tr.st-row-draft input, table.ord-grid tbody tr.st-row-draft select { color: #6d28d9; }
  /* a whole draft order's expanded panel gets the dashed "sketch" frame too */
  .ord-wrap.ord-draft { outline: 2px dashed #a78bfa; outline-offset: -2px; background: #faf9ff; border-radius: 6px; }
  /* the "Draft" status pill — violet + dashed, unmistakably not a real status */
  .st-draft { background: #ede9fe; color: #5b21b6; border: 1px dashed #8b5cf6; }
  /* Approve control — only ever rendered on draft rows */
  .appr-btn { border: 1px solid #16a34a; background: #f0fdf4; color: #15803d; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 6px; cursor: pointer; }
  .appr-btn:hover { background: #16a34a; color: #fff; }
  /* one-line colour legend above the orders list */
  .st-legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: #475569; padding: 2px 6px 8px; margin: 0 28px; }
  .st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.1); }
  .st-dot.draft { background: #f5f3ff; border: 1px dashed #8b5cf6; }
  /* draft previews in the daily ledger — outlined, clearly secondary */
  .lg-bump-draft { color: #6d28d9; font-size: 10px; font-weight: 600; border: 1px dashed #a78bfa; border-radius: 6px; padding: 0 4px; background: transparent; white-space: nowrap; }
  .lg-wdraft { color: #8b5cf6; font-size: 10px; font-weight: 400; }
  /* faint "(N with drafts)" under a Days Left value */
  .cov-draft { display: block; font-weight: 400; font-size: 9.5px; color: #6d28d9; opacity: .8; }

  /* ── COMPACT ORDER GRIDS — the approved Excel-style compact look, ported
     verbatim from the compact-preview page (owner sign-off 2026-07-24).
     Appended LAST so these rules win the cascade, exactly as they did on
     the preview page. ── */
  .ord-grid-scroll { overflow-x: auto; max-width: 100%; padding: 0 12px 5px; }
  table.ord-grid { border-collapse: collapse; font-size: 11px; white-space: nowrap; background: #fff; border: 1px solid #c3d4e8; border-radius: 6px; }
  table.ord-grid th { background: #e9eff7; color: #34507a; font-size: 9px; font-weight: 700; padding: 2px 4px; text-align: center; vertical-align: top; border-right: 1px solid #d5e0ee; border-bottom: 1px solid #c3d4e8; }
  table.ord-grid th.shiph { text-align: left; position: sticky; left: 0; z-index: 3; }
  table.ord-grid th.modelh.unmapped { background: #b91c1c; color: #fff; }
  /* model + SKU pickers in a production column header — same width, font and height */
  /* header pickers are FLAT like the body cells (Excel look) — the frame only
     appears on hover, so the header stops reading as a stack of boxed widgets */
  table.ord-grid th .model-sel { display: block; width: 100%; height: 20px; font-size: 10.5px; padding: 0 3px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #1f2937; font-weight: 600; cursor: pointer; box-sizing: border-box; }
  table.ord-grid th .sku-sel { display: block; width: 100%; height: 20px; margin-top: 2px; font-size: 10.5px; padding: 0 3px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #374151; cursor: pointer; box-sizing: border-box; }
  table.ord-grid th .model-sel:hover, table.ord-grid th .sku-sel:hover { background: #fff; border-color: #b6c2d4; }
  table.ord-grid th .ssel { display: block; margin-top: 2px; }
  table.ord-grid th .ssel-btn { width: 100%; max-width: none; height: 20px; font-size: 10.5px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; justify-content: space-between; box-sizing: border-box; }
  table.ord-grid th .ssel-btn:hover { background: #fff; border-color: #b6c2d4; }
  table.ord-grid th.modelh.unmapped .ssel-btn, table.ord-grid th.modelh.unmapped .model-sel { background: #fff; }
  table.ord-grid th .ssel-btn .ssel-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* symmetric columns (owner request 2026-07-24): the label column, every model
     column and the Total column have ONE fixed width shared by BOTH the
     production and the shipment grid, so their columns sit exactly under each
     other. Model columns auto-fill the width Excel-style (no inner slot). */
  /* ONE uniform width for every model column in BOTH grids (owner: equal
     columns, 33% narrower than the first pass), long names ellipsize */
  table.ord-grid th.shiph, table.ord-grid td.ship { width: 100px; min-width: 100px; max-width: 100px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
  table.ord-grid th.modelh { width: 97px; min-width: 97px; max-width: 97px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
  table.ord-grid td.total { min-width: 64px; box-sizing: border-box; }
  /* centered text in both pickers — text alignment only, widths untouched */
  table.ord-grid th .model-sel, table.ord-grid th .sku-sel { text-align: center; text-align-last: center; }
  table.ord-grid th .ssel-btn .ssel-lbl { max-width: none; flex: 1; text-align: center; }
  table.ord-grid th .ssel-model .ssel-btn { font-weight: 600; }        /* the model picker reads like the old bold select */
  .ssel-add .ssel-btn { font-weight: 600; color: #2d6cdf; border-style: dashed; }
  .sku-line .ssel-btn { width: 100%; box-sizing: border-box; justify-content: space-between; padding: 5px 6px; border-radius: 6px; font-size: 12px; }
  .sku-line .ssel { display: block; }
  table.ord-grid th .del-model { display: block; margin: 2px auto 0; font-size: 8.5px; color: #c26565; background: none; border: none; cursor: pointer; padding: 0; }
  table.ord-grid th .del-model:hover { color: #b91c1c; }
  /* shipment name fills its cell like a spreadsheet cell — the cell border IS the slot */
  table.ord-grid input.ship-name { display: block; width: 100%; min-width: 110px; font-weight: 700; text-align: left; padding: 3px 6px; box-sizing: border-box; }
  table.ord-grid td { padding: 0; border-top: 1px solid #eef1f5; border-right: 1px solid #f1f3f6; text-align: center; }
  table.ord-grid td.ship { text-align: left; font-weight: 700; color: #1f2937; background: #f4f7fb; position: sticky; left: 0; z-index: 1; white-space: nowrap; padding: 0 3px; }
  table.ord-grid td.total { font-weight: 700; background: #f4f7fb; padding: 0 4px; }
  /* flat, spreadsheet-style cells: centered values, no chrome until you click */
  /* Excel-style cells: the field IS the cell — borderless, filling it entirely.
     Hover shows a light inner frame, focus the blue selection frame sitting
     exactly on the cell border (matches the approved compact-preview page). */
  table.ord-grid input, table.ord-grid select { font-size: 12px; padding: 1px 5px; border: none; border-radius: 0; background: transparent; color: #1f2937; text-align: center; box-sizing: border-box; min-height: 20px; }
  table.ord-grid input:hover, table.ord-grid select:hover { background: #fff; box-shadow: inset 0 0 0 1px #c9d3e0; }
  table.ord-grid input:focus, table.ord-grid select:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px #2563eb; }
  table.ord-grid input[type=checkbox] { min-height: 0; box-shadow: none !important; }
  /* strip number spinners and the date calendar icon — that hidden chrome wasted space */
  table.ord-grid input[type=number]::-webkit-inner-spin-button, table.ord-grid input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  table.ord-grid input[type=number] { -moz-appearance: textfield; appearance: textfield; }
  table.ord-grid input[type=date] { min-width: 0; }
  table.ord-grid input.qty { width: 100%; font-weight: 600; }   /* fills the fixed-width model column — no inner slot; digits centred (owner request) */
  table.ord-grid input.w-date { width: 132px; } table.ord-grid input.w-wh { width: 46px; } table.ord-grid input.w-fwd { width: 54px; }
  /* Native calendar date picker (one box, click opens the calendar) */
  .dsel { display: inline-flex; gap: 3px; align-items: center; }
  .dsel input.ds-date { font-size: 11px; padding: 2px 4px; border: 1px solid #cbd5e0; border-radius: 4px; background: #fff; color: #1f2937; font-family: inherit; width: 148px; cursor: pointer; }
  table.ord-grid input.w-ship { width: 80px; } table.ord-grid input.w-cart { width: 40px; }
  table.ord-grid input.w-notes { width: 150px; text-align: left; }
  table.ord-grid input.w-fba { width: 90px; } table.ord-grid input.w-amz { width: 70px; }
  table.ord-grid select.w-ctry { width: 52px; } table.ord-grid select.w-type { width: 58px; } table.ord-grid select.w-stat { width: 88px; }
  table.ord-grid .dsel input.ds-date { padding: 2px 3px; font-size: 11.5px; width: 132px; }   /* fits the grid's date cells like the old trio did */
  table.ord-grid tr.foot td { background: #eef3f9; font-weight: 700; border-top: 2px solid #c3d4e8; padding: 2px 6px; }
  table.ord-grid tr.foot td.lbl { text-align: left; color: #34507a; }
  /* shipped-vs-produced mismatch flags on the shipment total row */
  table.ord-grid tr.foot td.mm-over  { background: #fde2e1; color: #b91c1c; }
  table.ord-grid tr.foot td.mm-under { background: #fef3c7; color: #92670a; }
  table.ord-grid tr.foot td.mm-note  { text-align: left; font-weight: 600; padding: 2px 8px; }
  table.ord-grid tr.foot td.mm-note .mm-bad  { color: #b91c1c; }
  table.ord-grid tr.foot td.mm-note .mm-warn { color: #92670a; }
  table.ord-grid tr.foot td.mm-note .mm-good { color: #0e7d5a; }
  table.ord-grid .del-ship { border: 1px solid #f3c2c2; background: #fff; color: #c0392b; border-radius: 4px; font-size: 11px; line-height: 1; padding: 1px 5px; cursor: pointer; }
  table.ord-grid .del-ship:hover { background: #c0392b; color: #fff; }
  /* ── NESTING FIX ── the grids render INSIDE the orders-list table
     (table.ord), whose thead/tbody rules (8-14px padding, uppercase, gray
     headers) also match the nested grids' cells at HIGHER specificity —
     the exact mock-up-vs-live difference the owner reported. Reassert the
     compact look above that specificity. */
  table.ord table.ord-grid thead th { padding: 2px 4px; height: 32px; background: #e9eff7; color: #34507a; font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; text-align: center; vertical-align: middle; border-right: 1px solid #d5e0ee; border-bottom: 1px solid #c3d4e8; white-space: nowrap; }
  table.ord table.ord-grid thead th.shiph { text-align: left; padding-left: 9px; }
  table.ord table.ord-grid thead th:last-child { border-right: 1px solid #d5e0ee; }
  table.ord table.ord-grid tbody td { padding: 0; height: 26px; font-size: 10.5px; font-weight: 400; text-align: center; border-top: 1px solid #eef1f5; border-right: 1px solid #f1f3f6; border-bottom: none; white-space: nowrap; }   /* ONE row height for every body row */
  table.ord table.ord-grid tbody td:last-child { border-right: 1px solid #f1f3f6; }
  table.ord table.ord-grid tbody td.ship { text-align: left; padding: 0 9px; }
  table.ord table.ord-grid tbody td.total { padding: 0 4px; }
  /* Total rows: SAME height and font as body rows, slightly tinted background,
     label starting on the same line as the Units labels (owner) */
  table.ord table.ord-grid tbody tr.foot td { padding: 0 6px; height: 26px; font-size: 10.5px; font-weight: 400; font-family: inherit; background: #f0f4f9; text-align: center; }
  table.ord table.ord-grid tbody tr.foot td.ship { padding-left: 9px; text-align: left; background: #f0f4f9; }
  /* hover-only MAX ghost on shipment qty cells — invisible otherwise */
  table.ord-grid td.qcell { position: relative; }
  table.ord-grid td.qcell .qmax { display: none; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 8px; font-weight: 700; letter-spacing: .3px; color: #2d6cdf; background: #eaf1fe; border: 1px solid #bcd3fa; border-radius: 4px; padding: 1px 4px; line-height: 1.2; cursor: pointer; }
  table.ord-grid td.qcell:hover .qmax { display: block; }
  table.ord-grid td.qcell .qmax:hover { background: #dbe8fd; }
  /* the expanded order window sits near the LEFT, with a small offset that
     lines up with the first letter of the order names above (owner) */
  table.ord tbody tr.child > td { padding-left: 24px; text-align: left; }   /* DIRECT cell only — a descendant selector leaked this into every cell of the nested grids */
  .ord-wrap { margin-left: 24px; }
  /* orders-list Notes: one truncated line (long notes made rows tall) — the
     full text opens on click */
  table.ord tbody td.notes-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; cursor: pointer; }
  /* Parts used: the note IS the record you came to read ("Work Order# 95396"),
     so it wraps and is readable on the spot. The orders list above wants the
     opposite — one truncated line you click open — hence a class of its own
     rather than an edit to that rule. */
  table.ord tbody td.used-note { white-space: normal; overflow: visible; text-overflow: clip; min-width: 220px; max-width: 360px; cursor: default; }
  /* Totals row: the house colours asked for BY NAME (RULEBOOK Rule 6 §5a — the
     shell owns the value, a page never types one). Same alignment as the body. */
  table.ord tfoot td { padding: 8px 14px; font-weight: 700; color: #2d3436;
    background: var(--cg-total-bg, #eef4ff); border-top: 2px solid var(--cg-total-line, #dae5f8);
    border-right: 1px solid #e6ebf2; white-space: nowrap; }
  table.ord tfoot td:last-child { border-right: none; }
  table.ord table.ord-grid tbody tr.foot td.lbl { text-align: left; }
  table.ord table.ord-grid tbody tr.foot td.mm-note { text-align: left; padding: 2px 8px; }
  /* draft rows: with collapsed borders, a STICKY cell leaves its border
     behind while scrolling — the violet dashed left marker appeared and
     disappeared (owner-reported 4x). An inset stripe paints on the cell
     itself and moves with it. */
  table.ord table.ord-grid tbody tr.st-row-draft td:first-child { border-left: none; box-shadow: inset 3px 0 0 0 #a78bfa; }
  /* deterministic layout: the table always takes its NATURAL width — never
     squeezed to fit a narrow window (the squeeze wrapped headers and made the
     production/shipment columns disagree between machines). Overflow scrolls. */
  table.ord-grid { width: max-content; }
  table.ord-grid th { white-space: nowrap; }
  /* the scroll strip's side padding sat INSIDE the scrollport, so the moving
     table peeked through the gap left of the sticky first column */
  .ord-grid-scroll { padding: 0 0 5px; margin: 0 12px; }
  /* no left frame line at all — it was the thing that jiggled at fractional
     zoom; the sticky column's background defines the edge, like Excel */
  table.ord-grid { border-left: none; }
  table.ord-grid th.shiph, table.ord-grid td.ship { left: 0; border-left: none; }
  /* first column: header text and the names/labels below start on the SAME
     vertical line (9px in) */
  table.ord-grid th.shiph { padding-left: 9px; }
  table.ord-grid td.ship { padding: 0 9px; }
  table.ord-grid input.ship-name { padding-left: 0; }
  /* status cell on TWO rows (owner): the redundant Done/In-transit pill is
     hidden (drafts keep theirs — it is their only status); the two ticks stay
     stacked, so the row is double-height, not triple */
  table.ord-grid .ship-stat-cell .status-pill:not(.st-draft) { display: none; }
  table.ord-grid .ship-stat-cell { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 2px 6px; }
  /* ── ONE font for EVERYTHING in the grids (owner): the model/SKU-picker
     font — 10.5px, nothing bold. Only real titles (section headings) and tiny
     remarks ("✕ remove") differ. ── */
  table.ord-grid th { vertical-align: middle; }
  table.ord-grid, table.ord-grid input, table.ord-grid select, table.ord-grid .dsel input.ds-date,
  table.ord-grid input.qty, table.ord-grid input.ship-name, table.ord-grid td.ship,
  table.ord-grid td.total, table.ord-grid tr.foot td, table.ord-grid .ship-confirm,
  table.ord-grid .ship-days { font-size: 10.5px; font-weight: 400; }
  table.ord-grid tr.foot td.mm-note, table.ord-grid tr.foot td.mm-note * { font-weight: 400; }
  table.ord-grid th { font-size: 10.5px; font-weight: 400; }   /* headers = exactly the cell font */
  table.ord-grid .ship-confirm { font-size: 9.5px; }   /* the two ticks span 2 lines — slightly smaller (owner) */
  /* breathing room: the header row and both Total rows get taller */
  table.ord-grid thead th { height: 32px; }
  table.ord-grid tr.foot td { height: 32px; }
  /* one title size everywhere: "Order", "Production order", "Shipment order" */
  .ord-sec h5 { font-size: 13px; }
  .ord-bar h4 { font-size: 13px; display: flex; align-items: center; gap: 8px; }
  .ord-bar h4 .od-hist { margin-left: auto; }
  .ord-bar h4 .od-del { margin-left: 0; }
  /* the Days value ("17d") is a plain row value, not bold — shown in a white
     box like the fields around it (read-only, but visually part of the row) */
  .ord-bar .meta b, .ord-bar label b { font-weight: 400; }
  .ord-bar label .meta { display: inline-flex; align-items: center; height: 28px; margin-top: 0 !important; padding: 0 10px; background: #fff; border: 1px solid #c3d4e8; border-radius: 5px; box-sizing: border-box; }
  /* History + Delete: identical size and baseline (colors may differ) */
  .ord-bar h4 .od-hist, .ord-bar h4 .od-del { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; border-radius: 6px; margin: 0; align-self: center; box-sizing: border-box; }
  .ord-bar h4 .od-hist { margin-right: 4px; }
  /* "+ Add model…" and "+ Add shipment": identical size (backgrounds differ
     on purpose — adding a shipment is the heavier action) */
  .ord-sec .action-btn { height: 24px !important; padding: 0 10px !important; font-size: 11.5px !important; font-weight: 600; display: inline-flex; align-items: center; box-sizing: border-box; border-radius: 6px; }
  .ord-sec .ssel-add .ssel-btn { height: 24px; padding: 0 10px; font-size: 11.5px; font-weight: 600; box-sizing: border-box; border-radius: 6px; }
  /* equal breathing room between sections: the gap above "Shipment order"
     matches the gap above "Production order" */
  .ord-grid-scroll { padding-bottom: 13px; }
  /* model + SKU pickers: SAME small size, not bold, WHITE by default (the
     hover look is the default look) */
  table.ord-grid th .ssel-btn, table.ord-grid th .model-sel, table.ord-grid th .sku-sel { font-size: 10.5px; font-weight: 400; background: #fff; border-color: #b6c2d4; }
  table.ord-grid th .ssel-model .ssel-btn { font-weight: 400; }
  /* ── order header strip: everything on one clean baseline ── */
  .ord-bar label { justify-content: flex-end; }
  .ord-bar label input[type=checkbox] { align-self: center; margin-bottom: 7px; }
  .ord-bar .status-pill { align-self: flex-start; }

  /* ── Frozen-column separators (2026-08-04): the table's collapsed borders do
     NOT travel with position:sticky cells, so the frozen columns' lines
     vanished the moment the table scrolled right. Inset shadows are painted by
     the cell itself and scroll with it — right edge + row line. ── */
  table.ov thead th:nth-child(1), table.ov tbody td.chk-cell,
  table.ov thead th:nth-child(2), table.ov tbody td.pic-cell { box-shadow: inset -1px 0 0 #e2e8f0; }

  /* ── The table-height drag bar under the Overview table ──────────────────
     Copied 1:1 from the PPC dashboard's big table (PPC Dashboard/v2/styles.css
     — .tbl-vsep / #tblArea.hcap) so both pages behave, look and read the same.
     The bar sits under the table: drag it up to make the table shorter (it then
     scrolls inside its own box, headers frozen), drag it down past the end of
     the table to let it run full length, double-click to fill the screen.
     A 3px grey line reads as a divider, not a control, so a small labelled pill
     sits on the line and says what it does. ── */
  .tbl-vsep { cursor: row-resize; padding: 5px 0 11px; position: relative; touch-action: none; }
  .tbl-vsep::after { content: ''; position: absolute; left: 20px; right: 20px; top: 5px; height: 3px; border-radius: 2px; background: #dde3ea; }
  .tbl-vsep:hover::after, .tbl-vsep.active::after { background: #ff9900; }
  .tbl-vsep .vsep-grip { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); z-index: 1;
    background: #fff; border: 1px solid #dde3ea; border-radius: 999px; padding: 1px 12px;
    font-size: 11px; line-height: 15px; color: #7b8794; white-space: nowrap; user-select: none; }
  .tbl-vsep:hover .vsep-grip, .tbl-vsep.active .vsep-grip { border-color: #ff9900; color: #ff9900; }
  .tbl-vsep .vsep-reset { color: #2563eb; cursor: pointer; text-decoration: underline; }
  .tbl-vsep .vsep-reset:hover { color: #ff9900; }
  /* Hand-picked height: the pane owns exactly the height the user dragged to.
     max-height:none lifts BOTH the house cap above and the shell's 10-row fit
     (that one is an inline style, which the JS clears). */
  .ov-pane.hcap { height: var(--ov-h, 480px); max-height: none; }
  /* "Full length" — dragged past the end of the table: no vertical cap at all,
     the whole table runs down the page like it used to. */
  .ov-pane[data-cg-pane-manual]:not(.hcap) { max-height: none; }