/* ============================================================================
   hpc-mos — module-specific components.

   Loaded THIRD, after design-tokens.css (tokens) and app-shell.css (shared
   chrome). Everything here consumes tokens only — no hard-coded colors/spacing.
   The first block reproduces the shared dom.js components (pill, banner, meter,
   field, empty, toast, modal, peek) with the same token-based rules the other
   Digit modules use, so the look is identical across the suite.
   ============================================================================ */

/* ---- Status pills -------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pill--blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-text); }
.pill--gray   { background: var(--pill-gray-bg);   color: var(--pill-gray-text); }
.pill--green  { background: var(--pill-green-bg);  color: var(--pill-green-text); }
.pill--red    { background: var(--pill-red-bg);    color: var(--pill-red-text); }
.pill--amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-text); }
.pill--yellow { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.pill--violet { background: var(--pill-violet-bg); color: var(--pill-violet-text); }

/* ---- Banners ------------------------------------------------------------- */
.banner {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--banner-border);
  border-radius: var(--radius-card);
  background: var(--banner-bg); color: var(--banner-text);
  font-size: var(--fs-base); line-height: var(--lh-base);
}
.banner .icon { flex: none; margin-top: 2px; }
.banner--warn   { background: var(--pill-yellow-bg); border-color: var(--pill-yellow-text); }
.banner--danger { background: var(--pill-red-bg);    border-color: var(--pill-red-text); }
.banner--success{ background: var(--pill-green-bg);  border-color: var(--pill-green-text); }

/* ---- Buttons: only what the shell does not define ------------------------ */
.btn--danger { background: var(--color-danger-text); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); }
.btn--danger:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.icon-ghost:disabled { opacity: .4; cursor: not-allowed; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- Spinner + empty + loading ------------------------------------------- */
.icon--spin { animation: do-spin 1s linear infinite; }
@keyframes do-spin { to { transform: rotate(360deg); } }
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-4); text-align: center;
}
.empty-icon { color: var(--color-muted); }
.empty-icon .icon { width: 28px; height: 28px; }
.empty-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.empty-detail { font-size: var(--fs-base); color: var(--color-label); max-width: 460px; }
.loading {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-6) 0; color: var(--color-label); font-size: var(--fs-base);
}
.boot-error {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-4); text-align: center;
}
.boot-error .empty-icon { color: var(--pill-amber-text); }

/* ---- Progress meter ------------------------------------------------------ */
.meter { height: 6px; width: 100%; border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-text); transition: width .4s ease; }
.meter--done .meter-fill { background: var(--pill-green-text); }

/* ---- Label-above-value field --------------------------------------------- */
.field-label { font-size: var(--fs-sm); color: var(--color-label); }
.field-value { font-size: var(--fs-base); color: var(--color-text); font-weight: var(--fw-medium); }

/* ---- Toasts -------------------------------------------------------------- */
.toasts {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-card);
  border: 1px solid var(--color-border); background: var(--color-bg);
  box-shadow: var(--shadow-md); font-size: var(--fs-base);
}
.toast .icon { flex: none; margin-top: 2px; }
.toast-body { flex: 1; }
.toast--error   { border-color: var(--pill-red-text);   background: var(--pill-red-bg); }
.toast--success { border-color: var(--pill-green-text); background: var(--pill-green-bg); }

/* ---- Modal --------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: rgba(12, 10, 9, .32); overflow-y: auto;
}
.modal {
  width: 100%; max-width: 560px;
  border-radius: var(--radius-card); background: var(--color-bg);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
}
.modal--wide { max-width: 720px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
/* No inner scroll/clip: the body grows with its content so a dropdown (e.g. the
   "Built by" picker) can open without being trapped in a short scroll area. Tall
   modals scroll via the backdrop instead. */
.modal-body { padding: var(--space-4); overflow: visible; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.modal-text { font-size: var(--fs-base); line-height: var(--lh-base); margin: 0 0 var(--space-3); }
/* Inline error inside a dialog (keeps the modal open on a failed submit). */
.modal-error {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--pill-red-text); border-radius: var(--radius-input);
  background: var(--pill-red-bg); color: var(--color-danger-text);
  font-size: var(--fs-sm); line-height: var(--lh-base);
}
.modal-error .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* ---- Peek (right slide-over) --------------------------------------------- */
.peek-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(12, 10, 9, .18); }
.peek {
  position: fixed; top: 0; right: 0; height: 100vh; width: 500px; max-width: 94vw;
  background: var(--color-bg); border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .22s ease;
}
.peek--wide { width: 620px; }
.peek--open { transform: none; }
.peek-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.peek-head .icon { color: var(--color-label); }
.peek-title { font-weight: var(--fw-semibold); flex: 1; }
.peek-body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.peek-foot { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); }

/* ============================================================================
   MODULE COMPONENTS
   ============================================================================ */

/* ---- Title-row demo chip + toolbar count --------------------------------- */
.demo-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: var(--btn-height); padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--pill-amber-bg); color: var(--pill-amber-text);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.demo-chip .icon { width: 14px; height: 14px; }
.toolbar-count { color: var(--color-label); font-size: var(--fs-sm); }

/* ---- Orders table extras ------------------------------------------------- */
.row--selected { background: var(--color-surface-alt); }
.row-chevron { text-align: right; width: 28px; color: var(--color-muted); }
.progress-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 160px; }
.progress-cell .meter { width: 110px; }
.progress-pct { font-size: var(--fs-sm); color: var(--color-label); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* Tighter table used inside the detail panel. */
.table--tight th, .table--tight td { height: 32px; padding: 0 var(--space-2); font-size: var(--fs-sm); }
.table--tight th:first-child, .table--tight td:first-child { padding-left: 0; }

/* ---- Detail side panel --------------------------------------------------- */
.detail-hero { margin-bottom: var(--space-5); }
.detail-hero-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.detail-hero-sub { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; color: var(--color-label); }

.detail-section { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.section-label { font-size: var(--fs-sm); color: var(--color-label); font-weight: var(--fw-medium); margin-bottom: var(--space-3); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-head .section-label { margin-bottom: 0; }

/* Order notes (detail page) + the list row note flag. */
.mo-notes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.mo-notes-head .section-label { margin-bottom: 0; }
.note-text { white-space: pre-wrap; color: var(--color-text); line-height: 1.5; }
.note-empty { font-style: italic; }
.note-input { width: 100%; resize: vertical; min-height: 84px; font: inherit; }
.note-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.note-flag { display: inline-flex; vertical-align: middle; margin-left: var(--space-2); color: var(--color-muted); }
.note-flag .icon { width: 14px; height: 14px; }

.field-row { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-3); }

.progress-big { display: flex; flex-direction: column; gap: var(--space-2); }
.progress-big .meter { height: 8px; }
.progress-big-nums { font-size: var(--fs-base); color: var(--color-label); display: flex; align-items: baseline; gap: var(--space-1); }
.progress-big-nums strong { color: var(--color-text); font-size: var(--fs-md); }
.progress-big-pct { margin-left: auto; font-weight: var(--fw-semibold); color: var(--color-text); }

.bom-instr { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 2px; }

/* Production-recorded table: reversal tag + footer total. */
.prod-tag {
  margin-left: var(--space-2); font-size: var(--fs-xs); color: var(--color-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0 var(--space-2);
}
.table--mo tfoot td { border-top: 1px solid var(--color-border); font-weight: var(--fw-semibold); }

/* Item name that deep-links to the item in the Digit app. */
.item-link { color: inherit; text-decoration: none; }
.item-link:hover { color: var(--color-accent); text-decoration: underline; }

/* Shop-floor actions */
.row-action { text-align: right; white-space: nowrap; }
.qty-field { margin-bottom: var(--space-4); }
.qty-field .input, .qty-field select.input { width: 100%; }
.qty-field .field-label { margin-bottom: var(--space-1); }

/* Section head with multiple actions */
.section-head-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Checkbox row (e.g. backflush toggle) */
.check-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); cursor: pointer; }
/* shadcn-style checkbox (matches .filter-check): rounded box, accent fill + white
   tick when checked. */
.check-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 16px; height: 16px; border: 1px solid var(--color-border);
  border-radius: 4px; background: var(--color-bg); cursor: pointer; position: relative;
  transition: background-color .12s ease, border-color .12s ease;
}
.check-row input[type="checkbox"]:hover { border-color: var(--color-accent); }
.check-row input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); }
.check-row input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check-row input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--color-accent-subtle, rgba(43,127,255,.15));
}

/* Peek footer row: sku left, delete right */
.peek-foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* Signed-in operator chip */
.user-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: var(--btn-height); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--color-surface-alt);
  color: var(--color-label); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.user-chip .icon { width: 14px; height: 14px; }

/* Production time */
.time-active-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.time-active {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--pill-blue-text); border-radius: var(--radius-input);
  background: var(--pill-blue-bg);
}
.time-active .icon--spin { color: var(--pill-blue-text); flex: none; }
.time-active-main { flex: 1; }

/* Date + time editor (correcting a work session's clock). */
.dt-field { display: flex; gap: var(--space-2); align-items: center; }
.dt-field .dd { flex: 1; }
.dt-time { width: 84px; flex: none; text-align: center; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Full-screen order detail (Digit-style page with breadcrumb + summary rail)
   ============================================================================ */
.mo-detail {
  position: fixed; inset: 0; z-index: 50;
  background: var(--color-app-bg);
  overflow-y: auto;
  animation: mo-detail-in .18s ease;
}
@keyframes mo-detail-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mo-detail-inner { max-width: 1240px; margin: 0 auto; padding: var(--space-5) var(--space-8) var(--space-8); }
.mo-loading { padding: var(--space-8); }

/* Breadcrumb */
.mo-crumbs { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); }
.crumb-link {
  appearance: none; background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: var(--fs-base); color: var(--color-accent); font-weight: var(--fw-medium);
}
.crumb-link:hover { text-decoration: underline; }
.crumb-sep { width: 14px; height: 14px; color: var(--color-muted); }
.crumb-current { font-size: var(--fs-base); color: var(--color-label); }

/* Header */
.mo-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.mo-head-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mo-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0; }
.mo-head-sub { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--fs-sm); }
.mo-doc { font-weight: var(--fw-semibold); color: var(--color-text); }
.mo-head-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* Tabs (reuse .tab styling from the shell) */
.mo-tabs {
  display: flex; align-items: center; gap: var(--space-1);
  border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5);
}

/* Two-column layout: main content + sticky summary rail */
.mo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.mo-main { min-width: 0; }
.mo-rail { position: sticky; top: var(--space-5); }
@media (max-width: 980px) { .mo-cols { grid-template-columns: 1fr; } .mo-rail { position: static; } }

/* White cards on the canvas */
.card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.card .section-head { margin-bottom: var(--space-3); }
.card > .table { margin-top: var(--space-2); }

/* Summary rail */
.rail-progress { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.rail-pct { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.rail-actions { margin-top: var(--space-3); }
.rail-actions .btn { width: 100%; justify-content: center; }
/* Start work — a purple gradient call-to-action (was a plain gray button). */
.btn--start {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #a855f7 100%);
  color: #fff; border-color: transparent; box-shadow: var(--shadow-sm);
}
.btn--start:hover { filter: brightness(1.08); }
.btn--start .icon { color: #fff; }
.rail-fields { margin-top: var(--space-4); display: flex; flex-direction: column; }
.rail-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--color-border-faint); }
.rail-field:first-child { border-top: none; }
.rail-field-label { font-size: var(--fs-sm); color: var(--color-label); }
.rail-field-value { font-size: var(--fs-base); color: var(--color-text); font-weight: var(--fw-medium); text-align: right; }

/* Create-order form */
.create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.picked-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-surface-alt);
}

/* ---- BOM editor ---------------------------------------------------------- */
.bom-edit-for { font-size: var(--fs-base); margin-bottom: var(--space-4); }
.bom-edit-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.bom-edit-row {
  display: grid; grid-template-columns: 1fr 90px 1.4fr 34px;
  gap: var(--space-2); align-items: center;
}
.bom-edit-name div:first-child { font-size: var(--fs-base); }
.bom-qty { text-align: right; }
.bom-add { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.bom-add .input { width: 100%; }
.bom-add-results { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.bom-add-hit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-input);
  background: none; cursor: pointer; font: inherit; font-size: var(--fs-base);
}
.bom-add-hit:hover { background: var(--color-hover); border-color: var(--color-border); }

/* ============================================================================
   Assignment, sortable/sticky list header, and full-bleed detail tables
   ============================================================================ */

/* ---- Sticky list header: title row + tabs + toolbar ride together --------- */
/* Window scrolls in standalone; this block pins to the top so the table's own
   sticky <thead> (top: var(--list-head-h)) tucks right beneath it, not under it. */
.content > .list-head {
  position: sticky; top: 0; z-index: 6;
  background: var(--color-bg);
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
  margin: calc(var(--space-4) * -1) calc(var(--space-8) * -1) 0;
  padding-left: var(--space-8); padding-right: var(--space-8);
}
/* Trailing toolbar margin would collapse out of the sticky header's measured
   height and leave a see-through gap above the table header — fold it into the
   header's own padding-bottom instead. */
.content > .list-head > .toolbar { margin-bottom: 0; }
/* Tab row is now inside .list-head, so re-bleed it edge-to-edge (the .content >
   .tab-row rule no longer matches) — its bottom divider spans the full width. */
.content > .list-head > .tab-row {
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

/* ---- Main list: sticky header, top border, vertical cell borders --------- */
/* Sticky column header so it stays visible while the list scrolls (item 5). */
.content #tab-body .table thead th {
  position: sticky; top: var(--list-head-h, 0px); z-index: 3;
  background: var(--color-bg);
  /* Bottom line via box-shadow, not border-bottom, because the list table is
     border-collapse:collapse — collapsed borders drop off sticky cells; a shadow
     renders reliably while pinned. Drop the base .table th border-bottom so the
     header shows ONE divider, not the faint border + the shadow stacked (2px). */
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--color-border);
}
/* A line above the header row (item 1). */
.table--grid thead th { border-top: 1px solid var(--color-border); }
/* Vertical cell borders (item 1). First cell has none so the full-bleed left
   edge stays clean. */
.table--grid th, .table--grid td { border-left: 1px solid var(--color-border-faint); }
.table--grid th:first-child, .table--grid td:first-child { border-left: none; }

/* ---- Sortable column headers (item 5) ------------------------------------ */
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { background: var(--color-hover); color: var(--color-text); }
/* Keep list rows a uniform height: single-line cells (Digit's grid style) so a
   long item name — or a squeezed short cell — can't wrap and balloon the row.
   The item-name column ellipsizes; the table scrolls horizontally if too narrow. */
.content #tab-body .table td { white-space: nowrap; }
.cell-ellipsis { display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-sortable { display: inline-flex; align-items: center; gap: 4px; }
.sort-caret { width: 13px; height: 13px; color: var(--color-muted); opacity: 0; transition: opacity .1s ease; }
.th-sort:hover .sort-caret { opacity: .5; }
.sort-caret--on { opacity: 1; color: var(--color-text); }

/* Reorderable column headers: drag to move, right-click for options. */
.th-col { cursor: grab; }
.th-col.th-dragging { opacity: .45; }
.th-col.th-drop { box-shadow: inset 2px 0 0 var(--color-text); }

/* Free-floating right-click context menu (reuses the dd-menu look, but shown
   standalone rather than inside an open .dd). */
/* Shown standalone (not inside an open .dd), so beat .dd-menu{display:none} with
   a two-class selector rather than relying on source order. */
.ctx-menu.dd-menu { display: flex; }
.ctx-menu { position: fixed; z-index: 1000; }
/* Single tidy leading slot (check-or-icon) instead of the dd-check + icon combo. */
.ctx-menu .ctx-lead { width: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--color-muted); }
.ctx-menu .ctx-lead .icon { width: 15px; height: 15px; }
.ctx-menu .dd-menu-item--danger .ctx-lead { color: var(--color-danger-text); }
.ctx-divider { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }
.dd-menu-item--disabled { opacity: .4; pointer-events: none; }

/* ---- Multi-column sort popover (opened from the header sort control) ------ */
.sort-menu.dd-menu { display: flex; min-width: 260px; }
.sort-menu-head { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.sort-menu-note { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.sort-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); }
.sort-row .sort-rank {
  flex: none; width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--color-hover); color: var(--color-muted);
}
.sort-row .sort-col { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); }
.sort-dir {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); font: inherit; font-size: var(--fs-xs); color: var(--color-label); cursor: pointer;
}
.sort-dir:hover { background: var(--color-hover); }
.sort-dir .icon { width: 13px; height: 13px; }
.sort-icon-btn {
  flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-input); color: var(--color-muted); cursor: pointer;
}
.sort-icon-btn:hover { background: var(--color-hover); color: var(--color-text); }
.sort-icon-btn:disabled { opacity: .3; pointer-events: none; }
.sort-icon-btn .icon { width: 14px; height: 14px; }
.sort-remove:hover { color: var(--color-danger-text); }
.sort-add-item .ctx-lead { color: var(--color-muted); }

/* Sort control living in the table header's trailing cell. */
.th-sortmenu { text-align: right; padding-right: var(--space-2) !important; }
.sort-menu-trigger { width: 26px; height: 26px; }
.sort-menu-trigger--on { color: var(--color-accent); }
/* Priority badge shown on a header when several columns sort together. */
.sort-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; padding: 0 3px; margin-left: 2px;
  border-radius: 999px; background: var(--color-accent, var(--btn-primary-bg));
  color: var(--btn-primary-text, #fff); font-size: 10px; font-weight: var(--fw-semibold); line-height: 1;
}

/* ---- Saved views dropdown (per-user or org-shared) ------------------------ */
.views-dd { position: relative; }
.views-trigger--on { border-color: var(--color-accent); color: var(--color-accent); }
.views-trigger--on .dd-lead { color: var(--color-accent); }
.views-menu { left: auto; right: 0; min-width: 300px; max-width: 380px; }
.views-empty { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--color-muted); }
.views-section {
  padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em;
}
.views-row { display: flex; align-items: center; gap: var(--space-1); }
.views-item {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2);
  text-align: left; padding: var(--space-2) var(--space-2); background: none; border: none;
  border-radius: var(--radius-input); font: inherit; font-size: var(--fs-base); color: var(--color-text); cursor: pointer;
}
.views-item:hover { background: var(--color-hover); }
.views-item--active { background: var(--color-hover); }
.views-item-main { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.views-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.views-item-sub { font-size: var(--fs-xs); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.views-row-actions { display: flex; align-items: center; gap: 2px; padding-right: var(--space-1); }
.views-mini {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-input); color: var(--color-muted); cursor: pointer;
}
.views-mini:hover { background: var(--color-hover); color: var(--color-text); }
.views-mini--danger:hover { color: var(--color-danger-text); }
.views-mini .icon { width: 15px; height: 15px; }
.views-vis-seg { display: inline-flex; }

/* Default-tab marker (set via right-click / long-press). */
.tab-default-star { width: 12px; height: 12px; color: var(--color-warning-text, var(--pill-amber-text)); margin-left: 2px; }

/* ---- Custom view tabs (saved views rendered in the header tab row) -------- */
.tab--view { gap: var(--space-1); }
.tab--view .tab-view-icon { width: 13px; height: 13px; color: var(--color-muted); }
.tab-view-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A little caret to reach the view menu; visible on hover / when active. */
.tab-caret { display: inline-flex; align-items: center; margin-left: 1px; opacity: 0; border-radius: var(--radius-input); }
.tab-caret .icon { width: 13px; height: 13px; color: var(--color-muted); }
.tab--view:hover .tab-caret, .tab--view.tab--active .tab-caret { opacity: 1; }
.tab-caret:hover { background: var(--color-hover); }
/* Amber dot = the active view has unsaved changes. */
.tab-dirty-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-warning-text, var(--pill-amber-text)); margin-left: 1px; flex: none; }
/* The "+" add-tab button: muted, no active underline. */
.tab--add { color: var(--color-muted); padding: 0 var(--space-2); }
.tab--add:hover { color: var(--color-text); }
.tab--add .icon { width: 15px; height: 15px; }
/* Embedded (segmented) variants. */
.seg-btn--view .tab-dirty-dot { margin-left: 4px; }
.seg-btn--add { color: var(--color-muted); padding-left: var(--space-2); padding-right: var(--space-2); }

/* Long-press opens the context menu on touch (the right-click equivalent). Kill
   iOS's text-selection callout on these controls so the hold opens OUR menu. */
.tab, .th-col { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---- "Assigned" column (item 1) ------------------------------------------ */
/* The assign control fills the whole cell with no border of its own, and is
   pinned to the row height so an avatar chip can't make the row taller. */
.assignee-cell { white-space: nowrap; padding: 0; height: var(--row-height); }
.assignee-btn {
  appearance: none; background: none; border: none; border-radius: 0; cursor: pointer;
  font: inherit; display: flex; align-items: center; justify-content: flex-start;
  width: 100%; height: var(--row-height); padding: 0 var(--space-2); overflow: hidden;
}
.assignee-btn:hover { background: var(--color-hover); }
.assignee-chips { display: inline-flex; align-items: center; gap: 3px; }
.assignee-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-pill); flex: none;
  background: var(--color-surface-alt); color: var(--color-label);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1;
}
.assignee-more { background: transparent; color: var(--color-muted); }
.assignee-none { color: var(--color-muted); font-size: var(--fs-sm); }

/* ---- Item tag chips + Sales-order column (main list) --------------------- */
.tag-chips { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tag-chip {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); color: var(--color-label);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.tag-chip.tag-more { color: var(--color-muted); }
.so-cell { display: inline-flex; align-items: center; gap: 6px; }
.so-number { font-size: var(--fs-sm); color: var(--color-text); }
.shopify-logo { width: 15px; height: 15px; flex: none; }

/* ---- "Viewing as" picker (items 2 + 4) ----------------------------------- */
.viewer-picker { gap: var(--space-2); color: var(--color-label); flex-wrap: wrap; }
.viewer-icon { width: 16px; height: 16px; color: var(--color-label); }
.viewer-label { font-size: var(--fs-sm); color: var(--color-label); }
.viewer-hint { font-size: var(--fs-sm); color: var(--color-muted); }

/* shadcn-style select (trigger + floating option panel) */
.dd { position: relative; display: inline-block; }
.dd-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-width: 220px; height: var(--control-height); padding: 0 var(--space-3);
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  font: inherit; font-size: var(--fs-base); cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dd-trigger:hover { background: var(--color-hover); }
.dd--open .dd-trigger,
.dd-trigger:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(43, 127, 255, .18); }
.dd-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { width: 16px; height: 16px; color: var(--color-muted); flex: none; transition: transform .15s ease; }
.dd--open .dd-caret { transform: rotate(180deg); }

.dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 100%; max-height: calc(100vh - 120px); overflow-y: auto;
  display: none; flex-direction: column; gap: 1px; padding: var(--space-1);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
}
.dd--open .dd-menu { display: flex; animation: dd-in .12s ease; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.dd-item {
  display: flex; align-items: center; gap: var(--space-1);
  width: 100%; text-align: left; padding: var(--space-2) var(--space-2) var(--space-2) 0;
  background: none; border: none; border-radius: var(--radius-input);
  font: inherit; font-size: var(--fs-base); color: var(--color-text); cursor: pointer;
}
.dd-item:hover { background: var(--color-hover); }
.dd-check { width: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); }
.dd-check .icon { width: 15px; height: 15px; }
.dd-item-main { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dd-item-label { white-space: nowrap; }
.dd-item-sub {
  font-size: var(--fs-sm); color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.dd-item--selected .dd-item-label { font-weight: var(--fw-medium); }

/* Full-width variant for form fields, plus placeholder + date trigger bits. */
.dd--block { display: block; }
.dd--block .dd-trigger { width: 100%; min-width: 0; }
.dd-trigger .dd-trigger-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.dd-placeholder { color: var(--color-muted); }
.dd-lead { width: 16px; height: 16px; color: var(--color-muted); flex: none; }

/* Popover month calendar (shadcn-style date picker). */
.dd-cal { padding: var(--space-3); min-width: 256px; gap: 0; }
.dd-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.dd-cal-title { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.dd-cal-nav {
  appearance: none; background: none; border: none; cursor: pointer; color: var(--color-label);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-input);
}
.dd-cal-nav:hover { background: var(--color-hover); color: var(--color-text); }
.dd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dd-cal-dow { text-align: center; font-size: var(--fs-xs); color: var(--color-muted); padding: 2px 0; }
.dd-cal-day {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit; font-size: var(--fs-sm);
  height: 30px; border-radius: var(--radius-input); color: var(--color-text);
}
.dd-cal-day:hover { background: var(--color-hover); }
.dd-cal-day--today { font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--color-border); }
.dd-cal-day--sel, .dd-cal-day--sel:hover { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.dd-cal-foot { display: flex; justify-content: space-between; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border-faint); }
.dd-cal-clear {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit; font-size: var(--fs-sm);
  color: var(--color-accent); padding: 2px 6px; border-radius: var(--radius-input);
}
.dd-cal-clear:hover { background: var(--color-hover); }

/* Right-aligned menu variant (e.g. the detail header kebab). */
.dd--right .dd-menu { left: auto; right: 0; }
.dd-menu--actions { min-width: 180px; }
.dd-kebab.icon-ghost { width: var(--btn-height); height: var(--btn-height); }
.dd-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  background: none; border: none; border-radius: var(--radius-input);
  font: inherit; font-size: var(--fs-base); color: var(--color-text); cursor: pointer;
}
.dd-menu-item:hover { background: var(--color-hover); }
.dd-menu-item .icon { width: 16px; height: 16px; color: var(--color-muted); flex: none; }
.dd-menu-item--danger, .dd-menu-item--danger .icon { color: var(--color-danger-text); }
.dd-menu-item--danger:hover { background: var(--pill-red-bg); }

/* Editable status control (rail): current pill + caret, opens a status menu. */
.dd--status { display: inline-block; }
.dd--status .dd-menu { min-width: 160px; }
.status-trigger {
  appearance: none; background: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 4px; border: 1px solid transparent; border-radius: var(--radius-input);
}
.status-trigger:hover { background: var(--color-hover); border-color: var(--color-border); }
.status-trigger .dd-caret { width: 14px; height: 14px; color: var(--color-muted); transition: transform .15s ease; }
.dd--status.dd--open .dd-caret { transform: rotate(180deg); }

/* ============================================================================
   Bill of Materials Explorer (the "BOM Explorer" tab)
   ============================================================================ */
.bomx {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: stretch;
  /* Full-bleed to the page edges, and fill from just under the tabs to the
     bottom of the page, so the divider spans the full height regardless of
     content (even while the list is loading). */
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8)) 0;
  width: calc(100% + 2 * var(--space-8));
  height: calc(100vh - 81px);
}

/* Left: item list — a plain column with a divider line to the detail; rows are
   separated by hairlines, no card. */
.bomx-list {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-right: 1px solid var(--color-border);
  padding: var(--space-3) 0 0;   /* full-bleed left/right; small top gap only */
}
/* Search + tools are inset from the pane edges; rows and hairlines stay full-bleed. */
.bomx-list-head { padding: 0 var(--space-3) var(--space-2); }
.bomx-search { width: 100%; }

/* BOM-presence filter (segmented control) — sits inline in the tools row. */
.bomx-seg {
  display: inline-flex; flex: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-input); overflow: hidden;
}
.bomx-seg-btn {
  appearance: none; background: var(--color-bg); border: none; border-left: 1px solid var(--color-border);
  cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--color-label);
  padding: 4px var(--space-2); white-space: nowrap;
}
.bomx-seg-btn:first-child { border-left: none; }
.bomx-seg-btn:hover { background: var(--color-hover); }
.bomx-seg-btn--on { background: var(--color-surface-alt); color: var(--color-text); font-weight: var(--fw-medium); }
.bomx-list-tools {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-faint);
}
.bomx-selall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--color-label); cursor: pointer; }
.bomx-selall input { width: 15px; height: 15px; accent-color: var(--color-accent); cursor: pointer; }
.bomx-count { font-size: var(--fs-sm); color: var(--color-muted); margin-left: auto; }
.bomx-list-tools .btn { flex: none; }
.bomx-list-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-y: overlay;   /* progressive: overlay the scrollbar over the full-bleed rows where supported */
}
/* Center the loading / empty state in the tall pane instead of top-left. */
.bomx-list-body .loading, .bomx-list-body .empty { margin: auto; }

.bomx-row { display: flex; align-items: center; gap: var(--space-1); border-bottom: 1px solid var(--color-border-faint); cursor: pointer; }
.bomx-row:last-child { border-bottom: none; }
.bomx-row:hover { background: var(--color-hover); }
.bomx-row--active { background: var(--color-surface-alt); }
.bomx-check-wrap { display: inline-flex; align-items: center; padding: 0 var(--space-2) 0 var(--space-3); cursor: pointer; }
.bomx-check { width: 15px; height: 15px; accent-color: var(--color-accent); cursor: pointer; }
.bomx-row-main {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit;
  flex: 1; min-width: 0; text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0;
}
.bomx-row-name { font-size: var(--fs-base); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Right: BOM detail — no card, just content beside the divider line. */
.bomx-detail {
  min-height: 0; padding: var(--space-3) var(--space-8) var(--space-6) var(--space-5);
  overflow-y: auto;
  overflow-y: overlay;
}

/* Overlay scrollbar: a slim thumb only — no track — sitting over the content so
   the rows stay full-bleed. */
.bomx-list-body, .bomx-detail { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent; }
.bomx-list-body::-webkit-scrollbar, .bomx-detail::-webkit-scrollbar { width: 8px; height: 8px; }
.bomx-list-body::-webkit-scrollbar-track, .bomx-detail::-webkit-scrollbar-track { background: transparent; }
.bomx-list-body::-webkit-scrollbar-thumb, .bomx-detail::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .22); border-radius: 999px;
}
.bomx-list-body::-webkit-scrollbar-thumb:hover, .bomx-detail::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .38); }

/* Stacked (narrow): page-height split gives way to a normal stack with a
   horizontal divider between the two. */
@media (max-width: 860px) {
  .bomx { grid-template-columns: 1fr; height: auto; }
  .bomx-list { border-right: none; border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); max-height: 55vh; }
  .bomx-detail { padding: var(--space-4) var(--space-4) var(--space-6); }
}
.bomx-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.bomx-detail-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0; }
.bomx-detail-sub { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); font-size: var(--fs-sm); }

.bomx-bom-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bomx-bom-table th {
  text-align: left; font-weight: var(--fw-regular); color: var(--color-label);
  padding: var(--space-2); border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.bomx-bom-table th.num, .bomx-bom-table td.num { text-align: right; }
.bomx-bom-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-border-faint); vertical-align: top; }
.bomx-bom-table tbody tr:last-child td { border-bottom: none; }

/* ---- Assign modal (member multi-select) ---------------------------------- */
.assign-list { display: flex; flex-direction: column; gap: 2px; max-height: 48vh; overflow-y: auto; }
.assign-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); border-radius: var(--radius-input); cursor: pointer;
}
.assign-row:hover { background: var(--color-hover); }
.assign-row input { width: 16px; height: 16px; accent-color: var(--color-accent); flex: none; }
.assign-row-main div:first-child { font-size: var(--fs-base); }

/* Rail "Assigned to" value */
.rail-assign-link {
  appearance: none; background: none; border: none; padding: 0; font: inherit;
  cursor: pointer; color: var(--color-accent); font-weight: var(--fw-medium); text-align: right;
}
.rail-assign-link:hover { text-decoration: underline; }
/* Editable rail value (targeted dates): looks like the value text, hints on hover. */
.rail-edit-link {
  appearance: none; background: none; border: none; padding: 0; font: inherit;
  cursor: pointer; color: var(--color-text); text-align: right;
}
.rail-edit-link:hover { color: var(--color-accent); text-decoration: underline; }

/* ---- Full-bleed detail tables (item 7) ----------------------------------- */
/* Materials + production steps run edge-to-edge inside the card, with roomier
   rows and vertical cell borders. */
.table--mo {
  margin-left: calc(-1 * var(--space-5));
  margin-right: calc(-1 * var(--space-5));
  width: calc(100% + 2 * var(--space-5));
}
.table--mo th, .table--mo td {
  height: auto; padding: var(--space-3); font-size: var(--fs-sm);
  border-left: 1px solid var(--color-border-faint);
}
.table--mo th:first-child, .table--mo td:first-child { border-left: none; padding-left: var(--space-5); }
.table--mo th:last-child, .table--mo td:last-child { padding-right: var(--space-5); }
/* A rule above the header, and a clean bottom: the last row drops its border
   and its bottom padding so the table ends flush. */
.table--mo thead th { border-top: 1px solid var(--color-border); }
.table--mo tbody tr:last-child td { border-bottom: none; padding-bottom: 0; }

/* ---- Subassembly accordion (Materials table) --------------------------------- */
.mat-name { display: flex; align-items: flex-start; gap: var(--space-2); }
.mat-expand {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-muted); cursor: pointer;
  transition: transform .15s ease, color .1s ease;
}
.mat-expand svg { width: 13px; height: 13px; transition: transform .15s ease; }
.mat-expand:hover { color: var(--color-text); }
.mat-expand--open svg { transform: rotate(90deg); }
.mat-tag {
  margin-left: var(--space-2); padding: 1px 6px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  background: var(--color-surface-alt); color: var(--color-muted);
}
.mat-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.mat-incoming { font-size: var(--fs-xs); color: var(--color-muted); }
.mat-po-link { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--pill-violet-text); }
/* Why the build qty is capped — shown under the "Can build" pill. */
.mat-limit { flex-basis: 100%; font-size: var(--fs-xs); color: var(--color-muted); }
.mat-tag--limit { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.sub-row--limit > td { background: var(--pill-yellow-bg); }

/* Nested sub-component table inside an expanded subassembly row. */
.mat-sub-row > td { background: var(--color-surface-alt); padding: 0 !important; }
.mat-sub-wrap { padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) + 28px); }
.table--sub { width: 100%; border-collapse: collapse; }
.table--sub th, .table--sub td {
  text-align: left; padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs); border-bottom: 1px solid var(--color-border-faint);
}
.table--sub thead th { color: var(--color-muted); font-weight: var(--fw-medium); }
.table--sub tbody tr:last-child td { border-bottom: none; }
.table--sub .num { text-align: right; }
.sub-sku { margin-left: var(--space-2); }

/* ---- "Build subassemblies first" panel (Record production dialog) ------------ */
.build-panel { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.build-panel-note, .build-panel-po {
  display: flex; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius-md); font-size: var(--fs-sm);
}
.build-panel-note { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.build-panel-po { background: var(--pill-violet-bg); color: var(--pill-violet-text); }
.build-panel-note svg, .build-panel-po svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.build-po-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.build-po-list li { margin-top: 2px; }

/* ============================================================================
   Phone / small-tablet layout (<=720px)
   ----------------------------------------------------------------------------
   The MO list is a wide, many-column Digit-style grid and the detail page has
   full-bleed wide tables. Neither had a phone breakpoint, so on a phone
   rendering at true device-width the columns (all white-space:nowrap) overflow
   the screen and push the whole page sideways — that's the "terrible on Jay's
   iPhone" report. A phone set to Safari "Request Desktop Website" (or with
   Display Zoom) hides the same bug by scaling the whole page down, which is why
   it looked fine elsewhere. Fix: keep the wide tables inside the viewport and
   let them scroll HORIZONTALLY within their own container instead of the page.
   Scoped to narrow screens so desktop full-bleed + sticky header are untouched.
   ============================================================================ */
@media (max-width: 720px) {
  /* Reclaim the big 32px side gutters on small screens. */
  .content { padding-left: var(--space-4); padding-right: var(--space-4); }
  .content > .tab-row {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* List table scrolls sideways within #tab-body, not the whole document.
     overflow-x:auto + overflow-y:hidden avoids the visible->auto promotion that
     would otherwise turn #tab-body into an unwanted vertical scroller. */
  #tab-body { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .content #tab-body .table {
    margin-left: 0; margin-right: 0;
    width: auto; min-width: 100%;
  }
  .content #tab-body .table th:first-child,
  .content #tab-body .table td:first-child { padding-left: var(--space-4); }
  .content #tab-body .table th:last-child,
  .content #tab-body .table td:last-child { padding-right: var(--space-4); }
  /* A sticky column header can't stick inside a horizontal scroller — keep it
     inline on phones so it scrolls naturally with the rows. */
  .content #tab-body .table thead th { position: static; }

  /* Detail page: tighter gutters + wide tables scroll inside their card.
     Scoped with :has() to ONLY the cards that hold a wide table, so the summary
     rail's card (status / date / assignee dropdowns open past its edge) is not
     turned into a clipping scroll container. Browsers without :has() simply keep
     today's behavior for these cards — no regression. */
  .mo-detail-inner { padding-left: var(--space-4); padding-right: var(--space-4); }
  .card:has(.table--mo) { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .table--mo {
    margin-left: 0; margin-right: 0;
    width: auto; min-width: 100%;
  }
  .table--mo th:first-child, .table--mo td:first-child { padding-left: var(--space-3); }
  .table--mo th:last-child, .table--mo td:last-child { padding-right: var(--space-3); }
}

/* ---- Embedded mode (iframed in the planning Production tab, ?embed=1) ------
   No big title/tab rows; one compact toolbar. Flush to the top, edge padding
   trimmed so it sits neatly inside the host tab. */
.content--embed {
  padding: var(--space-3) 0 0;   /* full-bleed: no side padding */
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
/* Toolbar = the persistent page header; the list below it is the only thing
   that scrolls, so the sticky table header pins flush under the toolbar. */
.content--embed > #tab-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.content--embed .embed-toolbar { flex: 0 0 auto; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; padding: 0 var(--space-4); }
.content--embed .embed-toolbar-left { flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.content--embed .viewer-label { color: var(--color-label); font-size: var(--fs-sm); }
/* sticky <th> only pins with border-collapse:separate (collapse drops it). */
.content--embed #tab-body .table { border-collapse: separate; border-spacing: 0; }
/* Full-bleed table: cancel app-shell's ±space-8 outdent (no content side padding
   to compensate for now) and use a tight edge gutter. */
.content--embed #tab-body .table { margin-left: 0; margin-right: 0; width: 100%; }
.content--embed #tab-body .table th:first-child,
.content--embed #tab-body .table td:first-child { padding-left: var(--space-4); }
.content--embed #tab-body .table th:last-child,
.content--embed #tab-body .table td:last-child { padding-right: var(--space-4); }
/* Exactly one 1px header bottom border (drop the doubled box-shadow). */
.content--embed #tab-body .table thead th { box-shadow: none; border-bottom: 1px solid var(--color-border); }
/* Segmented status filter (replaces the tab row when embedded). */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-input); flex-wrap: wrap; }
.seg-btn { appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px var(--space-3); border-radius: calc(var(--radius-input) - 2px); font-size: var(--fs-sm); color: var(--color-label); white-space: nowrap; }
.seg-btn:hover { background: var(--color-hover); color: var(--color-text); }
.seg-btn--active { background: var(--color-bg); color: var(--color-text); font-weight: var(--fw-medium); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg-btn svg { width: 14px; height: 14px; }

/* ---- Asana-style list controls: Filter / Sort / Group -------------------- */
.list-controls { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.list-ctl {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: var(--btn-height); padding: 0 var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-input);
  background: none; color: var(--color-label); font: inherit; font-size: var(--fs-sm);
  font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap;
}
.list-ctl:hover { background: var(--color-hover); color: var(--color-text); }
.list-ctl .icon { width: 15px; height: 15px; }
.list-ctl--on { color: var(--color-accent); background: var(--color-accent-subtle, rgba(43,127,255,.08)); border-color: var(--color-accent-subtle, rgba(43,127,255,.18)); }

/* Filter / Group popovers (share the .dd-menu chrome like .sort-menu) */
/* Grow with content and DON'T clip: an inner select's dropdown must be able to
   open past the panel edge (overflow:auto here would crop it to a sliver). Long
   value lists scroll inside .filter-checks instead. */
.list-menu.dd-menu { display: flex; width: 380px; max-width: calc(100vw - 24px); overflow: visible; }
.list-menu .filter-row .dd-menu { max-height: 260px; min-width: 100%; }
.list-menu-head { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.filter-row { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border-bottom: 1px solid var(--color-border-faint); }
.filter-row:last-of-type { border-bottom: none; }
.filter-row-top { display: flex; align-items: center; gap: var(--space-1); }
.filter-row-field { flex: 1 1 auto; min-width: 0; }
.filter-row-op { flex: 0 0 148px; min-width: 0; }
.filter-row-val { width: 100%; min-width: 0; }
/* The shared .dd-trigger has min-width:220px — kill it inside a filter row so the
   field + operator selects shrink to fit the popover instead of spilling out. */
.filter-row .dd, .filter-row .dd-trigger { width: 100%; min-width: 0; }
.filter-row-val .dd, .filter-row-val .dd-trigger { width: 100%; min-width: 0; }
.filter-row .dd-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Value text/number input: match the shadcn select trigger height + focus ring. */
.filter-input {
  width: 100%; height: var(--control-height); padding: 0 var(--space-3);
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  font: inherit; font-size: var(--fs-base);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.filter-input:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle, rgba(43,127,255,.15));
}
.filter-val-none { color: var(--color-muted); font-size: var(--fs-sm); font-style: italic; padding-top: 7px; display: inline-block; }
.filter-checks { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow: auto; padding: var(--space-1) 0; }
.filter-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); cursor: pointer; padding: var(--space-1) 2px; border-radius: var(--radius-input); }
.filter-check:hover { background: var(--color-hover); }
/* shadcn-style checkbox: 16px rounded square, accent fill + white tick when checked. */
.filter-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 16px; height: 16px; border: 1px solid var(--color-border);
  border-radius: 4px; background: var(--color-bg); cursor: pointer; position: relative;
  transition: background-color .12s ease, border-color .12s ease;
}
.filter-check input[type="checkbox"]:hover { border-color: var(--color-accent); }
.filter-check input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); }
.filter-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-check input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--color-accent-subtle, rgba(43,127,255,.15));
}
.filter-add { padding: var(--space-1) var(--space-2) var(--space-2); }

/* Grouped rows */
.group-row td { background: var(--color-surface-alt); }
.group-cell { cursor: pointer; font-weight: var(--fw-semibold); color: var(--color-text); padding: var(--space-1) var(--space-3) !important; }
.group-cell:hover { background: var(--color-hover); }
.group-caret { width: 14px; height: 14px; vertical-align: -2px; color: var(--color-muted); margin-right: 4px; }
.group-label { margin-right: var(--space-2); }
.group-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-border-faint);
  color: var(--color-label); font-size: var(--fs-xs); font-weight: var(--fw-medium);
}

/* ============================================================================
   Make-to-order review queue (Suggestions view) — js/views/suggestions.js
   The queue table reuses the base .table + .table--grid classes so it inherits
   the header top border, vertical cell borders, sticky header and full-bleed
   page-edge rules (from .content #tab-body .table). Only view-specific chrome
   lives here.
   ============================================================================ */
.sug { display: flex; flex-direction: column; gap: var(--space-3); }
.sug .banner { margin: 0; }
.sug .banner .icon { flex: none; }

/* Controls row: search + status scope + spacer + actions. */
.sug-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sug-search { width: 320px; max-width: 100%; }
.sug-tools-spacer { flex: 1 1 auto; }
.sug-seg { display: inline-flex; flex: none; border: 1px solid var(--color-border); border-radius: var(--radius-input); overflow: hidden; }
.sug-seg-btn {
  appearance: none; background: var(--color-bg); border: none; border-left: 1px solid var(--color-border);
  cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--color-label);
  padding: 4px var(--space-2); white-space: nowrap;
}
.sug-seg-btn:first-child { border-left: none; }
.sug-seg-btn:hover { background: var(--color-hover); }
.sug-seg-btn--on { background: var(--color-surface-alt); color: var(--color-text); font-weight: var(--fw-medium); }
.sug-toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--color-label); cursor: pointer; white-space: nowrap; }
.sug-toggle-check { width: 15px; height: 15px; accent-color: var(--color-accent); cursor: pointer; margin: 0; }

/* One-line plain-text summary (no KPI cards). */
.sug-summary-text { font-size: var(--fs-sm); color: var(--color-muted); }
.sug-summary-text:empty { display: none; }

/* Queue-table cell chrome (borders/full-bleed come from .table--grid). */
.sug-item-name { font-weight: var(--fw-medium); color: var(--color-text); }
.sug-item-sub { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-top: 2px; }
.sug-mo-flag { margin-left: var(--space-2); }
.sug-mo-flag .icon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.sug-qty { font-weight: var(--fw-semibold); color: var(--color-text); }
.sug-due-late { color: var(--color-danger, #b91c1c); font-weight: var(--fw-medium); }
.sug-action { text-align: right; white-space: nowrap; }
.sug-row--overdue td:first-child { box-shadow: inset 3px 0 0 var(--color-danger, #b91c1c); }

/* Compact create dialog header (item + which SO it's for). */
.sug-create-head { margin-bottom: var(--space-2); }

/* Record-production panel: "enough materials on hand" confirmation (qty-aware). */
.build-panel-ok { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); color: var(--pill-green-text); font-size: var(--fs-sm); }
.build-panel-ok .icon { width: 15px; height: 15px; flex: none; }