/* Receive shipment — receive_shipment.css v1.0.4 (spec 050 S4 "The window"; TASK-2026-155)

   The window of the Stock group where a delivery is received (receive_shipment.js, receive_shipment_parts.js). The owner's fixes of 2026-10-13 govern: the app's own buttons, fields,
   dropdowns, cards and tables (app.css) do all the work, so this file is only the few things the app has no class for: the numbered step badge, the (i) in the card's top
   inline-end corner, the size grid that folds into one small form per size on its own width, and the money and warning blocks of the last step.

   Rules this file keeps: tokens only (no one-off colours), logical sides only (the page reads right to left first), no display on anything that is toggled with the hidden
   attribute, and the grid folds on ITS width (a container query), never on the screen's, because the site-wide fold at 1100px is keyed on the screen.
   Loaded after app.css so a rule here wins an equal-specificity tie with it.
*/

.rcv-page { display: flex; flex-direction: column; gap: 20px; max-inline-size: 1080px; min-inline-size: 0; }
.rcv-page > * { min-inline-size: 0; }

/* ─────────────── the cards, and the (i) in the top inline-end corner ─────────────── */
.rcv-card { position: relative; }
.rcv-card:hover { transform: none; }                    /* a form card does not lift under the pointer while someone types in it */
.rcv-card > .info-tip { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; margin: 0; z-index: 3; }
.rcv-card > .card-header { padding-inline-end: var(--corner-i-reserve, 36px); }
.rcv-card .card-header h3 { gap: 10px; }

/* the number of the step: a filled circle, a figure, then the title */
.rcv-step {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  background: var(--fill, var(--brand)); color: var(--on-fill, var(--on-fill));
  font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}

/* ─────────────── step 1: the fields ─────────────── */
.rcv-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 320px)); gap: 16px; }
.rcv-fields > .rcv-field { margin: 0; min-inline-size: 0; }
.rcv-kind { max-inline-size: none; }

/* ─────────────── step 2: the search and the pick list ─────────────── */
.rcv-search { margin-block-end: 6px; }
.rcv-list { display: flex; flex-direction: column; margin-block-start: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.rcv-result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; inline-size: 100%;
  padding: 10px 14px; text-align: start; background: none; border: 0; border-block-end: 1px solid var(--line);
  color: var(--text); font: inherit; cursor: pointer;
}
.rcv-result:last-child { border-block-end: 0; }
.rcv-result:hover { background: var(--tint); }
.rcv-result:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rcv-result-name { font-weight: 600; }
.rcv-code { color: var(--muted); font-size: .8rem; }
.rcv-result-meta { margin-inline-start: auto; color: var(--muted); font-size: .8rem; }
.rcv-none, .rcv-empty { margin-block: 12px 0; margin-inline: 0; color: var(--muted); }
.rcv-muted { color: var(--muted); font-size: .85rem; }

.rcv-item { margin-block-start: 18px; }
.rcv-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-block-end: 10px; }
.rcv-item-head .btn { margin-inline-start: auto; }

/* ─────────────── the size grid: now + new = after ─────────────── */
.rcv-grid { container-type: inline-size; container-name: rcv; }
.rcv-table .is-num { text-align: end; }
.rcv-table td, .rcv-table th { white-space: nowrap; }
.rcv-table .rcv-in { inline-size: 5.5rem; padding: 6px 10px; line-height: var(--control-line-height); text-align: end; font-variant-numeric: tabular-nums; }   /* an explicit line height: the Arabic face made the box 8px taller than the Latin one */
.rcv-table .rcv-in.is-money { inline-size: 7.5rem; }
.rcv-table .rcv-in[aria-invalid="true"] { border-color: var(--danger); }
.rcv-n, .rcv-money, .rcv-now { font-variant-numeric: tabular-nums; }
.rcv-after { font-weight: 700; font-variant-numeric: tabular-nums; }
.rcv-after.is-up { color: var(--success); }
.rcv-size { font-weight: 600; }
.rcv-colour td { background: var(--sunken); color: var(--muted); font-size: .8rem; font-weight: 600; }

/* wide: the sum is drawn, now + new = after, with the signs between the columns */
@container rcv (min-width: 561px) {
  .rcv-table.is-topup td.is-new::before { content: "+"; margin-inline-end: 10px; color: var(--text-muted); font-weight: 700; }
  .rcv-table.is-topup td.is-after::before { content: "="; margin-inline-end: 10px; color: var(--text-muted); font-weight: 700; }
}

/* narrow: one small form per size, every box carrying its own label */
@container rcv (max-width: 560px) {
  .rcv-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .rcv-table, .rcv-table tbody { display: block; }
  .rcv-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 14px; border-block-end: 1px solid var(--line); }
  .rcv-table tr.rcv-colour { display: block; padding: 0; }
  .rcv-table tr.rcv-colour td { display: block; padding: 8px 14px; }
  .rcv-table td { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; border: 0; text-align: start; white-space: normal; }
  .rcv-table td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: .72rem; font-weight: 600; }
  .rcv-table td:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
  .rcv-table td:first-child::before { content: none; }
  .rcv-table .rcv-in, .rcv-table .rcv-in.is-money { inline-size: 100%; }
}

/* ─────────────── step 3: the sums, the money, the warning ─────────────── */
.rcv-sum { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.rcv-sum > div { display: flex; flex-direction: column; gap: 2px; }
.rcv-sum span { color: var(--muted); font-size: .8rem; }
.rcv-sum b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rcv-block { display: flex; flex-direction: column; gap: 12px; margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.rcv-block-h { font-size: .9rem; }
.rcv-block .rcv-field { max-inline-size: 320px; margin: 0; }
.rcv-left { align-self: end; padding-block-end: 12px; color: var(--muted); }
.rcv-dup {
  display: flex; flex-direction: column; gap: 8px; margin-block-start: 18px; padding: 14px 16px;
  border: 1px solid var(--warning); border-inline-start-width: 4px; border-radius: var(--radius); background: var(--warning-tint);
}
.rcv-error { margin-block: 14px 0; margin-inline: 0; color: var(--danger); font-weight: 600; }
.rcv-foot { flex-wrap: wrap; }
.rcv-why { flex: 1 1 240px; margin: 0; min-inline-size: 0; color: var(--muted); font-size: .85rem; }

/* ─────────────── after the save ─────────────── */
.rcv-done {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 20px;
  border: 1px solid var(--success); border-inline-start-width: 4px; border-radius: var(--radius); background: var(--success-tint);
}
.rcv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* ─────────────── the file door (spec 050 S5, receive_file.js): steps 2 and 3 when the person chose "From a file" ───────────────
   The drop area, the file row, the notices, the pager and the progress bar are the import dialog's own classes (app.css); this block is only the few things the page has no class for:
   a vertical stack, the two radio choices of the question, the rows that wait for a decision (a label and its control, folding on their own width), and the sums of the check. */
.rcf-root { display: flex; flex-direction: column; gap: 20px; min-inline-size: 0; }
.rcf-check { display: flex; flex-direction: column; gap: 20px; min-inline-size: 0; }
.rcf-way { margin-block-end: 14px; }
.rcf-stack { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.rcf-stack > .badge { align-self: flex-start; }
.rcf-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.rcf-opt { align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.rcf-opt:has(input:checked) { border-color: var(--fill, var(--brand)); background: var(--tint); }
.rcf-opt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.rcf-sum b.rcf-warn { color: var(--warning); }
.rcf-decides { display: flex; flex-direction: column; container-type: inline-size; container-name: rcfd; }
.rcf-decide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 8px 16px; align-items: center; padding-block: 12px; border-block-end: 1px solid var(--line); }
.rcf-decide:last-child { border-block-end: 0; }
.rcf-decide select { inline-size: 100%; }
.rcf-decide .rcv-actions { justify-content: flex-end; }
.rcf-map td, .rcf-prices td { white-space: normal; }
.rcf-map select { min-inline-size: 12rem; }
.rcf-lines .badge + .badge { margin-inline-start: 4px; }
.rcv-actions.is-end { justify-content: flex-end; }
.rcv-count { border-color: var(--warning); }
@container rcfd (max-width: 480px) { .rcf-decide { grid-template-columns: minmax(0, 1fr); } }          /* folds on ITS width, never the screen's */

/* ─────────────── an open purchase order (spec 050 S6): the strip above the items, and its end on the saved screen ─────────────── */
.rcv-order { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block-end: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.rcv-order > span { min-inline-size: 0; font-weight: 600; }
.rcv-order-end { flex-basis: 100%; color: var(--muted); }

/* ─────────────── return or undo (spec 050 S7, receive_return.js): the receipt page, the review dialog and the supplier credit ───────────────
   The cards, the table, the buttons, the fields and the select are the page's own classes; this block is only the few things there is no class for: the facts of the receipt, the
   money block (a label and its figure on one row), the stack inside a card and a returned row's quieter ink. The review's table folds on its own width, like the window's grid. */
.rtn-card .rtn-flush { padding: 0; }
.rtn-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px 24px; margin: 0; }
.rtn-facts > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.rtn-facts dt { color: var(--muted); font-size: .8rem; }
.rtn-facts dd { margin: 0; font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.rtn-stack { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.rtn-sum { flex-direction: column; gap: 8px; max-inline-size: 420px; }
.rtn-sum > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
.rtn-sum > div.is-total { padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.rtn-minus { margin-inline-end: 4px; color: var(--text-muted); }
.rtn-table tr.rtn-returned td { color: var(--muted); }

/* ─────────────── past shipments (spec 050 S9, receive_past.js; the approved mockup 6) ───────────────
   The app's own .filter-bar, .card, .data-table, .badge, .empty-state and the ledger footer do the work; this block lays the filter row out, keeps the table compact inside its own
   scrolling box, and sets the count beside the card's title. The (i) is the card's top inline-end corner, as everywhere in this window. */
.rcv-head, .rpast-head { margin-block-end: 0; justify-content: flex-end; }
.rpast-bar { margin-block-end: 0; }
.rpast-controls { align-items: flex-end; gap: 10px 12px; }
.rpast-f { display: grid; gap: 3px; min-inline-size: 0; flex: 1 1 11rem; max-inline-size: 16rem; margin: 0; }
.rpast-dates { flex: 2 1 22rem; max-inline-size: 30rem; }
.rpast-l { font-size: .72rem; font-weight: 700; color: var(--muted); }
.rpast-range { display: flex; gap: 8px; min-inline-size: 0; }
.rpast-range > label { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-inline-size: 0; margin: 0; font-size: .8rem; color: var(--muted); }
.rpast-range .form-control { min-inline-size: 8.75rem; inline-size: 100%; }
.rpast-f .form-control { inline-size: 100%; min-inline-size: 0; }
.rpast-clear { flex: 0 0 auto; white-space: nowrap; }
.rpast-bar .form-control, .rpast-bar .rpast-clear { block-size: var(--control); min-block-size: 0; padding-block: 0; box-sizing: border-box; }
.rpast-note { font-size: .8rem; color: var(--text-muted); }
.rpast-box > .card-header { padding-inline-end: var(--corner-i-reserve, 44px); }
.rpast-flush { padding: 0; min-inline-size: 0; }
.rpast-tw { border: 0; border-radius: 0; max-inline-size: 100%; overflow-x: auto; }
.rpast-tw:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rpast-table { min-inline-size: 44rem; }
.rpast-table th, .rpast-table td { padding-block: 6px; padding-inline: 10px; font-size: .84rem; white-space: nowrap; vertical-align: middle; }
.rpast-table .is-num { text-align: end; }
.rpast-open { white-space: nowrap; }
.rpast-empty { padding: 32px 16px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.rpast-empty h4 { margin: 0; color: var(--text); }
.rpast-empty p { margin: 0; max-inline-size: 34rem; line-height: 1.7; }
.rpast-empty .empty-icon { margin: 0; }
.rpast-foot { border-block-start: 1px solid var(--line); }
@media (max-width: 640px) {
  .rpast-f { flex: 1 1 9rem; max-inline-size: none; }
  .rpast-dates { flex: 1 1 100%; max-inline-size: none; }
  .rpast-clear { inline-size: 100%; }
  .rpast-foot { justify-content: center; }
}