/* orders.css — Ops Dashboard
   Paper v2 layout: Orders is rendered inside .pv2-body (rail + main).
   Most visual styling comes from v7-paper-v2.css; this file overrides
   the rail container styles (#io-urgency, #io-burndown), positions the
   info-button popovers, and tunes a few queue-specific tone colors. */

/* Layout */
#view-orders{flex:1;overflow-y:auto;padding:0;background:var(--bg)}

/* Page head — handled by .pv2-pagehead from v7-paper-v2.css.
   .io-date / .io-count are now child spans inside pv2-pagehead. */
.io-date{font-size:12.5px;color:var(--ink-2);margin:0}
.io-count{font-family:var(--font);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* Order count now sits below the table */
.io-count-foot{display:flex;justify-content:flex-end;padding:10px 2px 2px}

/* Legacy io-app/io-hdr classes are no longer in the markup. */

/* ───── Top row — 50/50: Action Queues | MM Burndown ─────
   Action queues panel stacks two grouped clusters:
     1. Supplier Follow-Up — Call Now, Nudge, Watch
     2. Mulch Mound Tasks  — Source MM, Cost Missing
   Each card filters the table to its queue. Colored row stripes in the
   table match these colors so glance scanning works in both views. */
/* 2:1 split — action queues get most of the room (they're what you act on),
   chart is a slim secondary trend on the right. */
.io-top-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px;align-items:stretch}
@media(max-width:1100px){.io-top-grid{grid-template-columns:1fr}}

/* Action-queue header band container (#io-urgency carries .io-queuebar).
   Horizontal row of group trays, rendered by renderActionQueues(). */
#io-urgency{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:14px;background:transparent;border:0;padding:14px 28px 8px}

/* Empty queues dim and become non-clickable (matches old card behavior). */
.pv2-rail-row.is-zero{cursor:default;opacity:.55}
.pv2-rail-row.is-zero:hover{background:transparent}
.pv2-rail-row.is-zero .pv2-rail-num{color:var(--mute)}

/* Per-row info button — positioned absolute in the top-right of pv2-rail-row.
   The grid template (26px 1fr auto) leaves no spare cell, so we overlap it. */
.pv2-rail-row{position:relative}
.pv2-rail-row .io-aq-info{position:absolute;top:6px;right:6px;width:14px;height:14px;padding:0;border:none;background:transparent;color:var(--ink-3);font-size:11px;line-height:1;cursor:help;opacity:0;transition:opacity .12s,color .12s;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;z-index:1}
.pv2-rail-row:hover .io-aq-info,
.pv2-rail-row .io-aq-info.open{opacity:.8}
.pv2-rail-row .io-aq-info:hover{opacity:1;color:var(--ink)}
.pv2-rail-row .io-aq-tip{display:none;position:absolute;top:100%;right:-4px;margin-top:6px;width:240px;padding:10px 12px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:500;line-height:1.45;text-transform:none;letter-spacing:0;border-radius:6px;box-shadow:0 8px 22px rgba(15,23,42,.22);z-index:1000;text-align:left;cursor:default;white-space:normal}
.pv2-rail-row .io-aq-tip strong{display:block;font-weight:800;font-size:10.5px;margin-bottom:4px;color:var(--bg);text-transform:uppercase;letter-spacing:.08em}
.pv2-rail-row .io-aq-info:hover .io-aq-tip,
.pv2-rail-row .io-aq-info.open .io-aq-tip{display:block}
.pv2-rail-row .io-aq-tip::before{content:'';position:absolute;top:-4px;right:6px;width:8px;height:8px;background:var(--ink);transform:rotate(45deg);border-radius:1px}
.pv2-rail-row:has(.io-aq-info.open),
.pv2-rail-row:has(.io-aq-info:hover){z-index:50}

/* (Old transparent #io-burndown rule deleted — the stats panel below
   provides its own panel chrome, no need for two #io-burndown rules.) */
.io-aq-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px}
.io-aq-head small{font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.io-aq-help{font-size:10.5px;color:var(--ink-3);font-style:italic;font-weight:400}

.io-aq-group{display:flex;flex-direction:column;gap:6px}
.io-aq-group-head{display:flex;align-items:baseline;gap:10px;padding:0 2px;flex-wrap:wrap}
.io-aq-group-label{font-size:10.5px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.1em}
.io-aq-group-sub{font-size:10.5px;color:var(--ink-3);font-style:italic;font-weight:400}
/* Each group's grid gets exactly as many columns as it has cards, and the group
   itself flexes proportional to its card count (style="flex:N" in renderActionQueues).
   Net effect: every card across both groups is the same width and the whole row
   fills evenly — no empty columns squishing the Mulch Mound Tasks group. */
.io-aq-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.io-aq-cards-2{grid-template-columns:repeat(2,1fr)}
.io-aq-cards-3{grid-template-columns:repeat(3,1fr)}
.io-aq-cards-4{grid-template-columns:repeat(4,1fr)}
.io-aq-cards-5{grid-template-columns:repeat(5,1fr)}
.io-aq-cards-6{grid-template-columns:repeat(6,1fr)}

.io-aq-card{border-radius:8px;padding:9px 11px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;border:1px solid var(--line);background:var(--panel);position:relative;min-height:80px;display:flex;flex-direction:column;justify-content:space-between}
.io-aq-card:hover:not(.dim){transform:translateY(-1px);box-shadow:0 4px 14px rgba(60,42,18,.10)}
.io-aq-card.active{box-shadow:0 4px 14px rgba(60,42,18,.10)}
.io-aq-card.dim{opacity:.4;cursor:default}
.io-aq-card.dim:hover{transform:none;box-shadow:none}
.io-aq-top{display:flex;align-items:center;gap:4px}
.io-aq-icon{font-size:11px;line-height:1}
.io-aq-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.io-aq-num{font-family:var(--font-serif);font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;margin:2px 0;letter-spacing:-.01em}
.io-aq-verb{font-size:10px;color:var(--ink-2);font-weight:500;line-height:1.3}
.io-aq-rev{font-family:var(--font);font-size:10px;color:var(--ink-3);font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.io-aq-clear{position:absolute;top:4px;right:6px;font-size:9px;font-weight:700;color:var(--ink-3);opacity:.8}

/* Per-card info button — small ⓘ in top-right with a click/hover popover
   explaining how orders end up in this queue. Hidden when card is active so
   the ✕ clear can use the same slot. */
.io-aq-info{position:absolute;top:3px;right:5px;width:14px;height:14px;padding:0;border:none;background:transparent;color:var(--text-faint);font-size:11px;line-height:1;cursor:help;opacity:.45;transition:opacity .12s,color .12s;font-family:inherit;display:flex;align-items:center;justify-content:center}
.io-aq-info:hover{opacity:1;color:var(--text-dim)}
.io-aq-card.active .io-aq-info{display:none}
.io-aq-tip{display:none;position:absolute;top:100%;right:-4px;margin-top:6px;width:230px;padding:9px 11px;background:var(--text);color:#fff;font-size:11px;font-weight:500;line-height:1.45;text-transform:none;letter-spacing:0;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:1000;text-align:left;cursor:default;white-space:normal}
.io-aq-tip strong{display:block;font-weight:800;font-size:11px;margin-bottom:4px;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.io-aq-info:hover .io-aq-tip,
.io-aq-info.open .io-aq-tip{display:block}
/* Little arrow pointing up to the icon */
.io-aq-tip::before{content:'';position:absolute;top:-4px;right:6px;width:8px;height:8px;background:var(--text);transform:rotate(45deg);border-radius:1px}
/* Lift the whole card above its siblings while the popover is showing. Without
   this, sibling cards later in DOM order (Watch, MM Tasks row) paint over the
   tip because they share a flat stacking context. Modern :has() takes care of
   this in Chrome 105+/Safari 15.4+; the legacy fallback below covers Firefox
   pre-121 by raising the info button itself into its own stacking context. */
.io-aq-card:has(.io-aq-info:hover),
.io-aq-card:has(.io-aq-info.open){z-index:50}
.io-aq-info:hover,
.io-aq-info.open{z-index:50}

/* Queue colors — all drawn from the Paper v2 palette tokens so they match
   the rest of the app. Supplier Follow-Up: rust (call) → amber (nudge) →
   sage (watch) → plum (call-in) → blue (web order). MM Tasks: a brown-
   orange (source) + a paler sky-blue (cost, distinct from the deeper
   web-order blue). Active state thickens border + deepens the tint. */
.aq-call    {border-color:color-mix(in oklab,var(--rust) 35%,transparent);background:var(--rust-bg)}.aq-call    .io-aq-label,.aq-call    .io-aq-num{color:var(--rust)}.aq-call.active    {border-color:var(--rust);background:color-mix(in oklab,var(--rust) 14%,var(--panel))}
.aq-nudge   {border-color:color-mix(in oklab,var(--amber) 38%,transparent);background:var(--amber-bg)}.aq-nudge   .io-aq-label,.aq-nudge   .io-aq-num{color:var(--amber)}.aq-nudge.active   {border-color:var(--amber);background:color-mix(in oklab,var(--amber) 14%,var(--panel))}
.aq-watch   {border-color:color-mix(in oklab,var(--sage) 35%,transparent);background:var(--sage-bg)}.aq-watch   .io-aq-label,.aq-watch   .io-aq-num{color:var(--sage)}.aq-watch.active   {border-color:var(--sage);background:color-mix(in oklab,var(--sage) 14%,var(--panel))}
/* Channel queues (Call-In / Web / Source) render as neutral tags — color on
   screen means URGENCY, not channel. Identity comes from the card's icon+label.
   To restore per-channel hues, revert these three rules to the plum/blue/orange
   token versions. */
.aq-callin  {border-color:var(--line-strong);background:var(--panel-2)}.aq-callin  .io-aq-label{color:var(--ink-2)}.aq-callin  .io-aq-num{color:var(--ink)}.aq-callin.active  {border-color:var(--ink-3);background:var(--bg-2)}
.aq-weborder{border-color:var(--line-strong);background:var(--panel-2)}.aq-weborder .io-aq-label{color:var(--ink-2)}.aq-weborder .io-aq-num{color:var(--ink)}.aq-weborder.active{border-color:var(--ink-3);background:var(--bg-2)}
.aq-source  {border-color:var(--line-strong);background:var(--panel-2)}.aq-source  .io-aq-label{color:var(--ink-2)}.aq-source  .io-aq-num{color:var(--ink)}.aq-source.active  {border-color:var(--ink-3);background:var(--bg-2)}
.aq-cost    {border-color:color-mix(in oklab,var(--slate) 35%,transparent);background:var(--slate-tint)}.aq-cost    .io-aq-label,.aq-cost    .io-aq-num{color:var(--slate)}.aq-cost.active    {border-color:var(--slate);background:color-mix(in oklab,var(--slate) 14%,var(--panel))}

/* Active-filter clear button — now lives inside .pv2-rail-head as a pv2-link-btn,
   not a separate pill. Empty when no filter is active; populated by renderActionQueues. */
#io-urgency-label:empty{display:none}
#io-urgency-label .pv2-link-btn{margin-top:2px}

/* MM stats panel — segmented toggle (Orders In / Accepted / By Team) +
   date-window slider + a body that swaps per mode. Lives in the rail
   where the old Chart.js burndown used to be. Renamed io-burn-* →
   io-stats-* in the JS; the container id stayed #io-burndown so
   anything referencing it externally doesn't break. */
/* #io-burndown is the Analytics modal body — no panel chrome of its own
   (the modal supplies that); it's a flex column that fills + scrolls. */
#io-burndown{display:flex;flex-direction:column;gap:12px;padding:18px 20px 22px;flex:1 1 auto;overflow:auto;min-height:0}

.io-stats-tabs{display:flex;gap:2px;padding:2px;background:var(--bg-2);border-radius:7px}
.io-stats-tab{appearance:none;flex:1;min-width:0;border:0;background:transparent;padding:5px 4px;font:inherit;font-size:10.5px;font-weight:600;color:var(--ink-2);cursor:pointer;border-radius:5px;white-space:nowrap;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
.io-stats-tab:hover{color:var(--ink)}
.io-stats-tab.is-active{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(60,42,18,.10)}

.io-stats-range{display:flex;align-items:center;gap:8px}
.io-stats-range input[type="range"]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--bg-2);border-radius:2px;outline:none;cursor:pointer;margin:0}
.io-stats-range input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--green);border-radius:50%;cursor:grab;border:2px solid var(--panel);box-shadow:0 1px 3px rgba(60,42,18,.20)}
.io-stats-range input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing}
.io-stats-range input[type="range"]::-moz-range-thumb{width:14px;height:14px;background:var(--green);border-radius:50%;cursor:grab;border:2px solid var(--panel);box-shadow:0 1px 3px rgba(60,42,18,.20)}
.io-stats-range-label{font-family:var(--font);font-size:11px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:34px;text-align:right;white-space:nowrap}

.io-stats-kpi{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.io-stats-kpi-num{font-family:var(--font-serif);font-size:30px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em}
.io-stats-kpi-sub{font-family:var(--font);font-size:10.5px;color:var(--ink-3);font-weight:600;letter-spacing:.02em}
.io-stats-empty{font-size:12px;color:var(--ink-3);font-style:italic;padding:10px 0;text-align:center}

.io-spark{display:flex;align-items:flex-end;gap:2px;height:60px;margin-top:2px}
.io-spark-bar{flex:1;min-height:1px;background:var(--rust);border-radius:1px 1px 0 0;opacity:.9;transition:opacity .12s}
.io-spark-bar:hover{opacity:1}
.io-spark.io-spark-rust .io-spark-bar{background:var(--rust)}
.io-spark.io-spark-green .io-spark-bar{background:var(--green)}

.io-team-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.io-team-row{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;font-size:12px}
.io-team-name{font-weight:700;color:var(--ink);font-size:12.5px}
.io-team-bar-wrap{background:var(--bg-2);border-radius:3px;height:6px;overflow:hidden}
.io-team-bar{height:100%;border-radius:3px;transition:width .25s ease}
.io-team-stat{font-family:var(--font);font-size:11px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Worked tab — accepted (green) + cancelled (red) bars per person, with a
   subtle cancellation rate next to the name (red when ≥25%). */
.io-worked-list{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.io-worked-row{display:flex;flex-direction:column;gap:3px}
.io-worked-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.io-worked-rate{font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.io-worked-rate.io-worked-rate-hot{color:var(--berry)}
.io-worked-metric{display:grid;grid-template-columns:1fr 52px;align-items:center;gap:8px}
.io-worked-bar-wrap{background:var(--bg-2);border-radius:3px;height:6px;overflow:hidden}
.io-worked-bar{height:100%;border-radius:3px;min-width:2px;transition:width .25s ease}
.io-worked-lbl{font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}

/* Burndown mode reuses Chart.js — canvas needs a fixed-min height so the
   responsive chart has something to lay out into. */
.io-burn-canvas-wrap{flex:1 1 auto;min-height:240px;position:relative;margin-top:2px}
.io-burn-empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3);font-style:italic;padding:14px 0}

/* Urgency color classes — semantic status, keep as-is */
.uc-late{background:var(--berry-tint);border-color:#e6c6ce;color:var(--berry-deep)}.uc-late .dot{background:#8a3b4a}
.uc-1{background:var(--berry-tint);border-color:#ebccd2;color:var(--berry)}.uc-1 .dot{background:#a35063}
.uc-2{background:var(--clay-tint);border-color:#e8d2c0;color:var(--clay)}.uc-2 .dot{background:#c06b40}
.uc-3{background:var(--amber-tint);border-color:#ecdcb0;color:var(--amber-deep)}.uc-3 .dot{background:#d0a23f}
.uc-4{background:var(--sage-tint);border-color:#d5e0c8;color:var(--sage-deep)}.uc-4 .dot{background:#8caf77}
.uc-5{background:var(--green-tint);border-color:#cfe6cf;color:var(--green-deep)}.uc-5 .dot{background:#5ca85c}

/* Filters — compact row. Preset buttons grouped on the left under a "View"
   label and visually separated from the form filters by a thin divider, so
   the three "view modes" don't bleed into the granular dropdowns. */
.io-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.io-divider{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
/* Segmented View control (MM / Potential) with brand icons */
.io-seg{display:inline-flex;align-items:center;border:1px solid var(--line-strong);background:var(--bg-2);border-radius:9px;padding:2px;gap:2px;height:34px}
.io-seg-btn{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 12px;border:0;background:transparent;border-radius:7px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .12s,color .12s,box-shadow .12s}
.io-seg-btn:hover{color:var(--ink)}
.io-seg-btn.on{background:var(--green-bg);color:var(--green-2);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--green) 35%,transparent)}
.io-seg-btn .io-mm-logo{width:16px;height:16px;flex:none}
.io-seg-btn .io-pot-ico{width:15px;height:15px;flex:none}
/* Temporary "Fill gaps" cleanup filter — clay, to stand apart from the green view toggles */
.io-gaps-btn:hover{border-color:var(--clay);color:var(--clay)}
.io-gaps-btn.on{background:var(--clay);color:#fff;border-color:var(--clay)}
.io-fg{display:flex;flex-direction:column;gap:2px}
.io-fg label{font-size:9px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em}
.io-fg select,.io-fg input{font-size:12px;padding:5px 8px;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--surface);outline:none;color:var(--text);transition:border-color .12s;height:34px}
.io-fg select:focus,.io-fg input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(92,168,92,.15)}
.io-fg input{width:170px}
/* Filters sit adjacent, left to right; the Search field stretches to fill the
   remaining width. Bottom-align so every control (and the refresh button) lines
   up regardless of whether it has a label above it. */
#io-filters{align-items:flex-end}
#io-filters .io-fg:has(#f-search){flex:1 1 220px;min-width:0}
#io-filters .io-fg:has(#f-search) .io-search-wrap{width:100%}
#io-filters .io-fg:has(#f-search) input{width:100%}
/* clear button is icon-only on desktop; its text label only shows on mobile */
.io-clear-txt{display:none}
/* Inline clear ✕ inside a search field — desktop #f-search, mobile #io-msearch,
   Day Sheet #ds-search. Shows only when the field has text (:placeholder-shown). */
.io-search-wrap{position:relative;display:inline-flex;align-items:center}
.io-search-wrap > input{padding-right:24px}
/* Magnifier icon inside the search field */
.io-search-mag > input{padding-left:30px}
.io-search-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-faint);pointer-events:none}
/* Toggle switch (Cancelled · Show) */
.io-switch{display:inline-flex;align-items:center;gap:8px;height:34px;cursor:pointer}
.io-switch input{position:absolute;opacity:0;width:0;height:0}
.io-switch-track{position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:var(--line-strong);transition:background .15s}
.io-switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .15s}
.io-switch input:checked+.io-switch-track{background:var(--accent)}
.io-switch input:checked+.io-switch-track .io-switch-thumb{transform:translateX(16px)}
.io-switch-txt{font-size:12px;color:var(--ink-2)}
.io-search-clear{display:none;position:absolute;right:5px;top:50%;transform:translateY(-50%);width:16px;height:16px;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:var(--text-faint);color:var(--panel);font-size:10px;line-height:1;cursor:pointer}
.io-search-clear:hover{background:var(--text-dim)}
.io-search-wrap input:not(:placeholder-shown) ~ .io-search-clear{display:inline-flex}
.io-refresh-btn,.io-iconbtn{width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink-3);border:1px solid var(--line);background:var(--panel);cursor:pointer;padding:0;border-radius:9px;line-height:1;transition:color .12s,border-color .12s,transform .12s}
.io-iconbtn:hover{color:var(--accent);border-color:var(--accent)}
.io-refresh-btn svg,.io-iconbtn svg{width:16px;height:16px}
.io-refresh-btn:hover{color:var(--accent);border-color:var(--accent)}
.io-refresh-btn.spinning{opacity:.5}
.io-refresh-btn.spinning svg{animation:io-rfsp .6s linear infinite}
/* Dismiss ✕ on the "orders missing from feeds" banner */
.pv2-alert .pv2-alert-x{flex:none;cursor:pointer;font-size:16px;line-height:1;padding:2px 8px;border-radius:6px;border:0;background:transparent;color:var(--ink-3)}
.pv2-alert .pv2-alert-x:hover{background:var(--rust-bg);color:var(--rust)}
@keyframes io-rfsp{to{transform:rotate(360deg)}}
/* Hidden — the header already shows the same "N of M" count, no need to duplicate it on the filter row. */
.io-ftotal{display:none}

/* Table — when wrapped in .pv2-table-wrap (the new default), let the
   wrapper own the panel chrome. Without this we'd get a double border
   and a clipped border-radius. */
/* overflow:visible is REQUIRED for the sticky thead — an overflow:hidden table
   becomes the sticky containing block, so the header scrolls away with the rows.
   The .pv2-table-wrap (overflow:auto + radius) owns the clipping/scroll instead. */
.pv2-table-wrap .io-tbl{border:0;border-radius:0;background:transparent;overflow:visible}
.pv2-table-wrap{overflow:auto;max-height:calc(100vh - 320px)}
.io-tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.io-tbl th{background:var(--panel-2);font-size:10px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;padding:9px 12px;text-align:left;cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0;z-index:5}
.io-tbl th:hover{color:var(--text-dim)}
.io-tbl th.sorted{color:var(--text-dim);background:var(--bg)}
.io-tbl th .si{margin-left:3px;font-size:9px;opacity:0;transition:opacity .1s}.io-tbl th:hover .si{opacity:.4}.io-tbl th.sorted .si{opacity:1}
.io-tbl td{padding:8px 12px;font-size:13px;border-bottom:1px solid var(--bg);vertical-align:middle}
/* Ops + Day Sheet tables: consistent comfortable row height, content vertically
   centered. (height acts as a min on table cells; multi-line content grows.)
   The Potential column is exempt — it grows the row when that view is on. */
.io-tbl tbody td{height:54px}
.io-tbl tbody td.c-potential{height:auto}
.io-tbl tbody tr{transition:background .1s}
.io-tbl tbody tr:hover{background:var(--surface2)}
/* No left-edge color stripes — orders are identified by the supplier name,
   tags, and columns (cost status lives in the Cost column / mobile chip).
   The action-queue color coding stays on the queue cards above the table. */
.io-tbl tbody tr.mm,.io-tbl tbody tr.mm-matched{cursor:pointer}
.io-tbl tbody tr.sel{background:rgba(92,168,92,.12)!important}

/* Cell styles */
.c-order{font-family:var(--font);font-size:12px;white-space:nowrap}
.c-order a{color:var(--accent);text-decoration:none}.c-order a:hover{text-decoration:underline}
.c-sup-name{font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-date{white-space:nowrap;font-size:12px;color:var(--text-dim)}
.c-money{font-family:var(--font);font-size:12px;text-align:right;white-space:nowrap}
.c-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius);font-size:11px;font-weight:600;white-space:nowrap}
.c-badge.b-open{background:rgba(92,168,92,.1);color:var(--accent)}
.c-badge.b-closed{background:var(--bg);color:var(--text-faint)}
.c-badge.b-partial{background:rgba(193,145,47,.1);color:var(--yellow)}
.c-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.c-tag.t-sourced{background:rgba(92,168,92,.1);color:var(--accent)}
.c-tag.t-pending{background:rgba(193,145,47,.1);color:var(--yellow)}
.c-tag.t-issue{background:rgba(138,59,74,.08);color:var(--red)}
.c-tag.t-delivered{background:var(--bg);color:var(--text-faint)}
.c-tag.t-cancelled{background:var(--bg);color:var(--text-faint);text-decoration:line-through}
.c-days{font-variant-numeric:tabular-nums;font-size:12px}
.c-days.late{color:var(--berry);font-weight:700}
.c-days.today{color:var(--yellow);font-weight:600}
.c-days.ok{color:var(--text-dim)}
.c-assign{font-size:12px;cursor:pointer;position:relative;white-space:nowrap}
.c-assign:hover{color:var(--accent)}
.c-cost{font-family:var(--font);font-size:12px;color:var(--text-dim)}
.c-note{max-width:180px;font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.c-note:hover{color:var(--text)}
.c-link{font-size:11px}
.c-link a{color:var(--accent);text-decoration:none}.c-link a:hover{text-decoration:underline}

/* Popovers — fixed position, hidden by default */
.io-pop{position:fixed;display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:100;min-width:120px}
.io-pop.open{display:block}
.io-pop-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;cursor:pointer;color:var(--text-dim);border:none;background:none;width:100%;text-align:left}
.io-pop-item:hover{background:var(--surface2)}
.io-pop-item.sel{font-weight:600;color:var(--text)}
.io-note-pop{padding:12px;width:260px}
.io-note-pop textarea{width:100%;font-size:13px;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius);padding:8px;resize:none;outline:none;min-height:70px;color:var(--text);background:var(--surface)}
.io-note-pop textarea:focus{border-color:var(--accent)}
.io-note-pop .done{display:flex;justify-content:flex-end;margin-top:8px}
.io-note-pop .done button{font-size:12px;font-weight:600;color:var(--text-dim);border:none;background:none;cursor:pointer}
.io-note-pop .done button:hover{color:var(--text)}

/* Cell detail styles */
.c-sup-loc{font-size:12px;color:var(--text-faint)}
/* Delivery street address — only surfaced on the mobile order card (see mobile.css) */
.c-deliv-st{display:none}
.c-tag-conf{background:rgba(92,168,92,.08);color:var(--accent);border:1px solid rgba(92,168,92,.25);padding:2px 6px;font-size:9px;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:.04em}
.c-tag-callin{display:inline-block;margin-left:4px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-strong);padding:2px 6px;font-size:9px;font-weight:700;border-radius:4px;letter-spacing:.04em;white-space:nowrap}
.c-tag-web{display:inline-block;margin-left:4px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-strong);padding:2px 6px;font-size:9px;font-weight:700;border-radius:4px;letter-spacing:.04em;white-space:nowrap}
.c-badge.c-confirmed{background:var(--green-bg);color:var(--accent-dim)}
.c-badge.c-pending{background:var(--amber-bg);color:var(--amber)}
.c-days{display:inline-block;padding:2px 8px;border-radius:var(--radius);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.c-days.u4{background:var(--berry-tint);color:var(--berry);border:1px solid #ebccd2}
.c-days.u3{background:var(--clay-tint);color:var(--clay);border:1px solid #e8d2c0}
.c-days.u2{background:var(--amber-tint);color:var(--amber-deep);border:1px solid #ecdcb0}
.c-days.u1{background:var(--bg);color:var(--text-dim);border:1px solid var(--border)}
.c-days.u0{background:var(--surface2);color:var(--text-faint);border:1px solid var(--bg)}
.c-days-sub{font-size:10px;color:var(--text-faint);margin-left:4px}
.c-assign-btn{border:none;background:none;cursor:pointer;padding:0;font-size:13px}
.c-assign-pill{display:inline-block;padding:2px 8px;font-size:10px;font-weight:700;border-radius:10px;border:1px solid}
.c-assign-pill.Alec{background:color-mix(in oklab,var(--person-1) 18%,var(--panel));color:color-mix(in oklab,var(--person-1) 74%,#000);border-color:color-mix(in oklab,var(--person-1) 42%,transparent)}
.c-assign-pill.Mo{background:color-mix(in oklab,var(--person-2) 18%,var(--panel));color:color-mix(in oklab,var(--person-2) 74%,#000);border-color:color-mix(in oklab,var(--person-2) 42%,transparent)}
.c-assign-pill.Tyler{background:color-mix(in oklab,var(--person-3) 18%,var(--panel));color:color-mix(in oklab,var(--person-3) 74%,#000);border-color:color-mix(in oklab,var(--person-3) 42%,transparent)}
.c-assign-empty{color:var(--border-light);font-size:12px;transition:color .15s}
tr:hover .c-assign-empty{color:var(--text-faint)}
.c-cost-yes{color:var(--accent)}.c-cost-miss{color:var(--yellow)}.c-cost-na{color:var(--border)}
/* Confirmed-supplier indicator (search-check) next to the supplier name */
.c-conf{display:inline-flex;vertical-align:middle;color:var(--accent)}
.c-conf-ico{width:15px;height:15px}
/* keep the supplier name + confirmed icon on one line (ops table only) */
.io-tbl:not(.ds-tbl) tbody td:nth-child(2){white-space:nowrap}
/* dollar cost-missing flag — mobile-only (desktop uses the Cost column glyph) */
.c-cost-dollar{display:none}
.c-note-btn{border:none;background:none;cursor:pointer;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-dim);text-align:left;padding:0}
.c-note-btn:hover{color:var(--text)}
.c-note-empty{color:var(--border-light);font-size:12px;font-style:italic;transition:color .15s;border:none;background:none;cursor:pointer;padding:0}
tr:hover .c-note-empty{color:var(--text-faint)}
.c-link{font-size:12px;color:var(--text-faint);text-decoration:none;opacity:0;transition:opacity .15s}
tr:hover .c-link{opacity:1}
.c-link:hover{color:var(--accent)}

/* Side panel */
.sp-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:49}
.sp-overlay.open{display:block}
.sp-panel{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;background:var(--surface);box-shadow:-4px 0 30px rgba(0,0,0,.12);z-index:50;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s cubic-bezier(.25,.46,.45,.94)}
.sp-panel.open{transform:translateX(0)}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.sp-head h3{font-size:16px;font-weight:700;color:var(--text)}
.sp-close{background:none;border:none;font-size:20px;color:var(--text-faint);cursor:pointer;padding:4px 8px;border-radius:var(--radius)}
.sp-close:hover{background:var(--surface2);color:var(--text)}
.sp-body{flex:1;overflow-y:auto;padding:20px}
.sp-foot{padding:12px 24px;border-top:1px solid var(--border);background:var(--surface2);display:flex;justify-content:flex-end;flex-shrink:0}
.sp-title{font-size:16px;font-weight:700;color:var(--text);margin:0}
.sp-title-row{display:flex;align-items:center;gap:8px;min-width:0}
.sp-sub{font-size:13px;color:var(--text-dim);margin-top:2px}
.sp-lbl{font-size:10px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;display:block}
.sp-val{font-size:13px;font-weight:500;color:var(--text)}
.sp-sect{margin-bottom:20px}

/* ═══ Order panel redesign — white panel, warm tinted cards ═══ */
#sp-panel .sp-body{background:var(--panel)}
.sp-seclbl{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:20px 2px 9px}
.sp-seclbl .sp-seclbl-count{margin-left:6px;font-size:10px;font-weight:700;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);padding:1px 8px;border-radius:999px}
.sp-pcard{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.sp-pdiv{height:1px;background:var(--line);margin:14px 0}
/* supplier banner */
.sp-supbar{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:2px}
.sp-supbar-name{font-size:16px;font-weight:700;color:var(--ink)}
.sp-supbar-tag{margin-left:auto;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.sp-supbar-tag.needs{background:var(--amber-bg);color:var(--amber)}
.sp-supbar-tag.mm{background:var(--green-bg);color:var(--green-2)}
.sp-supbar-tag.direct{background:var(--panel);color:var(--ink-2);border:1px solid var(--line)}
/* customer & delivery */
.sp-cd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sp-cd-cust .sp-val{font-size:18px;font-weight:700;display:block}
.sp-cd-rev{text-align:right;flex:none}
.sp-cd-rev .sp-val{font-size:24px;font-weight:800;display:block}
.sp-cd-addr{display:flex;gap:8px;align-items:flex-start}
.sp-cd-pinico{flex:none;width:16px;height:16px;color:var(--ink-3);margin-top:1px}
/* products */
.sp-prodrow{display:flex;gap:14px;align-items:flex-start}
.sp-prodrow + .sp-prodrow{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sp-prod-qty{flex:none;min-width:42px;height:42px;padding:0 8px;border-radius:11px;background:var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--ink)}
.sp-prod-main{min-width:0;flex:1}
.sp-prod-title{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.25}
.sp-prod-supname{font-size:13px;font-weight:600;color:var(--accent);line-height:1.3;margin-top:2px}
.sp-prod-sku{font-family:var(--font);font-size:12px;color:var(--ink-3);word-break:break-all;margin-top:3px;display:block}
.sp-prod-meta{display:flex;gap:22px;flex-wrap:wrap}
/* Special instructions — full-width row beneath the delivery/window/placement meta row */
.sp-prod-instr{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sp-prod-instr .sp-meta-lbl{display:block;margin-bottom:4px}
.sp-instr-text{font-size:13px;font-weight:500;color:var(--ink);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.sp-prod-meta .sp-meta-lbl{display:inline-flex;align-items:center;gap:5px}
.sp-prod-meta-ico{width:13px;height:13px;flex:none;color:var(--ink-3)}
/* find-a-supplier header row + "Add from network" picker (styled select) */
.sp-find-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 10px}
.sp-find-head > .sp-seclbl{flex:0 1 auto;min-width:0}
.sp-net-wrap{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%}
.sp-net-plus{position:absolute;left:12px;width:14px;height:14px;color:var(--ink-2);pointer-events:none}
.sp-net-btn{appearance:none;max-width:100%;text-overflow:ellipsis;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:8px 30px 8px 32px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 11px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.sp-net-btn:hover{border-color:var(--accent);color:var(--accent)}
.sp-net-btn:disabled{opacity:.55;cursor:default}
/* empty supplier state */
.sp-empty{border:1.5px dashed var(--line-strong);border-radius:14px;padding:26px 20px;text-align:center;background:var(--bg-2)}
.sp-empty-ico{width:30px;height:30px;color:var(--ink-3);margin-bottom:8px}
.sp-empty-txt{font-size:13px;color:var(--ink-2);margin:0 0 14px}
/* tag pills used in Final Cost header */
.sp-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px}
.sp-pill.pending{background:var(--amber-bg);color:var(--amber)}
.sp-pill.recorded,.sp-pill.accepted{background:var(--green-bg);color:var(--green-2)}
.sp-pill.override{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.sp-ovr-btn{cursor:pointer;font:inherit}

/* ── Order Issues (post-acceptance log) ── */
.sp-issues-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 8px}
.sp-issues-head .sp-seclbl{margin:0}
.sp-issue-add{font-size:11px;font-weight:700;color:var(--green-2);background:var(--green-bg);border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer}
.sp-issue-add:hover{filter:brightness(.97)}
.sp-issue-form{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.sp-issue-form-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.sp-issue-cancel{font-size:12px;font-weight:600;color:var(--ink-2);background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
.sp-issue-save{font-size:12px;padding:6px 14px}
.sp-issue{border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:8px;background:var(--surface)}
.sp-issue.resolved{opacity:.62}
.sp-issue-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-issue-cat{font-size:12.5px;font-weight:700;color:var(--ink)}
.sp-issue-status{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;white-space:nowrap}
.sp-issue-status.open{background:var(--amber-bg);color:var(--amber)}
.sp-issue-status.done{background:var(--green-bg);color:var(--green-2)}
.sp-issue-desc{font-size:12.5px;color:var(--ink-2);margin-top:6px;white-space:pre-wrap;line-height:1.45}
.sp-issue-acts{display:flex;gap:14px;margin-top:9px}
.sp-issue-acts button{font-size:11px;font-weight:600;color:var(--green-2);background:none;border:0;padding:0;cursor:pointer}
.sp-issue-acts button:hover{text-decoration:underline}
.sp-issue-acts .sp-issue-del{color:var(--red,#b3492d)}
.sp-issues-empty,.sp-issues-loading{font-size:12px;color:var(--ink-3);padding:10px 2px}
.sp-issues-err{font-size:12px;color:var(--red,#b3492d);padding:8px 2px}
.sp-issue-resolution{font-size:12px;color:var(--ink-2);margin-top:6px;background:var(--green-bg);border-radius:8px;padding:7px 9px;white-space:pre-wrap;line-height:1.45}
.sp-issue-reslbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--green-2);margin-right:4px}
.sp-issue-resform{margin-top:9px}
.sp-issue-editing{padding:12px}

/* Red frown icon on the order row when the order has unresolved issues */
.c-issue{display:inline-flex;vertical-align:middle;color:var(--red,#b3492d);margin-left:3px}
.c-issue.resolved{color:var(--green-2,#2d6a4f)}
.c-issue-ico{width:15px;height:15px}
.sp-ovr-btn.on{background:var(--green-bg);color:var(--green-2);border-color:color-mix(in oklab,var(--green) 40%,transparent)}
/* locked final-cost inputs read as disabled until Override is on */
#sp-body .sp-input:disabled{background:var(--bg-2);color:var(--ink-2);cursor:not-allowed;opacity:.75}

/* Header: order# with created date + assignee stacked beneath (left); actions (right) */
#sp-head{align-items:flex-start}
.sp-head-left{display:flex;flex-direction:column;gap:7px;min-width:0}
.sp-head-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sp-head-metaitem{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-head-created-lbl{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);font-weight:700}
.sp-head-right{display:flex;align-items:center;gap:10px}
/* Close X — top-right of the panel. Hidden on desktop (click-outside closes);
   shown on mobile where the panel is full-screen (no outside to tap). */
.sp-head{position:relative}
.sp-close-x{position:absolute;top:14px;right:16px;z-index:5;width:32px;height:32px;display:none;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font-size:19px;line-height:1;cursor:pointer}
.sp-close-x:hover{background:var(--bg-2);color:var(--ink)}
/* Accept PO button sized to match Save Changes (double class beats base rule) */
.sp-accept-btn.sp-accept-sm{min-width:0;padding:7px 14px;font-size:12.5px;font-weight:700;box-shadow:none}
.sp-accept-btn.sp-accept-sm:hover{transform:none;box-shadow:none}
.sp-accept-mini{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap}
/* Footer actions moved to header — collapse the now-empty footer */
.sp-foot:empty{display:none}
/* Single-row order info (customer · delivery to · revenue · supplier · assignee) */
.sp-inforow{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-start}
.sp-inforow > div{min-width:0}
.sp-info-addr{flex:1 1 160px}

/* Product row in the side panel — product (left) + fulfillment details (right,
   laid out as a horizontal row of labelled values). */
.sp-item-row{display:flex;align-items:stretch;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sp-item-prod{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center;padding:9px 12px}
.sp-item-meta{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:18px;padding:9px 14px;background:var(--bg-2);border-left:1px solid var(--border)}
.sp-meta-row{display:flex;flex-direction:column;gap:1px;min-width:0}
.sp-meta-lbl{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);font-weight:700}
.sp-meta-val{font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.sp-item-qtysku{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;line-height:1.4}
.sp-item-qty{font-weight:700;color:var(--text);min-width:22px;text-align:right}
.sp-item-sep{color:var(--text-faint)}
.sp-item-sku{font-family:var(--font);font-size:12px;color:var(--text-dim);word-break:break-all}
.sp-item-name{margin-left:6px;color:var(--text);font-size:12.5px;font-weight:500}
.sp-item-title{font-size:11px;color:var(--text-faint);line-height:1.35}
.sp-section{margin-bottom:20px}
.sp-section-title{font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sp-section-title .badge{font-size:10px;background:var(--border);padding:1px 6px;border-radius:8px;font-weight:500;text-transform:none;letter-spacing:0}

/* Sourcing cards */
.sp-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:10px;background:var(--surface)}
.sp-card.matched{border-color:var(--accent);background:rgba(92,168,92,.04)}
.sp-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sp-card-head .name{font-weight:600;font-size:13px;color:var(--text)}
.sp-card-head .status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px}
.sp-card-head .status.s-sourced{background:rgba(92,168,92,.1);color:var(--accent)}
.sp-card-head .status.s-pending{background:rgba(193,145,47,.1);color:var(--yellow)}
.sp-card-head .status.s-issue{background:rgba(138,59,74,.08);color:var(--red)}
.sp-card-head .status.s-delivered{background:var(--bg);color:var(--text-faint)}
.sp-card-head .status.s-cancelled{background:var(--bg);color:var(--text-faint)}
.sp-card-body{font-size:12px;color:var(--text-dim);display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.sp-card-body .label{color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.sp-card-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sp-card-acts button{padding:4px 10px;font-size:11px;font-weight:600;border-radius:4px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text)}
.sp-card-acts button:hover{background:var(--surface2)}
.sp-card-acts button.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.sp-card-acts button.accent:hover{background:var(--accent-dim)}
.sp-card-acts button.red{color:var(--red);border-color:rgba(138,59,74,.25)}
.sp-card-acts button.red:hover{background:rgba(138,59,74,.08)}

/* Add supplier form in side panel */
.sp-add-form{border:1px dashed var(--border);border-radius:var(--radius);padding:12px;margin-top:10px}
.sp-add-form .sp-add-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-end}
.sp-add-form .sp-add-row .fg{display:flex;flex-direction:column;gap:2px;flex:1}
.sp-add-form .sp-add-row .fg label{font-size:10px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
.sp-add-form .sp-add-row .fg input,.sp-add-form .sp-add-row .fg select{font-size:12px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none}
.sp-add-form .sp-add-row .fg input:focus,.sp-add-form .sp-add-row .fg select:focus{border-color:var(--accent)}

/* Final cost section in side panel */
.sp-final{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--surface2)}
.sp-final-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sp-final-row label{font-size:11px;font-weight:600;color:var(--text-dim);min-width:80px}
.sp-final-row input{font-size:12px;font-family:var(--font);padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);width:100px;outline:none}
.sp-final-row input:focus{border-color:var(--accent)}
.sp-final-row .computed{font-size:12px;font-family:var(--font);color:var(--text-dim)}
.sp-final-save{margin-top:8px}

/* Create supplier section in side panel */
.sp-create{border:1px dashed var(--accent);border-radius:var(--radius);padding:12px;background:rgba(92,168,92,.03)}
.sp-create h4{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:8px}
.sp-create .sp-add-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-end}
.sp-create .sp-add-row .fg{display:flex;flex-direction:column;gap:2px;flex:1}
.sp-create .sp-add-row .fg label{font-size:10px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
.sp-create .sp-add-row .fg input{font-size:12px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none}
.sp-create .sp-add-row .fg input:focus{border-color:var(--accent)}
.sp-create-addr{margin-bottom:8px}

/* Supplier cards in side panel */
.sp-scard{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:8px;transition:all .15s}
.sp-scard.confirmed{border-color:var(--accent);background:rgba(92,168,92,.06)}
.sp-scard.nogo{opacity:.45}
.sp-scard.created{border-color:var(--slate);background:color-mix(in oklab,var(--slate) 5%,var(--panel))}
.sp-scard-hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;cursor:pointer}
.sp-scard-hdr:hover{background:rgba(0,0,0,.02)}
.sp-scard-name{font-size:13px;font-weight:600;color:var(--text)}
/* Confirmed-order count next to a supplier's name in the panel */
.sp-scard-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:9px;background:var(--surface2,var(--bg-2));color:var(--text-dim,var(--ink-2));font-size:11px;font-weight:700;vertical-align:middle}
.sp-scard-badges{display:flex;gap:4px;align-items:center}
/* Call button (customer in info row + supplier in card header) and phone line */
.sp-callbtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:50%;background:var(--green-bg);color:var(--accent);border:1px solid var(--accent);text-decoration:none;cursor:pointer;vertical-align:middle;flex:0 0 auto}
.sp-callbtn:hover{background:var(--accent);color:#fff}
.sp-callbtn svg{width:13px;height:13px;display:block}
.sp-copybtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:50%;background:var(--green-bg);color:var(--accent);border:1px solid var(--accent);cursor:pointer;vertical-align:middle;flex:0 0 auto}
.sp-copybtn:hover{background:var(--accent);color:#fff}
.sp-copybtn svg{width:13px;height:13px;display:block}
.sp-textbtn,.sp-mapbtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:50%;background:var(--green-bg);color:var(--accent);border:1px solid var(--accent);text-decoration:none;cursor:pointer;vertical-align:middle;flex:0 0 auto}
.sp-textbtn:hover,.sp-mapbtn:hover{background:var(--accent);color:#fff}
.sp-textbtn svg,.sp-mapbtn svg{width:13px;height:13px;display:block}
.sp-scard-call{display:inline-flex;margin-left:8px;margin-right:auto}
.sp-phone{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.sp-scard-exp{padding:16px;border-top:1px solid var(--bg);background:var(--surface)}
.sp-status-row{display:flex;gap:4px;margin-bottom:12px}
.sp-st-btn{flex:1;padding:5px 8px;font-size:11px;font-weight:600;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-faint);cursor:pointer;text-align:center;transition:all .12s}
.sp-st-btn:hover{border-color:var(--border-light);color:var(--text-dim)}
.sp-st-btn.maybe.on{background:var(--slate-tint);color:var(--slate-deep);border-color:color-mix(in oklab,var(--slate) 35%,transparent)}
.sp-st-btn.onetime.on{background:var(--amber-tint);color:var(--amber-deep);border-color:color-mix(in oklab,var(--amber) 35%,transparent)}
.sp-st-btn.confirmed.on{background:rgba(92,168,92,.08);color:var(--accent);border-color:rgba(92,168,92,.25)}
.sp-input{width:100%;font-size:13px;font-family:var(--font-sans);padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);outline:none;color:var(--text);background:var(--surface)}
.sp-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(92,168,92,.1)}

/* ── Customer message composer popover ── */
.sp-msg-pop{position:fixed;z-index:200;width:340px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 44px rgba(44,36,22,.20);padding:14px;display:none}
.sp-msg-pop.open{display:block}
.sp-msg-hd{font-size:13px;font-weight:800;color:var(--text);margin-bottom:11px}
.sp-msg-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sp-msg-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);width:62px;flex:0 0 auto}
.sp-msg-row .sp-input{flex:1}
.sp-msg-text{width:100%;resize:vertical;min-height:120px;font-family:var(--font-sans);line-height:1.45}
.sp-msg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.sp-msg-hint{font-size:11px;color:var(--text-faint)}
.sp-msg-acts{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}

/* ── Delivery details edit (date / window / placement / note) + PO actions ── */
.sp-prod-meta-edit{gap:18px;align-items:flex-start}
.sp-prod-meta-edit .sp-meta-row{gap:6px}
.sp-del-note{width:100%;min-height:56px;resize:vertical;margin-top:5px;font-family:var(--font-sans)}
/* AM/PM segmented toggle */
.sp-seg{display:inline-flex;width:fit-content;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sp-seg-btn{padding:7px 16px;font-family:var(--font-sans);font-size:12px;font-weight:700;background:var(--surface);color:var(--text-faint);border:none;border-right:1px solid var(--border);cursor:pointer}
.sp-seg-btn:last-child{border-right:none}
.sp-seg-btn.on{background:var(--accent);color:#fff}
/* Placement 2×2 — top-left cell = top_left, no labels */
.sp-grid2{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:2px;width:44px;height:44px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--border)}
.sp-grid2-cell{border:none;background:var(--surface);cursor:pointer;padding:0}
.sp-grid2-cell:hover{background:var(--green-bg)}
.sp-grid2-cell.on{background:var(--accent)}
/* Delivery date picker — trigger + popover (reuses shared .mmdp-cal calendar from shared.css) */
.sp-del-dpwrap{position:relative}
.sp-dp-trigger{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.sp-dp-trigger>svg{width:15px;height:15px;color:var(--text-faint)}
.sp-dp-trigger:hover{border-color:var(--accent)}
.sp-dp-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 36px rgba(44,36,22,.16)}
/* Edit / Done / Update PO — neutral outline icon buttons, shown in the Products and
   Final Cost section headers (right-aligned). No filled/"selected" look; disabled = greyed. */
.sp-del-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.sp-del-btn>svg{width:17px;height:17px}
.sp-del-btn:hover{border-color:var(--accent);color:var(--accent)}
.sp-del-btn:disabled{color:var(--text-faint);border-color:var(--border);background:var(--surface);cursor:not-allowed;opacity:.55}
.sp-del-btn:disabled:hover{border-color:var(--border);color:var(--text-faint)}

/* Nearby-supplier picker in the side panel (pulls the table's in-range list). */
.sp-nearby-select{margin-bottom:8px;cursor:pointer;border-style:dashed;border-color:var(--accent);color:var(--accent);font-weight:600}
.sp-nearby-note{font-size:12px;color:var(--text-faint);font-style:italic;margin-bottom:8px}
.sp-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.sp-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.sp-row4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-bottom:8px}

/* Debug section */
.sp-debug{border:1px solid var(--border);border-radius:var(--radius);padding:10px;background:var(--bg);margin-top:10px}
.sp-debug summary{font-size:11px;font-weight:700;color:var(--text-faint);cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.sp-debug pre{font-family:var(--font);font-size:10px;color:var(--text-dim);white-space:pre-wrap;word-break:break-all;max-height:300px;overflow-y:auto;margin-top:6px}

/* Loading / empty */
.io-loading{display:flex;align-items:center;gap:12px;padding:40px;justify-content:center;color:var(--text-dim);font-size:14px}
.io-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
.io-empty{text-align:center;padding:40px;color:var(--text-faint);font-size:14px}
.io-empty h3{color:var(--text);margin-bottom:6px}

/* Responsive */
@media(max-width:900px){
  #io-app{padding:0 .75rem;margin:1rem auto}
  .io-urg-row{flex-wrap:wrap}
  .io-filters{gap:8px;flex-direction:column;align-items:stretch}
  .io-fg input{width:100%}
  .sp-panel{width:100vw;max-width:100vw}
  .sp-panel.open{transform:translateX(0)}
  .io-tbl{font-size:12px;display:block;overflow-x:auto}
  .io-tbl th,.io-tbl td{padding:6px 8px;white-space:nowrap}
  .io-ftotal{margin-left:0}
}
@media(max-width:480px){
  .io-urg-btn .num{font-size:16px}
  .io-urg-late .num{font-size:16px}
  .io-urg-btn .lbl,.io-urg-late .lbl{font-size:8px}
  .io-hdr h2{font-size:16px}
  .sp-panel{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-width:100%;border-radius:0}
}

/* Cancelled orders — visible but visually muted and struck through */
.io-tbl tr.cancelled td{color:var(--text-faint);background:rgba(0,0,0,.02)}
.io-tbl tr.cancelled .c-order a,
.io-tbl tr.cancelled .c-sup-name,
.io-tbl tr.cancelled .c-money,
.io-tbl tr.cancelled .c-date{text-decoration:line-through;text-decoration-thickness:1.5px}
.io-tbl tr.cancelled .c-badge,
.io-tbl tr.cancelled .c-tag-conf{opacity:.5}
.c-tag-cancelled{display:inline-block;margin-left:4px;background:rgba(138,59,74,.1);color:var(--berry);border:1px solid rgba(138,59,74,.3);padding:2px 6px;font-size:9px;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none !important;vertical-align:middle}

/* Missing-orders top-of-page alert — the visual chrome (background, border,
   text colors) comes from .pv2-alert in v7-paper-v2.css, which is the only
   place that adapts to dark mode. We don't restyle #io-missing-alert here:
   the prior hardcoded light-mode reds (#fef2f2 / #fecaca / #7f1d1d) leaked
   through in dark mode and made the banner look pink on the dark page. */
.io-missing-sub{display:block;margin-top:2px;font-size:11px;color:var(--ink-3);font-weight:400}

/* Potential Suppliers column — hidden by default; .io-tbl.show-potential opts in.
   Toggle controlled by the "Potential" button in the orders filter bar. */
.io-tbl:not(.show-potential) .c-potential,
.io-tbl:not(.show-potential) th.col-potential{display:none}
.c-potential{max-width:260px;white-space:normal !important;vertical-align:top}

/* Side-panel Accept PO button (top of body, MM orders only). Larger and more
   prominent than a row button — this is the primary action when reviewing
   an order's details. The matching "Accepted [date]" banner takes its place
   once the order has been confirmed. */
.sp-accept-btn{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;padding:11px 32px;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:all .15s;font-family:inherit;min-width:200px;box-shadow:0 1px 3px rgba(92,168,92,.3)}
.sp-accept-btn:hover{background:var(--accent-dim);box-shadow:0 3px 8px rgba(92,168,92,.4);transform:translateY(-1px)}
.sp-accept-btn:disabled{background:var(--border);border-color:var(--border);color:var(--text-faint);cursor:default;box-shadow:none;transform:none}
.sp-accept-done{padding:10px 14px;background:var(--green-tint);border:1px solid color-mix(in oklab,var(--green) 30%,transparent);border-radius:8px;color:var(--green-deep);font-size:13px;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.sp-accept-check{font-weight:900;color:var(--green);font-size:16px}
.c-pot-row{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.3;padding:2px 0;flex-wrap:wrap}
.c-pot-row+.c-pot-row{border-top:1px dashed var(--border)}
.c-pot-name{font-weight:600;color:var(--text);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-pot-status{font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;border:1px solid;text-transform:uppercase;letter-spacing:.04em}
.c-pot-dist{font-size:10px;color:var(--text-faint);margin-left:auto}

/* Timezone tag badge on order # */
.c-tz{display:inline-block;margin-left:4px;font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--surface2);color:var(--text-dim);border:1px solid var(--border);letter-spacing:.04em;vertical-align:middle}

/* Region pending count badge on MM orders */
.c-region-count{display:inline-block;margin-left:4px;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--amber-tint);color:var(--amber-deep);border:1px solid color-mix(in oklab,var(--amber) 30%,transparent);letter-spacing:.02em;vertical-align:middle}

/* ── Day Sheet (fulfiller's day-of quick view) ──
   One dense row per order delivering on the selected day. Optimized for
   answering driver/customer calls: street address bold, full special
   instructions (never truncated), AM/PM + placement at a glance. */
.ds-toggle{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:14px;font-weight:700;padding:11px 20px;border-radius:10px;border:1px solid var(--line-strong,var(--border));background:var(--panel,var(--surface));color:var(--ink,var(--text-dim));cursor:pointer;letter-spacing:.01em;box-shadow:var(--shadow-sm);transition:all .15s}
.ds-toggle-icon{flex:none;width:18px;height:18px}
/* Header action buttons (Analytics + Day Sheet) sit as a tight pair. */
.io-head-actions{display:flex;align-items:center;gap:8px}

/* Orders sub-view switcher — folder-style tabs sitting on the header baseline.
   The active tab is a rounded-top fill that overlaps the 1px baseline so it
   reads as a folder tab attached to the page below. */
#view-orders .pv2-pagehead{ border-bottom:1px solid var(--line-strong); padding-bottom:0; }
#view-orders .pv2-pagehead > div:first-child{ padding-bottom:14px; }
.io-subnav{display:inline-flex;align-items:flex-end;gap:4px;margin-bottom:-1px}
.io-subnav-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-bottom:0;background:transparent;padding:10px 18px 12px;border-radius:11px 11px 0 0;font:inherit;font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer;letter-spacing:.01em;white-space:nowrap;transition:background .14s,color .14s,border-color .14s}
.io-subnav-btn svg{width:16px;height:16px;flex:none}
.io-subnav-btn:hover{color:var(--ink)}
.io-subnav-btn.is-active{background:var(--green-bg);color:var(--green-2);border-color:var(--line-strong)}
.ds-toggle:hover{border-color:var(--accent);color:var(--accent)}
.ds-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(92,168,92,.35)}
.ds-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 12px;margin-bottom:14px;background:var(--panel,var(--surface));border:1px solid var(--line,var(--border));border-radius:10px}
.ds-nav{display:flex;align-items:center;gap:8px}
.ds-nav-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line,var(--border));background:var(--surface);color:var(--text-dim);font-size:16px;font-weight:700;cursor:pointer;line-height:1;transition:all .12s}
.ds-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.ds-daylbl{display:flex;flex-direction:column;align-items:center;min-width:120px}
.ds-dayname{font-size:15px;font-weight:800;color:var(--text);line-height:1.1}
.ds-dayfull{font-size:11px;color:var(--text-dim)}
.ds-today-btn{font-family:inherit;font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;border:1px solid var(--line,var(--border));background:var(--surface);color:var(--text-dim);cursor:pointer}
.ds-today-btn:hover{border-color:var(--accent);color:var(--accent)}
.ds-count{font-size:12px;font-weight:700;color:var(--green-2);padding:6px 14px;border-radius:999px;white-space:nowrap;background:linear-gradient(135deg,color-mix(in oklab,var(--green) 24%,transparent),color-mix(in oklab,var(--green) 6%,transparent));-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border:1px solid color-mix(in oklab,var(--green) 32%,transparent);box-shadow:0 2px 12px color-mix(in oklab,var(--green) 14%,transparent)}
.ds-search{flex:1;min-width:200px;font-family:inherit;font-size:13px;padding:7px 10px;border-radius:8px;border:1px solid var(--line,var(--border));background:var(--surface);color:var(--text)}
.ds-search:focus{outline:none;border-color:var(--accent)}
/* Day Sheet state filter — styled like the operations dropdowns */
.ds-state{font-family:inherit;font-size:13px;padding:7px 28px 7px 10px;border-radius:8px;border:1px solid var(--line,var(--border));background:var(--surface);color:var(--text);cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 10px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.ds-state:focus{outline:none;border-color:var(--accent)}
.ds-hint{font-size:11px;color:var(--text-faint);white-space:nowrap}
.ds-exit{font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--line,var(--border));background:var(--surface);color:var(--text-dim);cursor:pointer;white-space:nowrap}
.ds-exit:hover{border-color:var(--red,#8a3b4a);color:var(--red,#8a3b4a)}
.ds-tbl td{vertical-align:middle}
.ds-tbl tbody tr{cursor:pointer}
.ds-cust-name{display:block;font-weight:600}
.ds-phone{display:block;font-size:11px;color:var(--accent);text-decoration:none;font-variant-numeric:tabular-nums;margin-top:2px}
.ds-phone:hover{text-decoration:underline}
.ds-addr-city{display:block;font-weight:700}
.ds-addr-st{display:block;font-size:11px;color:var(--text-dim);margin-top:2px}
.ds-prod-line{white-space:nowrap;font-size:12px;line-height:1.5}
.ds-prod-line b{font-variant-numeric:tabular-nums}
.ds-win{display:inline-block;font-size:10px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.5px}
.ds-win.am{background:var(--amber-tint);color:var(--amber-deep);border:1px solid color-mix(in oklab,var(--amber) 30%,transparent)}
.ds-win.pm{background:var(--slate-tint);color:var(--slate-deep);border:1px solid color-mix(in oklab,var(--slate) 30%,transparent)}
.ds-win.any{background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)}
.ds-plc{font-size:12px;font-weight:600;white-space:nowrap}
.ds-instr{font-size:12px;line-height:1.45;max-width:260px;min-width:140px;white-space:normal;word-break:break-word}
.ds-tag-needs{background:var(--amber-tint);color:var(--amber-deep);border:1px solid color-mix(in oklab,var(--amber) 30%,transparent)}
.ds-acc-date{display:block;font-size:10px;color:var(--text-faint);margin-top:2px}
.ds-note .c-note-btn{max-width:160px}
@media (max-width:768px){
  .ds-hint{display:none}
  .ds-search{min-width:140px}
}
/* Day Sheet active: single full-width column (rail hidden) */
#view-orders .pv2-body.ds-full{grid-template-columns:minmax(0,1fr)}

/* ═══════════════════════════════════════════════════════════════
   Action-queue header band — "What needs done" relocated from the
   left rail to a horizontal strip of clickable filter cards at the
   top of the Orders tab. Click a card to filter; click again to clear.
   ═══════════════════════════════════════════════════════════════ */
.io-queuebar{
  display:flex; flex-wrap:nowrap; align-items:stretch; gap:14px;
  padding:14px 28px 8px;
}
/* Each group is its own recessed tray; cards sit raised inside it.
   Flex weights (5 vs 2) keep all seven cards on a single row. */
/* Groups: no tray chrome — just the label + cards, with a divider between groups. */
.io-aq-group{
  display:flex; flex-direction:column; gap:8px; min-width:0;
}
.io-aq-group.g-supplier{ flex:5 1 0; }
.io-aq-group.g-mm{ flex:2 1 0; }
.io-aq-group + .io-aq-group{ border-left:1px solid var(--line); padding-left:14px; }
.io-aq-grouplbl{
  font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:0 2px;
}
.io-aq-cards{ display:flex; flex-wrap:nowrap; gap:8px; }
/* Card: big icon filling the left, count + title stacked on the right. */
.io-aq-card{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:11px;
  padding:10px 12px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:10px; cursor:pointer; text-align:left;
  transition:border-color .12s, box-shadow .12s, transform .06s, background .12s;
}
.io-aq-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.io-aq-card:active{ transform:translateY(0); }
/* Selected card: always green, not the per-queue tone. (Row stripes still use
   the per-queue --row-tone — this override is scoped to the card only.) */
.io-aq-card.is-active{
  border-color:var(--green);
  box-shadow:0 0 0 1px var(--green), var(--shadow-sm);
}
.io-aq-card.is-zero{ opacity:.5; cursor:default; }
.io-aq-card.is-zero:hover{ border-color:var(--line); box-shadow:none; transform:none; }
.io-aq-ico{ flex:none; display:flex; align-items:center; justify-content:center; }
.io-aq-icon{ flex:none; width:34px; height:34px; stroke-width:1.6; color:var(--ink-2); }
.io-aq-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.io-aq-count{
  font-family:var(--font-serif); font-size:26px; font-weight:500;
  color:var(--ink); line-height:1.05; font-variant-numeric:tabular-nums;
}
.io-aq-name-txt{
  font-size:12px; font-weight:600; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* Full-width table area (no left rail). Account for the header band height. */
#view-orders .io-main-full{ padding-top:10px; }
.io-table-wrap-full{ max-height:calc(100vh - 360px); }

/* ── Analytics modal ── centered, responsive width + height, scrolls if tall. */
.io-an-overlay{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(15,23,42,.45); backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
  padding:24px;
}
.io-an-overlay.open{ display:flex; }
.io-an-modal{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px;
  width:min(900px, 94vw);
  max-height:min(720px, 90vh);
  box-shadow:var(--shadow-md); overflow:hidden;
}
.io-an-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 20px; border-bottom:1px solid var(--line);
}
.io-an-title{ font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--ink); }
.io-an-close{
  appearance:none; width:28px; height:28px; border-radius:7px;
  border:1px solid var(--line); background:var(--panel);
  color:var(--ink-2); cursor:pointer; font-size:13px; line-height:1;
}
.io-an-close:hover{ background:var(--bg-2); color:var(--ink); }

/* ── Analytics page (Operations ▸ Analytics sub-tab) ─────────────────────── */
.io-an-page{display:flex;flex-direction:column;gap:24px;padding:6px 0 44px}
/* Widgets live inside #oan-content (re-rendered on slider drag), so it needs its
   own gap — otherwise the KPI row + chart cards stack flush. */
#oan-content{display:flex;flex-direction:column;gap:24px}

/* Date controls — 2026 Season toggle + day slider */
.oan-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-sm)}
.oan-season-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer;letter-spacing:.01em;transition:all .15s}
.oan-season-btn svg{width:16px;height:16px;flex:none}
.oan-season-btn:hover{border-color:var(--green);color:var(--green-2)}
.oan-season-btn.on{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 1px 5px color-mix(in oklab,var(--green) 40%,transparent)}
.oan-fld{display:inline-flex;align-items:center;gap:7px}
.oan-fld-cap{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.oan-active{font-size:11px;font-weight:700;color:var(--green-2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* KPI tiles */
.oan-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.oan-kpi{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:15px 16px 14px;box-shadow:var(--shadow-sm)}
.oan-kpi-top{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.oan-kpi-top svg{width:16px;height:16px;flex:none}
.oan-kpi-label{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.oan-kpi-num{font-family:var(--font-serif);font-size:30px;font-weight:600;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.oan-kpi-sub{font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}

/* Chart / data sections — three across in one taller row on desktop. */
.oan-secs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
/* Contribution panels (MM Orders by Owner / Suppliers by Creator) — 2-up below charts. */
.oan-secs2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
.oan-contrib{display:flex;flex-direction:column;gap:14px;margin:auto 0}
.oan-cb-row{display:flex;flex-direction:column;gap:4px}
.oan-cb-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.oan-cb-name{font-weight:700;color:var(--ink);font-size:12.5px}
.oan-cb-pct{font-family:var(--font-serif);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.oan-cb-track{height:16px;background:var(--bg-2);border-radius:4px;overflow:hidden}
.oan-cb-fill{display:flex;height:100%}
.oan-cb-margin{height:100%;background:var(--green)}
.oan-cb-cost{height:100%;background:rgba(150,150,150,.30)}
.oan-cb-sub{font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media(max-width:900px){.oan-secs2{grid-template-columns:1fr}}
.oan-sec{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px 20px;box-shadow:var(--shadow-sm)}
.oan-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.oan-sec-title{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.oan-sec-title svg{width:15px;height:15px;flex:none;align-self:center}
.oan-sec-meta{font-family:var(--font);font-size:11px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.oan-sec-meta b{font-family:var(--font-serif);font-size:15px;font-weight:700;color:var(--ink)}
.oan-chart-wrap{position:relative;flex:1 1 auto;min-height:420px}
/* In the taller row, center the shorter per-person bars + empty states vertically. */
.oan-sec .io-worked-list{margin-top:auto;margin-bottom:auto}
.oan-empty{margin:auto 0;font-size:12px;color:var(--ink-3);font-style:italic;text-align:center;padding:34px 0}

/* ── Dark-theme resolutions ────────────────────────────────────────────────
   In light, several chips use var(--*-deep) as TEXT plus pale hardcoded
   borders/dots. In dark, *-deep is repurposed as a fill border and the fg
   token is the bright text — so on dark we swap deep-text → fg and the pale
   hardcodes → tokens. Grouped here so the light theme is untouched. */
.pv2-dark .uc-late,.pv2-dark .uc-1{border-color:var(--berry-deep)}
.pv2-dark .uc-late{color:var(--berry)}
.pv2-dark .uc-2{border-color:var(--clay-deep)}
.pv2-dark .uc-3{border-color:var(--amber-deep);color:var(--amber)}
.pv2-dark .uc-4{border-color:var(--sage-deep);color:var(--sage)}
.pv2-dark .uc-5{border-color:var(--green-deep);color:var(--green)}
.pv2-dark .uc-late .dot,.pv2-dark .uc-1 .dot{background:var(--berry)}
.pv2-dark .uc-2 .dot{background:var(--clay)}
.pv2-dark .uc-3 .dot{background:var(--amber)}
.pv2-dark .uc-4 .dot{background:var(--sage)}
.pv2-dark .uc-5 .dot{background:var(--green)}
.pv2-dark .c-days.u4{border-color:var(--berry-deep)}
.pv2-dark .c-days.u3{border-color:var(--clay-deep)}
.pv2-dark .c-days.u2{border-color:var(--amber-deep);color:var(--amber)}
.pv2-dark .sp-accept-done{color:var(--green)}
.pv2-dark .c-region-count,.pv2-dark .ds-win.am,.pv2-dark .ds-tag-needs,.pv2-dark .sp-st-btn.onetime.on{color:var(--amber)}
.pv2-dark .ds-win.pm,.pv2-dark .sp-st-btn.maybe.on{color:var(--slate)}
.pv2-dark .c-assign-pill.Alec{background:color-mix(in oklab,var(--person-1) 22%,var(--panel));color:var(--person-1);border-color:color-mix(in oklab,var(--person-1) 45%,transparent)}
.pv2-dark .c-assign-pill.Mo{background:color-mix(in oklab,var(--person-2) 22%,var(--panel));color:var(--person-2);border-color:color-mix(in oklab,var(--person-2) 45%,transparent)}
.pv2-dark .c-assign-pill.Tyler{background:color-mix(in oklab,var(--person-3) 22%,var(--panel));color:var(--person-3);border-color:color-mix(in oklab,var(--person-3) 45%,transparent)}