/* ============================================================================
   CP USA — Project module · component styles.
   Consumes design-tokens.css ONLY. No hard-coded colors/spacing here.
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
}

.app { width: 100%; min-height: 100vh; }

/* Content area only — no outer chrome (we live inside Digit's shell).
   Full width + flush top/left/right: the iframe already provides outer padding,
   so we only keep a little breathing room at the bottom. */
.content { padding: var(--space-4) var(--space-8) 0; }

/* Digit list pattern: content (title, buttons, tab labels, cell text) is inset
   32px, but the structural divider lines — the tab underline and the table row
   borders — bleed full-width to the page edges. Scoped to the list screen so the
   shared .table inside project detail is untouched. */
.content .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);
}

/* List screen: freeze the page chrome (title + tabs + toolbar) and the table
   header while the rows scroll. The window is the scroll container; .list-head
   pins at the top and the projects-table <thead> pins right below it (offset =
   the measured head height in --list-head-h). The thead spans full width (the
   table bleeds), so rows are always hidden by it before reaching the chrome. */
.list-content { padding-top: 0; }          /* head owns the top gap so it pins at 0 with no travel */
.list-content .list-head {
  position: sticky; top: 0; z-index: 6;
  background: var(--color-bg);
  padding-top: var(--space-4);
  /* Own the gap below the toolbar as padding (not the toolbar's escaping
     margin) so the sticky chrome's background covers all the way down to the
     table header — otherwise rows peek through the gap above the header. */
  padding-bottom: var(--space-3);
  /* Bleed full-width so the opaque background covers the 32px edge strips too
     (the table bleeds to the page edges; without this, scrolling rows show
     through beside the title/toolbar). Content stays inset via the padding. */
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.list-content .list-head .toolbar { margin-bottom: 0; }
.list-content #tab-body .table--list thead th {
  position: sticky; top: var(--list-head-h, 0); z-index: 5;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-faint);   /* framed top edge on the header row */
}
/* Fixed column widths so nothing is too tight or too wide — table-layout:fixed
   makes the widths authoritative (auto-layout ignored them and redistributed
   slack). Percentages sum to ~100%; the checkbox is a fixed px that allows for
   the 32px first-cell bleed padding. */
.list-content #tab-body .table--list { table-layout: fixed; }
.list-content #tab-body .table--list th.col-check,
.list-content #tab-body .table--list td.col-check    { width: 60px; }
.list-content #tab-body .table--list th.col-projnum,
.list-content #tab-body .table--list td.col-projnum  { width: 8%; padding-right: var(--space-6); }
.list-content #tab-body .table--list th.col-name,
.list-content #tab-body .table--list td.col-name     { width: 22%; }
.list-content #tab-body .table--list th.col-customer,
.list-content #tab-body .table--list td.col-customer { width: 17%; }
.list-content #tab-body .table--list th.col-pm,
.list-content #tab-body .table--list td.col-pm       { width: 13%; }
.list-content #tab-body .table--list th.col-status,
.list-content #tab-body .table--list td.col-status   { width: 11%; }
.list-content #tab-body .table--list th.num,
.list-content #tab-body .table--list td.num          { width: 9.5%; }

/* Text columns ellipsise (full value in a title tooltip) so long names/customers
   don't wrap or get clipped mid-word. */
.list-content #tab-body .table--list td.col-name,
.list-content #tab-body .table--list td.col-pm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-content #tab-body .table--list td.col-customer .cell-customer { min-width: 0; }
.list-content #tab-body .table--list td.col-customer .cell-trunc {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Project # cell: cap the number (ellipsis, full value in title) + wrap the
   blanket badge so a long/junk value can't overflow the fixed column. */
.list-content #tab-body .table--list td.col-projnum { overflow: hidden; }
.list-content #tab-body .table--list td.col-projnum .cell-id {
  flex-wrap: wrap; row-gap: 2px; max-width: 100%; min-width: 0;
}
.list-content #tab-body .table--list td.col-projnum .cell-strong {
  min-width: 0; overflow: hidden;   /* min-width:0 lets the flex item shrink so the ellipsis engages */
  text-overflow: ellipsis; white-space: nowrap;
}
/* Vertical cell lines (Digit grid look); drop the trailing edge. */
.list-content #tab-body .table--list th,
.list-content #tab-body .table--list td { border-right: 1px solid var(--color-border-faint); }
.list-content #tab-body .table--list th:last-child,
.list-content #tab-body .table--list td:last-child { border-right: none; }

/* Sortable column headers — click to sort (asc → desc → clear). Uses pj-* (NOT
   the shared .th-sortable, which is display:inline-flex and would break the
   sticky table-cell header). */
.list-content #tab-body .table--list th.pj-sortable { cursor: pointer; user-select: none; }
.list-content #tab-body .table--list th.pj-sortable:hover { background: var(--color-hover); }
.list-content #tab-body .table--list th.pj-sorted { font-weight: var(--fw-medium); }
.list-content #tab-body .table--list th .sort-arrow {
  margin-left: 4px; font-size: 9px; vertical-align: middle; color: var(--color-label);
}

/* Sticky pager footer so it stays on screen (no need to scroll to the bottom). */
.list-content #tab-body .pager {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-faint);
  margin-left: calc(-1 * var(--space-8)); margin-right: calc(-1 * var(--space-8));
  padding-left: var(--space-8); padding-right: var(--space-8);
}
.content #tab-body .table {
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
  width: calc(100% + 2 * var(--space-8));
}
.content #tab-body .table th:first-child,
.content #tab-body .table td:first-child { padding-left: var(--space-8); }
.content #tab-body .table th:last-child,
.content #tab-body .table td:last-child { padding-right: var(--space-8); }

/* ---- Banner (demo notice) ------------------------------------------------ */
.banner {
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  color: var(--banner-text);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
}
.banner a { color: var(--banner-link); text-decoration: underline; }

/* ---- Page title + toolbar ------------------------------------------------ */
.page-title {
  /* Digit page title: 16px / 600 / warm near-black (MuiTypography, 20px line). */
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

/* Title row: title left, primary action + utility icons right (Digit-native). */
.title-row { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 0; }
.title-row .page-title { margin: 0; }
.title-row-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-ghost {
  appearance: none; background: none; border: none; cursor: pointer; color: var(--color-label);
  width: var(--control-height); height: var(--control-height); display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--radius-input);
}
.icon-ghost:hover { background: var(--color-hover); color: var(--color-text); }

/* Pagination footer. */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) 0; color: var(--color-label); font-size: var(--fs-sm); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.toolbar-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ---- Tab row (saved views) ---------------------------------------------- */
.tab-row {
  display: flex; align-items: center; gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
/* Digit MUI Tabs: 13px / weight 500 (active is NOT bolder, just darker +
   a 2px dark underline); 36px tall. */
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--tab-inactive-color); height: var(--row-height); padding: 0 var(--space-3);
  border-bottom: var(--tab-indicator-height) solid transparent; white-space: nowrap;
}
.tab .icon { width: 16px; height: 16px; }
/* First tab's icon sits flush with the page title (no leading padding). */
.tab-row .tab:first-child { padding-left: 0; }
.tab:hover { color: var(--tab-active-color); }
.tab--active { color: var(--tab-active-color); border-bottom-color: var(--tab-indicator-color, var(--tab-active-color)); }

/* ---- Inputs / buttons ---------------------------------------------------- */
.input, .search {
  height: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 0 var(--space-3);
  font-family: inherit; font-size: var(--fs-base); color: var(--color-text);
  background: var(--color-bg);
}
.input::placeholder, .search::placeholder { color: var(--color-muted); }
/* Dropdowns (native selects + the multiselect toggle) get a pointer cursor. */
select.input, .multiselect-toggle { cursor: pointer; }
.search { width: 240px; }
textarea.input { height: auto; width: 100%; padding: var(--space-2) var(--space-3); resize: vertical; }

.btn {
  height: var(--btn-height);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3); border-radius: var(--radius-input);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); }
.btn--primary:hover { filter: brightness(1.15); }
/* Digit secondary is a tonal soft-fill (faint gray), not a white outline. */
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: rgba(0, 0, 0, 0.09); }
.btn--icon { padding: 0 var(--space-2); }
.btn--sm { height: 28px; font-size: var(--fs-sm); padding: 0 var(--space-2); }
.btn--sm .icon { width: 14px; height: 14px; }
.btn--split { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn--split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.2); }

.icon { width: var(--icon-size); height: var(--icon-size); stroke-width: 1.75; flex: none; }

/* ---- Table --------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
/* Header mirrors Digit's ag-Grid: full-strength text, regular weight, 13px,
   36px tall, 8px cell padding, faint 5%-black hairlines. */
.table th {
  text-align: left; font-weight: var(--fw-regular); color: var(--color-text);
  font-size: var(--fs-base); height: var(--row-height); padding: 0 var(--space-2);
  border-bottom: 1px solid var(--color-border-faint); white-space: nowrap;
}
.table th.num { text-align: right; }   /* .table th's left-align out-specificities .num, so restore it */
.ship-item-name { display: inline-flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.ship-addr-preview {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-md, 6px); background: var(--surface-2, #f7f7f7);
}
.table td {
  padding: 0 var(--space-2); height: var(--row-height);
  border-bottom: 1px solid var(--color-border-faint); vertical-align: middle;
}
.row--clickable { cursor: pointer; }
.row--clickable:hover { background: var(--color-hover); }
.cell-strong { font-weight: var(--fw-semibold); }
.cell-muted { color: var(--color-muted); }
.cell-id { display: inline-flex; align-items: center; gap: var(--space-2); }
.cell-customer { display: inline-flex; align-items: center; gap: var(--space-2); }
.col-check { width: 36px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.num-danger { color: var(--color-danger-text); }
.num-ok { color: var(--color-success-text, #1a7f37); font-weight: 600; }
.th-sortable { display: inline-flex; align-items: center; gap: 4px; }
.th-sortable .icon { width: 13px; height: 13px; }
.created-by { display: inline-flex; align-items: center; gap: var(--space-2); }

.avatar {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-label);
}

/* ---- Status pills -------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.4;
}
.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); }
.pill--caret { gap: 2px; padding-right: 6px; cursor: pointer; }

/* ---- Detail document ----------------------------------------------------- */
.breadcrumb {
  font-size: var(--fs-sm); color: var(--color-label);
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
}
.breadcrumb .crumb-link { color: var(--color-label); cursor: pointer; }
.breadcrumb .crumb-link:hover { color: var(--color-text); text-decoration: underline; }

/* Detail: white background for now (we're inside a white iframe). The document
   still reads as a card via its hairline border. (--color-canvas remains a token
   if we want the gray canvas back later.) */
.page-canvas { background: #f9f9f9; min-height: 100vh; }
/* Detail main area caps at 1400px and centers when the screen is very wide;
   below 1400 it stays full-width/flush. */
/* 16px gutter on each side so the form never touches the left nav or the right pane. */
.detail-content { padding: 0 var(--space-4) var(--space-8); max-width: 1400px; margin: 0 auto; }

.action-bar {
  position: sticky; top: 0; z-index: 5; background: #f9f9f9;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0; margin-bottom: 0; /* fixed height → title pins flush below it */
}
.action-bar .breadcrumb { margin: 0; }

.detail-layout { display: flex; gap: var(--space-5); align-items: flex-start; justify-content: flex-start; }

.doc-card {
  flex: 1; min-width: 0; /* fills the iframe width up to the right panel (flush) */
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: var(--shadow-sm);
  /* The CARD owns the rounding. overflow:clip does two jobs: (1) clips the body
     content to the rounded shape so nothing bleeds past the corners, and (2)
     rounds the sticky header's corners at its pinned position too — so the pinned
     header stays nicely rounded. No corner notch reveals scrolling content
     because the header is opaque and the body is clipped. overflow:clip (NOT
     hidden) is not a scroll container, so the sticky still pins to the viewport. */
  overflow: clip;
  padding: 0 var(--space-8) var(--space-6); /* no top padding: the sticky header owns the top */
}

/* Pin the project title + subtab bar FLUSH under the (already-sticky) 56px action
   bar. SQUARE (no radius/border of its own) + opaque bg: the card's overflow:clip
   rounds it (at rest AND pinned), and the opaque bg + clipped body mean no content
   peeks behind its corners on scroll. Bleeds to the card's inner edge. */
.doc-sticky {
  position: sticky; top: 56px; z-index: 4; background: var(--color-bg);
  margin: 0 calc(-1 * var(--space-8));
  padding: var(--space-5) var(--space-8) var(--space-4);
}

.doc-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); flex-wrap: wrap; }
.doc-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.doc-meta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-label); font-size: var(--fs-sm); }
.doc-meta .icon { width: 14px; height: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--color-label);
}

/* Subtab divider bleeds to the full document-card width (past card padding).
   The gap below the tab bar comes from .doc-sticky's padding-bottom. */
.subtabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border);
  margin: 0 calc(-1 * var(--space-8)); padding: 0 var(--space-8); overflow-x: auto; }
.subtab {
  appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--tab-inactive-color);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--tab-indicator-height) solid transparent; white-space: nowrap;
}
/* First tab's label aligns flush with the document title / project number. */
.subtab:first-child { padding-left: 0; }
.subtab:hover { color: var(--tab-active-color); }
.subtab--active { color: var(--tab-active-color); border-bottom-color: var(--tab-active-color); }

/* ---- Fields (label above value) ----------------------------------------- */
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); max-width: 620px; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label { font-size: var(--fs-sm); color: var(--color-label); }
.field-value { font-size: var(--fs-md); color: var(--color-text); }
.field-value.is-empty { color: var(--color-muted); }

/* ---- Right panel (collapsible) ------------------------------------------ */
/* Pinned full-height to the right edge of the viewport (like Digit's SO pane):
   gray fill, a left border running the full page height, fixed 400px width. */
.right-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; z-index: 6;
  background: #f9f9f9; border-left: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5); overflow: hidden;
  display: flex; flex-direction: column;
}
.right-panel.is-collapsed { display: none; }
/* Detail canvas reserves the pane's width so content never slides under it. */
.page-canvas.has-panel { padding-right: 400px; }

/* Details / Layout tabs at the top of the panel. */
.panel-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border); margin: 0 calc(-1 * var(--space-5)) var(--space-4); padding: 0 var(--space-5); }
.panel-tab { appearance: none; background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-base); color: var(--color-label); padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.panel-tab--active { color: var(--color-text); font-weight: var(--fw-semibold); border-bottom-color: var(--color-text); }

.panel-section + .panel-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
/* Identity rows above the first section header — no divider above them. */
.panel-section--bare + .panel-section { margin-top: var(--space-4); padding-top: var(--space-4); }
.panel-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.panel-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); }

/* Label left, value right-aligned (Project ID / Project name). */
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.panel-row .field-label { color: var(--color-label); }
.panel-row .field-value { color: var(--color-text); text-align: right; }
.panel-row .field-value.is-empty { color: var(--color-muted); }

.panel-link { color: var(--color-accent); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; background: none; border: none; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.panel-link:hover { text-decoration: underline; }

.dropzone {
  border: 1px dashed var(--color-border); border-radius: var(--radius-input);
  padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-label); font-size: var(--fs-sm);
}
.dropzone a { color: var(--color-accent); text-decoration: underline; cursor: pointer; }
.dropzone-credit { color: var(--color-muted); font-size: var(--fs-xs); text-align: right; margin-top: var(--space-1); }

/* Panel body scrolls under the pinned tab row; chat/AI tabs fill the height. */
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Chat/AI scroll inside .panel-thread, so let the container overflow visibly —
   otherwise .panel-body's overflow-y:auto forces overflow-x:auto and clips the
   composer's full-width divider bleed. */
.panel-chat, .panel-ai { display: flex; flex-direction: column; overflow: visible; }
.panel-empty {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: var(--space-1);
  padding: var(--space-6) var(--space-4); color: var(--color-label);
}
.panel-empty .icon { width: 30px; height: 30px; color: var(--color-muted); margin-bottom: var(--space-2); }
.panel-empty-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); }
.panel-empty-sub { font-size: var(--fs-sm); color: var(--color-label); max-width: 250px; }
/* Bleed to the pane edges so the divider line runs full width, then re-inset the controls. */
.panel-composer { display: flex; gap: var(--space-2); margin: 0 calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5) 0; border-top: 1px solid var(--color-border); }
.panel-composer-input {
  flex: 1; min-width: 0; font-family: inherit; font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-3); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-input); color: var(--color-text);
}
.panel-composer .btn { flex: none; }
.panel-composer-input:disabled { opacity: 0.6; }

/* Scrolling message thread (Chat + AI). */
.panel-thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-3);
}
/* Chat bubbles: avatar left, author + time header + body stacked right. */
.msg { display: flex; align-items: flex-start; gap: var(--space-2); }
.msg-avatar { flex: none; margin-top: 2px; }
.msg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.msg-author { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.msg-time { font-size: var(--fs-xs); color: var(--color-muted); }
.msg-body {
  font-size: var(--fs-sm); color: var(--color-text); white-space: pre-wrap; word-break: break-word;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 10px; padding: var(--space-2) var(--space-3);
}
.msg--me .msg-body { background: #eef1f6; border-color: #dfe4ee; }

/* AI bubbles: user right-aligned, assistant left with an AI tag. */
.ai-msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; }
.ai-msg--user { align-self: flex-end; align-items: flex-end; }
.ai-msg--assistant { align-self: flex-start; }
.ai-msg-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-muted); }
.ai-msg-tag .icon { width: 13px; height: 13px; }
.ai-msg-body {
  font-size: var(--fs-sm); color: var(--color-text); white-space: pre-wrap; word-break: break-word;
  border-radius: 10px; padding: var(--space-2) var(--space-3);
}
.ai-msg--user .ai-msg-body { background: #eef1f6; border: 1px solid #dfe4ee; }
.ai-msg--assistant .ai-msg-body { background: var(--color-bg); border: 1px solid var(--color-border); }
.ai-typing .ai-msg-body, .ai-typing { color: var(--color-muted); font-size: var(--fs-sm); font-style: italic; }

/* ---- Cards / placeholders for scaffolded tabs --------------------------- */
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.placeholder { color: var(--color-label); font-size: var(--fs-base); }
.placeholder h3 { color: var(--color-text); font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.scaffold-tag {
  display: inline-block; margin-left: var(--space-2); padding: 1px var(--space-2);
  border-radius: var(--radius-pill); background: var(--pill-gray-bg); color: var(--pill-gray-text);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); vertical-align: middle;
}

/* ---- Collapsible document sections (Project Details) --------------------
   Sections bleed to the full card width so their top dividers run edge-to-edge;
   content is re-padded so it stays aligned with the header/subtabs. */
.doc-section { padding: var(--space-5) var(--space-8); margin: 0 calc(-1 * var(--space-8)); }
.doc-section:first-child { padding-top: 0; }
.doc-section + .doc-section { border-top: 1px solid var(--color-border); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.section-toggle { appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; color: var(--color-text); }
.section-toggle .icon { transition: transform .15s ease; }
.section-head.is-collapsed .section-toggle .icon { transform: rotate(-90deg); }
.section-title-text { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.section-body.is-collapsed { display: none; }

.section-meta { color: var(--color-muted); font-size: var(--fs-sm); }

/* Overview (Purchase-order style): 3 boxes — Project info | Contract | Bill to —
   split by dotted vertical dividers, then a linked bottom strip of contract
   fields. Dotted lines above the boxes and above the strip bleed full width. */
.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-label { font-size: var(--fs-sm); color: var(--color-label); }
.kv-value { font-size: var(--fs-md); color: var(--color-text); }
.kv-value.is-empty { color: var(--color-muted); }
/* Inline person dropdown inside a kv slot (PM / Programmer selects). */
.ov-select { width: 100%; height: 32px; margin-top: 2px; font-size: var(--fs-md); }
/* Industry slot: the select plus a "Manage industries" link under it. */
.ov-industry { display: flex; flex-direction: column; align-items: stretch; }
.ov-industry .link-btn { font-size: var(--fs-sm); align-self: flex-start; text-align: left; }

.ov-boxes { display: grid; grid-template-columns: 1fr 1fr 1fr;
  margin: 0 calc(-1 * var(--space-8)); padding: var(--space-4) var(--space-8) 0;
  border-top: 1px dashed var(--color-border); }
/* Notes row: two equal half-width columns. */
.ov-boxes--half { grid-template-columns: 1fr 1fr; }
.ov-box { padding: 0 var(--space-6); min-width: 0; }
.ov-box:first-child { padding-left: 0; }
.ov-box:last-child { padding-right: 0; }
.ov-box + .ov-box { border-left: 1px dashed var(--color-border); }
.ov-box-title { font-size: var(--fs-sm); color: var(--color-label); margin-bottom: var(--space-3); }
.ov-id-line { display: flex; align-items: center; gap: var(--space-2); }
.ov-id-line .icon { color: var(--color-label); }
.ov-id { font-size: var(--fs-md); font-weight: var(--fw-regular); }
.ov-desc { color: var(--color-text); font-size: var(--fs-md); margin: 2px 0 var(--space-4); }
/* Inline-editable name/description: reads like text until focused. */
.ov-desc-input { width: 100%; margin: 2px 0; padding: 2px 6px; border: 1px solid transparent;
  background: transparent; font-size: var(--fs-md); color: var(--color-text); border-radius: var(--radius-sm); }
.ov-desc-input:hover { border-color: var(--color-border); }
.ov-desc-input:focus { border-color: var(--color-accent); background: var(--color-surface); outline: none; }
.ov-desc-input:last-of-type { margin-bottom: var(--space-4); }
.ov-person { display: inline-flex; align-items: center; gap: var(--space-2); }
.ov-kv-list { display: flex; flex-direction: column; gap: var(--space-3); }
/* Dates + site on one row in the project-info box. */
.ov-kv-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.ov-kv-row .kv { flex: 1; min-width: 110px; }
/* Editable inputs (dates, site) — same rounded .input control as the PM/Industry
   selects (inherits border/radius/bg from .input; just match the select height). */
.ov-inline-input { width: 100%; height: 32px; margin-top: 2px; font-size: var(--fs-md); }
.ov-cust-name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.ov-addr { margin-top: var(--space-2); color: var(--color-label); font-size: var(--fs-sm); line-height: 1.5; }
.ov-strip { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; gap: var(--space-4) var(--space-5);
  margin: var(--space-5) calc(-1 * var(--space-8)) 0; padding: var(--space-4) var(--space-8) 0;
  border-top: 1px dashed var(--color-border); }
.ov-strip > .kv { min-width: 0; }

/* Coverage bar (Jobs tab) + materials legend. */
.coverage-bar { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.legend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--color-label); }

/* Clickable pill (job links in the coverage grid). */
.pill--btn { appearance: none; border: none; cursor: pointer; font-family: inherit; }
.pill--btn:hover { filter: brightness(0.96); }

/* Material order-status dot (gray/red/green). */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); margin-right: 2px; vertical-align: middle; }
.status-dot--gray { background: var(--pill-gray-text); }
.status-dot--red { background: var(--pill-red-text); }
.status-dot--green { background: var(--pill-green-text); }

/* Job drill-in header. */
.jobhdr { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.jobhdr-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* 3-column field grid (material detail modal). */
.kv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-5); }

/* Inventory availability cards. */
.inv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.inv-card { border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); }
.inv-card--accent { border-color: var(--color-accent); background: var(--banner-bg); }
.inv-card-label { font-size: var(--fs-sm); color: var(--color-label); }
.inv-card-value { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-top: 2px; }

/* Labor summary stat cards. */
.labor-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.labor-stat { border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-3) var(--space-4); }
.labor-stat-label { font-size: var(--fs-sm); color: var(--color-label); }
.labor-stat-value { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-top: 2px; }

/* Inline text-link button (e.g. "Select / Change customer"). */
.link-btn { background: none; border: none; padding: 0; cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-accent); }
.link-btn:hover { text-decoration: underline; }

/* ---- Modal ------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.35); display: flex;
  align-items: flex-start; justify-content: center; z-index: 40; padding: 6vh var(--space-4); overflow-y: auto; }
/* A second modal opened on top of another (e.g. the PO "Add item" picker over the PO modal). */
.modal-overlay--stacked { z-index: 50; background: rgba(16,24,40,.45); }
.modal-card { width: 520px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.modal-card--wide { width: 920px; }
/* Work Order hub modal — tall wide card, scrollable tab strip + scrolling body. */
.modal-card--wo { width: 1120px; max-width: 96vw; height: 88vh; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; }
.modal-card--wo .invoice-modal-head { position: static; margin: 0; padding: var(--space-4) var(--space-5) 0; }
.modal-card--wo .invoice-modal-foot { position: static; margin: 0; padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.prod-modal-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
.prod-modal-tabs .invoice-modal-tab { flex: 0 0 auto; }
.prod-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5); }
/* Two-pane body: gray desk (left, tab content on a white card) + persistent info rail (right). */
.prod-wo-body { flex: 1; min-height: 0; }
.prod-wo-left { padding: var(--space-4); }
.prod-wo-left--doc { padding: 0; display: flex; }         /* Details → doc viewer fills the desk */
.prod-wo-card { padding: var(--space-4) var(--space-5); }
.prod-wo-rail { flex: 0 0 420px; border-left: none; border-right: 1px solid var(--color-border); }
.prod-rail-info { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.prod-rail-kv { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }
.prod-rail-k { color: var(--color-text-muted); }
.prod-rail-v { font-weight: var(--fw-medium); text-align: right; }
.prod-rail-wc { display: flex; flex-direction: column; gap: var(--space-1); }
.prod-rail-wc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.prod-rail-wc-name { font-size: var(--fs-sm); }
.prod-rail-wc .prod-field-cell { min-width: 150px; border: 1px solid var(--color-border); border-radius: var(--radius-input); }
/* Details tab / rail */
.prod-bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-5); }
.prod-bs-grid--rail { grid-template-columns: 1fr; gap: var(--space-1); }
.prod-bs-item { align-items: center; }
.prod-doc-drop { display: flex; gap: var(--space-3); align-items: center; border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 6px); padding: var(--space-3) var(--space-4); color: var(--color-text-muted);
  cursor: pointer; margin-bottom: var(--space-2); }
.prod-doc-drop:hover, .prod-doc-drop.is-drag { border-color: var(--color-accent); background: var(--color-bg-subtle, #f4f4f5); }
.prod-doc-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.prod-doc-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-input); cursor: pointer; }
.prod-doc-item:hover { background: var(--color-bg-subtle, #f4f4f5); }
.prod-doc-item.is-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.prod-doc-item-main { flex: 1; min-width: 0; }
.prod-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-doc-kind { flex: 0 0 auto; }
/* Left document viewer */
.prod-doc-viewer { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); overflow: auto; }
.prod-doc-empty { flex-direction: column; text-align: center; color: var(--color-text-muted); gap: var(--space-1); }
.prod-doc-img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.prod-doc-embed { width: 100%; height: 100%; min-height: 60vh; border: none; }
/* Reusable document section (renderDocSection) — used across shipments/invoices/QC/project */
.doc-section { display: block; }
.doc-add-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.doc-kind-add input { display: none; }
.doc-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.doc-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-input); }
.doc-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--fw-medium); color: var(--color-text); }
.doc-row-name:hover { text-decoration: underline; }
.doc-row-size { flex: 0 0 auto; font-size: var(--fs-sm); }
.doc-kind { flex: 0 0 auto; }
/* Work-center tab */
.prod-center-head { display: flex; gap: var(--space-5); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-3); }
.prod-center-labor { display: flex; gap: var(--space-5); align-items: flex-end; flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-4); }
.prod-center-labor .ov-strip { margin: 0; }
/* BOM tables that must fit without horizontal scroll — Part/description gets the room,
   Op/Req/stock stay narrow. Column widths via colgroup-less fixed layout + width hints. */
.prod-bom-table--fit { table-layout: fixed; width: 100%; }
.prod-bom-table--fit .prod-bom-partcell { white-space: normal; overflow-wrap: anywhere; padding-left: var(--space-4); }
.prod-bom-table--fit th:nth-child(1), .prod-bom-table--fit td:nth-child(1) { width: auto; }         /* Part / description — takes the slack */
.prod-bom-table--fit th:nth-child(2), .prod-bom-table--fit td:nth-child(2) { width: 44px; }          /* Op */
.prod-bom-table--fit th:nth-child(3), .prod-bom-table--fit td:nth-child(3) { width: 56px; }          /* Req */
.prod-bom-table--fit th:nth-child(4), .prod-bom-table--fit td:nth-child(4) { width: 68px; }          /* In stock */
.prod-bom-table--fit th:nth-child(5), .prod-bom-table--fit td:nth-child(5) { width: 92px; }          /* Availability */
.prod-bom-table--fit th:nth-child(6), .prod-bom-table--fit td:nth-child(6) { width: 90px; }          /* Order */
.prod-bom-table--fit th:nth-child(7), .prod-bom-table--fit td:nth-child(7) { width: 84px; }          /* Pull */
/* Work-center group header row: light-gray band, full-bleed to the card edges; its parts
   indent under it. */
.prod-bom-group { margin-bottom: var(--space-4); }
.prod-bom-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--color-bg-subtle, #f4f4f5); padding: var(--space-2) var(--space-4);
  margin: 0 calc(-1 * var(--space-5)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.prod-bom-group-name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); }
/* Group table rows run full-bleed to the card edges (rules reach both sides). */
.prod-bom-group .prod-bom-table { margin: 0 calc(-1 * var(--space-5)); width: calc(100% + 2 * var(--space-5)); }
.prod-bom-group .prod-bom-table th, .prod-bom-group .prod-bom-table td:not(.prod-bom-partcell):first-child { padding-left: var(--space-5); }
.prod-bom-group .prod-bom-table th:first-child, .prod-bom-group .prod-bom-table .prod-bom-partcell { padding-left: var(--space-5); }
.prod-bom-group .prod-bom-table th:last-child, .prod-bom-group .prod-bom-table td:last-child { padding-right: var(--space-5); }
/* Embedded QC body (WO modal QC tab) — single-column form */
.qc-embed { display: block; }
.qc-embed-form { display: block; }
/* Cost-estimate operation-map modal: rows bleed to the card edges (their top/bottom
   rules touch left & right), roomier vertical padding, and an Add button that
   reveals a blank row instead of a permanent empty one. */
.opmap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.opmap-scroll { max-height: 55vh; overflow: auto; margin: 0 calc(-1 * var(--space-5)); }
.opmap-table th, .opmap-table td { padding-left: var(--space-5); padding-right: var(--space-5); }
.opmap-table td { padding-top: var(--space-3); padding-bottom: var(--space-3); height: auto; }
.opmap-table tfoot td { border-bottom: none; }
.opmap-addbtn-row td { padding-top: var(--space-4); padding-bottom: var(--space-2); }
/* Request-shipment modal: card is a flex column with a fixed header/footer and a
   two-pane body — gray DOCUMENT pane (left, fills to edges) + field NAV pane
   (right, own scroll, divider). Each pane scrolls independently. */
.modal-card--shipreq { width: 1420px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 88vh; }
.modal-card--shipreq .invoice-modal-head { position: static; margin: 0; padding: var(--space-4) var(--space-5); }
.modal-card--shipreq .invoice-modal-head-row { align-items: center; }   /* vertically center the X */
.modal-card--shipreq .invoice-modal-foot { position: static; margin: 0; }
.shipreq-body { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.shipreq-doc-pane { flex: 1; min-width: 0; overflow-y: auto; background: var(--color-bg-subtle, #f4f4f5); padding: var(--space-4); }
.shipreq-doc { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-5) var(--space-6); }
.shipreq-doc .form-subhead:first-child { margin-top: 0; }
.shipreq-form { flex: 0 0 420px; min-width: 0; overflow-y: auto; padding: var(--space-5);
  border-left: 1px solid var(--color-border); }
/* Section headings get a full-bleed divider + extra breathing room above. */
.shipreq-form .form-subhead { border-top: 1px solid var(--color-border);
  margin: var(--space-5) calc(-1 * var(--space-5)) var(--space-3);
  padding: var(--space-5) var(--space-5) 0; }
.shipreq-form .shipreq-subhead--first { border-top: none; margin-top: 0; padding-top: 0; }
/* Stack grid fields in one column with NO grid gap — the .form-field margin-bottom
   alone sets the spacing, matching the Shipment-detail fields. */
.shipreq-form .form-grid { grid-template-columns: 1fr; gap: 0; }
/* Label to the LEFT of each input to save vertical space. */
.shipreq-form .form-field { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.shipreq-form .form-field > .field-label { flex: 0 0 116px; margin: 0; text-align: left; }
.shipreq-form .form-field > :not(.field-label) { flex: 1; min-width: 0; }
/* Shipment line editor — its own fixed column widths (reusing tm-lines borderless look). */
.shipline-table { table-layout: fixed; width: 100%; }
.shipline-table th, .shipline-table td { vertical-align: middle; }
.shipline-table th:not(:last-child), .shipline-table td:not(:last-child) { border-right: 1px solid var(--color-border); }
.shipline-table th:nth-child(1), .shipline-table td:nth-child(1) { width: 150px; }  /* Part # */
.shipline-table th:nth-child(2), .shipline-table td:nth-child(2) { width: auto; }   /* Description */
.shipline-table th:nth-child(3), .shipline-table td:nth-child(3) { width: 96px; }   /* Type */
.shipline-table th:nth-child(4), .shipline-table td:nth-child(4) { width: 92px; }   /* Qty */
.shipline-table th:nth-child(5), .shipline-table td:nth-child(5) { width: 104px; }  /* Location */
.shipline-table th:nth-child(6), .shipline-table td:nth-child(6) { width: 44px; text-align: center; }  /* remove */
.shipline-table td:last-child .icon-ghost { margin: 0 auto; }
.shipline-table .input { min-width: 0; width: 100%; border: none; border-radius: 0; background: transparent; padding: 0 var(--space-2); }
.shipline-table .input:focus { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-accent); }
.shipline-table .input.num { text-align: right; }
/* Multi-box weight/dimensions editor (carrier methods). */
.shipbox-table { table-layout: fixed; width: 100%; }
.shipbox-table th, .shipbox-table td { vertical-align: middle; }
.shipbox-table th:not(:last-child), .shipbox-table td:not(:last-child) { border-right: 1px solid var(--color-border); }
.shipbox-table th:nth-child(1), .shipbox-table td:nth-child(1) { width: 52px; color: var(--color-muted); font-size: var(--fs-sm); }
.shipbox-table th:nth-child(4), .shipbox-table td:nth-child(4) { width: 40px; text-align: center; }
.shipbox-table td:last-child .icon-ghost { margin: 0 auto; }
.shipbox-table .input { min-width: 0; width: 100%; border: none; border-radius: 0; background: transparent; padding: 0 var(--space-2); }
.shipbox-table .input:focus { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-accent); }
/* Finance sign-off toggle rendered as a button (label left, checkbox right). */
.shipreq-gate-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px);
  background: var(--color-bg); cursor: pointer; margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.shipreq-gate-toggle:hover { border-color: var(--color-border-strong, var(--color-text)); }
.shipreq-gate-toggle.is-on { border-color: var(--color-accent); background: var(--color-surface-alt); }
.shipreq-gate-toggle input { flex: none; }
.shipreq-gate-static { font-size: var(--fs-sm); padding: var(--space-1) 0; }
@media (max-width: 1100px) {
  .shipreq-body { flex-direction: column; overflow-y: auto; }
  .shipreq-doc-pane { overflow: visible; }
  .shipreq-form { flex-basis: auto; width: 100%; overflow: visible; border-left: none; border-top: 1px solid var(--color-border); }
}
/* Invoice-request preview — a paper invoice template in the left doc pane
   (mirrors the ship-doc pane; the T&M grid + customer description edit in place). */
.invdoc { padding: var(--space-6); }
.invdoc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-text); margin-bottom: var(--space-5); }
.invdoc-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: .08em; }
.invdoc-project { font-size: var(--fs-sm); color: var(--color-muted); margin-top: var(--space-1); }
.invdoc-sage { flex: none; }
.invdoc-parties { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);
  margin-bottom: var(--space-2); }
.invdoc-party-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-label); margin-bottom: var(--space-2); }
.invdoc-meta { display: flex; flex-direction: column; gap: var(--space-1); min-width: 220px; }
.invdoc-meta-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-sm); }
.invdoc-meta-label { color: var(--color-muted); }
.invdoc-meta-val { font-weight: var(--fw-medium); text-align: right; }
.invdoc-desc-block { margin-top: var(--space-4); }
.invdoc-desc-block .field-label { margin-bottom: var(--space-2); }
.invdoc-total { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--space-4);
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px solid var(--color-text); }
.invdoc-total-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; }
.invdoc-total-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.invoice-history-body { padding: var(--space-5); overflow-y: auto; }
/* Costing strip fits the narrow nav pane — 2 columns, not the 5-wide list-view grid. */
.shipreq-form .invoice-cost-strip { grid-template-columns: 1fr 1fr; }
.form-subhead { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-label);
  text-transform: uppercase; letter-spacing: .04em; margin: var(--space-5) 0 var(--space-3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.form-grid--full { grid-template-columns: 1fr; }
/* Invoice detail: narrow type selector, wide invoice-name field. */
.invoice-detail-grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3) var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field .input { width: 100%; }
.form-check-row { display: flex; gap: var(--space-5); margin-top: var(--space-3); }
.check-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); cursor: pointer; }

/* Direct Labor estimate table. */
.table--estimate td { vertical-align: middle; }
.le-subhead { font-weight: var(--fw-semibold); color: var(--color-text); background: var(--color-surface-alt); }
.le-indent { padding-left: var(--space-6); font-weight: var(--fw-regular); }
.le-hint { margin-left: var(--space-2); font-size: var(--fs-xs); font-style: italic; color: var(--color-accent); }
.le-desc { color: var(--color-label); font-size: var(--fs-sm); max-width: 460px; }
.le-hourscell { width: 90px; }
.le-hours { width: 72px; height: 30px; text-align: right; padding: 0 var(--space-2); }
.le-total td { border-top: 2px solid var(--color-border); border-bottom: none; }
/* Line-items total: a single 1px rule above it (not the heavier 2px). */
.table--lineitems .le-total td { border-top-width: 1px; }

/* Blanket badge (list project-number cell). */
.badge { display: inline-flex; align-items: center; padding: 1px var(--space-2); margin-left: var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.badge--blanket { background: var(--pill-violet-bg); color: var(--pill-violet-text); }

/* Editable project line-items grid. */
.table--lineitems td { vertical-align: middle; padding-top: var(--space-2); padding-bottom: var(--space-2); }
/* Vertical borders between cells (header, body, and total row) so columns read
   as a grid; the last cell drops its right rule to sit flush with the edge. */
.table--lineitems th,
.table--lineitems td { border-right: 1px solid var(--color-border-faint); }
.table--lineitems th:last-child,
.table--lineitems td:last-child { border-right: none; }
.li-in { height: 30px; padding: 0 var(--space-2); width: 100%; min-width: 80px; }
.li-num { text-align: right; width: 96px; }
/* Disabled inline input (e.g. per-panel qty on a fixed-qty material row). */
.li-in:disabled { background: var(--color-surface-alt); color: var(--color-muted); cursor: not-allowed; }
/* Materials rollup: the "per-unit × assemblies" hint under the multiplied qty. */
.mtl-qty-calc { font-size: var(--fs-xs); color: var(--color-muted); font-weight: var(--fw-regular); }
/* Bare money cells (COGS/labor/overhead): no box — read like text, still editable. */
.li-num--bare { border-color: transparent; background: transparent; }
.li-num--bare:hover { border-color: var(--color-border); }
.li-num--bare:focus { border-color: var(--color-accent); background: var(--color-bg); }
.li-del { width: 40px; text-align: center; }
/* Field-service cell (v36 Workyard): checkbox + WY link pill / create action. */
.li-fs { white-space: nowrap; text-align: center; }
.li-fs input[type='checkbox'] { vertical-align: middle; }
/* Item-backed line: the part is read-only (sourced from the Digit master). */
.li-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.li-item .icon { width: 14px; height: 14px; color: var(--color-muted); }

/* Add-items modal (search results, create form, selection tray). */
.item-picker-results { margin-top: var(--space-3); max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-input); }
.item-picker-msg { padding: var(--space-4); text-align: center; font-size: var(--fs-sm); }
.item-picker-list { display: flex; flex-direction: column; }
.item-picker-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); width: 100%; }
.item-picker-row:last-child { border-bottom: none; }
.item-picker-row:hover { background: var(--color-surface-alt); }
.item-picker-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.item-picker-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.item-picker-desc { font-size: var(--fs-xs); color: var(--color-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-picker-cf { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cf-chip { font-size: var(--fs-xs); color: var(--color-text); background: var(--color-surface-alt);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 1px var(--space-2); }
.cf-chip-k { color: var(--color-muted); font-weight: var(--fw-medium); }
.add-tray { margin-top: var(--space-4); }
.add-tray .table { margin-top: 0; }
.item-picker-sku { font-size: var(--fs-xs); color: var(--color-muted); }
.item-picker-meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-size: var(--fs-sm);
  padding-top: 2px; }

/* Blanket/Standard segmented choice (create-project modal). */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.seg { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg); cursor: pointer; }
.seg--active { border-color: var(--color-accent); background: var(--banner-bg); }
.seg-label { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.seg-hint { font-size: var(--fs-xs); color: var(--color-muted); }

.muted { color: var(--color-muted); }
.section-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--space-4); }
.toolbar-spacer { flex: 1; }
.empty-state { padding: var(--space-8); text-align: center; color: var(--color-muted); }

/* ---- v8: line-item nested description + wide-grid scroll ----------------- */
.li-scroll { overflow-x: auto; }
/* Line-items grid bleeds to the doc-section edges (cancels the space-8 padding),
   so the first/last columns sit flush with the section's left/right edges. */
.li-scroll--bleed { margin: 0 calc(-1 * var(--space-8)); }
.li-scroll--bleed .table--lineitems th:first-child,
.li-scroll--bleed .table--lineitems td:first-child { padding-left: var(--space-8); }
.li-scroll--bleed .table--lineitems th:last-child,
.li-scroll--bleed .table--lineitems td:last-child { padding-right: var(--space-8); }
/* Purchasing table bleeds to the doc-card edges so each row's top/bottom borders
   reach the left/right of the page; horizontal-scrolls when the columns overflow. */
.purch-scroll { margin: 0 calc(-1 * var(--space-8)); overflow-x: auto; }
.purch-scroll .table th:first-child,
.purch-scroll .table td:first-child { padding-left: var(--space-8); }
.purch-scroll .table th:last-child,
.purch-scroll .table td:last-child { padding-right: var(--space-8); }
/* Part / description column: capped width, both lines truncate with … (title shows
   the full text on hover). Keeps room for the sourcing/qty columns. */
.purch-partcell { width: 240px; }
.purch-part-name, .purch-part-desc {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.purch-status { white-space: nowrap; }   /* status pill on one line, never wrapped */
/* Sortable header + per-column filter row. */
.purch-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.purch-th-sort:hover { color: var(--color-text); }
.purch-th-sort.is-sorted { color: var(--color-text); }
.purch-filter-row th { padding-top: 4px; padding-bottom: 6px; background: var(--color-surface-alt); }
.purch-col-filter {
  width: 100%; min-width: 60px; box-sizing: border-box;
  font: inherit; font-size: var(--fs-sm); font-weight: 400;
  padding: 3px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text);
}
.purch-filter-row th.num .purch-col-filter { text-align: right; }
.purch-col-filter:focus { outline: none; border-color: var(--color-accent); }
/* Item name sits on its own line; the description nests directly beneath it.
   Keep the two lines tight (small gap) and let the cell's vertical padding give
   breathing room above the name and below the description. */
.li-item { line-height: 1.2; }
.li-desc-wrap { margin-top: 1px; }
.li-desc-in { height: 22px; font-size: var(--fs-sm); color: var(--color-label);
  border-color: transparent; background: transparent; padding-left: var(--space-1); }
.li-desc-in:hover, .li-desc-in:focus { border-color: var(--color-border); background: var(--color-bg); }
.li-sub { font-size: var(--fs-sm); color: var(--color-label); margin-top: 2px; }

/* ---- v8: inline segmented toggle (job view, purchasing mode) ------------- */
.segmented.seg-inline { display: inline-flex; gap: 0; margin: 0; }
.seg-inline .seg { flex-direction: row; align-items: center; padding: var(--space-1) var(--space-3);
  border-radius: 0; height: var(--control-height); }
.seg-inline .seg:first-child { border-radius: var(--radius-input) 0 0 var(--radius-input); }
.seg-inline .seg:last-child { border-radius: 0 var(--radius-input) var(--radius-input) 0; border-left: none; }
.seg-inline .seg .seg-label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }

/* ---- v8: job detail (meta grid, stage indicator) ------------------------ */
/* Tight light-gray panel: priority + dates + requested-by on one compact row. */
.job-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4); padding: var(--space-3);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-input); }
.job-meta-grid .form-field { gap: 2px; }
.job-meta-grid .field-label { font-size: var(--fs-xs); }
.job-meta-grid .input, .job-meta-grid select.input { width: 100%; height: 30px; font-size: var(--fs-sm); }
.job-stage { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.stage { display: inline-flex; align-items: center; gap: var(--space-2); }
.stage-step { font-size: var(--fs-sm); color: var(--color-muted); padding: 2px var(--space-2);
  border-radius: var(--radius-pill); background: var(--pill-gray-bg); }
.stage-step--done { color: var(--pill-blue-text); background: var(--pill-blue-bg); font-weight: var(--fw-medium); }
.stage-arrow { color: var(--color-muted); font-size: var(--fs-sm); }

/* ---- v8: combined op/material groups + PO blocks ------------------------ */
.combined-op { margin-bottom: var(--space-5); border-radius: var(--radius-input); }
/* Drag a material's part cell onto another operation block to re-assign it. */
.combined-op--drop { outline: 2px dashed var(--color-accent); outline-offset: 2px;
  background: var(--color-surface-alt); }
.mtl-drag-handle { cursor: grab; }
.mtl-drag-handle:active { cursor: grabbing; }
.mtl-part-line { display: inline-flex; align-items: center; gap: var(--space-1); }
.mtl-grip { display: inline-flex; color: var(--color-muted); }
.mtl-grip .icon { width: 12px; height: 16px; }

/* Row lock: material is ordered / on a PO, so it can't be deleted (tooltip explains). */
.mtl-lock { display: inline-flex; align-items: center; color: var(--color-muted); cursor: help; }
.mtl-lock .icon { width: 14px; height: 14px; }

/* Digit existence check: a material whose item name isn't in the Digit master. */
.mtl-missing { color: var(--color-danger-text); font-weight: var(--fw-medium); }
.mtl-fix-btn { display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-left: var(--space-1); border: 0; background: none; cursor: pointer;
  color: var(--color-danger-text); }
.mtl-fix-btn .icon { width: 14px; height: 14px; }
.mtl-fix-btn:hover { opacity: .7; }
.mtl-missing-chip { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-sm); color: var(--pill-red-text); background: var(--pill-red-bg);
  padding: 2px var(--space-2); border-radius: var(--radius-pill, 999px); }
.mtl-missing-chip .icon { width: 13px; height: 13px; }
.combined-op-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); background: var(--color-surface-alt);
  border-radius: var(--radius-input); margin-bottom: var(--space-2); }
.po-block { border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.po-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.po-grand { display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-3); margin-top: var(--space-2); border-top: 2px solid var(--color-border);
  font-size: var(--fs-md); }
/* Editable unit-cost / expected-date inputs in the PO compose modal. */
.po-block .input { height: 30px; font-size: var(--fs-sm); padding: 0 var(--space-2); }
.po-block td .input.num { width: 96px; text-align: right; }
.po-block td .input[type="date"] { width: 140px; }

/* Vendor picker inside a PO block. */
.po-vendor { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px dashed var(--color-border); }
.po-vendor .input[type="search"] { width: 240px; }
.po-vendor-results { display: flex; flex-wrap: wrap; }
.po-line--blocked td { background: var(--pill-red-bg); color: var(--color-muted); }

/* Purchasing buy-list action state (red = needs action, amber = partly stocked,
   green = handled) — a left-edge accent + subtle tint so action rows pop. */
.po-row td:first-child { border-left: 3px solid transparent; }
.po-row--action td:first-child { border-left-color: var(--pill-red-text); }
.po-row--partial td:first-child { border-left-color: var(--pill-amber-text); }
.po-row--handled td:first-child { border-left-color: var(--pill-green-text); }
.po-row--action td { background: var(--pill-red-bg); }
.po-row--partial td { background: var(--pill-amber-bg); }
.po-row--handled td { background: var(--pill-green-bg); }

/* Compose-PO modal fills a fixed tall height so the bottom gap matches the 6vh
   top gap of the centered overlay (taller by default than a content-sized card). */
.modal-card--po { height: 88vh; }

/* ---- Compose-PO modal: right NAV of suggested POs (as buttons) ----------- */
.po-nav-pane .po-nav-list { display: flex; flex-direction: column; gap: var(--space-2); }
.po-nav-item { display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px);
  padding: var(--space-3); font: inherit; color: inherit; transition: border-color .12s, background .12s; }
.po-nav-item:hover { border-color: var(--color-border-strong, var(--color-text)); }
.po-nav-item.is-active { border-color: var(--color-accent); background: var(--color-surface-alt); box-shadow: inset 3px 0 0 var(--color-accent); }
.po-nav-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.po-nav-name { font-weight: var(--fw-bold); }
.po-nav-total { font-weight: var(--fw-semibold); }
.po-nav-sub { font-size: var(--fs-sm); color: var(--color-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-nav-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); }

/* ---- PO document (CPUSA template) — left preview pane + print takeover ---- */
.po-vendor-list { display: flex; flex-wrap: wrap; }
.podoc { padding: var(--space-6) !important; color: #1c1c1a; font-size: 12px; line-height: 1.45; }
.podoc-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 12px; }
.podoc-co { font-size: 12.5px; font-weight: 700; }
.podoc-addr { color: var(--color-muted); font-size: 11.5px; margin-top: 3px; line-height: 1.4; }
.podoc-logo { display: flex; justify-content: center; }
.podoc-logo img { width: 180px; height: auto; display: block; }
.podoc-phone { text-align: right; color: var(--color-muted); font-size: 11.5px; }
.podoc-titlebar { display: flex; align-items: stretch; border-top: .75px solid var(--color-border);
  border-bottom: 2px solid var(--color-border-strong, #b9b7ac); }
.podoc-t { flex: 1; display: flex; align-items: center; font-size: 21px; font-weight: 700; letter-spacing: .4px; padding: 9px 4px; }
.podoc-meta { display: flex; border-left: .75px solid var(--color-border); }
.podoc-cell { padding: 7px 15px; border-right: .75px solid var(--color-border); }
.podoc-cell:last-child { border-right: 0; }
.podoc-cell .k { color: var(--color-faint, #9a988f); font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; }
.podoc-cell .v { font-weight: 700; font-size: 13px; margin-top: 1px; }
.podoc-parties { display: grid; grid-template-columns: 1fr 1fr; border-bottom: .75px solid var(--color-border); }
.podoc-box { padding: 11px 14px; }
.podoc-box:first-child { border-right: .75px solid var(--color-border); }
.podoc-plbl { color: var(--color-faint, #9a988f); font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.podoc-who { font-weight: 700; }
.podoc-pdet { color: var(--color-muted); font-size: 11.5px; margin-top: 2px; line-height: 1.45; white-space: pre-line; }
.podoc-box .input[type="search"] { width: 100%; margin-top: 2px; }
.podoc-table { width: 100%; border-collapse: collapse; margin-top: 0; }
.podoc-table thead th { background: var(--head, #e4e2da); color: #3d3c37; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 7px 7px;
  border-top: .75px solid var(--color-border); border-bottom: .75px solid var(--color-border); }
.podoc-table thead th.r { text-align: right; }
.podoc-table tbody td { padding: 8px 7px; vertical-align: top; font-size: 11.5px; border-bottom: 1px solid var(--color-border-strong, #b9b7ac); }
.podoc-table tbody td.r { text-align: right; }
.podoc-pn { font-weight: 700; }
.podoc-desc { color: #4a4943; }
.podoc-jobno { font-weight: 600; white-space: nowrap; }
.podoc-jobpart { color: var(--color-faint, #9a988f); font-size: 11px; }
.podoc-additem { padding: 6px 0 2px; }
.podoc-additem .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.podoc-table--rcv .podoc-qty { width: 84px; }
.podoc-table--rcv tr.podoc-rcv-done td { color: var(--color-faint, #9a988f); }
.podoc-rcv-rem { font-weight: 600; }
.podoc-amt { font-weight: 700; }
.podoc-blocked td { background: var(--pill-red-bg); color: var(--color-muted); }
.podoc-cost, .podoc-qty { width: 96px; text-align: right; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: 2px 6px; font: inherit; font-size: 11.5px; }
.podoc-qty { width: 72px; }
.podoc-cost:focus, .podoc-qty:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
/* Editable PO detail row (terms / tracking / promise / need-by) + vendor address. */
.podoc-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; padding: 10px 0 4px; border-bottom: .75px solid var(--color-border); }
.podoc-details label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--color-faint, #9a988f); text-transform: uppercase; letter-spacing: .3px; }
.podoc-details--ro { grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); border-bottom: 0; }
.podoc-detail-in { font: inherit; font-size: 11.5px; text-transform: none; letter-spacing: 0; color: #1c1c1a;
  border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 3px 6px; }
.podoc-detail-in:focus { outline: none; border-color: var(--color-accent); }
.podoc-vaddr { width: 100%; margin-top: 4px; font: inherit; font-size: 11.5px; color: #1c1c1a; resize: vertical;
  border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 4px 6px; }
.podoc-vaddr:focus { outline: none; border-color: var(--color-accent); }
/* PO provenance strip (which projects + jobs this PO covers). */
.podoc-prov { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 8px 0; font-size: 11px; color: #4a4943; border-bottom: .75px solid var(--color-border); }
.podoc-prov .k { color: var(--color-faint, #9a988f); text-transform: uppercase; font-size: 9.5px; letter-spacing: .4px; }
/* Drag handle + drop target + removed-line on the editable PO tables. */
.podoc-handle { cursor: grab; white-space: nowrap; }
.podoc-grip { color: var(--color-faint, #9a988f); margin-right: 5px; letter-spacing: -1px; }
.podoc-drop { box-shadow: inset 0 2px 0 var(--color-accent); }
.podoc-removed td { opacity: .45; text-decoration: line-through; }
.podoc-footer { display: grid; grid-template-columns: 1fr 250px; gap: 26px; align-items: start; padding-top: 15px; }
.podoc-notes { color: var(--color-muted); font-size: 11px; line-height: 1.7; }
.podoc-notes b { color: #1c1c1a; font-weight: 700; }
.podoc-total { display: flex; justify-content: space-between; align-items: center;
  border: 2px solid var(--color-border-strong, #b9b7ac); padding: 12px 16px; align-self: start; }
.podoc-total-lbl { font-size: 15px; font-weight: 700; }
.podoc-total-val { font-size: 16px; font-weight: 700; }
/* Print takeover: the PO doc as a clean letter page. */
.podoc--print { background: #fff; box-shadow: none; }
@media print {
  .podoc--print { margin: 0; box-shadow: none; }
  @page { size: letter; margin: .5in; }
}

/* ---- PO approvals (list mini-dots + manage-modal panel) ----------------- */
.po-appr-mini { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.po-appr-dot { font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); color: var(--color-label); }
.po-appr-dot--green { background: var(--pill-green-bg); color: var(--pill-green-text); }
.po-appr-dot--red { background: var(--pill-red-bg); color: var(--pill-red-text); }
.po-appr-dot--gray { background: var(--color-surface-alt); color: var(--color-label); }
.po-appr-list { display: flex; flex-direction: column; gap: var(--space-3); }
.po-appr-row { border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-2) var(--space-3); }
.po-appr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.po-appr-label { font-weight: var(--fw-semibold); }

/* ---- v8: costing grouped header ----------------------------------------- */
.costing-grouphead th { border-bottom: none; }
.costing-group { text-align: center; color: var(--color-text); font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--color-border); }

/* Migrated-from-Kinetic actual-cost summary (schema_v54) on the Costing tab. */
.cost-actuals { margin-bottom: var(--space-6); }
.cost-actuals .section-head h3 { margin: 0; font-size: var(--fs-3); }
.cost-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-4); }
.cost-stat { border: 1px solid var(--color-border); border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.cost-stat-val { font-size: var(--fs-4); font-weight: var(--fw-semibold); color: var(--color-text); }
.cost-stat-label { font-size: var(--fs-1); color: var(--color-text-muted); margin-top: 2px; }
.cost-actuals-table { max-width: 520px; }

/* ---- v11: Invoicing ----------------------------------------------------- */
/* Sage Intacct brand mark — the real third-party wordmark logo, sized by height. */
.sage-logo { display: inline-block; width: auto; vertical-align: middle; }
.sage-logo--sm { height: 13px; }
.sage-logo--md { height: 20px; }
.sage-linked { display: inline-flex; align-items: center; gap: var(--space-2); }

.invoice-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.invoice-head-left { display: flex; align-items: center; gap: var(--space-3); }
.invoice-head-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

.approver-cell { display: flex; flex-direction: column; gap: 2px; }
.doc-chip { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-label); font-size: var(--fs-sm); }
.doc-chip .icon { width: 14px; height: 14px; }

/* Sticky header + footer so they stay visible while the modal body scrolls.
   Negative margins pull each bar over the card's padding so it spans edge-to-edge
   and pins flush at the card's border (top:/bottom: offset the card padding). */
.invoice-modal-head { display: flex; flex-direction: column; gap: 0;
  position: sticky; top: calc(-1 * var(--space-5)); z-index: 3; background: var(--color-bg);
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  padding: var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.invoice-modal-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.invoice-modal-head-right { display: flex; align-items: center; gap: var(--space-3); flex: none; height: 20px; }
/* Sage logo sits in a fixed 20px-high block, logo itself 16px. */
.invoice-modal-sage { display: inline-flex; align-items: center; height: 20px; }
.invoice-modal-sage .sage-logo { height: 16px; }
.invoice-modal-foot { position: sticky; bottom: calc(-1 * var(--space-5)); z-index: 3; background: var(--color-bg);
  margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }
.invoice-cost-strip { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-card); border-top: none;
  grid-template-columns: repeat(5, 1fr); gap: var(--space-3) var(--space-4); }

/* Invoice modal tabs — pinned inside the sticky header so they're always
   visible; their underline overlaps the header's bottom border. */
.invoice-modal-tabs { display: flex; gap: var(--space-4); margin: 0; }
.invoice-modal-tab { appearance: none; background: none; border: none; cursor: pointer; padding: var(--space-2) 0;
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.invoice-modal-tab:hover { color: var(--color-text); }
.invoice-modal-tab.is-active { color: var(--color-text); border-bottom-color: var(--color-text); }

/* T&M labor/material line grid inside the invoice modal. Fixed layout so the
   columns fit the modal width — never scrolls left-to-right. */
.tm-lines-table { table-layout: fixed; width: 100%; }
.tm-lines-table th, .tm-lines-table td { vertical-align: middle; }
/* Vertical column separators (skip the last, the row-remove cell). */
.tm-lines-table th:not(:last-child), .tm-lines-table td:not(:last-child) { border-right: 1px solid var(--color-border); }
.tm-lines-table th:nth-child(1), .tm-lines-table td:nth-child(1) { width: auto; }
.tm-lines-table th:nth-child(2), .tm-lines-table td:nth-child(2),
.tm-lines-table th:nth-child(3), .tm-lines-table td:nth-child(3) { width: 110px; }
.tm-lines-table th:nth-child(4), .tm-lines-table td:nth-child(4) { width: 120px; }
.tm-lines-table th:nth-child(5), .tm-lines-table td:nth-child(5) { width: 40px; }
/* Borderless cells so the grid reads like editing spreadsheet cells; the cell
   border is provided by the table rows. Focus gets a subtle accent ring. */
.tm-lines-table .input { min-width: 0; width: 100%; border: none; border-radius: 0; background: transparent; padding: 0 var(--space-2); }
.tm-lines-table .input:focus { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tm-lines-table .input.num { text-align: right; }
.tm-lines-table select.input { min-width: 0; }
.tm-lines-table .tm-total-row td { border-top: 1px solid var(--color-border); background: var(--color-surface-alt); }

/* Invoice type selector: pull the selected value left so it lines up under its
   label instead of looking indented. */
.invoice-detail-grid select.input { padding-left: var(--space-2); }

/* Multi-select approver dropdown (checkbox menu). */
.multiselect { position: relative; }
.multiselect-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; height: var(--control-height); padding: 0 var(--space-3); text-align: left;
  border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg);
  font-family: inherit; font-size: var(--fs-base); color: var(--color-text); cursor: pointer; }
.multiselect-toggle.is-empty { color: var(--color-muted); }
.multiselect-toggle .icon { flex: none; width: 14px; height: 14px; color: var(--color-muted); }
.multiselect-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-input);
  box-shadow: var(--shadow-md); padding: var(--space-1); max-height: 220px; overflow-y: auto; }
.multiselect.is-open .multiselect-menu { display: block; }
.multiselect.is-open .multiselect-toggle .icon { transform: rotate(180deg); }
.multiselect-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-input); font-size: var(--fs-base); cursor: pointer; }
.multiselect-option:hover { background: var(--color-surface-alt); }
.multiselect-option input { margin: 0; }
.invoice-alert { background: var(--color-surface-alt); }
.invoice-alert .icon { flex: none; width: 16px; height: 16px; }

.invoice-doc-list { display: flex; flex-direction: column; gap: var(--space-1); }
.invoice-doc { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt); border-radius: var(--radius-input); font-size: var(--fs-sm); }
.invoice-doc .icon { flex: none; width: 15px; height: 15px; color: var(--color-label); }
.invoice-doc-name { flex: 1; color: var(--color-text); text-decoration: none; }
a.invoice-doc-name:hover { text-decoration: underline; }
.invoice-file-input { display: none; }

.approval-stages { display: flex; flex-direction: column; gap: var(--space-2); }
.approval-stage { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.approval-stage-name { font-weight: var(--fw-medium); margin-top: 2px; }

/* v12: customer-facing invoice description (preserve author's line breaks) */
.invoice-desc { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-alt);
  border-radius: var(--radius-card); white-space: pre-wrap; font-family: inherit; font-size: var(--fs-sm);
  color: var(--color-text); line-height: 1.5; }

/* v12: invoice discussion thread (kickback reasons + comments) */
.invoice-thread { display: flex; flex-direction: column; gap: var(--space-2); }
.invoice-comment { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); background: var(--color-surface); }
.invoice-comment-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.invoice-comment-body { font-size: var(--fs-sm); color: var(--color-text); white-space: pre-wrap; }

/* v12: numeric count badge on a tab (awaiting-approval queue) */
.badge--count { background: var(--pill-amber-bg); color: var(--pill-amber-text); font-weight: var(--fw-semibold);
  border-radius: 999px; min-width: 18px; justify-content: center; }

/* v18: QC dashboard grid (mirrors the QC dept Excel — wide, scrolls in .li-scroll).
   Colors come from pill classes; only layout/spacing tokens here. */
.qc-dashboard th, .qc-dashboard td { white-space: nowrap; }
.qc-dashboard thead tr:first-child th { text-align: left; color: var(--color-text-muted);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; border-bottom: none;
  padding-bottom: 0; }
.qc-dashboard th.qc-group { background: var(--color-surface-2, transparent); }
.qc-step-cell { text-align: center; padding-left: var(--space-1); padding-right: var(--space-1); }
/* Full-cell color fill for a step's state (not a pill). */
.qc-dashboard td.qc-step--done { background: var(--pill-green-bg); color: var(--pill-green-text); font-weight: var(--fw-semibold); }
.qc-dashboard td.qc-step--ip   { background: var(--pill-amber-bg); color: var(--pill-amber-text); font-weight: var(--fw-semibold); }
.qc-dashboard td.qc-step--fail { background: var(--pill-red-bg); color: var(--pill-red-text); font-weight: var(--fw-semibold); }
.qc-dashboard td.qc-step--na   { background: var(--pill-gray-bg); color: var(--pill-gray-text); }
.qc-status-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* Vertical column separators (Excel-like grid). */
.qc-dashboard th, .qc-dashboard td { border-right: 1px solid var(--color-border-faint); }
.qc-dashboard th:last-child, .qc-dashboard td:last-child { border-right: none; }
/* Full-bleed: the scroll wrapper (not the table) reaches both page edges so the
   horizontal row lines run edge-to-edge; cell text stays inset 32px via first/last
   child padding. Overrides the shared .content #tab-body .table bleed for this grid. */
.content #tab-body .qc-scroll { margin-left: calc(-1 * var(--space-8)); margin-right: calc(-1 * var(--space-8)); }
.content #tab-body .qc-scroll .table.qc-dashboard { margin-left: 0; margin-right: 0; width: auto; min-width: 100%; }

/* v25: Production board reuses the .qc-dashboard grid (color-filled step cells,
   grouped headers, full-bleed scroll). The record modal adds a compact layout. */
.prod-worktype { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.prod-worktype-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); cursor: pointer; }
.input--sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-sm); height: auto; }
.form-field--sm { margin: 0; }
.form-field--sm .field-label { font-size: var(--fs-xs); }
.prod-center-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3); background: var(--color-surface); }
.prod-center-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.prod-center-title { font-weight: var(--fw-semibold); }
.prod-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1) var(--space-4); }
.prod-step-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; }
.prod-step-name { font-size: var(--fs-sm); color: var(--color-text); }
.prod-step-row .input--sm { max-width: 92px; }
.prod-addl { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2) var(--space-3); margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--color-border-faint); }
.prod-history { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
/* v30: the 8 single-field work-center columns. Board cell = a tinted dropdown; the
   modal lists the same 8 as label + dropdown rows. */
.prod-field-cell { text-align: center; padding: 0; }
/* Custom work-center dropdown (styled like the assignee menu, not a native <select>).
   The cell (td) carries the value tint; the toggle is transparent + fills the cell. */
.prod-field-ms { width: 100%; height: 100%; }
.prod-field-toggle { width: 100%; min-height: 34px; border: none; background: transparent; color: inherit;
  font-weight: var(--fw-semibold); cursor: pointer; padding: var(--space-1) var(--space-2);
  display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 0; }
.prod-field-toggle .icon { width: 12px; height: 12px; color: currentColor; opacity: .45; flex: none; }
/* Board cells: no chevron (keeps the clean color-fill look); the whole cell is clickable. */
.prod-field-cell .prod-field-toggle .icon { display: none; }
.prod-field-lbl { line-height: 1.2; }
.prod-field-menu { min-width: 190px; max-height: 300px; overflow-y: auto; }
.prod-field-opt { width: 100%; border: none; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.prod-field-opt.is-selected { font-weight: var(--fw-semibold); background: var(--color-surface-alt); }
.prod-field-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--color-border); }
.prod-field-dot.qc-step--done { background: var(--pill-green-text); }
.prod-field-dot.qc-step--ip   { background: var(--pill-amber-text); }
.prod-field-dot.prod-step--staged { background: var(--pill-yellow-text); }
.prod-field-dot.qc-step--fail { background: var(--pill-red-text); }
.prod-field-dot.prod-step--prog { background: var(--pill-blue-text); }
.prod-field-dot.prod-step--wft  { background: var(--pill-violet-text); }
.prod-field-dot.qc-step--na   { background: var(--pill-gray-text); }
.prod-field-dot.qc-step--none { background: var(--color-border); }
/* Start-date cell: clean formatted label with a transparent date-input overlay. */
.prod-date-cell { position: relative; white-space: nowrap; cursor: pointer; }
.prod-date-label { font-variant-numeric: tabular-nums; }
.prod-date-label.is-empty { color: var(--color-muted); }
.prod-date-cell:hover .prod-date-label { text-decoration: underline; text-decoration-style: dotted; }
.prod-date-overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; padding: 0; margin: 0; cursor: pointer; }
/* Wide production board: cap the scroll box to the viewport so its horizontal
   scrollbar is ALWAYS visible (pinned near the screen bottom) instead of only
   appearing once you scroll to the end of a long table. The WO list scrolls
   vertically inside the box; the column header stays put (sticky). */
/* Production board: "show completed" toggle + pagination footer. */
.prod-showdone { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--color-label); cursor: pointer; user-select: none; white-space: nowrap; }
.prod-showdone input { cursor: pointer; }
/* Sticky footer pager — pinned to the viewport bottom so it's always visible
   without scrolling to the end of the (thousands-of-rows) board. */
.prod-pager {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-3) 0; font-size: var(--fs-sm);
  background: var(--color-bg); border-top: 1px solid var(--color-border-faint);
}

.prod-scroll { overflow: auto; max-height: calc(100vh - 165px); }
/* On the cross-project board the scroll box shares the viewport with a sticky
   pager below it, so cap it shorter (chrome ≈ 200px + pager) — otherwise the
   pager lands below the fold. Scoped to the list screen so the per-project
   Production subtab (no pager, different chrome) keeps the taller box. */
.list-content .prod-scroll { max-height: calc(100vh - 250px); }
.prod-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--color-bg); }
.prod-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.prod-scroll::-webkit-scrollbar-track { background: var(--color-bg-subtle, #f4f4f5); border-radius: 5px; }
.prod-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 5px; }
.prod-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-muted, #9a988f); }
.prod-scroll { scrollbar-width: thin; }
/* .table td's padding (higher specificity) was out-specifying .prod-field-cell's
   padding:0, leaving ~8px dead click zones L/R of the toggle — invisible on blank
   (yellow-row) cells, so a click there opened nothing. Fill the whole cell. */
.prod-board td.prod-field-cell { padding: 0; }
/* Production board: framed header row (single 1px top + bottom rule). Uses tr:first-child
   to match — and override — the .qc-dashboard header rule that zeroes the bottom border;
   keeps padding-bottom:0 so the header text stays vertically centered in the row. */
.prod-board thead tr:first-child th { border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border); padding-bottom: 0;
  text-transform: capitalize; letter-spacing: 0; }
/* QC "Staged" (yellow) + "Punch list" (red) + "Programmer" (blue) — cell tint + traveler glyph. */
.qc-dashboard td.prod-step--staged { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); font-weight: var(--fw-semibold); }
.qc-dashboard td.prod-step--prog { background: var(--pill-blue-bg); color: var(--pill-blue-text); font-weight: var(--fw-semibold); }
.qc-dashboard td.prod-step--wft { background: var(--pill-violet-bg); color: var(--pill-violet-text); font-weight: var(--fw-semibold); }
.trav-step--staged { color: var(--pill-yellow-text); }
.trav-step--fail { color: var(--pill-red-text); }
.trav-step--prog { color: var(--pill-blue-text); }
.trav-step--wft { color: var(--pill-violet-text); }
.prod-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-5); }
.prod-field-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; }
.prod-field-name { font-size: var(--fs-sm); }
.prod-field-row .prod-field-ms { max-width: 180px; min-width: 140px; }
.prod-field-row .prod-field-toggle { border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  justify-content: space-between; min-height: 32px; background: var(--color-bg); }
.prod-log-line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); padding: var(--space-1) 0; }
.prod-log-time { flex: none; white-space: nowrap; }
.prod-comment { margin: var(--space-2) 0; }
.prod-comment-body { font-size: var(--fs-sm); margin-top: var(--space-1); white-space: pre-wrap; }
.prod-composer { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); }
.prod-composer textarea { flex: 1; }
/* Inline multi-select Assignee dropdown on the board. */
.prod-assignee-cell { padding-top: 2px; padding-bottom: 2px; }
.prod-assignee-ms { min-width: 150px; }
.prod-assignee-ms .multiselect-toggle { padding: 3px var(--space-1); font-size: var(--fs-sm); white-space: nowrap;
  border: none; background: transparent; height: auto; }
.prod-assignee-ms .multiselect-menu { right: auto; min-width: 200px; max-height: 260px; overflow-y: auto; }
.avatar--xs { width: 20px; height: 20px; font-size: 9px; }

/* v46: work-center cell parts-pull corner flag (requested = amber, pulled = green). */
.prod-field-cell { position: relative; }
.prod-field-cell.prod-pull--requested::after,
.prod-field-cell.prod-pull--pulled::after {
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 9px solid var(--pill-amber-text); border-left: 9px solid transparent; pointer-events: none; }
.prod-field-cell.prod-pull--pulled::after { border-top-color: var(--pill-green-text); }

/* v46: styled mini-calendar (custom date picker) — replaces the native date popup. */
.minical { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.14)); padding: var(--space-2); user-select: none; }
.minical-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.minical-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.minical-nav { border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--color-text); }
.minical-nav:hover { background: var(--color-bg-subtle, #f4f4f5); }
.minical-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.minical-weekdays { margin-bottom: 2px; }
.minical-wd { text-align: center; font-size: var(--fs-xs, 11px); color: var(--color-muted); padding: 2px 0; }
.minical-day { border: none; background: transparent; cursor: pointer; aspect-ratio: 1; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--color-text); display: flex; align-items: center; justify-content: center; }
.minical-day:hover { background: var(--color-bg-subtle, #f4f4f5); }
.minical-day--empty { pointer-events: none; }
.minical-day.is-today { box-shadow: inset 0 0 0 1px var(--color-accent); }
.minical-day.is-sel { background: var(--color-accent); color: #fff; font-weight: var(--fw-semibold); }
.minical-day.is-sel:hover { background: var(--color-accent); }
.minical-foot { display: flex; justify-content: space-between; margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--color-border); }
.minical-foot-btn { border: none; background: transparent; cursor: pointer; font-size: var(--fs-sm);
  color: var(--color-accent); padding: 2px 6px; border-radius: var(--radius-sm); }
.minical-foot-btn:hover { background: var(--color-bg-subtle, #f4f4f5); }

/* v46: inline free-text Notes cell on the board master row — borderless input that
   fills the whole cell (edge to edge). */
.prod-notes-cell { min-width: 160px; padding: 0 !important; }
.prod-notes-input { display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 150px;
  border: none; border-radius: 0; background: transparent; padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm); }
.prod-notes-input:focus { outline: none; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-accent); }

/* v45: a fresh/untouched WO (nothing picked in any work center) — flag it yellow. */
.prod-board tbody tr.prod-row--new > td { background: var(--pill-yellow-bg); }
/* NB: do NOT use `filter` for the hover shade — a non-none filter on the <td>
   makes it the containing block for the position:fixed work-center dropdown menu,
   which then positions relative to the cell (off-screen) instead of the viewport.
   Darken with a translucent overlay gradient instead (no containing-block effect). */
.prod-board tbody tr.prod-row--new:hover > td { background: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)), var(--pill-yellow-bg); }

/* v45/v46: parts detail + pull panel BELOW the status options in a work-center dropdown.
   The menu is a flex column so the parts list expands to fill a tall menu and scrolls,
   while the status options + panel header + bulk actions stay pinned. */
.multiselect.is-open .multiselect-menu.prod-field-menu { display: flex; }
.prod-field-menu { flex-direction: column; overflow: hidden; }
.prod-field-menu-opts { flex: none; display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--space-2); }
.prod-parts-panel { padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);
  border-top: 1px solid var(--color-border); flex: 1 1 auto; min-height: 0; text-align: left; }
.prod-parts-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex: none; }
.prod-parts-title { font-size: var(--fs-xs, 11px); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-muted); }
.prod-parts-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.prod-parts-actions { display: flex; flex-direction: column; gap: var(--space-1); flex: none; }
.prod-parts-actions-row { display: flex; gap: var(--space-2); }
.prod-parts-pull { font-size: var(--fs-xs, 11px); }
/* Detailed part list inside the dropdown — grows to fill the menu, scrolls if long. */
.prod-parts-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 60px; overflow-y: auto; }
.prod-part-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px 40px auto; align-items: center;
  gap: var(--space-2); padding: var(--space-1) 0; border-top: 1px solid var(--color-border-subtle, var(--color-border)); }
.prod-parts-list .prod-part-row:first-child { border-top: none; }
.prod-parts-colhead { border-top: none; padding-bottom: 2px; font-size: var(--fs-xs, 11px); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.prod-part-meta { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; overflow: hidden; }
.prod-part-meta .prod-avail-dot { margin-top: 4px; flex: none; }
.prod-part-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.3; }
.prod-part-num { font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-part-row .prod-bom-pull { justify-self: end; }
.prod-avail-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--color-border); }
.prod-avail-dot--green { background: var(--pill-green-text); }
.prod-avail-dot--amber { background: var(--pill-amber-text); }
.prod-avail-dot--red   { background: var(--pill-red-text); }
.prod-avail-dot--gray  { background: var(--pill-gray-text); }
/* Per-center focused view: parts chip + request button. */
.prod-center-parts { white-space: nowrap; }
.prod-parts-chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); margin-right: var(--space-2); }
.prod-pull-tag { font-size: var(--fs-sm); color: var(--pill-amber-text); margin-right: var(--space-2); }
.prod-pull-tag--done { color: var(--pill-green-text); }

/* v45: master BOM by work center (record modal). */
.prod-centers-row { min-width: 0; }
.prod-bom-group { margin-bottom: var(--space-4); }
.prod-bom-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-1) 0; margin-top: var(--space-2); }
.prod-bom-group-name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); }
.prod-bom-group-actions { display: inline-flex; align-items: center; gap: var(--space-2); }
.prod-bom-table td, .prod-bom-table th { white-space: nowrap; }
.prod-bom-pull { display: inline-flex; align-items: center; gap: var(--space-2); }

/* v25: Warehouse (clear-to-build) view — reuses the qc-dashboard grid; CTB cells
   are centered checkboxes, cleared ones tinted green. */
.wh-table td, .wh-table th { white-space: nowrap; }
.wh-ctb { text-align: center; }
.wh-ctb--on { background: var(--pill-green-bg); }
.wh-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wh-check input { width: 18px; height: 18px; cursor: pointer; }

/* v25: full-screen TV / Gantt shop board (wall display). */
.shopboard { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--color-bg); padding: var(--space-4) var(--space-5) var(--space-5); overflow: hidden; }
.shopboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.shopboard-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.shopboard-title-sub { color: var(--color-muted); font-weight: var(--fw-medium); }
.shopboard-head-right { display: flex; align-items: center; gap: var(--space-4); }
.shopboard-updated { font-size: var(--fs-sm); color: var(--color-muted); }
/* TV board — a column per work center. */
.tvboard { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-3); min-height: 0; }
.tvcol { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.tvcol-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3);
  font-weight: var(--fw-bold); font-size: var(--fs-md); background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); }
.tvcol-count { font-size: var(--fs-sm); color: var(--color-muted); background: var(--color-bg); border-radius: 999px; padding: 0 var(--space-2); }
.tvcol-body { flex: 1; overflow-y: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.tvcol-empty { color: var(--color-muted); text-align: center; padding: var(--space-3); }
.tvcard { border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-2) var(--space-3); background: var(--color-bg); }
.tvcard--active { border-left: 4px solid var(--pill-amber-text); }
.tvcard--late { border-left: 4px solid var(--color-danger-text); }
.tvcard-top { display: flex; align-items: center; justify-content: space-between; }
.tvcard-wo { font-weight: var(--fw-bold); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.tvcard-hot { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; background: var(--color-danger-text); border-radius: 999px; padding: 1px var(--space-2); }
.tvcard-cust { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.tvcard-desc { font-size: var(--fs-xs); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); }
.tvcard-badge { font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: 999px; padding: 1px var(--space-2); }
.tvcard-badge--on { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.tvcard-badge--wait { background: var(--pill-gray-bg); color: var(--pill-gray-text); }
.tvcard-due { font-size: var(--fs-xs); color: var(--color-muted); }
.tvcard-due-late { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-danger-text); }
/* Gantt — WO rows with time bars over a shared axis. */
.gantt { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.gantt-head { display: flex; border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt); }
.gantt-label { flex: 0 0 200px; padding: var(--space-2) var(--space-3); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 1px; }
.gantt-label--head { font-weight: var(--fw-bold); justify-content: center; }
.gantt-label-wo { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.gantt-label-cust { font-size: var(--fs-xs); color: var(--color-muted); }
.gantt-track { position: relative; flex: 1; min-height: 34px; }
.gantt-track--head { height: 30px; }
.gantt-axis { position: absolute; inset: 0; }
.gantt-tick { position: absolute; top: 6px; font-size: var(--fs-xs); color: var(--color-muted); transform: translateX(-50%);
  border-left: 1px solid var(--color-border-faint); padding-left: 3px; height: 18px; }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-danger-text); opacity: .55; z-index: 1; }
.gantt-scroll { flex: 1; overflow-y: auto; }
.gantt-row { display: flex; border-bottom: 1px solid var(--color-border-faint); cursor: pointer; }
.gantt-row:hover { background: var(--color-hover); }
.gantt-bar { position: absolute; top: 7px; height: 20px; border-radius: 4px; display: flex; align-items: center; z-index: 2; }
.gantt-bar-label { font-size: var(--fs-xs); color: #fff; font-weight: var(--fw-semibold); padding: 0 var(--space-2); overflow: hidden; white-space: nowrap; }
.gantt-bar--wip { background: var(--color-accent); }
.gantt-bar--late { background: var(--color-danger-text); }
.gantt-bar--done { background: var(--pill-green-text); }

/* v25: WO traveler / print screen (the workbook's "Report" tab). Full-viewport
   takeover on screen; @media print hides the toolbar so only the sheet prints. */
.traveler { position: fixed; inset: 0; z-index: 60; background: var(--color-bg-subtle, #f4f4f5); overflow: auto; }
.traveler-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.traveler-toolbar-left { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); }
.traveler-toolbar-right { display: inline-flex; gap: var(--space-3); }
.traveler-sheet { max-width: 820px; margin: var(--space-5) auto; background: #fff; color: #111;
  border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-6) var(--space-6) var(--space-5); }
.traveler-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  border-bottom: 2px solid #111; padding-bottom: var(--space-3); margin-bottom: var(--space-4); }
.traveler-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.traveler-sub { font-size: var(--fs-md); color: var(--color-muted); margin-top: 2px; }
.traveler-wo { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.traveler-wo-label { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.traveler-wo-num { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.traveler-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.traveler-field-label { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; }
.traveler-field-value { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.traveler-center { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); break-inside: avoid; }
.traveler-center-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-faint); padding-bottom: var(--space-2); }
.traveler-center-title { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.traveler-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px var(--space-4); }
.traveler-step-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 3px 0; font-size: var(--fs-sm); border-bottom: 1px dotted var(--color-border-faint); }
.traveler-step-val { font-weight: var(--fw-semibold); font-size: var(--fs-xs); }
.trav-step--done { color: var(--pill-green-text); }
.trav-step--ip { color: var(--pill-amber-text); }
.trav-step--na, .trav-step--none { color: var(--color-muted); }
.traveler-addl { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border-faint); }
.traveler-status { margin-top: var(--space-2); font-size: var(--fs-sm); }
.traveler-log { margin-top: var(--space-2); }
.traveler-log-line { font-size: var(--fs-sm); padding: 2px 0; }
.traveler-log-meta { color: var(--color-muted); margin-right: var(--space-2); }
.traveler-foot { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--color-border-faint);
  font-size: var(--fs-xs); color: var(--color-muted); text-align: center; }
@media print {
  .traveler { position: static; background: #fff; overflow: visible; }
  .traveler-toolbar { display: none; }
  .traveler-sheet { max-width: none; margin: 0; border: none; border-radius: 0; padding: 0; }
  @page { margin: 1.5cm; }
}

/* Printable Transmittal / Packing Slip — mirrors ref/CPUSA_*_mockup.html.
   Self-contained neutral ink palette (not the app tokens) so it reads as paper. */
.cpdoc-screen { --ink:#1c1c1a; --muted:#6b6a64; --faint:#9a988f; --line:#d8d6cd; --line-strong:#b9b7ac; --head:#e4e2da; --head-line:#c7c5bb; }
.cpdoc-page { width: 8.5in; min-height: 10.5in; margin: var(--space-5) auto; background: #fff; color: var(--ink);
  box-shadow: 0 2px 12px rgba(0,0,0,.12); padding: 0.5in 0.55in; font-size: 11px; line-height: 1.45;
  font-family: "Helvetica Neue", Arial, sans-serif; }
.cpdoc-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 12px; }
.cpdoc-co { font-size: 12.5px; font-weight: 700; }
.cpdoc-addr { color: var(--muted); font-size: 10.5px; margin-top: 3px; line-height: 1.4; }
.cpdoc-logo { display: flex; justify-content: center; }
.cpdoc-logo img { width: 190px; height: auto; display: block; }
.cpdoc-phone { text-align: right; color: var(--muted); font-size: 10.5px; }
.cpdoc-titlebar { display: flex; align-items: stretch; border-top: 0.75px solid var(--line); border-bottom: 2px solid var(--line-strong); }
.cpdoc-t { flex: 0 0 50%; display: flex; align-items: center; font-size: 21px; font-weight: 700; letter-spacing: .4px; padding: 9px 4px; }
.cpdoc-meta { flex: 0 0 50%; display: flex; border-left: 0.75px solid var(--line); }
.cpdoc-cell { flex: 1; min-width: 0; padding: 7px 11px; border-right: 0.75px solid var(--line); }
.cpdoc-cell:last-child { border-right: 0; }
.cpdoc-cell .k { color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .4px; }
.cpdoc-cell .v { font-weight: 700; font-size: 11px; margin-top: 1px; }
.cpdoc-parties { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 0.75px solid var(--line); }
.cpdoc-box { padding: 11px 14px; }
.cpdoc-box + .cpdoc-box { border-left: 0.75px solid var(--line); }
.cpdoc-lbl { color: var(--faint); font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.cpdoc-who { font-weight: 700; }
.cpdoc-det { color: var(--muted); font-size: 10.5px; margin-top: 2px; line-height: 1.5; }
.cpdoc-det .attn { color: var(--ink); }
.cpdoc-detail { display: flex; border-bottom: 0.75px solid var(--line); }
.cpdoc-detail .cpdoc-cell { border-right: 0.75px solid var(--line); }
.cpdoc-detail .cpdoc-cell:last-child { border-right: 0; text-align: right; }
.cpdoc-table { width: 100%; border-collapse: collapse; margin-top: 0; }
.cpdoc-table thead th { background: var(--head); color: #3d3c37; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; text-align: left; padding: 7px 7px; border-bottom: 0.75px solid var(--head-line); }
.cpdoc-table th.r, .cpdoc-table td.r { text-align: right; }
.cpdoc-table th.c, .cpdoc-table td.c { text-align: center; }
.cpdoc-table tbody td { padding: 9px 7px; vertical-align: top; font-size: 10.5px; border-bottom: 1px solid var(--line-strong); }
.cpdoc-table .desc { color: #4a4943; } .cpdoc-table .pn { font-weight: 700; } .cpdoc-table .job { color: var(--muted); }
.cpdoc-footer { display: grid; grid-template-columns: 1fr 220px; gap: 26px; align-items: start; padding-top: 16px; }
.cpdoc-sign { max-width: 280px; }
.cpdoc-sign-line { border-bottom: 1px solid var(--ink); height: 26px; display: flex; align-items: flex-end; padding-bottom: 2px;
  font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 17px; }
.cpdoc-sign-cap { color: var(--faint); font-size: 9.5px; margin-top: 4px; }
.cpdoc-count { display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--line-strong); padding: 12px 16px; }
.cpdoc-count .lbl { font-size: 14px; font-weight: 700; } .cpdoc-count .val { font-size: 16px; font-weight: 700; }
.cpdoc-signoff { margin-top: 26px; border-top: 0.75px solid var(--line); padding-top: 18px; }
.cpdoc-so-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin-bottom: 16px; }
.cpdoc-so-row { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; font-size: 10.5px; }
.cpdoc-so-lbl { white-space: nowrap; font-weight: 600; color: #3d3c37; min-width: 210px; }
.cpdoc-so-line { flex: 1; border-bottom: 1px solid var(--ink); height: 15px; }
.cpdoc-so-date { white-space: nowrap; color: var(--muted); font-weight: 600; margin-left: 8px; }
.cpdoc-so-line.sm { flex: 0 0 130px; }
@media print {
  .cpdoc-screen { position: static; background: #fff; overflow: visible; }
  .cpdoc-page { width: auto; min-height: auto; margin: 0; box-shadow: none; padding: 0; }
  @page { size: letter; margin: 0.5in; }
}

/* Receiving barcode labels — a full-viewport print takeover (reuses the .traveler
   chrome: fixed on screen, toolbar hidden in print). Prints scannable Digit
   barcodes (item.scanCodeSerialNumber) — one card per copy, laid out as a sheet.
   Barcode SVGs come from CPBarcode (barcode.js). */
.rcvlabel-loading { padding: var(--space-6); text-align: center; }
.rcvlabel-setup { max-width: 940px; margin: var(--space-4) auto 0; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.rcvlabel-setup-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin-bottom: var(--space-2); }
.rcvlabel-setup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px var(--space-4); }
.rcvlabel-setup-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-sm); }
.rcvlabel-setup-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcvlabel-copies { width: 60px; text-align: center; padding: 4px 6px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.rcvlabel-sheet { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; align-content: flex-start;
  max-width: 1000px; margin: var(--space-4) auto var(--space-6); }
.rcvlabel-card { width: 2.6in; box-sizing: border-box; background: #fff; color: #000; border: 1px solid #d4d4d8;
  border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; break-inside: avoid; }
.rcvlabel-name { font-weight: var(--fw-bold); font-size: 12px; text-align: center; line-height: 1.15; }
.rcvlabel-desc { font-size: 9px; color: #52525b; text-align: center; line-height: 1.15; max-height: 2.4em; overflow: hidden; }
.rcvlabel-meta { display: flex; flex-wrap: wrap; gap: 1px 8px; justify-content: center; font-size: 8.5px; color: #3f3f46; }
.rcvlabel-bc { margin-top: 2px; display: flex; justify-content: center; width: 100%; }
.rcvlabel-bc svg { max-width: 100%; height: auto; }
.rcvlabel-card--qr .rcvlabel-bc svg { width: 100px; height: 100px; }
.rcvlabel-code { font-size: 8.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #000; word-break: break-all; text-align: center; }
@media print {
  .rcvlabel-setup { display: none; }
  .rcvlabel-sheet { max-width: none; margin: 0; gap: 0.12in; justify-content: flex-start; }
  .rcvlabel-card { border-color: #000; }
  @page { size: letter; margin: 0.4in; }
}

/* QC detail modal — header info row (WO / Customer / Stage / Due / Hours / Units)
   on one line with vertical gray dividers (Digit PO-modal pattern, ref/Modal.png). */
.qc-head-icon { display: inline-flex; align-items: center; color: var(--color-muted); margin-top: 2px; }
.qc-headrow { display: flex; align-items: stretch; margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-faint); }
.qc-headrow .kv { flex: 1; min-width: 0; padding: var(--space-2) var(--space-4) var(--space-3);
  border-left: 1px solid var(--color-border-faint); }
.qc-headrow .kv:first-child { border-left: none; padding-left: 0; }
/* No gap between the sticky header and the first content row. */
.qc-modal-head { margin-bottom: 0; }
/* Work-progress table: horizontal row lines bleed to the modal card's edges
   (offset the .card 20px padding); vertical column separators like the queue grid. */
.qc-wp-scroll { margin-left: calc(-1 * var(--space-5)); margin-right: calc(-1 * var(--space-5)); }
.qc-wp { width: 100%; }
.qc-wp th:first-child, .qc-wp td:first-child { padding-left: var(--space-5); }
.qc-wp th:last-child, .qc-wp td:last-child { padding-right: var(--space-5); }
.qc-wp th, .qc-wp td { border-right: 1px solid var(--color-border-faint); }
.qc-wp th:last-child, .qc-wp td:last-child { border-right: none; }
/* Note cell reads like an Excel cell — no input chrome, fills the cell, only
   shows a focus underline when edited. */
.qc-note-input { border: none; background: transparent; border-radius: 0;
  padding: var(--space-1) 0; box-shadow: none; width: 100%; }
.qc-note-input:focus { outline: none; box-shadow: none;
  border-bottom: 1px solid var(--color-accent); }
/* Units side panel + per-unit form (QC modal). */
.qc-units-layout { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-2); }
.qc-unit-nav { flex: none; width: 170px; border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-md, 8px); overflow: hidden; align-self: stretch;
  position: sticky; top: 0; max-height: 60vh; display: flex; flex-direction: column; }
.qc-unit-nav-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); padding: var(--space-2) var(--space-3); font-weight: 600;
  font-size: var(--fs-sm); border-bottom: 1px solid var(--color-border-faint);
  background: var(--color-surface-alt, #f9f9f9); }
.qc-unit-nav-list { overflow-y: auto; }
.qc-unit-nav-item { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--color-border-faint); padding: var(--space-2) var(--space-3);
  cursor: pointer; font: inherit; }
.qc-unit-nav-item:hover { background: var(--color-surface-alt, #f5f5f5); }
.qc-unit-nav-item.is-active { background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--color-accent); }
.qc-unit-nav-no { font-weight: 600; font-size: var(--fs-sm); }
.qc-unit-form { flex: 1; min-width: 0; }
/* Inside the unit column the work-progress table is no longer full-bleed. */
.qc-unit-form .qc-wp-scroll { margin-left: 0; margin-right: 0; }
.qc-unit-form .qc-wp th:first-child, .qc-unit-form .qc-wp td:first-child { padding-left: var(--space-2); }
.qc-unit-form .qc-wp th:last-child, .qc-unit-form .qc-wp td:last-child { padding-right: var(--space-2); }
.qc-unit-form-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }

/* QC detail modal — two-pane shell (shared with shipping/PO): units picker in the
   right side-nav, the selected unit's work progress in the left main body. */
.modal-card--qc { width: 1200px; }
.qc-doc .form-subhead:first-child { margin-top: 0; }
/* Side nav sits on the LEFT: divider on its right edge, not its left. */
.modal-card--qc .shipreq-form.qc-nav { border-left: none; border-right: 1px solid var(--color-border); }
/* Units are full-width buttons. */
.qc-unit-picker { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.qc-unit-picker .qc-unit-nav-item { border: 1px solid var(--color-border-faint); border-radius: var(--radius-input); }
.qc-nav-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.shipreq-history-pane { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); }
/* Collapsible "Status & project info" block at the top of the nav. */
.qc-collapse { border-bottom: 1px solid var(--color-border); margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5); }
.qc-collapse-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.qc-collapse-summary::-webkit-details-marker { display: none; }
.qc-collapse-summary .icon { width: 14px; height: 14px; color: var(--color-muted); transition: transform .15s ease; }
.qc-collapse[open] .qc-collapse-summary .icon { transform: rotate(180deg); }
.qc-collapse-body { padding-bottom: var(--space-3); }
.qc-mini-head { font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin: var(--space-3) 0 var(--space-2); }

/* Clock in/out screen. */
.clock-list { display: flex; flex-direction: column; }
.clock-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-faint); }
.clock-row--on { background: color-mix(in srgb, var(--color-success-text, #1a7f37) 6%, transparent); }
.clock-row-main { flex: 1; min-width: 0; }
.clock-row-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.clock-who { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.clock-who--me { font-weight: 600; }
.clock-row-action { flex: none; }
.clock-btn--on { background: var(--color-success-text, #1a7f37); border-color: var(--color-success-text, #1a7f37); color: #fff; }
.clock-btn--on:hover { filter: brightness(1.05); }

/* QC History tab — Slack/Asana-style activity + comment feed. */
.qc-hist { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); }
.qc-hist-msg { display: flex; gap: var(--space-3); align-items: flex-start; }
.qc-hist-msg .avatar { flex: none; }
.qc-hist-msg-body { flex: 1; min-width: 0; }
.qc-hist-msg-head { display: flex; align-items: baseline; gap: var(--space-2); }
.qc-hist-name { font-weight: var(--fw-semibold); }
.qc-hist-time { color: var(--color-muted); font-size: var(--fs-sm); }
.qc-hist-msg-head .qc-hist-time { margin-left: auto; }
.qc-hist-text { color: var(--color-text); white-space: pre-wrap; margin-top: 2px; }
.qc-hist-activity { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--fs-sm); }
.qc-hist-act-text { flex: 1; min-width: 0; }
.qc-hist-act-text strong { color: var(--color-text); font-weight: var(--fw-medium); }
.qc-hist-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-border); flex: none; }
.qc-hist-composer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border-faint); }

/* ===========================================================================
   MO time clock — shop-floor kiosk (landscape tablet). Full-screen takeover,
   large touch targets. First kiosk layer in the app.
   =========================================================================== */
.moclock { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--color-canvas); overflow-y: auto; padding: var(--space-5) var(--space-6) var(--space-8); }
.moclock-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-canvas); z-index: 1; }
.moclock-head-left { display: flex; flex-direction: column; gap: 2px; }
.moclock-head-right { display: flex; gap: var(--space-3); }
.moclock-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-text); }
.moclock-as { font-size: var(--fs-md); color: var(--color-muted); }
.moclock-as-name { color: var(--color-text); font-weight: var(--fw-semibold); }
.moclock-btn-lg { height: 52px; font-size: var(--fs-md); padding: 0 var(--space-4); }
.moclock-sub { font-size: var(--fs-lg); color: var(--color-muted); margin: var(--space-5) 0 var(--space-4); }
.moclock-empty { flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); font-size: var(--fs-lg); padding: var(--space-8); text-align: center; }

/* Operator picker */
.moclock-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.moclock-op { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); cursor: pointer; min-height: 150px; justify-content: center; transition: border-color .1s, box-shadow .1s; }
.moclock-op:hover { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-hover); }
.moclock-op-avatar { width: 64px; height: 64px; border-radius: 999px; background: var(--color-accent);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.moclock-op-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); text-align: center; }
.moclock-op-role { font-size: var(--fs-sm); color: var(--color-muted); }

/* MO grid */
.moclock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.moclock-mo { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.moclock-mo--on { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-hover); }
.moclock-mo-top { display: flex; align-items: center; justify-content: space-between; }
.moclock-mo-wo { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-muted); letter-spacing: .02em; }
.moclock-mo-proj { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-accent); }
.moclock-mo-part { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.25; }
.moclock-mo-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-muted); }
.moclock-due-late { color: var(--color-danger-text); font-weight: var(--fw-medium); }
.moclock-mo-who { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 26px; align-items: center; }
.moclock-who { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--color-text);
  background: var(--color-surface-alt); border-radius: var(--radius-pill); padding: 2px 8px 2px 2px; }
.moclock-who-none { font-size: var(--fs-sm); color: var(--color-muted); }
.moclock-action { margin-top: var(--space-2); height: 56px; border: none; border-radius: var(--radius-input);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.moclock-action:disabled { opacity: .6; cursor: default; }
.moclock-action--start { background: var(--color-accent); }
.moclock-action--stop { background: var(--color-danger-text); }
.moclock-elapsed { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); opacity: .95; }
/* v51: work-center picker on the MO tile (tech clocks into a specific center). */
.moclock-mo-active { display: flex; flex-direction: column; gap: var(--space-1); }
.moclock-mo-wc { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-accent);
  text-align: center; }
.moclock-wc-pick { margin-top: var(--space-2); }
.moclock-wc-pick-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: center;
  margin-bottom: var(--space-2); color: var(--color-text-muted); }
.moclock-wc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.moclock-wc-btn { height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-surface); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.moclock-wc-btn:hover:not(:disabled) { background: var(--color-bg-subtle, #f4f4f5); border-color: var(--color-accent); }
.moclock-wc-btn:disabled { opacity: .6; cursor: default; }
.moclock-wc-cancel { width: 100%; margin-top: var(--space-2); height: 40px; border: none; background: transparent;
  color: var(--color-text-muted); font-size: var(--fs-sm); cursor: pointer; }
/* v26: on-shift chip on the roster + overhead tile accent. */
.moclock-op-onshift { margin-top: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--pill-green-text); background: var(--pill-green-bg); padding: 2px var(--space-2); border-radius: 999px; }
.moclock-mo--overhead { border-style: dashed; }

/* v26: PIN pad (shared-tablet identity gate). */
.moclock-pin { max-width: 520px; width: 100%; margin: var(--space-6) auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.moclock-pin-who { display: flex; align-items: center; gap: var(--space-3); }
.moclock-pin-who .moclock-op-avatar { width: 44px; height: 44px; font-size: var(--fs-md); }
.moclock-pin-prompt { font-size: var(--fs-lg); color: var(--color-muted); }
.moclock-pin-dots { display: flex; gap: var(--space-4); margin: var(--space-2) 0; }
.moclock-pin-dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--color-border); }
.moclock-pin-dot.is-filled { background: var(--color-accent); border-color: var(--color-accent); }
.moclock-pin-error { color: var(--color-danger-text); font-weight: var(--fw-medium); }
.moclock-pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); width: 100%; }
.moclock-pin-key { height: 84px; font-size: var(--fs-2xl); font-weight: var(--fw-semibold); cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); }
.moclock-pin-key:hover:not(:disabled) { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-hover); }
.moclock-pin-key:disabled { opacity: .5; cursor: default; }
.moclock-pin-key--util { font-size: var(--fs-lg); color: var(--color-muted); }

/* v26: authenticated clock screen — shift bar + break + gated work grid. */
.moclock-screen { display: flex; flex-direction: column; }
.moclock-shift { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); margin-top: var(--space-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); background: var(--color-surface); }
.moclock-shift.is-on { border-color: var(--color-accent); }
.moclock-shift-info { display: flex; flex-direction: column; gap: 2px; }
.moclock-shift-label { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.moclock-shift-clock { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.moclock-shift-sub { font-size: var(--fs-sm); color: var(--color-muted); }
.moclock-shift-actions { display: flex; gap: var(--space-3); }
.moclock-endday { background: var(--color-danger-text); color: #fff; border: none; }
.moclock-grid.is-gated .moclock-mo { opacity: .55; }

/* Master purchasing table — timeline (future-dated long-lead purchases). */
.pm-tl-group { margin-bottom: var(--space-5); }
.pm-tl-month { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text);
  padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); }
.pm-tl-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-faint); font-size: var(--fs-base); }
.pm-tl-date { font-variant-numeric: tabular-nums; color: var(--color-muted); min-width: 96px; }

/* Per-user tab permissions modal (schema_v40) — two-pane user list + tab toggles.
   The header (title + subtext) bleeds full-width; the body bleeds to the card
   edges too so the vertical divider meets the header + the modal bottom, and the
   section rules span edge-to-edge. */
.perm-subtext { margin: var(--space-2) 0 0; font-size: var(--fs-sm); max-width: 640px; }
/* Body butts flush against the header border (no gap) and bleeds L/R/bottom to
   the card edges (cancels the card's space-5 padding). */
.modal-card--perm .invoice-modal-head { margin-bottom: 0; padding-bottom: var(--space-4); }
.perm-body { display: flex; gap: 0; max-height: 62vh;
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); }
.perm-left { flex: none; width: 240px; border-right: 1px solid var(--color-border);
  overflow-y: auto; padding: var(--space-2) var(--space-3); }
.perm-right { flex: 1; overflow-y: auto; padding: 0; }
.perm-users { display: flex; flex-direction: column; gap: 2px; }
.perm-user { display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2); border: none; background: none; border-radius: var(--radius-input);
  cursor: pointer; text-align: left; font-size: var(--fs-base); color: var(--color-text); }
.perm-user:hover { background: var(--color-hover); }
.perm-user--active { background: var(--color-surface-alt); font-weight: var(--fw-semibold); }
.perm-avatar { flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--color-surface-alt); color: var(--color-label); display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-semibold); }
.perm-user--active .perm-avatar { background: var(--color-text); color: #fff; }
.perm-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-section { margin: 0; }
/* Section title rule spans the full right pane — meets the vertical divider on
   the left and the modal edge on the right. */
.perm-section-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-label);
  padding: var(--space-3) var(--space-4) var(--space-2); margin: 0;
  border-bottom: 1px solid var(--color-border); }
.perm-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-4); }
.perm-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  border-radius: var(--radius-input); cursor: pointer; font-size: var(--fs-base); }
.perm-row:hover { background: var(--color-hover); }
.perm-row input { cursor: pointer; accent-color: var(--color-text); }
.perm-row--locked { cursor: default; color: var(--color-label); }
.perm-row-label { flex: 1; }
.perm-lock { color: var(--color-muted); display: inline-flex; }
.perm-lock .icon { width: 13px; height: 13px; }

/* ===== Warehouse Pick Session (full-viewport takeover; wedge-scan optimized) === */
.pick-session { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text); }
.pick-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.pick-head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.pick-sub { font-size: var(--fs-sm); color: var(--color-muted); }
.pick-head-right { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.pick-progress { display: flex; align-items: center; gap: var(--space-2); }
.pick-progress-bar { width: 160px; height: 8px; border-radius: 999px; background: var(--color-border-faint); overflow: hidden; }
.pick-progress-fill { height: 100%; background: var(--pill-green-text); transition: width .2s ease; }
.pick-progress-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }

.pick-scanbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border); background: var(--banner-bg); }
.pick-scan-wrap { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 380px;
  background: var(--color-bg); border: 2px solid var(--color-accent); border-radius: var(--radius-input, 8px);
  padding: 0 var(--space-3); height: 44px; }
.pick-scan-wrap .icon { width: 18px; height: 18px; color: var(--color-muted); flex-shrink: 0; }
.pick-scan-input { border: none; outline: none; background: transparent; font-size: var(--fs-lg); width: 100%; height: 100%; color: var(--color-text); }
.pick-msg { font-size: var(--fs-base); font-weight: var(--fw-medium); flex: 1; }
.pick-msg--hint { color: var(--color-muted); font-weight: 400; }
.pick-msg--ok { color: var(--pill-green-text); }
.pick-msg--info { color: var(--color-accent); }
.pick-msg--err { color: var(--pill-red-text); }

.pick-body { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); }
.pick-group-head { display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--color-bg); padding: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--color-border); margin-top: var(--space-3); z-index: 1; }
.pick-group-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.pick-group-title .icon { width: 16px; height: 16px; color: var(--color-muted); }
.pick-group-count { font-size: var(--fs-sm); color: var(--color-muted); }

.pick-line { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border-faint); }
.pick-line--done { opacity: .55; }
.pick-line--done .pick-line-name { text-decoration: line-through; }
.pick-check { flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; border: 2px solid var(--color-border);
  background: var(--color-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pick-check:hover { border-color: var(--pill-green-text); }
.pick-check--on { background: var(--pill-green-text); border-color: var(--pill-green-text); }
.pick-check .icon { width: 20px; height: 20px; color: #fff; stroke-width: 3; }
.pick-line-main { flex: 1; min-width: 0; }
.pick-line-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.pick-line-sub { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); margin-top: 2px; }
.pick-line-center { padding: 1px 6px; border-radius: 4px; background: var(--color-border-faint); }
.pick-line-wo { padding: 1px 6px; border-radius: 4px; background: var(--banner-bg); color: var(--color-accent); font-weight: var(--fw-semibold); }
.pick-line-qty { flex: 0 0 110px; text-align: right; }
.pick-qty-num { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.pick-qty-avail { font-size: var(--fs-xs); color: var(--color-muted); }
.pick-qty-avail--short { color: var(--pill-red-text); font-weight: var(--fw-semibold); }
.pick-line-bin { flex: 0 0 130px; }
.pick-bin { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--pill-amber-bg); color: var(--pill-amber-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.pick-bin .icon { width: 14px; height: 14px; }

.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); }
.pick-center-chips { display: flex; flex-wrap: wrap; gap: 4px; }