/* ==========================================================================
   Purchase Orders — Quotes (purchase-orders-quotes.html)

   Spec: build/po/pages.md §5

   Only what is this page's own: the register's column shares, the supplier
   names as a word list, the deadline banner, the KPI tiles as links, the
   footer's alerts line, and the New Request for Quote panel's line blocks.
   Everything another Purchase Orders page also says (the hub strip, the
   readings, the pick rows, the empty state, the gear dialogs) is in
   css/pages/purchase-orders.css. Classes here use the `pqr-` prefix.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Eight columns take shares of the table under `table-layout: fixed`, so they
   resize with the browser and never with the data. Status is sized for its
   longest badge ("Waiting for Replies"); the outcome is last and right-aligned
   by `.data-table`'s own last-column rule. */
.pqr-table { table-layout: fixed; }
.pqr-table th.col-rfq     { width: 15%; }
.pqr-table th.col-lines   { width: 12%; }
.pqr-table th.col-sup     { width: 13%; }
.pqr-table th.col-when    { width: 13%; }
.pqr-table th.col-replies { width: 9%; }
.pqr-table th.col-best    { width: 12%; }
.pqr-table th.col-status  { width: 13%; }
.pqr-table th.col-value   { width: 13%; }
.pqr-table td { white-space: normal; }
.pqr-table .cell-stack .main,
.pqr-table .cell-stack .sub { overflow-wrap: anywhere; }
.pqr-table .cell-stack .sub .po-reading { font-size: 11px; }
.pqr-table td.col-value .po-reading { font-size: 13px; }

/* The suppliers asked: names as words, one to a line where the column is
   narrow, joined by `·` while they fit (the `.po-reading` dot, trailing). */
.pqr-names { display: flex; flex-wrap: wrap; row-gap: 2px; font-size: 12px; }
.pqr-names > a { white-space: nowrap; }
.pqr-names > a:not(:last-child)::after {
  content: "·"; margin: 0 6px 0 4px; color: var(--color-text-subtle);
}

/* A hidden wrap stays hidden: the empty state takes its place. */
.tab-shell .table-wrap[hidden] { display: none; }
.pqr-empty { margin-top: 4px; }

/* The footer: the count, and the alerts line after it. */
.pqr-foot { flex-wrap: wrap; gap: 6px 16px; }
.pqr-alerts { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 18px; color: var(--color-text-subtle); }
.pqr-alerts svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.pqr-alerts a { color: var(--color-primary-600); text-decoration: none; }
.pqr-alerts a:hover { color: var(--color-primary-700); }

/* ---------- The deadline banner ------------------------------------------------
   The sentence takes the room; the two acts close the line and drop under it
   when the line is too short for both. */
.pqr-alert { align-items: center; flex-wrap: wrap; }
.pqr-alert__text { flex: 1 1 320px; min-width: 0; line-height: 1.5; }
.pqr-alert__acts { display: inline-flex; gap: 6px; flex: none; margin-left: auto; }

/* ---------- KPI tiles as links ------------------------------------------------ */
a.pqr-kpi,
a.pqr-kpi:hover { color: inherit; text-decoration: none; }
a.pqr-kpi { cursor: pointer; }
a.pqr-kpi:hover { border-color: var(--color-border-strong); }

/* ---------- New Request for Quote ------------------------------------------------
   Each line is a box inside the white panel, so it stands on the control
   ground (memory.md §13) and its fields invert back to white on it. */
.pqr-lines { display: flex; flex-direction: column; gap: 10px; }
.pqr-line {
  padding: 10px 12px 12px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.pqr-line .input,
.pqr-line .select { background-color: var(--color-surface); }
.pqr-line__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pqr-line__n { font-size: 13px; font-weight: 600; color: var(--color-text); }
.pqr-line__del { width: 28px; height: 28px; color: var(--color-text-subtle); }
.pqr-line__del svg { width: 15px; height: 15px; }
.pqr-line__del:disabled { opacity: .35; cursor: default; }
.pqr-line__grid { gap: 12px; }
.pqr-line-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pqr-drop { padding: 18px 16px; }
.pqr-gap { margin-top: 14px; }
.pqr-date { width: auto; max-width: 200px; }
#so-new-rfq .po-pick-row .po-linked { flex: none; }

/* ---------- Narrow screens ------------------------------------------------------
   Below 1100 the eight columns fight: the register keeps its shares on a
   1000px table and scrolls sideways inside `.table-wrap` (the house pattern). */
@media (max-width: 1200px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 1100px) {
  .pqr-table { min-width: 1000px; }
}
@media (max-width: 768px) {
  .pqr-alert__acts { margin-left: 0; }
  .pqr-alert__acts .btn,
  .pqr-line-acts .btn { min-height: 44px; }
  .pqr-line__del { width: 36px; height: 36px; }
  #so-new-rfq .po-pick-row { flex-wrap: wrap; }
  #so-new-rfq .po-pick-row .po-linked { order: 3; flex-basis: 100%; padding-left: 28px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .pqr-alert__acts { flex-basis: 100%; }
  .pqr-alert__acts .btn { flex: 1 1 0; justify-content: center; }
  .page-header .page-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .tab-shell .card-footer { flex-wrap: wrap; gap: 8px; }
  .pqr-date { max-width: none; width: 100%; }
}