/* ==========================================================================
   Purchase Orders — the purchase order detail (purchase-order.html)

   Spec: build/po/pages.md §3

   Only what is this page's own: the supplier | number joinery in the h1, the
   column shares of its tables, the small blocks a tab draws once (approval
   step, change request, task list, collaborators, the shipment's two columns,
   the not-yet-billed list), the View As preview bar and the dialog field
   widths, plus how it all folds at 1200 / 768 / 480. Everything another
   Purchase Orders page also says (readings, path, figure bar, fill gauge,
   key–value grid, subsection, timeline, thread, document row, pick rows,
   two-sided choice) is css/pages/purchase-orders.css.

   Tokens only, light theme only; radius never passes 7px; nothing under 10px;
   no `style` attribute anywhere.
   ========================================================================== */

/* ---------- The heading ----------------------------------------------------
   Who it is from, a bar, what it is called: the bar is joinery, drawn here so
   neither span carries the other's punctuation (order.html's shape). */
.po-dt-supplier::after { content: "|"; margin: 0 9px; color: var(--color-text-subtle); font-weight: 400; }
.po-dt-sup-link { color: var(--color-primary-600); text-decoration: none; }
.po-dt-sup-link:hover { color: var(--color-primary-700); }
/* "Add Tag" reads as one more tag word: muted, the plus at 12px. */
.po-dt-addtag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--color-primary-600); line-height: 1.5;
}
.po-dt-addtag:hover { color: var(--color-primary-700); }
.po-dt-addtag svg { width: 12px; height: 12px; }

/* ---------- View As preview bar ----------------------------------------------- */
.po-dt-perm-bar { align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.po-dt-perm-bar[hidden] { display: none; }
.po-dt-perm-bar__text { flex: 1 1 320px; min-width: 0; line-height: 1.5; }

/* ---------- Words inside cells -------------------------------------------------
   A variance read as a word in its state's ink (danger for broken, short and
   wrong; warn for pending), never a chip. The line number is a short tabular
   mark. A row-level act inside a sub-line ("Reopen Line") is a link-styled
   button, no underline. */
.po-dt-bad  { color: var(--color-danger-ink); font-weight: 600; }
.po-dt-warn { color: var(--color-warn-ink); font-weight: 600; }
.po-dt-lineno { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
.po-dt-linkbtn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--color-primary-600);
}
.po-dt-linkbtn:hover { color: var(--color-primary-700); }
.po-dt-lock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-text-muted); white-space: nowrap;
}
.po-dt-lock svg { width: 13px; height: 13px; flex: none; }
/* A line of explanation under a table or a block. */
.po-dt-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.po-dt-note .po-reading { font-size: 12px; }
/* The credit a claim proposes: one sentence in warn ink with its mark. */
.po-dt-claimnote { color: var(--color-warn-ink); }
.po-dt-claimnote svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.po-dt-note a,
.po-sec__h a:not(.btn),
.po-kv a,
.po-dt-onboard a,
.po-cost__note a { color: var(--color-primary-600); text-decoration: none; }
.po-dt-note a:hover,
.po-sec__h a:not(.btn):hover,
.po-kv a:hover { color: var(--color-primary-700); }
.po-dt-h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-dt-h4:not(:first-child) { margin-top: 16px; }
.po-dt-h4__sub { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
/* Links inside table cells are never underlined. */
.data-table td a:not(.btn) { text-decoration: none; }

/* ---------- Lines table ------------------------------------------------------- */
.po-dt-lines thead th.col-line     { width: 5%; }
.po-dt-lines thead th.col-mat      { width: 18%; }
.po-dt-lines thead th.col-unit     { width: 13%; }
.po-dt-lines thead th.col-area     { width: 9%; }
.po-dt-lines thead th.col-received { width: 14%; }
.po-dt-lines thead th.col-billed   { width: 9%; }
.po-dt-lines thead th.col-for      { width: 12%; }
.po-dt-lines thead th.col-price    { width: 9%; }
.po-dt-lines thead th.col-total    { width: 11%; }
.po-dt-lines td.col-received,
.po-dt-lines td.col-for { white-space: normal; }
/* The total row closes the table: on the control ground, 600, a rule above. */
.po-dt-lines tfoot td {
  padding: 9px var(--table-pad-x);
  background: var(--color-control);
  border-top: 1px solid var(--color-border-strong);
  font-size: 13px; font-weight: 600; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.po-dt-lines tfoot td.num { text-align: right; }
.po-dt-lines tfoot td:last-child { text-align: right; }
.po-dt-lines tfoot td:last-child > .cell-stack { align-items: flex-end; }
.po-dt-lines tfoot .cell-stack .sub { font-weight: 400; }

/* WHERE A LINE CAME FROM (requirements §19), on its own row under the line:
   it belongs to the line above, so it carries no row mark and no hover band of
   its own, and it starts where the material's name does. */
.data-table tbody tr.po-dt-under td {
  padding-top: 0; padding-bottom: 12px;
  white-space: normal; cursor: default; text-align: left;
}
.data-table tbody tr.po-dt-under td::after { content: none; }
.data-table tbody tr.po-dt-under:hover td { background: transparent; }
.po-dt-under .po-reading { padding-left: 5%; font-size: 12px; color: var(--color-text-muted); }

/* ---------- Column shares of the other tables -------------------------------- */
.po-dt-linked thead th.col-order  { width: 14%; }
.po-dt-linked thead th.col-quote  { width: 14%; }
.po-dt-linked thead th.col-client { width: 16%; }
.po-dt-linked thead th.col-qty    { width: 16%; }
.po-dt-linked thead th.col-ship   { width: 15%; }
.po-dt-linked thead th.col-change { width: 25%; }

.po-dt-sends thead th.col-ver    { width: 18%; }
.po-dt-sends thead th.col-sent   { width: 18%; }
.po-dt-sends thead th.col-to     { width: 20%; }
.po-dt-sends thead th.col-opened { width: 20%; }
.po-dt-sends thead th.col-answer { width: 24%; }

.po-dt-inline thead th.col-line   { width: 6%; }
.po-dt-inline thead th.col-mat    { width: 26%; }
.po-dt-inline thead th.col-count  { width: 12%; }
.po-dt-inline thead th.col-sold   { width: 32%; }
.po-dt-inline thead th.col-result { width: 24%; }

.po-dt-except thead th.col-slab   { width: 16%; }
.po-dt-except thead th.col-mat    { width: 19%; }
.po-dt-except thead th.col-size   { width: 20%; }
.po-dt-except thead th.col-hold   { width: 21%; }
.po-dt-except thead th.col-result { width: 24%; }

.po-dt-var thead th.col-line     { width: 20%; }
.po-dt-var thead th.col-ordered  { width: 11%; }
.po-dt-var thead th.col-received { width: 11%; }
.po-dt-var thead th.col-variance { width: 10%; }
.po-dt-var thead th.col-result   { width: 28%; }
.po-dt-var thead th.col-loc      { width: 20%; }
.po-dt-var td.col-result { white-space: normal; }

.po-dt-log thead th.col-when { width: 17%; }
.po-dt-log thead th.col-what { width: 22%; }
.po-dt-log thead th.col-act  { width: 25%; }
.po-dt-log thead th.col-loc  { width: 15%; }
.po-dt-log thead th.col-acts { width: 21%; }
.po-dt-log td.col-acts { white-space: nowrap; }
.po-dt-log td.col-acts .btn { padding-left: 6px; padding-right: 6px; }

.po-dt-costlines thead th.col-line   { width: 22%; }
.po-dt-costlines thead th.col-vendor { width: 19%; }
.po-dt-costlines thead th.col-est    { width: 12%; }
.po-dt-costlines thead th.col-state  { width: 13%; }
.po-dt-costlines thead th.col-bill   { width: 21%; }
.po-dt-costlines thead th.col-actual { width: 13%; }
.po-dt-costlines td.col-bill { white-space: normal; }

.po-dt-unit thead th.col-mat    { width: 28%; }
.po-dt-unit thead th.col-goods  { width: 16%; }
.po-dt-unit thead th.col-added  { width: 14%; }
.po-dt-unit thead th.col-landed { width: 18%; }
.po-dt-unit thead th.col-sqft   { width: 24%; }

.po-dt-sched thead th.col-stage   { width: 20%; }
.po-dt-sched thead th.col-trigger { width: 26%; }
.po-dt-sched thead th.col-paid    { width: 18%; }
.po-dt-sched thead th.col-status  { width: 14%; }
.po-dt-sched thead th.col-amount  { width: 22%; }

.po-dt-bills thead th.col-bill   { width: 21%; }
.po-dt-bills thead th.col-for    { width: 21%; }
.po-dt-bills thead th.col-match  { width: 18%; }
.po-dt-bills thead th.col-pay    { width: 16%; }
.po-dt-bills thead th.col-due    { width: 9%; }
.po-dt-bills thead th.col-amount { width: 15%; }
.po-dt-bills td.col-for,
.po-dt-bills td.col-match,
.po-dt-bills td.col-pay { white-space: normal; }
.po-dt-bills .cell-stack .sub .dot-status { margin-right: 3px; }

.po-dt-claims thead th.col-claim  { width: 20%; }
.po-dt-claims thead th.col-reason { width: 30%; }
.po-dt-claims thead th.col-lines  { width: 22%; }
.po-dt-claims thead th.col-status { width: 12%; }
.po-dt-claims thead th.col-amount { width: 16%; }

.po-dt-versions thead th.col-field { width: 20%; }
.po-dt-versions thead th.col-v1    { width: 38%; }
.po-dt-versions thead th.col-v2    { width: 42%; }
.po-dt-versions td.col-v1,
.po-dt-versions td.col-v2 { white-space: normal; }

.po-dt-billlines thead th.col-line    { width: 32%; }
.po-dt-billlines thead th.col-ordered { width: 14%; }
.po-dt-billlines thead th.col-billed  { width: 14%; }
.po-dt-billlines thead th.col-this    { width: 20%; }
.po-dt-billlines thead th.col-price   { width: 20%; }
.po-dt-qty { width: 72px; text-align: right; padding: 4px 8px; }

/* Cells that carry several words wrap instead of clipping. */
.po-dt-linked td,
.po-dt-sends td,
.po-dt-inline td,
.po-dt-except td,
.po-dt-claims td,
.po-dt-sched td { white-space: normal; }
/* Links in this page's tables. */
.po-dt-lines td a, .po-dt-linked td a, .po-dt-inline td a, .po-dt-except td a,
.po-dt-var td a, .po-dt-costlines td a { color: var(--color-primary-600); }
/* A record number never breaks across lines (SCL-2026-0005 in a sub-line). */
.po-dt-except td a { white-space: nowrap; }

/* ---------- Two key–value columns side by side -------------------------------- */
.po-dt-kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
.po-dt-kv-tight { max-width: 640px; }

/* ---------- Approval step ------------------------------------------------------
   One approver on one row: who, the state badge, when. Read left to right,
   nothing pushed to the far edge (memory.md §16). */
.po-dt-approval {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 8px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-dt-approval__when { font-size: 12px; color: var(--color-text-muted); }

/* ---------- A change request ---------------------------------------------------- */
.po-dt-change {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 13px;
}
.po-dt-change__when { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-dt-change__what { min-width: 0; }
.po-dt-change__who { font-size: 12px; color: var(--color-text-muted); }

/* ---------- Supplier tasks ------------------------------------------------------- */
.po-dt-tasks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.po-dt-tasks li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.po-dt-tasks svg { width: 15px; height: 15px; flex: none; color: var(--color-success); }
.po-dt-tasks__name { font-weight: 500; color: var(--color-text); }
.po-dt-tasks__when { font-size: 12px; color: var(--color-text-muted); }

/* ---------- Collaborators -------------------------------------------------------- */
.po-dt-collab { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.po-dt-collab li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px;
  padding: 8px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-dt-collab li > .cell-stack { min-width: 220px; }
.po-dt-collab .po-reading { font-size: 12px; color: var(--color-text-muted); }

/* ---------- Shared documents: the wrapping fix for the version word --------------- */
.po-dt-docs .po-doc__ver { white-space: normal; }
.po-dt-docs .po-doc__ver a { color: var(--color-primary-600); text-decoration: none; }

/* ---------- Shipment block: facts on the left, lines and fill on the right ---------- */
.po-dt-ship { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 40px; }
.po-dt-onboard { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.po-dt-onboard li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.po-dt-onboard .subtle { font-size: 12px; }

/* ---------- Received, not yet billed ---------------------------------------------- */
.po-dt-notbilled { margin-top: 16px; }
.po-dt-plain { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; max-width: 560px; }
.po-dt-plain li { display: flex; align-items: baseline; gap: 12px; }
.po-dt-plain__fig { font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Dialog fields ---------------------------------------------------------- */
.po-dt-f-narrow { flex: 0 1 130px; }
.po-dt-f-mid    { flex: 1 1 180px; }
.po-dt-f-wide   { flex: 2 1 260px; }
.po-dt-f-auto   { width: auto; max-width: 100%; }
.po-dt-hint { font-size: 11px; color: var(--color-text-subtle); }
.po-dt-dialog-h { margin: 20px 0 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-dt-foot-note { font-size: 12px; color: var(--color-text-subtle); }
.po-dt-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.po-dt-switches .switch-field { font-weight: 400; }
.po-dt-gap-top { margin-top: 14px; }
.slideover-form .slideover-body .form-row { flex-wrap: wrap; }
.modal-body .po-dt-gap-top:first-child { margin-top: 0; }
/* Visually hidden label for a textarea whose heading already names it. */
.po-dt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Narrow screens ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .po-dt-ship { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  /* Tables keep their columns and scroll inside their wrap. */
  .po-dt-lines     { min-width: 1080px; }
  .po-dt-linked    { min-width: 760px; }
  .po-dt-sends     { min-width: 640px; }
  .po-dt-inline    { min-width: 680px; }
  .po-dt-except    { min-width: 760px; }
  .po-dt-var       { min-width: 720px; }
  .po-dt-log       { min-width: 720px; }
  .po-dt-costlines { min-width: 760px; }
  .po-dt-unit      { min-width: 600px; }
  .po-dt-sched     { min-width: 620px; }
  .po-dt-bills     { min-width: 820px; }
  .po-dt-claims    { min-width: 700px; }
  .po-dt-kv2 { grid-template-columns: minmax(0, 1fr); }
  .po-dt-lock { white-space: normal; }
  .po-head .po-linked { white-space: normal; }
  .po-dt-ship .po-lfd { white-space: normal; }
  .po-dt-ship .po-fill__fig { white-space: normal; }
  .po-dt-collab li > .cell-stack { min-width: 0; }
  .po-dt-f-narrow, .po-dt-f-mid, .po-dt-f-wide { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .po-dt-supplier::after { margin: 0 6px; }
  .po-dt-approval { display: flex; }
  .po-dt-plain li { flex-direction: column; gap: 2px; }
  .po-dt-versions { min-width: 480px; }
  .po-dt-billlines { min-width: 480px; }
}