/* ─────────────────────────────────────────────────────────────────────────────
 * css/order-health.css — layout for js/order-health.js (Sales → Order Health)
 *
 * Every rule is scoped under #tab-order-health so nothing here can restyle another screen.
 * Colours are --ds-* tokens only. The ORDER status pill is dsBadge's; the five check cells use
 * the same five tones the design system defines (green done · red gap · amber waiting · gray
 * not applicable / couldn't check), loud on purpose (docs/design-system.md § 3.3.1).
 * ──────────────────────────────────────────────────────────────────────────── */

#tab-order-health .oh-page{display:flex;flex-direction:column;gap:var(--ds-sp3);padding:var(--ds-sp4);min-width:0;
  background:var(--ds-bg0);color:var(--ds-text);border-radius:var(--ds-radius-lg)}
#tab-order-health .oh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ds-sp4);flex-wrap:wrap}
#tab-order-health .oh-head-text{min-width:0;flex:1 1 420px}
#tab-order-health .oh-title{margin:0;font-size:20px;font-weight:700;color:var(--ds-text)}
#tab-order-health .oh-sub{font-size:13px;color:var(--ds-text-muted);margin-top:3px;max-width:760px;line-height:1.45}
#tab-order-health .oh-stamp{font-size:12px;color:var(--ds-text-dim);margin-top:6px}
#tab-order-health .oh-head-actions{display:flex;gap:var(--ds-sp2);align-items:center;flex-wrap:wrap}

#tab-order-health .oh-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--ds-sp2)}
#tab-order-health .oh-tile{user-select:none}
#tab-order-health .oh-tile:focus-visible{outline:2px solid var(--ds-blue);outline-offset:2px}

#tab-order-health .oh-body{display:flex;flex-direction:column;gap:var(--ds-sp2);min-width:0}
#tab-order-health .oh-scroll{overflow-x:auto;max-width:100%}
#tab-order-health .oh-table td{vertical-align:top}
#tab-order-health .oh-row{cursor:pointer}
#tab-order-health .oh-row:focus-visible{outline:2px solid var(--ds-blue);outline-offset:-2px}
#tab-order-health .oh-po{font-weight:700;font-family:var(--ds-mono);white-space:nowrap}
#tab-order-health .oh-due{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
#tab-order-health .oh-dim{font-size:12px;color:var(--ds-text-muted)}
#tab-order-health .oh-late{color:var(--ds-red);font-weight:600}
#tab-order-health .oh-next{min-width:180px;max-width:260px;font-size:12px}

/* The five check cells. */
#tab-order-health .oh-chk{display:inline-block;padding:3px 9px;border-radius:var(--ds-radius-sm);font-size:12px;font-weight:600;
  line-height:1.35;border:1px solid var(--ds-border);background:var(--ds-gray-dim);color:var(--ds-gray);max-width:200px}
#tab-order-health .oh-chk--ok{background:var(--ds-green-dim);color:var(--ds-green);border-color:var(--ds-green)}
#tab-order-health .oh-chk--gap{background:var(--ds-red-dim);color:var(--ds-red);border-color:var(--ds-red)}
#tab-order-health .oh-chk--wait{background:var(--ds-amber-dim);color:var(--ds-amber);border-color:var(--ds-amber)}
#tab-order-health .oh-chk--na{background:transparent;color:var(--ds-text-dim);font-weight:500}
#tab-order-health .oh-chk--unknown{background:var(--ds-gray-dim);color:var(--ds-gray);border-style:dashed}
#tab-order-health .oh-chk[title]{cursor:help}

/* The to-do list (10/12/2026): one line per task, its button does it. */
#tab-order-health .oh-today{font-size:14px;color:var(--ds-text)}
#tab-order-health .oh-today-num{font-size:22px;font-weight:700;margin-right:4px}
#tab-order-health .oh-next{min-width:280px;max-width:420px}
#tab-order-health .oh-todos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#tab-order-health .oh-todo{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;font-size:12px;line-height:1.4}
#tab-order-health .oh-todo-text{flex:1 1 180px;min-width:0}
#tab-order-health .oh-todo-btn{padding:2px 8px;font-size:11px;white-space:nowrap}
/* The board's own small pop-ups (schedule, co-man confirm) sit over the page, not inside the tab. */
.oh-pop{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.oh-pop .oh-pop-card{max-width:440px;width:100%;display:flex;flex-direction:column;gap:10px;padding:16px}
.oh-pop .oh-pop-row{display:flex;align-items:center;gap:10px;font-size:13px}
.oh-pop .oh-pop-row .ds-input{flex:1}
.oh-pop .oh-pop-actions{display:flex;justify-content:flex-end;gap:8px}