/* ============================================================================
   HP Cookers RFQ — module-specific components ONLY.

   Layer 3 of 3. design-tokens.css holds every colour/space/radius; app-shell.css
   holds the shared chrome (.content, .title-row, .tab-row, .toolbar, .table,
   .btn, .input, .badge) and is consumed AS-IS — nothing here restyles a shell
   class. Every value below references a token; no hard-coded hex or spacing.
   ============================================================================ */

/* ---- App canvas + sticky header (v3 shell) -------------------------------- *
   The module owns the whole page: everything sits on the --color-app-bg canvas
   and white cards float on top. The canonical header (title row + tab row) lives
   in a sticky .app-header so the view body scrolls under it. */
/* Main/list pages sit on a WHITE canvas (the token defaults to a gray page
   canvas; this module overrides it to white). Detail pages instead use a light
   gray canvas + header so the white cards float on it. */
:root {
  --color-app-bg: var(--color-bg);   /* white for the list pages */
  --color-detail-bg: #f8f8f8;        /* the detail-page canvas + header */
}
.app-canvas { min-height: 100vh; background: var(--color-app-bg); }
.app-canvas--detail,
.app-canvas--detail .app-header { background: var(--color-detail-bg); }
body { overflow-x: hidden; }

/* Quiet custom scrollbars app-wide (DESIGN.md): slim rounded thumb, no track. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .14); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .28); }
*::-webkit-scrollbar-corner { background: transparent; }

.app-header {
  position: sticky; top: 0; z-index: 30;   /* under modals (40+) and toasts (60) */
  background: var(--color-app-bg);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8)) 0;
  padding: var(--space-4) var(--space-8) 0;
}
/* Re-apply the shell's full-bleed tab underline one level deeper. */
.app-header .tab-row {
  margin: var(--space-2) calc(-1 * var(--space-8)) 0;
  padding: 0 var(--space-8);
}
.app-header .tab { height: 40px; color: var(--color-text); border-bottom-width: 2px; }
.app-header .tab .icon { width: 15px; height: 15px; }
.app-header .tab--active { font-weight: var(--fw-semibold); }
/* Flush: the list table sits directly under the sticky header. The centered
   docs (detail / settings) restore their own top breathing room via .doc. */
.view-body { padding-top: 0; }

/* Table headers carry a top border (module addition, layered over the shell —
   the shell class itself is untouched). Applies to the list and the line grid. */
#tab-body .table thead th { border-top: 1px solid var(--color-border); }
.lines thead th { border-top: 1px solid var(--color-border); }

/* ---- Detail page (breadcrumb header) -------------------------------------- */
.app-header--detail { border-bottom: 1px solid var(--color-border-faint); padding-bottom: var(--space-3); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--color-label); margin-bottom: var(--space-2); }
.crumb-link { background: none; border: none; cursor: pointer; color: var(--color-label);
  font: inherit; font-size: var(--fs-sm); padding: 0; }
.crumb-link:hover { color: var(--color-text); text-decoration: underline; }
.crumb-sep { width: 14px; height: 14px; color: var(--color-muted); }
.crumb-current { color: var(--color-text); }
.detail-heading { display: flex; align-items: center; gap: var(--space-3); }
.detail-heading .page-title { margin: 0; }

/* ---- Status pills ----------------------------------------------------------
   The onboarding-plans "option pill" (its js/option-colors.js + .okr-opt-pill):
   Asana-style 5px corners, tight padding, mid-pastel background, near-black
   ink. Colour → meaning is unchanged (DESIGN.md); only the look is ported.
   The soft --pill-* tokens still drive banners and grid highlights. */
:root {
  --opt-ink: #1e1e1e;
  --opt-gray: #e4e4e4;  --opt-blue: #8aaef6;  --opt-green: #84cc84;  --opt-red: #ea7e6c;
  --opt-amber: #eab44e; --opt-yellow: #f6d236; --opt-purple: #c684de;
}
.pill {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 1px 4px; border-radius: 5px; line-height: 18px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; color: var(--opt-ink);
}
.pill--blue   { background: var(--opt-blue);   color: var(--opt-ink); }
.pill--gray   { background: var(--opt-gray);   color: var(--opt-ink); }
.pill--green  { background: var(--opt-green);  color: var(--opt-ink); }
.pill--red    { background: var(--opt-red);    color: var(--opt-ink); }
.pill--amber  { background: var(--opt-amber);  color: var(--opt-ink); }
.pill--yellow { background: var(--opt-yellow); color: var(--opt-ink); }
.pill--violet { background: var(--opt-purple); color: var(--opt-ink); }

/* Direction chip (sales vs purchase) — quiet, informational. */
.dir-chip { font-size: var(--fs-sm); color: var(--color-label); display: inline-flex; align-items: center; gap: 4px; }
.dir-chip .icon { width: 14px; height: 14px; }

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

/* ---- Empty state + loading ------------------------------------------------ */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-label);
}
.empty-icon { width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-card); background: var(--color-surface-alt); color: var(--color-muted); }
.empty-icon .icon { width: 22px; height: 22px; }
.empty-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); }
.empty-detail { font-size: var(--fs-base); max-width: 42ch; }

.loading { display: flex; align-items: center; gap: var(--space-2); color: var(--color-label);
  padding: var(--space-6) 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon--spin { animation: spin 1s linear infinite; }

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

/* ---- Modal ---------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.28);
  display: grid; place-items: center; padding: var(--space-4); }
.modal { width: 100%; max-width: 520px; background: var(--color-bg);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md); overflow: hidden;
  display: flex; flex-direction: column; max-height: 90vh; }
.modal--wide { max-width: 820px; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4); border-bottom: 1px solid var(--color-border-faint); }
.modal-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.modal-body { padding: var(--space-4); overflow-y: auto; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-faint); }
.modal-text { margin: 0 0 var(--space-2); color: var(--color-text); }

.btn--danger { background: var(--pill-red-bg); color: var(--pill-red-text); }
.btn--danger:hover { background: var(--pill-red-text); color: var(--color-bg); }
.icon-ghost.icon-ghost--danger:hover { background: var(--pill-red-bg); color: var(--pill-red-text); }

/* ---- Cards + fields (label above value) ----------------------------------- */
.card {
  background: var(--color-bg); border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: var(--space-5); margin-bottom: var(--space-4);
}
.doc { max-width: var(--doc-max-width); margin: var(--space-5) auto 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4); }
.card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.card-sub { color: var(--color-label); font-size: var(--fs-sm); }

.field { display: flex; flex-direction: column; gap: 2px; }
.field-label { font-size: var(--fs-sm); color: var(--color-label); }
.field-value { font-size: var(--fs-base); color: var(--color-text); }

/* Form grid used in the detail doc + create modal. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid .fld--full { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: var(--space-1); }
.fld-label { font-size: var(--fs-sm); color: var(--color-label); font-weight: var(--fw-medium); }
.fld .input, .fld textarea.input { width: 100%; }

/* ---- Detail header -------------------------------------------------------- */
.detail-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.detail-back { display: inline-flex; align-items: center; gap: 4px; color: var(--color-label);
  background: none; border: none; cursor: pointer; font-size: var(--fs-base); padding: 0; }
.detail-back:hover { color: var(--color-text); }
.detail-num { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.detail-meta { display: flex; align-items: center; gap: var(--space-3); color: var(--color-label);
  font-size: var(--fs-sm); flex-wrap: wrap; }

/* ---- Line-items grid ------------------------------------------------------ */
.lines { width: 100%; border-collapse: collapse; font-size: var(--fs-base); margin-top: var(--space-2); }
.lines th { text-align: left; font-weight: var(--fw-regular); color: var(--color-label);
  font-size: var(--fs-sm); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border-faint); }
.lines td { padding: 3px var(--space-2); border-bottom: 1px solid var(--color-border-faint); vertical-align: middle; }
.lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.lines .input { height: 30px; border-color: transparent; background: transparent; padding: 0 var(--space-2); }
.lines .input:focus { border-color: var(--color-border); background: var(--color-bg); outline: none; }
.lines .col-item { width: 34%; }
.lines .col-qty  { width: 90px; }
.lines .col-uom  { width: 90px; }
.lines .col-price { width: 120px; }
.lines .col-amt  { width: 110px; }
.lines .col-x    { width: 34px; }
.line-item-name { font-weight: var(--fw-medium); }
.line-item-link { font-size: var(--fs-2xs); color: var(--color-label); display: flex; align-items: center; gap: 3px; }
.line-item-link .icon { width: 11px; height: 11px; }
.line-item-link.line-item-link--unlinked { color: var(--pill-amber-text); }

.totals { display: flex; justify-content: flex-end; gap: var(--space-6); margin-top: var(--space-4);
  padding-top: var(--space-1); }
.totals .field-value { font-size: var(--fs-md); font-weight: var(--fw-semibold); }


/* ---- shadcn-style dropdown (build once, reuse) — DESIGN.md golden rule 5 --- */
.menu-host { position: relative; display: inline-block; }
.menu-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  height: var(--control-height); min-width: 140px; padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--fs-base);
  cursor: pointer; white-space: nowrap;
}
.menu-trigger:hover { background: var(--color-hover); }
.menu-trigger .icon { width: 15px; height: 15px; color: var(--color-label); }
.menu-trigger--sm { height: 28px; min-width: 0; }
.menu {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 180px;
  background: var(--color-bg); border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-input); box-shadow: var(--shadow-md);
  padding: var(--space-1); max-height: 320px; overflow-y: auto;
}
.menu--right { left: auto; right: 0; }
.menu-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-2); border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-base); color: var(--color-text); text-align: left;
  border-radius: calc(var(--radius-input) - 2px);
}
.menu-item:hover, .menu-item--active { background: var(--color-hover); }
.menu-item .menu-check { margin-left: auto; color: var(--color-accent); width: 15px; height: 15px; opacity: 0; }
.menu-item--selected .menu-check { opacity: 1; }
.menu-sep { height: 1px; background: var(--color-border-faint); margin: var(--space-1) var(--space-2); }

/* ---- Digit search combobox ------------------------------------------------ */
.combo { position: relative; }
.combo .input { width: 100%; }
.combo-field { position: relative; }
.combo-field .combo-input { padding-right: 30px; cursor: pointer; }
.combo-field .combo-input:focus { cursor: text; }
.combo-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--color-label); pointer-events: none; }
.combo-panel--busy { opacity: .6; }
.combo-panel {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--color-bg); border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-input); box-shadow: var(--shadow-md);
  padding: var(--space-1); max-height: 300px; overflow-y: auto;
}
.combo-opt { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: var(--space-2);
  border: none; background: none; cursor: pointer; text-align: left; font: inherit;
  border-radius: calc(var(--radius-input) - 2px); }
.combo-opt:hover, .combo-opt--active { background: var(--color-hover); }
.combo-opt-title { font-size: var(--fs-base); color: var(--color-text); font-weight: var(--fw-medium); }
.combo-opt-sub { font-size: var(--fs-sm); color: var(--color-label); }
.combo-empty, .combo-loading { padding: var(--space-3); color: var(--color-label); font-size: var(--fs-sm);
  display: flex; align-items: center; gap: var(--space-2); }

/* The picked-party summary line in the detail doc. */
.party-picked { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); }
.party-picked .icon { width: 15px; height: 15px; color: var(--color-label); }
.party-picked .cell-muted { color: var(--color-muted); }

/* Busy overlay for the push / save loops. */
.busy-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(255,255,255,.55);
  display: grid; place-items: center; }
.busy-card { display: flex; align-items: center; gap: var(--space-3); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); padding: var(--space-4) var(--space-5); }

/* ---- Vendors + quote comparison (views/vendors.js) ------------------------ */
.card-count { margin-left: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-label); background: var(--color-hover); border-radius: var(--radius-pill); padding: 1px 7px; }
.card-title { display: flex; align-items: center; }
.cell-sub { font-size: var(--fs-xs); color: var(--color-label); }
.cell-ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; color: var(--pill-violet-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.banner .spacer { flex: 1; }
.source-note { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-3) var(--space-1); }
.source-note .icon { width: 13px; height: 13px; }
.check-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); }

.card-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Multi-select picker modal (ui.js multiPicker). */
.mpick .modal-body { display: flex; flex-direction: column; gap: var(--space-3); }
.mpick .input[type=search] { width: 100%; }
.mpick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mpick-chips:empty { display: none; }
.mpick-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; font-size: var(--fs-sm);
  background: var(--pill-blue-bg); color: var(--pill-blue-text); border-radius: var(--radius-pill); }
.mpick-chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border: none; background: none;
  color: inherit; cursor: pointer; border-radius: 50%; padding: 0; }
.mpick-chip-x:hover { background: rgba(0,0,0,.08); }
.mpick-chip-x .icon { width: 12px; height: 12px; }
/* Full-bleed list: cancels the modal body's side + bottom padding so row tints
   run edge to edge; rows re-indent their content to line up with the search. */
.mpick .modal-body { padding-bottom: 0; }
.mpick-list { height: min(52vh, 460px); overflow-y: auto; margin: 0 calc(-1 * var(--space-4));
  border-top: 1px solid var(--color-border-faint); }
.mpick-list > .combo-empty, .mpick-list > .combo-loading { padding: var(--space-3) var(--space-4); }
.mpick-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-faint); cursor: pointer; }
.mpick-row:hover { background: var(--color-hover); }
.mpick-row--on { background: var(--pill-blue-bg); }
.mpick-row--on:hover { background: var(--pill-blue-bg); }
.mpick-row--off { cursor: default; opacity: .6; }
.mpick-row input { flex: none; width: 16px; height: 16px; accent-color: var(--color-accent); }
.mpick-name { font-weight: var(--fw-medium); }
.vendor-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.vendor-table .col-email { width: 34%; }
.vendor-table .col-email .input { width: 100%; border-color: transparent; }
.vendor-table .col-email .input:hover { border-color: var(--color-border-faint); }
.vendor-table .col-actions { width: 110px; text-align: right; white-space: nowrap; }
.input.input--sm { height: 30px; font-size: var(--fs-sm); padding: 0 var(--space-2); }

.send-list { display: flex; flex-direction: column; gap: 2px; margin: var(--space-3) 0; max-height: 280px; overflow-y: auto; }
.send-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  border-radius: var(--radius-input); cursor: pointer; }
.send-row:hover { background: var(--color-hover); }
.send-row--off { opacity: .55; cursor: not-allowed; }
.send-name { font-weight: var(--fw-medium); }

/* Send → Preview step: the real email, rendered in a sandboxed frame. */
.modal-foot .spacer { flex: 1; }
.mail-switch { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.mail-meta { border: 1px solid var(--color-border-faint); border-radius: var(--radius-input) var(--radius-input) 0 0;
  padding: var(--space-2) var(--space-3); background: var(--color-surface-alt); }
.mail-meta-row { display: flex; align-items: center; gap: var(--space-3); padding: 3px 0; font-size: var(--fs-sm); }
.mail-meta-k { width: 80px; flex: none; color: var(--color-label); }
.mail-meta-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mail-frame { display: block; width: 100%; height: min(52vh, 520px); border: 1px solid var(--color-border-faint);
  border-top: none; border-radius: 0 0 var(--radius-input) var(--radius-input); background: #fff; }

.dropzone { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-card); margin-bottom: var(--space-4);
  background: var(--color-surface-alt); }
.dropzone > .icon { width: 22px; height: 22px; color: var(--color-label); flex: none; }
.dropzone-title { font-weight: var(--fw-medium); }
.dropzone .spacer { flex: 1; }
.compare-card { position: relative; }
.compare-card.drop-over .dropzone, .cmp-vendor.drop-over { border-color: var(--color-accent);
  background: var(--pill-blue-bg); }
.compare-card.drop-over .dropzone .icon { color: var(--color-accent); }
.cmp-vendor.drop-over { outline: 2px dashed var(--color-accent); outline-offset: -2px; }

.cmp-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--space-2)); }
.cmp { border-collapse: collapse; width: 100%; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: var(--space-2); border-bottom: 1px solid var(--color-border-faint); vertical-align: top; }
.cmp thead th { text-align: left; font-weight: var(--fw-regular); color: var(--color-label); font-size: var(--fs-sm);
  vertical-align: bottom; border-bottom-color: var(--color-border); }
.cmp .cmp-item { min-width: 220px; width: 30%; }
.cmp .num { text-align: right; }
.cmp-vendor { min-width: 170px; border-radius: var(--radius-input) var(--radius-input) 0 0; }
.cmp-vendor--won { background: var(--pill-violet-bg); }
.cmp-vendor-name { color: var(--color-text); font-weight: var(--fw-semibold); font-size: var(--fs-base);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-vendor-meta { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.cmp-vendor-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.cmp-cell .input { width: 100%; text-align: right; border-color: transparent; background: transparent; }
.cmp-cell .input:hover { border-color: var(--color-border-faint); }
.cmp-cell .input:focus { border-color: var(--color-border); background: var(--color-bg); outline: none; }
.cmp-cell .cell-sub { text-align: right; padding-right: var(--space-2); }
.cmp-note { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
.cmp-cell--best { background: var(--pill-green-bg); }
.cmp-cell--best .input, .cmp-cell--best .cell-strong { color: var(--pill-green-text); font-weight: var(--fw-semibold); }
.cmp-cell--filled { box-shadow: inset 3px 0 0 var(--color-accent); }
.cmp tfoot td { border-bottom: none; }
.cmp-total td { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.cmp-meta td { padding-top: 2px; padding-bottom: 2px; }
.cmp-meta .input { width: 100%; }
.cmp-meta textarea.input { font-size: var(--fs-sm); min-height: 0; }

/* Disabled controls (the shell has no disabled state). */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }
.input:disabled { color: var(--color-label); cursor: not-allowed; }

/* ---- Peek (right slide-over, dom.js peek()) — same as the sibling modules -- */
.peek-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(12, 10, 9, .28); }
.peek {
  position: absolute; top: 0; right: 0; height: 100%; width: 480px; max-width: 96vw; background: var(--color-bg); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .18s ease;
}
.peek--wide { width: 720px; }
.peek--xwide { width: 1280px; }
.peek-body.peek-body--flush { padding: 0; overflow: hidden; display: flex; }
.peek--open { transform: translateX(0); }
.peek-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--color-border-faint); }
.peek-head .icon { color: var(--color-label); }
.peek-title { flex: 1; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.peek-body { padding: var(--space-4); overflow-y: auto; flex: 1; }
.peek-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-faint); }
.peek-body .combo-panel { max-height: calc(100vh - 220px); }

/* ---- New RFQ from a Digit PO (views/frompo.js) ----------------------------- */
.popick { display: flex; flex: 1; min-height: 0; }
.popick-nav { width: 380px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--color-border-faint);
  background: #f9f9f9; /* requested colour; no matching design token */ }
.popick-nav-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); }
.popick-nav-title { flex: 1; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.popick-search { padding: 0 var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-faint); }
.popick-nav-foot { display: flex; flex-direction: column-reverse; gap: var(--space-2); padding: var(--space-3);
  border-top: 1px solid var(--color-border-faint); }
.popick-nav-foot .btn { width: 100%; justify-content: center; }
.popick-search .input { width: 100%; }
.popick-list { flex: 1; overflow-y: auto; }
.popick-list > .combo-empty, .popick-list > .combo-loading { padding: var(--space-3); }
.popick-row { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--color-border-faint);
  padding: var(--space-3); box-shadow: inset 3px 0 0 transparent; }
.popick-row:hover { background: var(--color-hover); }
.popick-row--on, .popick-row--on:hover { background: var(--color-bg); box-shadow: inset -3px 0 0 var(--color-accent); }
.popick-row-top { display: flex; justify-content: space-between; gap: var(--space-2); }
.popick-num { font-weight: var(--fw-semibold); }
.popick-amt { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.popick-vendor { font-size: var(--fs-sm); margin: 1px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popick-detail { flex: 1; min-width: 0; overflow-y: auto; padding: var(--space-5); }
.popick-detail > .combo-loading { padding: 0; }
.popick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.popick-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.popick-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-faint); }
.popick-fields .field-value { overflow-wrap: anywhere; }
.popick-section { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: var(--space-4) 0 var(--space-1); }
.popick-lines td { padding-top: var(--space-2); padding-bottom: var(--space-2); vertical-align: top; }
.popick-lines tfoot td { border-bottom: none; padding-top: var(--space-3); }
.popick-notes { white-space: pre-wrap; font-size: var(--fs-sm); background: var(--color-surface-alt);
  border-radius: var(--radius-input); padding: var(--space-3); }
.popick-explain { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-5);
  font-size: var(--fs-sm); color: var(--color-label); }
.popick-explain .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
@media (max-width: 760px) {
  .popick-nav { width: 44%; }
  .popick-fields { grid-template-columns: 1fr 1fr; }
}
.mpick-foot-extra { margin-right: auto; }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-sm);
  color: var(--color-label); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--color-text); }

/* ---- Per-line award picks + charges in the compare grid ------------------- */
.cmp-cell-row { display: flex; align-items: center; gap: 4px; }
.cmp-cell-row .input { flex: 1; min-width: 0; }
.cmp-cell-row .cmp-val { flex: 1; text-align: right; }
.cmp-pick { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: none; background: none; cursor: pointer; border-radius: 50%; color: var(--color-muted); }
.cmp-pick .icon { width: 16px; height: 16px; }
.cmp-pick:hover { background: var(--color-hover); color: var(--color-text); }
.cmp-pick--on, .cmp-pick--on:hover { color: var(--pill-violet-text); }
.cmp-pick--static { cursor: default; }
.cmp-cell--won { background: var(--pill-violet-bg); box-shadow: inset 0 0 0 1.5px var(--pill-violet-text); }
.cmp-cell--won.cmp-cell--best { background: var(--pill-violet-bg); }
.cmp-cell--won .input, .cmp-cell--won .cmp-val { color: var(--pill-violet-text); font-weight: var(--fw-semibold); }
.cmp-charges tr:first-child td { border-top: 1px solid var(--color-border); }
.cmp-charge td { padding-top: 4px; padding-bottom: 4px; }
.cmp-charge .cmp-item { font-size: var(--fs-sm); }
.cmp-charge .cmp-cell .input { text-align: right; }
.cmp-charge--add td { border-bottom: none; }
.cmp-sub td { padding-top: 2px; padding-bottom: 2px; border-bottom: none; }
.cmp-sub:first-child td { border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.cmp-sub + .cmp-sub + .cmp-total td, .cmp-sub + .cmp-total td { border-top: none; }

.award-bar { display: flex; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--color-surface-alt);
  border: 1px solid var(--color-border-faint); }
.award-bar-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.award-bar-title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.award-bar-row { display: flex; align-items: baseline; gap: var(--space-2); }
.award-bar-amt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.award-bar-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.award-bar-why { max-width: 280px; text-align: right; }

.award-banner { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.award-pos { display: flex; flex-direction: column; gap: 4px; }
.award-po { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.award-po-vendor { font-weight: var(--fw-medium); }
.award-confirm { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0; }
.award-confirm-row { border: 1px solid var(--color-border-faint); border-radius: var(--radius-input); padding: var(--space-3); }
.award-confirm-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 2px; }
.award-confirm-row .check-row { margin: var(--space-2) 0 0; }

/* ---- RFQ detail tables: full bleed, vertical cell borders ------------------
   The line grid, Vendors table and Compare grid run to the card's edges
   (cancelling .card's side padding); the outer cells re-indent by that padding
   so text still lines up with the card title. Scoped to .doc .card, so the
   From-PO panel's .lines table is untouched. */
.doc .card .lines,
.doc .card .cmp-scroll { width: calc(100% + 2 * var(--space-5)); margin-left: calc(-1 * var(--space-5));
  margin-right: calc(-1 * var(--space-5)); }
.doc .card .cmp-scroll .cmp { width: 100%; }
.doc .card .lines th + th, .doc .card .lines td + td,
.doc .card .cmp th + th, .doc .card .cmp td + td { border-left: 1px solid var(--color-border-faint); }
.doc .card .lines th:first-child, .doc .card .lines td:first-child,
.doc .card .cmp th:first-child, .doc .card .cmp td:first-child { padding-left: var(--space-5); }
.doc .card .lines th:last-child, .doc .card .lines td:last-child,
.doc .card .cmp th:last-child, .doc .card .cmp td:last-child { padding-right: var(--space-5); }
.doc .card .cmp thead th { border-top: 1px solid var(--color-border); }
/* Rows with no cells under the vendors (charge add row, meta rows) stay open. */
.doc .card .cmp-charge--add td + td { border-left-color: transparent; }

/* Compare header: vendor name, status and actions sit right, over their prices. */
.cmp thead th.cmp-vendor { text-align: right; }
.cmp-vendor .cmp-vendor-name { margin-left: auto; }
.cmp-vendor .cmp-vendor-meta { justify-content: flex-end; }
.doc .card .lines td.num { white-space: nowrap; }
.doc .card .lines .col-amt { width: 140px; }

/* ---- shadcn-style date picker (ui.js datePicker) -------------------------- */
.datepick--full, .datepick--full .menu-trigger, .fld .menu-host, .fld .menu-host .menu-trigger { width: 100%; }
.datepick-label--empty { color: var(--color-muted); }
.datepick-pop { width: 280px; padding: var(--space-2); }
.datepick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.datepick-title { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepick-dow { text-align: center; font-size: var(--fs-xs); color: var(--color-label); padding: 4px 0; }
.datepick-day { height: 34px; border: none; background: none; border-radius: calc(var(--radius-input) - 2px);
  font: inherit; font-size: var(--fs-sm); color: var(--color-text); cursor: pointer; font-variant-numeric: tabular-nums; }
.datepick-day:hover { background: var(--color-hover); }
.datepick-day--out { color: var(--color-muted); }
.datepick-day--today { box-shadow: inset 0 0 0 1px var(--color-border); }
.datepick-day--on, .datepick-day--on:hover { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.datepick-foot { display: flex; justify-content: space-between; margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-faint); }
.cmp-charge-name { display: flex; align-items: center; gap: var(--space-1); }
.cmp-charge-name > span { flex: 1; }
.icon-ghost.cmp-charge-x { width: 22px; height: 22px; opacity: 0; }
.icon-ghost.cmp-charge-x .icon { width: 13px; height: 13px; }
.cmp-charge:hover .cmp-charge-x, .cmp-charge-x:focus-visible { opacity: 1; }
.cmp-charge-x:hover { background: var(--pill-red-bg); color: var(--pill-red-text); }
.cmp-meta .menu-trigger--sm { font-size: var(--fs-sm); }


/* ---- Round 5: inputs, buttons, award strip -------------------------------- */
/* No spinner arrows on number fields, anywhere. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Line items: Qty / UoM / Target price fill the whole cell; no hover border,
   an inset ring only while typing. */
.doc .card .lines td.col-qty, .doc .card .lines td.col-uom, .doc .card .lines td.col-price {
  position: relative; padding: 0; height: 48px; }
.doc .card .lines td.col-qty .input, .doc .card .lines td.col-uom .input, .doc .card .lines td.col-price .input {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 0;
  background: transparent; padding: 0 var(--space-3); }
.doc .card .lines td.col-qty .input:focus, .doc .card .lines td.col-uom .input:focus,
.doc .card .lines td.col-price .input:focus { box-shadow: inset 0 0 0 1.5px var(--color-accent); background: var(--color-bg); }
.doc .card .lines td.col-qty .input:disabled, .doc .card .lines td.col-uom .input:disabled,
.doc .card .lines td.col-price .input:disabled { color: var(--color-text); }

/* White shadcn "outline" buttons on the RFQ detail page and its dialogs
   (the shell's Digit secondary is a gray tonal fill). */
.on-detail .btn--secondary { background: var(--color-bg); border-color: var(--color-border); box-shadow: var(--shadow-sm);
  color: var(--color-text); }
.on-detail .btn--secondary:hover { background: var(--color-hover); }
.on-detail .btn--secondary:disabled { box-shadow: none; }

/* Compare grid numbers: read formatted, right edge shared with the amount
   line below; no border on hover. */
.cmp-cell .input.cmp-num { width: 100%; text-align: right; border-color: transparent; background: transparent;
  padding: 0 var(--space-2); font-variant-numeric: tabular-nums; }
.cmp-cell .input.cmp-num:hover { border-color: transparent; }
.cmp-cell .input.cmp-num:focus { border-color: var(--color-border); background: var(--color-bg); outline: none; }
.cmp-cell .cmp-val { padding-right: var(--space-2); text-align: right; line-height: 30px; }

/* Award pick: a borderless full-height square on the cell's left edge; the
   whole square is the button. */
.doc .card .cmp td.cmp-cell--pickable { position: relative; padding-left: calc(var(--pick, 36px) + var(--space-1)); }
.cmp td.cmp-cell--pickable > .cmp-pick { position: absolute; top: 0; bottom: 0; left: 0; width: var(--pick, 36px); height: auto;
  border-radius: 0; display: grid; place-items: center; cursor: pointer; }
.cmp td.cmp-cell--pickable > .cmp-pick:hover { background: var(--color-hover); }
.cmp td.cmp-cell--won > .cmp-pick:hover { background: rgba(0, 0, 0, .04); }
.cmp td.cmp-cell--pickable > .cmp-pick--static { cursor: default; }
.cmp td.cmp-cell--pickable > .cmp-pick--static:hover { background: none; }

/* Popovers float on <body> (ui.js floatPopover) so table scroll boxes can't clip
   them; above cards, modals (40) and the busy overlay, below toasts (60+). */
.menu.popover-float { position: fixed; top: 0; left: 0; right: auto; z-index: 58; }
.menu.datepick-pop { max-height: none; overflow: visible; }

/* Create POs → Preview step: each PO as it will be created in Digit. */
.po-preview { border: 1px solid var(--color-border-faint); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-4); }
.po-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.po-preview-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.po-preview-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.po-preview-lines td { padding-top: var(--space-2); padding-bottom: var(--space-2); vertical-align: top; }
.po-preview-lines tfoot td { border-bottom: none; padding-top: 4px; padding-bottom: 4px; }
.po-preview-total td { font-weight: var(--fw-semibold); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.po-lands { color: var(--color-muted); font-size: var(--fs-xs); }
.po-preview-notes { white-space: pre-wrap; font-size: var(--fs-sm); background: var(--color-surface-alt); border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.po-preview-mail-label { margin-bottom: var(--space-1); }
.mail-frame.mail-frame--short { height: 220px; }

/* Details: Status / Quotes due / Currency share one row. */
.form-grid .fld-row3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 720px) { .form-grid .fld-row3 { grid-template-columns: 1fr; } }

/* shadcn DropdownMenu (ui.js actionMenu). */
.menu.menu--actions { min-width: 180px; }
.menu-item .icon { width: 15px; height: 15px; color: var(--color-label); }
.menu-item--danger, .menu-item--danger .icon { color: var(--pill-red-text); }
.menu-item--danger:hover { background: var(--pill-red-bg); }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
.menu-item:disabled:hover { background: none; }
.menu-item:focus-visible { outline: none; background: var(--color-hover); }

/* ---- Lead times in the compare grid + editor (ui.js openLeadEditor) ------- */
.cmp-lead { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: var(--fs-xs);
  color: var(--color-label); padding-right: var(--space-2); margin-top: 2px; }
.cmp-lead .icon { width: 12px; height: 12px; }
.cmp-lead--btn { width: 100%; border: none; background: none; font: inherit; font-size: var(--fs-xs); cursor: pointer;
  border-radius: calc(var(--radius-input) - 2px); padding: 2px var(--space-2); }
.cmp-lead--btn:hover { background: var(--color-hover); color: var(--color-text); }
.cmp-lead--empty { color: var(--color-muted); opacity: 0; }
tr:hover .cmp-lead--empty, .cmp-lead--empty:focus-visible { opacity: 1; }
.cmp-meta .cmp-lead--empty { opacity: 1; }
.lead-pop { width: 280px; padding: var(--space-2); }
.lead-pop-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 2px 2px var(--space-2); }
.lead-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; background: var(--color-hover);
  border-radius: var(--radius-input); margin-bottom: var(--space-2); }
.lead-seg-btn { border: none; background: none; font: inherit; font-size: var(--fs-sm); padding: 4px 0; cursor: pointer;
  border-radius: calc(var(--radius-input) - 2px); color: var(--color-label); }
.lead-seg-btn--on { background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-sm); font-weight: var(--fw-medium); }
.lead-pop-field .input { width: 100%; box-sizing: border-box; }
.lead-pop-field .input[hidden] { display: none; }