/* ==========================================================================
   Quote Detail (purchase-order-quote.html) — one request for quote
   Spec: build/po/pages.md → "6. purchase-order-quote.html"

   Everything shared (the detail header, the path, the figure bar, the
   subsections, the offers grid, the award picks, the thread) is in
   css/pages/purchase-orders.css. What is here belongs to this page alone:
   the number in the heading, the deadline field that passed, the facts on
   the field row that are not settable, the Lines table's column shares, the
   compare grid's widths, the offer-file drop zone, the split inputs and the
   Convert row. Tokens only, radius ≤ 7px, nothing under 10px, no `style`.
   ========================================================================== */

/* ---------- The heading ----------------------------------------------------
   "Noce Travertine Pavers · RFQ-2026-0016": what is asked for, then what the
   request is called, the dot between them in the lightest ink. */
.poq-sep { margin: 0 8px; color: var(--color-text-subtle); font-weight: 400; }
.poq-num { font-variant-numeric: tabular-nums; }

/* ---------- The field row -----------------------------------------------------
   A fact on the row (when it was sent, who buys) sits level with the settable
   fields but is not one: no pointer, no hover ground. The deadline that passed
   reads in the warn ink — a request is never closed on its own, so it waits. */
.poq-field--fact { cursor: default; }
.poq-field--fact:hover { background: none; border-color: transparent; }
.poq-field--due .po-field__v,
.poq-field--due > svg:first-child { color: var(--color-warn-ink); }
.poq-field--due .po-field__sub { color: var(--color-warn-ink); }

/* ---------- The figure bar ----------------------------------------------------
   No tab strip hangs under it on this page, so it takes the page's one gap
   rather than the 25px standoff an attached strip asks for (memory.md §22). */
.poq-stats { margin-bottom: var(--page-gap); }
.poq-alert__acts { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.poq-alert__text { flex: 1 1 0; min-width: 200px; }
.poq-alert { flex-wrap: wrap; align-items: center; }

/* ---------- Lines -------------------------------------------------------------
   Column shares of a fixed table (memory.md: share of the table, never of the
   data). Best Offer is the money column, last, right-aligned by app.css. */
.poq-lines { table-layout: fixed; width: 100%; }
.poq-lines .col-mat    { width: 23%; }
.poq-lines .col-grade  { width: 10%; }
.poq-lines .col-qty    { width: 11%; }
.poq-lines .col-area   { width: 9%; }
.poq-lines .col-weight { width: 11%; }
.poq-lines .col-dest   { width: 12%; }
.poq-lines .col-need   { width: 12%; }
.poq-lines .col-best   { width: 12%; }
.poq-lines td a { color: var(--color-primary-600); text-decoration: none; }
.poq-lines td a:hover { color: var(--color-primary-700); }
.poq-lines tbody tr { cursor: default; }
.poq-sources { margin-top: 10px; font-size: 12px; color: var(--color-text-muted); }
.poq-sources .po-reading { font-size: 12px; color: var(--color-text-muted); }
.poq-sources a { color: var(--color-primary-600); text-decoration: none; }

/* ---------- Offers side by side -------------------------------------------------
   The basis column narrow, the three suppliers equal. The heading cell holds
   the supplier link, its grey words, its Vava reading and the offer status. */
.poq-compare table { table-layout: fixed; }
.poq-compare col.poq-col-basis { width: 19%; }
.poq-compare col.poq-col-sup   { width: 27%; }
.poq-compare .po-compare__head { vertical-align: top; }
.poq-compare .po-compare__head a { color: var(--color-primary-700); text-decoration: none; }
.poq-compare .po-compare__head a:hover { color: var(--color-primary-600); }
.poq-compare__head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.poq-compare__head-row .badge { font-size: 11px; }
.poq-compare__corner { background: var(--color-control); }
.poq-compare .po-compare__cell a { color: var(--color-primary-600); text-decoration: none; }
.poq-compare .po-compare__cell a:hover { color: var(--color-primary-700); }
.poq-compare .is-best .sub { color: var(--color-success-ink); font-weight: 600; }
.poq-compare .poq-low-fob { color: var(--color-text-muted); }
.poq-compare .po-compare__cell .po-fill { margin-top: 6px; }
.poq-compare__award .btn { white-space: nowrap; }
.poq-cell-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.poq-basis-note { margin: 10px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.5; }

/* The drop zone in the column of the supplier who did not answer: their offer
   can arrive as a file, which is read into lines for the buyer to check. A
   box on a white panel, so the control ground and a dashed edge (§13). */
.poq-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; margin-top: 8px; padding: 12px 10px;
  background: var(--color-control); border: 1px dashed var(--color-control-border);
  border-radius: var(--radius);
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text);
  text-align: center; cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.poq-drop:hover { border-color: var(--color-primary); background: var(--color-surface); }
.poq-drop svg { width: 18px; height: 18px; color: var(--color-text-muted); }
.poq-drop__sub { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }

/* ---------- Award ----------------------------------------------------------------
   The three choices start unchosen. The split inputs show once Split is
   picked, each sized to a two-digit count (§9), and the sum reads beside
   them. Convert stays dimmed until an award is whole. */
.poq-award-line { font-size: 12px; color: var(--color-text-muted); margin: 0 0 8px; }
.poq-award-line strong { color: var(--color-text); font-weight: 600; }
.poq-split {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px;
  margin-top: 8px; padding: 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.poq-split[hidden] { display: none; }
.poq-split .field label { font-size: 12px; }
.poq-split .input { width: 84px; background: var(--color-surface); }
.poq-split__sum { font-size: 12px; color: var(--color-text-muted); padding-bottom: 8px; }
.poq-split__sum strong { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.poq-split__sum.is-ok strong { color: var(--color-success-ink); }
.poq-split__sum.is-bad strong { color: var(--color-danger-ink); }
.poq-convert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.poq-convert__note { font-size: 12px; color: var(--color-text-muted); }
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.poq-switch-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; }
.poq-switch-row .switch { flex: none; }

/* ---------- Messages & Files ---------------------------------------------------- */
.poq-msgs { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.poq-msgs h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.poq-to { width: auto; min-width: 0; max-width: 240px; }

.poq-act a { color: var(--color-primary-600); text-decoration: none; }
.poq-act a:hover { color: var(--color-primary-700); }

/* ---------- Dialogs --------------------------------------------------------------- */
.poq-dlg-h { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.poq-dlg-h:first-child { margin-top: 0; }
.poq-hint { font-size: 12px; color: var(--color-text-subtle); }
.poq-form-row { flex-wrap: wrap; row-gap: 14px; }
.poq-form-row > .poq-f-narrow { flex: 0 0 120px; }
.poq-form-row > .poq-f-mid { flex: 1 1 130px; max-width: 200px; }
.poq-form-row > .poq-f-wide { flex: 0 1 290px; }
.poq-ai-note + .poq-form-row { margin-top: 14px; }
.poq-date { max-width: 180px; }
.poq-read { font-size: 12px; }
.poq-read .col-file  { width: 22%; }
.poq-read .col-match { width: 32%; }
.poq-read .col-qty   { width: 16%; }
.poq-read .col-price { width: 13%; }
.poq-read .col-lead  { width: 17%; }
.poq-read { table-layout: fixed; width: 100%; }
.poq-read .poq-pending { color: var(--color-text-subtle); }
.poq-ai-note { margin-top: 12px; }

/* ---------- Narrow screens -------------------------------------------------------- */
@media (max-width: 1200px) {
  .poq-msgs { grid-template-columns: minmax(0, 1fr); }
  .poq-lines { min-width: 900px; }
}
@media (max-width: 768px) {
  .poq-compare table { min-width: 640px; }
  .poq-alert__acts { margin-left: 0; }
  .poq-alert__acts .btn,
  .poq-convert .btn,
  .poq-cell-acts .btn { min-height: 44px; }
  .poq-drop { min-height: 64px; }
  .poq-split .input { min-height: 44px; }
}
@media (max-width: 480px) {
  .poq-sep { margin: 0 6px; }
  .poq-convert { align-items: stretch; }
  .poq-convert .btn { width: 100%; justify-content: center; }
  .poq-form-row > .poq-f-narrow,
  .poq-form-row > .poq-f-mid,
  .poq-form-row > .poq-f-wide { flex-basis: 100%; max-width: none; }
  .poq-to { max-width: none; width: 100%; }
}