/* ==========================================================================
   Purchase Orders — Arrivals (arrivals.html)

   Spec: build/po/pages.md §9

   Only what is this page's own: the four views' column shares, the filters
   every view shares, the incoming-slab readings, the last-free-day actions,
   the at-risk banner, the KPI tiles as links, the Add Containers pieces, 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 fill
   gauge, the bulk bar, the gear dialogs) is in css/pages/purchase-orders.css.
   Classes here use the `po-arv-` prefix.

   NO MONEY ON THIS PAGE. Arrivals is the one buying page every user may open,
   so nothing here styles a price, a cost or a PO value; where one would sit,
   the page draws `.po-perm` from the shared sheet.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Each view's table takes shares of its width under `table-layout: fixed`, so
   the columns resize with the browser and never with the data. The money-free
   register ends on Status (right-aligned by `.data-table`'s last-column rule),
   and the Load column is wide enough for the two fill rows. */
.po-arv-boxes th.col-check  { width: 4%; }
.po-arv-boxes th.col-box    { width: 12%; }
.po-arv-boxes th.col-po     { width: 14%; }
.po-arv-boxes th.col-route  { width: 15%; }
.po-arv-boxes th.col-eta    { width: 15%; }
.po-arv-boxes th.col-dest   { width: 13%; }
.po-arv-boxes th.col-load   { width: 15%; }
.po-arv-boxes th.col-status { width: 12%; }

.po-arv-slabs th.col-mat   { width: 19%; }
.po-arv-slabs th.col-count { width: 7%; }
.po-arv-slabs th.col-box   { width: 11%; }
.po-arv-slabs th.col-eta   { width: 19%; }
.po-arv-slabs th.col-alloc { width: 18%; }
.po-arv-slabs th.col-src   { width: 12%; }
.po-arv-slabs th.col-sell  { width: 14%; }

.po-arv-upcoming th.col-box    { width: 20%; }
.po-arv-upcoming th.col-arr    { width: 20%; }
.po-arv-upcoming th.col-dest   { width: 20%; }
.po-arv-upcoming th.col-count  { width: 9%; }
.po-arv-upcoming th.col-recv   { width: 17%; }
.po-arv-upcoming th.col-status { width: 14%; }

.po-arv-lfd th.col-box   { width: 15%; }
.po-arv-lfd th.col-port  { width: 15%; }
.po-arv-lfd th.col-lfd   { width: 17%; }
.po-arv-lfd th.col-hold  { width: 16%; }
.po-arv-lfd th.col-after { width: 19%; }
.po-arv-lfd th.col-act   { width: 18%; }

.po-arv-preview th.col-box     { width: 24%; }
.po-arv-preview th.col-ref     { width: 20%; }
.po-arv-preview th.col-po      { width: 20%; }
.po-arv-preview th.col-check-r { width: 36%; }
.po-arv-preview td.col-check-r { white-space: normal; line-height: 1.9; }
.po-arv-preview td.col-check-r .po-reading { font-size: 12px; vertical-align: middle; }
.po-arv-preview td a { color: var(--color-primary-600); text-decoration: none; }

/* A cell that stacks three lines (the container, our number, its B/L) keeps
   its sub-lines one step under the main line (memory.md §4). A wrapped long
   route or consignee breaks between words, never inside a reference. */
.po-arv-boxes .cell-stack .sub { line-height: 1.4; }
/* Status ends the row on the right: its badge, a flag word and the tags all
   line up on the column's right edge. */
.po-arv-boxes td.col-status .po-tags,
.po-arv-upcoming td.col-status .po-tags { justify-content: flex-end; }
.po-arv-boxes td.col-po .po-linked { white-space: normal; margin-top: 2px; }
/* A reading that runs longer than its column (the last free day, the linked
   source) breaks between its words rather than running into the next column. */
.po-arv-boxes .po-lfd,
.po-arv-lfd .po-lfd,
.po-arv-slabs td.col-src .po-linked { white-space: normal; }
/* A week heading spans the table and reads from the left, although its cell
   is the row's last (which the data table right-aligns). */
.data-table.po-arv-upcoming tbody tr.po-group-row td { text-align: left; }

/* THE FILL GAUGE IN A REGISTER CELL. Weight first, volume second, the closing
   word under both (the shared `.po-fill`). A 15% column cannot give the bar
   the shared 70px floor next to its label and figure, so the bar takes what
   is left down to 36px; the figure is the percentage alone, the kilos sit on
   the closing line. */
.po-arv-boxes .po-fill--compact {
  grid-template-columns: max-content minmax(36px, 1fr) max-content;
  margin-top: 4px;
}
.po-arv-boxes .po-fill__fig { min-width: 34px; text-align: right; }
.po-arv-boxes .po-fill__closes { white-space: normal; }

/* ---------- Readings in the rows ------------------------------------------------
   A box with no number yet reads as a fact still to come (muted), a lot that
   is promised to a client or held reads in warn ink (the incoming-slab family
   "Allocated · Held" is a wait), and consignment stock not sold from our yards
   is muted. Words, never chips (memory.md §19). */
.po-arv-unset { color: var(--color-text-muted); font-style: italic; font-weight: 400; }
.cell-stack .main.po-arv-held { color: var(--color-warn-ink); }
.cell-stack .main.po-arv-muted { color: var(--color-text-muted); }
.po-arv-held a { color: inherit; text-decoration: underline; text-decoration-color: transparent; }
.po-arv-held a:hover { color: var(--color-primary-700); }

/* An action carried inside a cell or a line ("Continue Receiving", "Inspect",
   "See in Stock"): a word with its icon in the link ink, never underlined. */
.po-arv-act {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-size: 12px; font-weight: 500; color: var(--color-primary-600);
  text-decoration: none; white-space: nowrap;
}
.po-arv-act:hover { color: var(--color-primary-700); }
.po-arv-act svg { width: 13px; height: 13px; flex: none; }
.data-table tbody td:last-child .po-arv-act { align-self: flex-end; }

/* The last-free-day acts close the row on the right and drop under one
   another when the column is too narrow for both. */
.po-arv-acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.po-arv-lfd td.col-after .po-perm { margin-top: 3px; }

/* ---------- The filters every view shares ----------------------------------------
   A label and a select per filter, each select sized to its longest option
   (memory.md §9), on the control ground the select already carries (§13). */
.po-arv-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 0 0 12px;
}
.po-arv-filters__ico { width: 15px; height: 15px; flex: none; color: var(--color-text-subtle); }
.po-arv-filter { display: inline-flex; align-items: center; gap: 6px; }
.po-arv-filter__k { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.po-arv-filter__sel {
  width: auto; flex: none;
  padding-top: 4px; padding-bottom: 4px; font-size: 12px;
}

/* ---------- The line over Incoming Slabs ------------------------------------------
   Who sees the view (everyone, and no costs), the slab-by-slab switch
   ([switch] [label], memory.md §5) and the way to Stock. */
.po-arv-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin: 0 0 10px;
}
.po-arv-note__text {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-text-muted);
}
.po-arv-note__text svg { width: 14px; height: 14px; flex: none; }
.po-arv-note__switch { font-size: 12px; font-weight: 400; }
.po-arv-note .po-arv-act { margin-top: 0; }

/* A footer that carries a sentence and a reading side by side. */
.po-arv-foot { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.po-arv-foot svg { width: 13px; height: 13px; flex: none; color: var(--color-text-subtle); }

/* ---------- The at-risk 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-arv-alert { align-items: center; flex-wrap: wrap; }
.po-arv-alert__text { flex: 1 1 320px; min-width: 0; line-height: 1.5; }
.po-arv-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-arv-kpi,
a.po-arv-kpi:hover { color: inherit; text-decoration: none; }
a.po-arv-kpi { cursor: pointer; }
a.po-arv-kpi:hover { border-color: var(--color-border-strong); }

/* ---------- Dialog pieces ---------------------------------------------------------------- */
.po-arv-dlg-h { margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-arv-dlg-h .subtle { font-size: 12px; font-weight: 400; }
.po-arv-gap { margin-top: 14px; }
.po-arv-foot-note { font-size: 11px; color: var(--color-text-subtle); align-self: center; }
.po-arv-drop { margin-top: 14px; }
.po-arv-drop__acts { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#so-add-containers [data-modal-tabs] { margin-bottom: 14px; }
#so-add-containers [data-modal-tabs] .subtab svg { width: 14px; height: 14px; }

/* ---------- Narrow screens ----------------------------------------------------------------
   Below 1100 the columns fight: each table keeps its shares on a fixed width
   and scrolls sideways inside `.table-wrap` (the house pattern) instead of
   folding the readings into forty-pixel columns. */
@media (max-width: 1100px) {
  .po-arv-boxes { min-width: 1080px; }
  .po-arv-slabs { min-width: 980px; }
  .po-arv-upcoming { min-width: 820px; }
  .po-arv-lfd { min-width: 980px; }
  /* Four tiles fold two by two, every tile the same size. */
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .po-arv-alert__acts { margin-left: 0; }
  .po-arv-alert__acts .btn,
  .po-arv-acts .btn { min-height: 44px; }
  .po-arv-act { min-height: 32px; }
  .po-arv-filter__sel { min-height: 36px; }
  .po-arv-preview { min-width: 520px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .po-arv-alert__text { flex: 1 1 0; }
  .po-bulk .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .po-bulk .po-bulk__clear { flex-basis: 100%; }
  .po-arv-alert__acts { flex-basis: 100%; }
  .po-arv-alert__acts .btn { flex: 1 1 0; justify-content: center; }
  /* The filters stack, each label over a select that takes the line. */
  .po-arv-filters { gap: 8px; }
  .po-arv-filters__ico { display: none; }
  .po-arv-filter { flex: 1 1 calc(50% - 8px); flex-direction: column; align-items: stretch; gap: 4px; }
  .po-arv-filter__sel { width: 100%; }
  /* The header actions take a line of their own and wrap on it: app.css
     holds the group at its own width, 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's sentence and the pager each take a line. */
  .tab-shell .card-footer { flex-wrap: wrap; gap: 8px; }
  .tab-shell .card-footer .page-controls { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
}