/* ==========================================================================
   Purchase Orders — Reorder (purchase-orders-reorder.html)

   Spec: build/po/pages.md §4

   Only what is this page's own: the reorder list's column shares, the cells
   that hold a quantity input or a container gauge, the location word-switch
   beside the chips, the row menu that lives outside the table, the Client
   Demand and Calendar views, the Budget Plan and Planning cards under the
   panel, and the dialog pieces. Everything another Purchase Orders page also
   says (the hub strip, the view switch, readings, the bulk bar, the group
   row, the fill gauge, the gear dialogs) is in css/pages/purchase-orders.css.
   Classes here use the `po-ro-` prefix.
   ========================================================================== */

/* ---------- The reorder list's columns ----------------------------------------
   Ten columns take shares of the table under `table-layout: fixed`, so they
   resize with the browser and never with the data. Material carries the line,
   its location, the shortfall flag and the row menu, so it takes the widest
   share after Where It Stands, which holds the reason in words (and on the
   top-up line a gauge and a button). The figures are narrow. Where It Stands
   sits last and is right-aligned by `.data-table`'s own last-column rule. */
.po-ro-list th.col-check { width: 3%; }
.po-ro-list th.col-mat   { width: 17%; }
.po-ro-list th.col-free  { width: 11%; }
.po-ro-list th.col-in    { width: 11%; }
.po-ro-list th.col-rop   { width: 8%; }
.po-ro-list th.col-sales { width: 6%; }
.po-ro-list th.col-sugg  { width: 9%; }
.po-ro-list th.col-qty   { width: 9%; }
.po-ro-list th.col-by    { width: 8%; }
.po-ro-list th.col-stand { width: 18%; }
.po-ro-list td.col-free .sub,
.po-ro-list td.col-in .sub,
.po-ro-list td.col-stand .sub { white-space: normal; }
.po-ro-list td { vertical-align: top; }
/* A supplier band is one cell spanning the table; as the last cell of its row
   it would take the last column's right alignment, so it is put back left. */
.po-ro-list tr.po-group-row td,
.po-ro-demand tr.po-group-row td { vertical-align: middle; text-align: left; }
/* A supplier band never ends a page without its lines, and never stays behind
   when its lines open the next one: app.js pages the 18 rows (bands included)
   at 15, so the band follows its first line across the break. */
.po-ro-list tr.po-group-row:not(.is-off-page):has(+ tr.is-off-page) { display: none !important; }
.po-ro-list tr.po-group-row.is-off-page:has(+ tr[data-line]:not(.is-off-page):not([hidden])) { display: table-row !important; }

/* The Material cell: the identity takes the cell, the row menu's button stands
   at its top right as a 28px target. */
.po-ro-id { display: flex; align-items: flex-start; gap: 6px; }
.po-ro-id__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.po-ro-more { width: 28px; height: 28px; flex: none; margin-top: -3px; color: var(--color-text-subtle); }
.po-ro-more svg { width: 16px; height: 16px; }
.po-ro-more:hover { color: var(--color-text); }

/* Words in the row's own type, coloured only when urgent (memory.md §19). */
/* Stated with the cell-stack lines too, which carry their own ink in app.css. */
.po-ro-flag { font-size: 11px; font-weight: 600; color: var(--color-danger-ink); }
.po-ro-neg,
.cell-stack .main.po-ro-neg { color: var(--color-danger-ink); font-weight: 600; }
.po-ro-late,
.cell-stack .sub.po-ro-late { color: var(--color-danger-ink); font-weight: 600; }
.po-ro-warn,
.cell-stack .sub.po-ro-warn { color: var(--color-warn-ink); }
.po-ro-ok,
.cell-stack .main.po-ro-ok { color: var(--color-success-ink); }
.po-ro-list td a,
.po-ro-demand td a,
.po-ro-budget td a { color: var(--color-primary-600); text-decoration: none; }
.po-ro-list td a:hover,
.po-ro-demand td a:hover,
.po-ro-budget td a:hover { color: var(--color-primary-700); }

/* Qty to Order: a number input sized to four digits, its unit after it. The
   input stands on the control ground by being an `.input` (§13). */
.po-ro-qty-wrap { display: inline-flex; align-items: center; gap: 5px; }
.po-ro-qty {
  width: 64px; padding: 4px 8px; font-size: 13px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.po-ro-unit { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.po-ro-qty.is-edited { border-color: var(--color-warn); }

/* Where It Stands on the top-up line: the gauge and its button sit at the
   cell's right edge, with the cell's own text. */
.po-ro-stand { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.po-ro-stand .po-fill { width: 100%; max-width: 250px; text-align: left; grid-template-columns: max-content minmax(30px, 1fr) max-content; }
.po-ro-stand .btn { white-space: nowrap; }

/* ---------- The location word-switch ------------------------------------------
   After the chips, three words joined by `·`: Miami Yard, Orlando Warehouse,
   Combined. The one in force dark and 600, the rest muted. Never boxed: it is
   a reading you can press, not a second row of chips. */
.po-ro-loc { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 0; font-size: 12px; }
.po-ro-loc__lead { color: var(--color-text-muted); margin-right: 8px; }
.po-ro-loc__opt {
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text-muted);
  white-space: nowrap; transition: color 120ms;
}
.po-ro-loc__opt:hover { color: var(--color-text); }
.po-ro-loc__opt.is-active { color: var(--color-text); font-weight: 600; }
/* The dot TRAILS each word but the last, so a wrapped line never opens on
   punctuation. */
.po-ro-loc__opt:not(:last-child)::after {
  content: "·"; margin: 0 8px; color: var(--color-text-subtle); font-weight: 400;
}

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

/* ---------- The order-by banner ---------------------------------------------------- */
.po-ro-alert { align-items: center; flex-wrap: wrap; }
.po-ro-alert__text { flex: 1 1 320px; min-width: 0; line-height: 1.5; }
.po-ro-alert__acts { display: inline-flex; gap: 6px; flex: none; margin-left: auto; }

/* ---------- The row menu ---------------------------------------------------------------
   One menu for every row, outside the table: `.table-wrap` clips anything that
   hangs out of a cell. The page script places it beside the button. */
.po-ro-rowmenu { position: static; }
.po-ro-rowmenu .dropdown-menu { position: fixed; top: 0; left: 0; right: auto; min-width: 200px; }

/* ---------- What Draft POs made ------------------------------------------------------
   A line under the bulk bar after the drafts are made, with the way into the
   draft. On the control ground (a box inside the white panel, §13). */
.po-ro-made {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-bottom: 10px; padding: 8px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--color-text);
}
.po-ro-made[hidden] { display: none; }
.po-ro-made svg { width: 15px; height: 15px; flex: none; color: var(--color-success-ink); }
.po-ro-made a { color: var(--color-primary-600); text-decoration: none; font-weight: 500; }
.po-ro-made__note { font-size: 12px; color: var(--color-text-muted); }

/* A muted line under a view's table: the method behind the figures. */
.po-ro-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 12px 0 0; font-size: 12px; color: var(--color-text-subtle); line-height: 1.5;
}
.po-ro-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.po-ro-note a { color: var(--color-primary-600); text-decoration: none; }

/* ---------- Client Demand view ----------------------------------------------------------- */
.po-ro-view-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.po-ro-view-head p { margin: 0; flex: 1 1 320px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.po-ro-view-head__acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.po-ro-demand th.col-mat    { width: 24%; }
.po-ro-demand th.col-orders { width: 26%; }
.po-ro-demand th.col-short  { width: 10%; }
.po-ro-demand th.col-cover  { width: 26%; }
.po-ro-demand th.col-buy    { width: 14%; }
.po-ro-demand td { vertical-align: top; }
.po-ro-demand td .sub { white-space: normal; }

/* ---------- Calendar view -----------------------------------------------------------------
   Three month strips, Monday first. Each day is a cell on the control ground
   (a box inside the white panel, §13) with its number and, under it, a mark
   per event: the cart for an order-by date (warn ink, danger once late), the
   send arrow for a PO sent, the ship for a container due. Today wears the
   primary edge. The agenda under the strips says the same facts in words. */
.po-ro-cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.po-ro-cal__month h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-ro-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.po-ro-cal__dow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-subtle); text-align: center; padding-bottom: 2px;
}
.po-ro-cal__day {
  min-height: 46px; padding: 3px 4px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.po-ro-cal__day.is-blank { background: none; border-color: transparent; }
.po-ro-cal__day.is-today { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.po-ro-cal__n { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.po-ro-cal__day.is-today .po-ro-cal__n { color: var(--color-primary-700); font-weight: 700; }
.po-ro-cal__marks { display: flex; flex-wrap: wrap; gap: 2px; }
.po-ro-cal__marks svg { width: 13px; height: 13px; color: var(--color-text-muted); }
.po-ro-cal__marks .is-by svg { color: var(--color-warn-ink); }
.po-ro-cal__marks .is-late svg { color: var(--color-danger-ink); }
.po-ro-cal__marks > span { display: inline-flex; }
.po-ro-cal-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 16px; font-size: 12px; color: var(--color-text-muted); }
.po-ro-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.po-ro-cal-legend svg { width: 13px; height: 13px; color: var(--color-text-muted); }
.po-ro-cal-legend .is-by svg { color: var(--color-warn-ink); }
.po-ro-cal-legend .is-late svg { color: var(--color-danger-ink); }
.po-ro-agenda-h { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-ro-agenda .po-timeline__text a { color: var(--color-primary-600); text-decoration: none; }

/* ---------- The two cards under the panel ------------------------------------------------
   Budget Plan and Planning stand under the panel, not attached to it; one
   page gap above them (§22). Their headers carry the Edit control named for
   what it edits (§15). */
.po-ro-under { margin-top: var(--page-gap); align-items: start; }
.po-ro-under .card-header h3 { font-size: 14px; font-weight: 600; }
.po-ro-under .card-header { gap: 8px 12px; flex-wrap: wrap; }

/* The budget figures: number first, word after, tight (§6), on one line that
   wraps whole readings. The bar under them is an SVG whose rect width is the
   share planned. */
.po-ro-bfigs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; }
.po-ro-bfigs .po-stat-line .v { font-size: 17px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.po-ro-bfigs .po-stat-line .l { font-size: 12px; color: var(--color-text-muted); }
.po-ro-bfigs .po-ro-head .v { color: var(--color-success-ink); }
.po-ro-bbar { display: block; width: 100%; height: 6px; border-radius: 5px; overflow: hidden; background: var(--color-control); }
.po-ro-bbar rect { fill: var(--color-warn); }
.po-ro-bbar-note { margin: 4px 0 14px; font-size: 11px; color: var(--color-text-subtle); }
.po-ro-budget th.col-buy { width: 62%; }
.po-ro-budget th.col-amt { width: 38%; }
.po-ro-budget td .sub { white-space: normal; }
.po-ro-budget tr.po-ro-btotal td { font-weight: 600; border-top: 1px solid var(--color-border-strong); }
.po-ro-subh { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-ro-subh .subtle { font-size: 12px; font-weight: 400; }

/* Planning's key–value list keeps its values in the row's type; the setting
   words sit in it as words. */
.po-ro-plan .po-kv { row-gap: 8px; }
.po-ro-plan .po-kv dd .sub { display: block; font-size: 11px; color: var(--color-text-muted); }

/* ---------- Dialog pieces --------------------------------------------------------------- */
.po-ro-dlg-h { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-ro-dlg-h:first-child { margin-top: 0; }
.po-ro-dlg-h .subtle { font-size: 12px; font-weight: 400; }
.po-ro-foot-note { font-size: 11px; color: var(--color-text-subtle); align-self: center; }
.po-ro-gap { margin-top: 14px; }
.po-sec__h .subtle a { color: var(--color-primary-600); text-decoration: none; }
.po-ro-dlg-lead { margin: 0 0 8px; font-size: 13px; color: var(--color-text); }
.po-ro-dlg-lead strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The breakdown's sum: each term a row, the result under a rule. */
.po-ro-sum { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: baseline; }
.po-ro-sum__op { font-size: 13px; color: var(--color-text-subtle); text-align: center; width: 12px; }
.po-ro-sum__v { font-size: 14px; font-weight: 600; color: var(--color-text); text-align: right; font-variant-numeric: tabular-nums; }
.po-ro-sum__l { font-size: 13px; color: var(--color-text); }
.po-ro-sum__l .sub { display: block; font-size: 11px; color: var(--color-text-muted); }
.po-ro-sum__rule { grid-column: 1 / -1; height: 1px; background: var(--color-border-strong); }
.po-ro-proj { display: flex; flex-direction: column; gap: 6px; }
.po-ro-proj .po-reading { font-size: 13px; }
.po-ro-override { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.po-ro-override .input { width: 90px; text-align: right; }
.po-ro-override label { font-size: 12px; color: var(--color-text-muted); }

/* Thresholds and overrides: small number inputs in a table, sized to their
   figures (§9). */
.po-ro-thr th.col-loc { width: 34%; }
.po-ro-thr th.col-min { width: 22%; }
.po-ro-thr th.col-to  { width: 22%; }
.po-ro-thr th.col-max { width: 22%; }
.po-ro-thr .input,
.po-ro-ovr .input { width: 84px; padding: 4px 8px; font-size: 13px; text-align: right; }
.po-ro-ovr th.col-sup  { width: 40%; }
.po-ro-ovr th.col-lead { width: 34%; }
.po-ro-ovr th.col-safe { width: 26%; }
.po-ro-ovr td .sub { white-space: normal; }

/* Setting rows in the Planning slide-over: [switch] [label] [value], read
   left to right, nothing pushed to the far edge (§5, §16); two across. */
.po-ro-settings { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 32px; }
.po-ro-settings .switch-field { color: var(--color-text); }
.po-ro-fields { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.po-ro-fields .field { flex: none; }
/* The slide-over stacks its fields with a top margin on each one after the
   first; in a row of fields side by side that margin would step them down. */
.slideover-form .slideover-body .po-ro-fields > .field + .field { margin-top: 0; }
.po-ro-num { width: 96px; }
.po-ro-sel { width: auto; min-width: 140px; }
.po-ro-recips { display: flex; flex-wrap: wrap; gap: 6px; }
.po-ro-recip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 12px; color: var(--color-text);
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-ro-recip button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--color-text-subtle); display: inline-flex; }
.po-ro-recip svg { width: 12px; height: 12px; }

/* ---------- Narrow screens ---------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* Ten readings into ninety-pixel columns fight; the list keeps its shares
     on a 1180px table and scrolls sideways inside `.table-wrap`. */
  .po-ro-list { min-width: 1180px; }
  .po-ro-demand { min-width: 820px; }
  .po-ro-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .po-ro-more { width: 36px; height: 36px; margin-top: -6px; }
  .po-ro-alert__acts { margin-left: 0; }
  .po-ro-alert__acts .btn,
  .po-ro-view-head__acts .btn,
  .po-ro-stand .btn { min-height: 44px; }
  .po-ro-loc__opt { min-height: 36px; }
  .po-ro-cal { grid-template-columns: 1fr; }
  .po-ro-settings { grid-template-columns: 1fr; }
  .po-ro-thr { min-width: 480px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  /* The group keeps its aria-label; the lead word goes so the three
     locations read on one line. */
  .po-ro-loc__lead { display: none; }
  .po-bulk .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .po-bulk .po-bulk__clear { flex-basis: 100%; }
  .po-ro-alert__acts { flex-basis: 100%; }
  .po-ro-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; }
  .tab-shell .card-footer .page-controls { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
  .po-ro-cal__day { min-height: 40px; padding: 2px 3px; }
  .po-ro-sum { column-gap: 6px; }
  .po-ro-fields .field { flex: 1 1 100%; }
}