/*
 * Packing Slips — CR-A116-24 (packing-slips-r1.html §1-5).
 *
 * `client-table.css` already owns the LIST canon (page-head-row, chip-bar,
 * table, pagination, phone row-cards) and `invoices.css` already owns the
 * generic DOCUMENT paper primitives (`.paper`, `.danger-box`, `.btn-retry`,
 * `.skel-table`, `.desktop-only`/`.phone-only`) — this file owns only what
 * packing-slips-r1.html adds NEW: the shipment-status hues, the
 * `.cell-contents`/`.cell-type` cells, and the packing-slip document's own
 * Bill-To-Ship-To / 9-column table / signature markup (the DOCUMENT here
 * deliberately does NOT use the invoice/statement paper's inner layout —
 * it mirrors the admin print page instead, per the card's own annotation).
 *
 * CR-A116-31 (2026-08-16): `assets/css/document.css` now owns the shared
 * frame around every document (top bar, canvas, actions, `.doc-header`/
 * `.doc-header-right`/`.doc-badge`) — see that file + views/packing-
 * slips.js's own header for the full routing/frame rewrite. This file's
 * `.pks-page .doc-header` rule adds only the border/spacing this page's
 * header needs beyond the shared class.
 *
 * All rules are scoped under `.pks-page` (the view root wrapper this page's
 * `render()` adds) wherever the SAME class name is already used with
 * DIFFERENT values by another page's card — see the two documented
 * collisions below. Every other selector below is a fresh, packing-slip-
 * specific name taken verbatim from the card, so it is safe unscoped.
 */

/* ================= shipment-status hues (LOCKED, card :root) ==============
   A THIRD, deliberately separate palette from both the order-status badges
   (client-table.css) and the invoice-status hues (invoices.css) — byte-
   identical to packing-slips-r1.html's :root block. */
:root {
  --ship-pending-bg: #DBEAFE; --ship-pending-ink: #1D4ED8;
  --ship-transit-bg: #CCFBF1; --ship-transit-ink: #0F766E;
  --ship-delivered-bg: #D1FAE5; --ship-delivered-ink: #065F46;
  --doc-packing: #0D9488; --doc-packing-ink: #0F766E;
  --orderer-bg: #E0E7FF; --orderer-ink: #4338CA;
}

.badge-ship-pending { background: var(--ship-pending-bg); color: var(--ship-pending-ink); }
.badge-ship-transit { background: var(--ship-transit-bg); color: var(--ship-transit-ink); }
.badge-ship-delivered { background: var(--ship-delivered-bg); color: var(--ship-delivered-ink); }

/* ================= collision #1: row height — card explicitly redraws
   `table.client-table tbody td{height:64px}` (client-table.css's shared
   canon is 56px) to fit the new 2-line Contents cell. Scoped to this page
   only — Orders/Invoices/Statements keep the canon's 56px unchanged. ==== */
.pks-page table.client-table tbody td { height: 64px; }

/* ================= collision #2: `.paper` padding differs from invoices.css
   (32px 36px here vs 44px 48px there) — scoped override, base box model
   (border/radius/shadow/width/margin) still inherited from invoices.css. */
.pks-page .paper { padding: 32px 36px; }

/* ================= LIST: cell formatting specific to this page =========== */
/* `.cell-ref` sits directly on the <td> in the card, so it loses a
   specificity contest against the canon's `table.client-table tbody td`
   rule for font-size/color (both single-class vs. 1-class+3-element) —
   verified by measuring the CARD's own computed style: only `font-weight`
   (a property the canon `td` rule never sets) actually survives; font-size
   renders at the canon's 13px (not the rule's declared 13.5px) and color
   renders as --ink-soft (not the rule's declared --ink). Matching the
   card's REAL rendered pixels, not its unreachable declared intent. */
.cell-ref { font-weight: 700; }

.cell-date { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.cell-date.dim { color: var(--faint); }

.cell-site.pickup .icon { color: var(--doc-packing-ink); }
.cell-site.pickup span { color: var(--doc-packing-ink); font-weight: 600; }

.cell-contents { display: flex; flex-direction: column; gap: 2px; max-width: 290px; }
.cell-contents .cc-summary { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.cell-contents .cc-orders { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

.cell-type { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.cell-type .icon { color: var(--faint); width: 16px; height: 16px; }
.cell-type.pickup .icon { color: var(--doc-packing-ink); }

/* ================= DOCUMENT: header — CR-A116-31 restructured this from
   the old 3-column admin-mirrored `.slip-header-trio` (seller | centered
   title | date/delivery/page) to the shared 2-column `.doc-header`/`.doc-
   header-right` the 🟢 Packing slip document card itself draws (seller
   LEFT, `.doc-badge` register TOP-RIGHT — document.css owns those two
   classes; this rule only adds the border/spacing this page's header
   needs, since invoice/statement don't share this exact treatment). The
   "Delivery: Supplier" row is gone entirely (the card's own BUILD NOTES —
   "Supplier" is a banned taxonomy term the client should never read).
   `.slip-header-trio`/`.slip-title`/`.slip-right`/`.sr-*` are retired —
   `grep` confirms zero remaining references in views/packing-slips.js. */
.pks-page .doc-header { padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 16px; }
.slip-seller { display: flex; align-items: flex-start; gap: 10px; }
.slip-seller .ps-badge { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slip-seller .ps-badge .yn { color: #fff; font-weight: 800; font-size: 13px; }
.slip-seller-text .ss-name { font-size: 13px; font-weight: 700; color: var(--ink); }

/* ================= Bill To / Ship To — mirrors L226-249 ==================== */
.slip-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.slip-box { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; }
.slip-box .sb-label { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.slip-box .sb-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.slip-box .sb-addr { font-size: 10.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }
.orderer-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; font-size: 9px; font-weight: 600; background: var(--orderer-bg); color: var(--orderer-ink); border-radius: var(--r-sm); }

/* ================= the 9-column table — mirrors L252-309 exactly,
   field-for-field ============================================================ */
table.slip-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
table.slip-table th { text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); background: var(--field); padding: 6px 8px; border: 1px solid var(--line); }
table.slip-table th.c { text-align: center; }
table.slip-table td { padding: 7px 8px; font-size: 11.5px; color: var(--ink-soft); border: 1px solid var(--line-soft); vertical-align: top; }
table.slip-table td.c { text-align: center; }
table.slip-table td.b { font-weight: 700; color: var(--ink); }
table.slip-table td.ref { font-family: var(--mono); font-weight: 600; color: var(--blue); font-size: 11px; }
table.slip-table td.opening { white-space: nowrap; font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.slip-table td.tag { font-size: 10.5px; color: var(--ink-soft); }
table.slip-table td .pn-name { font-weight: 600; color: var(--ink); }
table.slip-table td .pn-sku { font-size: 9.5px; color: var(--faint); margin-top: 1px; font-family: var(--mono); }
table.slip-table tbody tr:nth-child(even) { background: var(--field); }

.no-price-note { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--faint); margin: -2px 0 16px; padding: 0 6px; }
.no-price-note .icon { width: 13px; height: 13px; stroke: var(--faint); }

.slip-total { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.slip-total-box { background: var(--field); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 14px; }
.slip-total-box .stb-label { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.slip-total-box .stb-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--ink); }

/* ================= signature footer — mirrors L331-360 ===================== */
.slip-signature .rc-caption { font-size: 9.5px; color: var(--faint); text-align: center; margin-bottom: 6px; }
.sig-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.sig-col { flex: 1; }
.sig-col.narrow { flex: 0 0 90px; }
.sig-label { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sig-line { border-bottom: 1px solid var(--ink-soft); height: 22px; margin-bottom: 4px; }
.sig-sub { font-size: 9px; color: var(--faint); }

/* CR-A116-31: the in-paper Download/Email row (`.slip-actions`) is retired
   — those two actions now live once, in the shared document frame's
   `.doc-acts` (document.css). `grep` confirms zero remaining references
   to `.slip-actions` in views/packing-slips.js. */

/* ================= phone: LIST row-card — packing-slips-r1.html §5's own
   child class names (NOT client-table.css's generic `.p-row-*` set — this
   card designed its phone row to mirror the desktop cell class names
   instead). Verified no other page's `.p-row-card` uses these bare names
   (orders.js / invoices.js only use `.p-row-*` prefixed children). ======== */
.p-row-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.p-row-card .cc-summary { font-size: 13px; font-weight: 700; color: var(--ink); }
.p-row-card .cc-orders { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.p-row-card .site { font-size: 11.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.p-row-card .site .icon { width: 13px; height: 13px; color: var(--faint); }
.p-row-card .site.pickup .icon { color: var(--doc-packing-ink); }
.p-row-card .site.pickup span { color: var(--doc-packing-ink); font-weight: 600; }
.p-row-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.p-row-card .ref { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11.5px; color: var(--muted); }
.p-row-card .date { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* CR-A116-31: the compact-phone document markup (`.p-paper`'s grouped
   `.pp-group`/`.pp-item` line rows, `buildSlipPaperCompactHtml` in the JS)
   is retired — the document is no longer reflowed for phone; document.css's
   `.doc-canvas` scrolls the same full multi-page `.paper` instead (scope
   item 7, "a viewport onto the real document ... do not reflow it"). */

/* ================= filter row — This page is the FIRST to combine a
   native createClientTable chip axis (Job site) with three of its own
   `.status-toggle` groups (Period/Status/Type) above the table. The
   `.filter-row`/`.filter-group`/`.filter-label`/`.filter-controls`/
   `.status-toggle`/`.status-opt` classes are already generic (invoices.css,
   for the Statements filter row) — reused verbatim, no redefinition. */
#pksFilterRow.filter-row { margin-bottom: var(--sp-4); }

/* ================= phone reflow (~480px, matches client-table.css's own
   breakpoint) ================================================================ */
@media (max-width: 480px) {
  /* CR-A116-31: no `width` override on `.paper` here — the document is
     deliberately NOT reflowed at this breakpoint (scope item 7);
     document.css's `.doc-canvas` provides the horizontal scroll instead,
     the paper keeps its natural width. */
  .pks-page .doc-header { flex-direction: column; gap: 10px; }
  .slip-boxes { grid-template-columns: 1fr; gap: 10px; }
  #pksFilterRow.filter-row { flex-direction: column; gap: 12px; }
}