/* ==========================================================================
   Purchase Orders — New Purchase Order (purchase-order-new.html)

   Spec: build/po/pages.md §2

   The builder is order-new.html's builder read for buying: the identity
   header with its settable fields, the start-from strip, the product-type
   strip attached to the lines, then one card whose subsections are the
   charge lines, the container, the totals and terms and the approval route,
   and the footer bar with the three ways out. Everything another Purchase
   Orders page also says (the fields, the readings, the fill gauge, the pick
   rows, the two-sided choice, the key–value grid, the subsections) is in
   css/pages/purchase-orders.css. What is here is this page's own: the lines
   grid's column shares and its phone cards, the compare popover, the
   container block, the totals layout, the sticky footer and the dialogs'
   small pieces. Classes use the `po-new-` prefix. Tokens only, radius never
   past 7px, nothing under 10px, no `style` attribute in the page.
   ========================================================================== */

/* ---------- Header ------------------------------------------------------------
   The draft has no number yet; the reading under the title says which one it
   gets on save. The crumb's arrow is the way back to the register. */
.po-new-head .po-head__badges { margin-top: 4px; }
.po-new-head .po-fields { margin-top: 6px; }
.po-new-head .po-field__link {
  font: inherit; font-size: 10px; color: var(--color-primary-700);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.po-new-head .po-field__link:hover { color: var(--color-primary-600); }
.po-new-menu { min-width: 248px; }

/* ---------- The start-from strip ----------------------------------------------
   An .alert--page with its sentence taking the room and the one button at the
   end of the line. */
.po-new-from { align-items: center; flex-wrap: wrap; }
.po-new-from > svg { flex: none; }
.po-new-from__text { flex: 1 1 320px; min-width: 0; line-height: 1.5; }
.po-new-from__text a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.po-new-from__acts { display: inline-flex; gap: 6px; flex: none; margin-left: auto; }

/* ---------- PO Type ----------------------------------------------------------
   One line: the two-sided choice, then the hint in the hint type. */
.po-new-type {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  margin-bottom: var(--page-gap);
}
.po-new-type__hint { font-size: 12px; color: var(--color-text-subtle); }

/* ---------- The product-type strip ---------------------------------------------
   Each tab is the add for its type, so it carries a small plus after the word.
   The strip attaches to the lines panel below it (memory.md §17); the import
   button rides its right end, as "Pick from the Yard" does on order-new. */
.po-new-types { display: flex; align-items: flex-end; flex-wrap: wrap; }
.po-new-types .tab .po-new-plus { width: 12px; height: 12px; color: var(--color-text-subtle); margin-left: -2px; }
.po-new-types .tab.active .po-new-plus { color: var(--color-primary); }
.po-new-types__end { margin-left: auto; align-self: center; margin-bottom: 6px; }

/* ---------- The lines grid --------------------------------------------------------
   Nine columns take shares of the table under `table-layout: fixed`; the line
   total sits last and is right-aligned by `.data-table`'s own last-column
   rule. The shell already stands the table off its edges, so the wrap gives
   up its inset (memory.md §20) and the head band comes off because the table
   is the first thing in the panel (§18). */
.po-new-shell > .table-wrap { padding-inline: 0; }
.po-new-shell > .table-wrap:first-child .data-table thead th { border-top: 0; }
.po-new-lines { table-layout: fixed; }
.po-new-lines th.col-line  { width: 5%; }
.po-new-lines th.col-mat   { width: 19%; }
.po-new-lines th.col-unit  { width: 12%; }
.po-new-lines th.col-qty   { width: 7%; }
.po-new-lines th.col-area  { width: 9%; }
.po-new-lines th.col-code  { width: 8%; }
.po-new-lines th.col-memo  { width: 17%; }
.po-new-lines th.col-price { width: 12%; }
.po-new-lines th.col-total { width: 11%; }
.po-new-lines tbody td { vertical-align: middle; }
.po-new-lines td.col-line { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.po-new-lines td.col-qty .input { text-align: right; }
.po-new-mat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.po-new-mat .thumb { width: 40px; height: 26px; flex: none; }
.po-new-mat .cell-stack { min-width: 0; }
.po-new-mat .cell-stack .main { font-weight: 500; white-space: normal; }
.po-new-mat .cell-stack .sub { white-space: normal; }
/* The controls on a line are sized to the line (30px), not to a form. */
.po-new-cell { height: 30px; padding: 4px 8px; font-size: 12px; }
select.po-new-cell { padding-right: 24px; background-position: right 7px center; }
.po-new-cell-sub { display: block; margin-top: 3px; font-size: 11px; color: var(--color-text-muted); }
.po-new-add {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-primary-700);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.po-new-add:hover { color: var(--color-primary-600); }

/* The reading row under a line: where else the material comes from, the pack
   check and the reorder line it covers. It belongs to the line above, so it
   carries no row mark and no hover band of its own. */
.data-table tbody tr.po-new-under td {
  padding-top: 0; padding-bottom: 12px;
  white-space: normal; cursor: default; text-align: left;
}
.data-table tbody tr.po-new-under td::after { content: none; }
.data-table tbody tr.po-new-under:hover td { background: transparent; }
.po-new-under__wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-left: calc(5% + 50px); }
.po-new-under .po-reading { font-size: 12px; color: var(--color-text-muted); }
.po-new-src {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; color: var(--color-primary-700);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.po-new-src:hover { color: var(--color-primary-600); }
.po-new-src svg { width: 14px; height: 14px; flex: none; }

/* The empty line at the foot of the grid: one field that takes typing. */
.data-table tbody tr.po-new-addrow td { background: transparent; cursor: default; text-align: left; }
.data-table tbody tr.po-new-addrow td::after { content: none; }
.po-new-addrow .input { max-width: 420px; }
/* The new-line row briefly takes the control ground when a product type is
   picked, so the switch is seen where the typing happens. */
.data-table tbody tr.po-new-addrow.is-switched td { animation: po-new-switched 900ms ease-out; }
@keyframes po-new-switched { from { background: var(--color-control); } to { background: transparent; } }
.po-new-grid-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 12px; color: var(--color-text-subtle); }

/* ---------- The compare popover ----------------------------------------------------
   Opens under "Other Sources", outside the table (a table wrap clips what hangs
   out of a cell), placed by the page script. A white box over the page, so it
   draws its own border and shadow; its compare grid is the shared one. */
.po-new-pop {
  position: fixed; z-index: 150; top: 0; left: 0;
  width: min(460px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px 14px;
}
.po-new-pop[hidden] { display: none; }
.po-new-pop__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.po-new-pop__head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.po-new-pop__head .sub { font-size: 12px; color: var(--color-text-muted); }
.po-new-pop__head .modal-close { margin-left: auto; }
.po-new-pop .po-compare th,
.po-new-pop .po-compare td { padding: 7px 8px; }
.po-new-pop .po-dialog-note { margin-top: 8px; }

/* ---------- The one card with subsections ---------------------------------------- */
.po-new-card { margin-bottom: var(--page-gap); }
.po-new-card > .card-body { padding: 16px; }
.po-new-card .po-sec__h .po-reading { color: var(--color-text-muted); }

/* The container: what the box is and where it goes on one line, then the
   gauge (weight first) beside the box's facts, then the top-up advice. */
.po-new-ship__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.po-new-ship__name { font-size: 13px; font-weight: 600; }
.po-new-ship__head .po-reading { font-size: 12px; color: var(--color-text-muted); }
.po-new-ship__body { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 12px 28px; align-items: start; }
.po-new-ship__body .po-kv dd { font-size: 12px; line-height: 1.5; }
.po-new-ship__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* A draft made from an order's buying plan lists each container the plan
   worked out and what it put in it, under the head of the section. */
.po-new-boxes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.po-new-boxes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; }
.po-new-boxes .po-reading { font-size: 12px; color: var(--color-text-muted); }
.po-new-topup {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
}
.po-new-topup > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--color-warn-ink); }
.po-new-topup__text { flex: 1 1 320px; min-width: 0; }
.po-new-topup__text strong { color: var(--color-text); font-weight: 600; }
.po-new-topup__text a { color: var(--color-primary-700); text-decoration: none; }
.po-new-topup__acts { display: inline-flex; gap: 6px; flex: none; align-self: center; }

/* Totals & Terms: the figures as a key–value block on the left, the two notes
   on the right. The grand total is the one figure in weight. */
.po-new-totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.po-new-totals .po-kv dd { line-height: 1.5; }
.po-new-grand { font-weight: 600; font-size: 14px; }
.po-new-grand .po-fx__base { font-weight: 400; }
.po-new-notes { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.po-new-notes .field label { font-size: 12px; }
.po-new-ref { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.po-new-ref .field { flex: 0 0 220px; }

/* Approval Route: the reading for this PO, then the tenant's thresholds as
   muted rows — the rule, never the answer for this amount. */
.po-new-route { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-left: 0; list-style: none; font-size: 12px; color: var(--color-text-muted); }
.po-new-route li { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.po-new-route__k { min-width: 140px; font-variant-numeric: tabular-nums; }
.po-new-route a { color: var(--color-primary-700); text-decoration: none; }

/* ---------- The footer bar --------------------------------------------------------
   The three ways out stay in reach while the page scrolls: sticky to the
   bottom of the page's scroll box, a white bar with its own edge and shadow. */
.po-new-foot {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 12px 16px; margin-bottom: var(--page-gap);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.po-new-foot__acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.po-new-foot__note { margin: 0; flex: 1 1 300px; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }

/* ---------- Dialogs -----------------------------------------------------------------
   The supplier picker's search, its rows' right-hand reading, the inline
   new-supplier form, the second answer a destination asks for, and the
   tables in the slide-overs. */
.po-new-search { max-width: none; margin-bottom: 12px; }
.po-new-pick { max-height: 420px; overflow-y: auto; }
.po-new-pick .po-pick-row { flex-wrap: wrap; }
.po-new-pick .po-pick-row__meta a { color: var(--color-primary-700); text-decoration: none; }
.po-new-pick .po-linked { flex: none; }
.po-new-pick-empty { padding: 10px 2px; font-size: 12px; color: var(--color-text-muted); }
.po-new-dlg-h { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-new-dlg-h:first-child { margin-top: 0; }
.po-new-dlg-h .subtle { font-weight: 400; font-size: 12px; }
.po-new-mini {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
  margin-top: 12px; padding: 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-new-mini[hidden] { display: none; }
.po-new-mini .input,
.po-new-mini .select { background-color: var(--color-surface); }
.po-new-f--xs { flex: 0 0 110px; }
.po-new-f--sm { flex: 0 0 168px; }
.po-new-f--md { flex: 0 0 240px; }
.po-new-f--lg { flex: 1 1 280px; }
.po-new-more { padding: 0 12px 2px 40px; width: 100%; }
.po-new-more[hidden] { display: none; }
.po-new-more .select { max-width: 340px; background-color: var(--color-surface); }
.po-new-more p { margin: 6px 0 0; font-size: 12px; color: var(--color-text-muted); }
.po-new-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.po-new-inline .input { width: 96px; }
.po-new-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.po-new-modal-tbl { table-layout: fixed; }
.po-new-modal-tbl th.col-file  { width: 40%; }
.po-new-modal-tbl th.col-to    { width: 60%; }
.po-new-prev th.col-mat   { width: 38%; }
.po-new-prev th.col-qty   { width: 26%; }
.po-new-prev th.col-res   { width: 36%; }
.po-new-prev td.col-res { white-space: normal; }
.po-new-split th.col-del  { width: 16%; }
.po-new-split th.col-qty  { width: 18%; }
.po-new-split th.col-dest { width: 38%; }
.po-new-split th.col-date { width: 28%; }
.po-new-split .po-new-cell { width: 100%; }
.po-new-send-to { display: flex; align-items: center; gap: 10px; }
.po-new-send-to .avatar { flex: none; }

/* ---------- Narrow screens ----------------------------------------------------------
   Below 1200 the nine columns keep their shares on a 1000px table and scroll
   inside the wrap (the house pattern). The container block and the totals
   stack at 1100. At 768 the footer's buttons grow to the 44px touch floor.
   At 480 the lines grid becomes one card per line: the header goes, each cell
   is a row of label and value, and the reading row follows its card. */
@media (max-width: 1200px) {
  .po-new-shell > .table-wrap { overflow-x: auto; }
  .po-new-lines { min-width: 1000px; }
  /* The reading under a line wraps inside what the screen shows, not across
     the full scrolling width of the table. */
  .po-new-under__wrap { max-width: calc(100vw - 150px); }
}
@media (max-width: 1100px) {
  /* The gear carries Import Lines too; the strip keeps to its six types. */
  .po-new-types__end { display: none; }
  .po-new-ship__body,
  .po-new-totals { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .po-new-from__acts { margin-left: 0; }
  .po-new-types__end { margin-left: 0; margin-bottom: 8px; }
  .po-new-foot { padding: 10px 12px; gap: 6px 12px; }
  .po-new-foot .btn { min-height: 44px; }
  .po-new-foot__acts { width: 100%; flex-wrap: nowrap; }
  /* Three equal shares: the direct buttons and the span that carries the
     disabled button's title all take flex-basis 0, so none outgrows its share. */
  .po-new-foot__acts > * { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
  .po-new-foot__acts > span > .btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .po-new-topup__acts { width: 100%; }
  .po-new-topup__acts .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .po-new-ship__acts .btn { min-height: 44px; }
  .po-new-ref .field,
  .po-new-f--xs, .po-new-f--sm, .po-new-f--md { flex: 1 1 calc(50% - 10px); }
  .po-new-under__wrap { padding-left: 0; }
  .po-new-route__k { min-width: 0; }
}
@media (max-width: 480px) {
  /* A sticky bar of three buttons and a sentence is a quarter of a phone:
     on a phone the ways out sit at the end of the page instead. The strip
     keeps its six types on one line and scrolls sideways. */
  .po-new-foot { position: static; box-shadow: var(--shadow-sm); }
  .po-new-foot__acts { flex-wrap: wrap; }
  .po-new-foot__acts > * { flex: 1 1 100%; }
  .po-new-types { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .po-new-types .tab { flex: none; }
  .po-new-lines { min-width: 0; table-layout: auto; }
  .po-new-shell > .table-wrap { overflow-x: visible; }
  .po-new-lines thead { display: none; }
  .po-new-lines,
  .po-new-lines tbody,
  .po-new-lines tr,
  .po-new-lines td { display: block; width: auto; }
  .po-new-lines tbody tr.po-new-row {
    padding: 10px 12px;
    background: var(--color-control); border: 1px solid var(--color-control-border);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .po-new-lines tbody tr.po-new-row td {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center;
    padding: 5px 0; border: 0; text-align: left; white-space: normal;
  }
  .po-new-lines tbody tr.po-new-row td > * { grid-column: 2; }
  .po-new-lines tbody tr.po-new-row td::after { content: none; }
  .po-new-lines tbody tr.po-new-row td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-text-muted);
  }
  .po-new-lines tbody tr.po-new-row:hover td { background: transparent; }
  .po-new-lines td.col-qty .input { text-align: left; }
  /* The card is on the control ground, so its fields invert to white (memory.md §13). */
  .po-new-lines tbody tr.po-new-row :is(.input, .select) { background-color: var(--color-surface); }
  .po-new-mat .thumb { display: none; }
  .po-new-under__wrap { max-width: none; }
  .data-table tbody tr.po-new-under td {
    margin-bottom: 12px; padding: 8px 12px 10px;
    background: var(--color-control); border: 1px solid var(--color-control-border); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .po-new-lines tbody tr.po-new-addrow td { padding: 4px 0; border: 0; }
  .po-new-addrow .input { max-width: none; }
  .po-new-ref .field,
  .po-new-f--xs, .po-new-f--sm, .po-new-f--md { flex-basis: 100%; }
  .po-new-more { padding-left: 0; }
}

/* ---------- Late additions: the currency field and a pick row's second answer ----
   The currency field is a reading with an Override link inside it, not a
   button, so it does not light up as one. A destination that asks one more
   thing (which client, which consignee) opens that question under its own
   row, on the row's width. */
.po-new-head .po-new-static { cursor: default; }
.po-new-head .po-new-static:hover { background: none; border-color: transparent; }
.po-pick-row:has(.po-new-more) { flex-wrap: wrap; }

/* ---------- Review fixes ------------------------------------------------------------
   The Vava reading in the header is a long phrase on this page; it wraps on a
   phone instead of running off the edge. A pair of fields in a .po-new-ref row
   inside a dialog shares one top edge (app.css gives every field after the
   first a 14px top margin in a modal or slide-over), and the row itself stands
   14px off the field above it. The cost-type select is sized to its options
   (memory.md §9), not stretched across the slide-over. */
.po-new-head .po-linked { white-space: normal; }
:is(.modal-body, .slideover-body) .po-new-ref > .field + .field { margin-top: 0; }
:is(.modal-body, .slideover-body) .field + .po-new-ref { margin-top: 14px; }
.slideover-body > .field.po-new-f--md { width: 240px; max-width: 100%; }