/* ==========================================================================
   Orders — Claims & Returns (orders-claims.html)

   Spec: build/pages.md §10

   Only what is this page's own: the register's column shares, the pick rows
   the dialogs share, the lines list of the claim form, and how all of it
   folds at 1100 / 768 / 480. Everything another Orders page also says — the
   hub strip, the readings, the gear dialogs — is in css/pages/orders.css.
   Tokens only; nothing under 10px; no radius past 7px.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Seven columns take shares of the table under `table-layout: fixed`. Lines &
   Reason is the longest reading on the row ("3 boxes Carrara Honed 12″×24″ ·
   Changed mind (unopened)") and takes the biggest share; the status cell holds
   a badge and two readings, so it is next. The money sits last and is
   right-aligned by `.data-table`'s own last-column rule. Shares sum to 100. */
.clm-table th.col-clm    { width: 15%; }
.clm-table th.col-client { width: 18%; }
.clm-table th.col-kind   { width: 13%; }
.clm-table th.col-lines  { width: 21%; }
.clm-table th.col-when   { width: 9%; }
.clm-table th.col-status { width: 14%; }
.clm-table th.col-value  { width: 10%; }
/* A status cell stacks its badge and its goods-and-money reading: the stack
   gives the rows back their normal rhythm where orders.css opened the
   line-height for a badge beside a hold word. */
.clm-table td.col-status { line-height: 1.45; }
/* The money stays on one line, but the reading under it (and the Deliveries
   run link on the replacement row) wraps inside the 10% column instead of
   running into Status. */
.clm-table td.col-value .sub { white-space: normal; }
/* A link inside the register's prose, in the link blue. */
.clm-link { color: var(--color-primary-600); font-weight: 500; text-decoration: none; }
.clm-link:hover { color: var(--color-primary-700); text-decoration: none; }
/* A sub-line that carries a reading keeps the sub-line's own size. */
.clm-table .sub .ord-reading { font-size: 11px; }
.clm-table .sub .ord-reading svg,
.clm-table .sub .ord-linked svg { width: 12px; height: 12px; }
.clm-table .sub .ord-linked { font-size: 11px; }

/* ---------- A word standing where a KPI figure would ------------------------
   "+ replacement", "of lines": the second half of a split KPI that is a
   qualifier and not a figure. Same baseline as the figure beside it, in the
   muted ink and the body size, so the number keeps the weight. */
.kpi .clm-kpi-split { grid-template-columns: auto 1fr; align-items: baseline; }
.kpi .clm-kpi-word { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }

/* ---------- How far back Resolved goes ------------------------------------------
   In the footer, just left of the page size and as quiet as it (app.css
   `.page-size`). Its auto margin takes the free room, so the page controls
   app.js appends after it close up beside it instead of banking right alone. */
.clm-window { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 10px; color: var(--color-text-muted); white-space: nowrap; }
.clm-window .subtabs { margin: 0; flex-wrap: nowrap; background: var(--color-control); border-color: var(--color-control-border); }
.clm-window .subtab { padding: 4px 8px; font-size: 10px; line-height: 12px; }
.clm-window ~ .page-controls { margin-left: 0; }

/* ---------- Pick rows (dialogs) ----------------------------------------------------
   A list of choices, none chosen until a hand picks one (memory: show the
   options, never preselect). Each row stands on the control ground inside the
   white dialog (§13); the chosen one takes the primary wash, the shape
   `.subtab.active` and `.fchip.on` already wear. */
.clm-picks { display: flex; flex-direction: column; gap: 6px; }
.clm-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; font: inherit; cursor: pointer;
  color: var(--color-text);
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.clm-pick:hover { border-color: var(--color-primary); }
.clm-pick[aria-checked="true"] {
  background: color-mix(in oklab, var(--color-primary) 20%, var(--color-surface));
  border-color: color-mix(in oklab, var(--color-primary) 42%, var(--color-border));
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.10);
}
.clm-pick::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-control-border); background: var(--color-surface);
}
.clm-pick[aria-checked="true"]::before { border-color: var(--color-primary); box-shadow: inset 0 0 0 3.5px var(--color-primary); }
.clm-pick .cell-stack { flex: 1; min-width: 0; }
.clm-pick .cell-stack .main { font-weight: 500; }
.clm-pick .cell-stack .sub { white-space: normal; }
.clm-pick__ico { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); }
.clm-pick__pdf { width: 18px; height: 18px; flex: none; object-fit: contain; }

/* The search field inside a dialog takes the dialog's width. */
.clm-search { max-width: none; margin-bottom: 8px; }
.clm-search:last-child { margin-bottom: 0; }
.clm-hint { margin: 8px 0 0; font-size: 12px; color: var(--color-text-subtle); }
.clm-noorder { margin-top: 10px; }
.clm-noorder .clm-search { margin-bottom: 0; }
/* A select sized to its longest option, not the row (memory.md §9). */
.clm-field--narrow { flex: 0 0 auto; min-width: 200px; }
.clm-dates .field { flex: 0 0 170px; }

/* ---------- The claim form's lines ----------------------------------------------------
   One row per claimable thing: the box, the line, and for boxes and pallets a
   quantity. An undelivered line is greyed and says why; its box is disabled. */
.clm-lines { display: flex; flex-direction: column; gap: 6px; }
.clm-line {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; cursor: pointer;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.clm-line .cell-stack { flex: 1; min-width: 0; }
.clm-line .cell-stack .main { font-weight: 500; }
.clm-line .cell-stack .sub { white-space: normal; }
.clm-line.is-off { opacity: .55; cursor: default; }
.clm-line.is-off .ord-check { cursor: default; }
.clm-line__qty { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; }
.clm-line__qty .input { width: 64px; padding: 5px 8px; font-size: 12px; text-align: right; }
.clm-kinds .subtab { font-size: 13px; }
.clm-dropzone { padding: 20px; }
.clm-dropzone .dz-ico { width: 28px; height: 28px; }
.clm-dz__text { font-size: 13px; font-weight: 500; color: var(--color-text); }
.clm-dropzone .clm-hint { margin-top: 0; }

/* ---------- Narrow screens ----------------------------------------------------------------- */
@media (max-width: 1100px) {
  .clm-table { min-width: 980px; }
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .clm-dates .field,
  .clm-field--narrow { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  /* The count takes its own line; the window and the page controls share the next. */
  .tab-shell .card-footer { flex-wrap: wrap; row-gap: 8px; }
  .tab-shell .card-footer > [data-claim-count] { flex-basis: 100%; }
  .clm-window { margin-left: 0; }
  .clm-window ~ .page-controls { margin-left: auto; }
  .clm-pick { align-items: flex-start; }
  .clm-pick::before { margin-top: 3px; }
}