/* ============================================================================
   Quote Builder — module-specific components ONLY.
   Loaded third, after design-tokens.css and app-shell.css.

   Rules (DESIGN.md):
     - Never restyle an app-shell.css class. Add, don't fork.
     - No literal colors or spacing. Everything references a token. If a value
       is genuinely missing, add it to design-tokens.css first.
   ============================================================================ */

/* ---------------------------------------------------------------- pills --- */
/* Soft background + saturated text, fully rounded. Semantics per DESIGN.md:
   gray = draft, amber = in review, green = approved, blue = synced/in Digit. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 18px;
  white-space: nowrap;
}
.pill--blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-text); }
.pill--gray   { background: var(--pill-gray-bg);   color: var(--pill-gray-text); }
.pill--green  { background: var(--pill-green-bg);  color: var(--pill-green-text); }
.pill--red    { background: var(--pill-red-bg);    color: var(--pill-red-text); }
.pill--amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-text); }
.pill--yellow { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.pill--violet { background: var(--pill-violet-bg); color: var(--pill-violet-text); }

/* A quieter tag for BOM line kind — outline, not a status. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--color-label);
  white-space: nowrap;
}
.chip--warn { border-color: var(--pill-amber-bg); color: var(--pill-amber-text); }

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

/* ------------------------------------------------------------- documents --- */
/* The detail screen is a centered white card on the gray canvas (DESIGN.md).
   Full-bleed negative margins pull it out past the .content inset. */
.doc-canvas {
  background: var(--color-canvas);
  margin: 0 calc(-1 * var(--space-8));
  padding: var(--space-5) var(--space-8) var(--space-8);
  min-height: 60vh;
}
.doc {
  max-width: var(--doc-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.doc-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.doc-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.doc-sub { font-size: var(--fs-sm); color: var(--color-label); }
.doc-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Two-column workspace: main column + a narrower rail. */
.doc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .doc-cols { grid-template-columns: minmax(0, 1fr); }
}
.doc-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ----------------------------------------------------------------- card --- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  min-height: var(--row-height);
}
.card--collapsed .card-head { border-bottom: none; }
.card-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.card-head-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card-body { padding: var(--space-3); }
.card-body--flush { padding: 0; }
.card-foot {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-label);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.card-disclose {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--color-label); display: inline-flex; padding: 0;
}

/* ---------------------------------------------------------------- field --- */
/* Small gray label above a dark value — the core Digit detail pattern. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field-label {
  font-size: var(--fs-sm);
  color: var(--color-label);
  font-weight: var(--fw-medium);
}
.field-value { font-size: var(--fs-base); color: var(--color-text); }
.field-value--empty { color: var(--color-muted); }
.field-value--mono { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- inline inputs --- */
/* Table cells edit in place: transparent until focused, so a dense grid still
   reads as a table rather than a wall of boxes. */
.cell-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-input);
  padding: 0 var(--space-1);
  height: 26px;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
}
.cell-input:hover { border-color: var(--color-border); }
.cell-input:focus {
  outline: none;
  background: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(43, 127, 255, 0.15);
}
.cell-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.input:focus, .search:focus, textarea.input:focus, select.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(43, 127, 255, 0.15);
}

/* A compact table used inside cards (not the full-bleed list .table). */
.grid { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.grid th {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--color-label);
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.grid td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-faint);
  vertical-align: middle;
}
.grid tr:last-child td { border-bottom: none; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid-empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* Sub-assembly rows expand in place so contents are visible without leaving. */
.subrow-detail { background: var(--color-canvas); }
.subrow-detail td { padding: var(--space-2) var(--space-3); }

/* --------------------------------------------------------------- totals --- */
.totals { display: flex; flex-direction: column; gap: var(--space-2); }
.total-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-base);
}
.total-line span:first-child { color: var(--color-label); }
.total-line .amount { font-variant-numeric: tabular-nums; }
.total-line--strong { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.total-line--strong span:first-child { color: var(--color-text); }
.total-rule { height: 1px; background: var(--color-border); margin: var(--space-1) 0; }
.amount--danger { color: var(--color-danger-text); }

/* --------------------------------------------------------------- modals --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 9, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh var(--space-4) var(--space-4);
  z-index: 60;
  overflow-y: auto;
}
.modal {
  background: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  width: 480px;
  max-width: 100%;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}
.modal--wide { width: 760px; }
.modal-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.modal-body { padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.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);
}
.modal-foot .modal-foot-left { margin-right: auto; }

/* Search-picker result list, used for Digit items and companies. */
.picker-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  max-height: 300px;
  overflow-y: auto;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-faint);
}
.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: var(--color-hover); }
.picker-row .picker-main { min-width: 0; flex: 1; }
.picker-row .picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-row .picker-meta { font-size: var(--fs-sm); color: var(--color-label); }

/* --------------------------------------------------------------- states --- */
.empty-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-label);
}
.empty-state h2 { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0 0 var(--space-2); }
.empty-state p { margin: 0 auto var(--space-4); max-width: 44ch; }

.muted { color: var(--color-label); }
/* Part numbers and money both live here, and neither should ever wrap
   mid-token — "1019-\n1001A" reads as two different parts. */
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.hint { font-size: var(--fs-sm); color: var(--color-label); }
.count-note { font-size: var(--fs-sm); color: var(--color-label); }

.btn--danger { background: var(--pill-red-bg); color: var(--pill-red-text); }
.btn--danger:hover { filter: brightness(0.97); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { filter: none; }

/* ---------------------------------------------------------------- toast --- */
.toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  max-width: 560px;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-base);
  z-index: 70;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.toast--error { background: var(--pill-red-text); }
.toast--warn { background: var(--pill-amber-text); }
.toast button {
  appearance: none; background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.7; padding: 0; display: inline-flex;
}

/* Scrollbars: match Digit's restrained look. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }