/* ==========================================================================
   Purchase Orders — the hub register (purchase-orders.html)

   Spec: build/po/pages.md §1

   Only what is this page's own: the register's and the Linked Orders table's
   column shares, the approval banner's action group, the KPI tiles as links,
   the row menu that lives outside the table, the Review Changes blocks, the
   dialog tables, and how the page folds at 1100 / 768 / 480. Everything
   another Purchase Orders page also says — the hub strip, the view switch,
   the readings, the bulk bar, the gear dialogs — is in
   css/pages/purchase-orders.css. Classes here use the `po-reg-` prefix.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Eight columns take shares of the table under `table-layout: fixed`, so they
   resize with the browser and never with the data. The PO column holds the
   supplier, the number and the buyer, the tags and the row menu, so it takes
   the widest share. Status is sized for its longest badge ("In Production /
   Loading") with room for a flag word to drop under it. The money sits last
   and is right-aligned by `.data-table`'s own last-column rule. */
.po-table--hub th.col-check    { width: 4%; }
.po-table--hub th.col-po       { width: 17%; }
.po-table--hub th.col-lines    { width: 14%; }
.po-table--hub th.col-box      { width: 14%; }
.po-table--hub th.col-progress { width: 14%; }
.po-table--hub th.col-next     { width: 14%; }
.po-table--hub th.col-status   { width: 13%; }
.po-table--hub th.col-total    { width: 10%; }
/* Three stage readings at the row's main size would take three lines in a
   14% column; at 12px they take two and stay a step under the PO's own name. */
.po-table--hub .po-progress { font-size: 12px; }
.po-table--hub td.col-next .po-reading,
.po-table--hub td.col-next .po-lfd { font-size: 13px; }

/* The Linked Orders table: one row, the identity cell carrying its three acts. */
.po-table--linked th.col-lo      { width: 26%; }
.po-table--linked th.col-lines   { width: 18%; }
.po-table--linked th.col-box     { width: 17%; }
.po-table--linked th.col-answers { width: 14%; }
.po-table--linked th.col-status  { width: 10%; }
.po-table--linked th.col-total   { width: 15%; }
.po-table--linked tbody tr { cursor: pointer; }

/* ---------- The PO cell ----------------------------------------------------------
   The identity (supplier, number | buyer, tags) takes the cell; the row menu's
   button stands at its top right, a 28px target that does not push the name
   onto a second line. */
.po-reg-po { display: flex; align-items: flex-start; gap: 6px; }
.po-reg-po__id { flex: 1 1 auto; min-width: 0; }
.po-reg-more { width: 28px; height: 28px; flex: none; margin-top: -3px; color: var(--color-text-subtle); }
.po-reg-more svg { width: 16px; height: 16px; }
.po-reg-more:hover { color: var(--color-text); }

/* ---------- The row menu -----------------------------------------------------------
   One menu for every row, outside the table: `.table-wrap` clips anything
   that hangs out of a cell, so a menu inside a row would open into a scroll
   bar. The page script places it beside the button that opened it. */
.po-reg-rowmenu { position: static; }
.po-reg-rowmenu .dropdown-menu { position: fixed; top: 0; left: 0; right: auto; min-width: 180px; }
.po-reg-rowmenu .dropdown-item.is-disabled { opacity: .5; cursor: not-allowed; }

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

/* ---------- KPI tiles as links ------------------------------------------------------
   Each tile opens the list behind it, so it is an <a>; it keeps the tile's own
   ink and loses the link underline. */
a.po-reg-kpi,
a.po-reg-kpi:hover { color: inherit; text-decoration: none; }
a.po-reg-kpi { cursor: pointer; }
a.po-reg-kpi:hover { border-color: var(--color-border-strong); }

/* ---------- Linked Orders view -------------------------------------------------------- */
.po-reg-intro {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 10px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5;
}
.po-reg-intro svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--color-success-ink); }
.po-reg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.po-reg-setting {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 0; font-size: 12px; color: var(--color-text-subtle);
}
.po-reg-setting svg { width: 13px; height: 13px; flex: none; }
.po-reg-setting a { color: var(--color-primary-600); text-decoration: none; }
.po-reg-setting a:hover { color: var(--color-primary-700); }

/* ---------- Dialog pieces -------------------------------------------------------------- */
.po-reg-dlg-h { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-reg-dlg-h .subtle { font-size: 12px; font-weight: 400; }
.po-reg-dlg-lead { margin: 0 0 12px; }
.po-reg-gap { margin-top: 14px; }
.po-reg-foot-note { font-size: 11px; color: var(--color-text-subtle); align-self: center; }
.po-reg-reason { width: auto; min-width: 200px; }
.po-reg-cancel-for { margin-bottom: 4px; }
/* Supplier Updates: the photos and the checklist under an event. */
.po-reg-thumbs { margin: 8px 0 6px; }
.po-reg-check { font-size: 12px; }
.po-reg-updates .po-timeline__text a { color: var(--color-primary-600); text-decoration: none; }

/* REVIEW CHANGES: one block per change on the control ground (a box inside a
   white panel, memory.md §13) — our v1 over their v2, the changed value in
   warn ink, the three answers, and the counter preset when Counter is chosen. */
.po-reg-chg {
  padding: 12px 14px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-reg-chg + .po-reg-chg { margin-top: 10px; }
.po-reg-chg__h { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; }
.po-reg-chg__grid,
.po-reg-chg__counter {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 10px; row-gap: 4px; align-items: baseline;
}
.po-reg-chg__k { font-size: 12px; color: var(--color-text-muted); text-align: right; white-space: nowrap; }
.po-reg-chg__v { font-size: 13px; color: var(--color-text); }
.po-reg-chg__v.is-changed { color: var(--color-warn-ink); font-weight: 600; }
.po-reg-chg__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.po-reg-chg__counter {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--color-control-border);
  font-size: 13px;
}
.po-reg-chg__counter[hidden] { display: none; }
.po-reg-chg .po-dialog-note { margin-top: 6px; }

/* The dialog tables: lines of the linked order, the import's column map and
   its preview. Shares of each table, the last column right-aligned. */
.po-reg-lo-lines th.col-mat   { width: 34%; }
.po-reg-lo-lines th.col-qty   { width: 16%; }
.po-reg-lo-lines th.col-area  { width: 16%; }
.po-reg-lo-lines th.col-price { width: 15%; }
.po-reg-lo-lines th.col-total { width: 19%; }
.po-reg-map th.col-file { width: 40%; }
.po-reg-map th.col-to   { width: 60%; }
.po-reg-map__sel { width: auto; max-width: 100%; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
.po-reg-preview th.col-sup     { width: 26%; }
.po-reg-preview th.col-mat     { width: 32%; }
.po-reg-preview th.col-qty     { width: 18%; }
.po-reg-preview th.col-check-r { width: 24%; }
.po-reg-preview td.col-check-r { white-space: normal; line-height: 1.9; }
.po-reg-preview td.col-check-r .po-reading { font-size: 12px; vertical-align: middle; }

/* ---------- Narrow screens ----------------------------------------------------------------
   Below 1100 the eight columns fight: the register keeps its shares on a
   1040px table and scrolls sideways inside `.table-wrap` (the house pattern)
   instead of folding eight readings into forty-pixel columns. */
@media (max-width: 1100px) {
  .po-table--hub { min-width: 1040px; }
  .po-table--linked { min-width: 860px; }
  /* Four tiles fold two by two, every tile the same size (orders-list.css). */
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .po-reg-more { width: 36px; height: 36px; margin-top: -6px; }
  .po-reg-alert__acts { margin-left: 0; }
  .po-reg-alert__acts .btn,
  .po-reg-acts .btn,
  .po-reg-chg__acts .btn { min-height: 44px; }
  .po-reg-lo-lines { min-width: 520px; }
  .po-reg-preview { min-width: 520px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .po-bulk .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .po-bulk .po-bulk__clear { flex-basis: 100%; }
  .po-reg-alert__acts { flex-basis: 100%; }
  .po-reg-alert__acts .btn { flex: 1 1 0; justify-content: center; }
  .po-reg-chg__grid,
  .po-reg-chg__counter { grid-template-columns: 1fr; }
  .po-reg-chg__k { text-align: left; }
  .po-reg-reason { min-width: 0; width: 100%; }
  /* The header actions take a line of their own and wrap on it: app.css
     holds the group at its own width (`flex: none`), which on a phone runs
     the gear past the screen edge. */
  .page-header .page-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  /* The footer count and the pager each take a line, rather than the count
     being squeezed into a column of single words. */
  .tab-shell .card-footer { flex-wrap: wrap; gap: 8px; }
  .tab-shell .card-footer .page-controls { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
}