/* ==========================================================================
   Purchase Orders — Supplier Claims (purchase-orders-claims.html)

   Spec: build/po/pages.md §15

   Only what is this page's own: the register's column shares, the strip of
   claims waiting for somebody above it, the two sections under it (what each
   supplier still owes, recovery by supplier), the claim form's lines, and how
   all of it folds at 1100 / 768 / 480. Everything another Purchase Orders page
   also says — the hub strip, the readings, the bulk bar, the pick rows, the
   gear dialogs — is in css/pages/purchase-orders.css. Classes here use the
   `po-clm-` prefix. Tokens only; nothing under 10px; no radius past 7px.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Eight columns take shares of the table under `table-layout: fixed`, so they
   resize with the browser and never with the data. The Claim column holds the
   supplier, the claim | PO | container line and how the claim came about, so
   it takes the widest share; Status is sized for its longest badge
   ("Accepted · Credit Pending"). The money sits last and is right-aligned by
   `.data-table`'s own last-column rule. Shares sum to 100. */
.po-clm-table th.col-check  { width: 4%; }
.po-clm-table th.col-clm    { width: 19%; }
.po-clm-table th.col-reason { width: 14%; }
.po-clm-table th.col-lines  { width: 12%; }
.po-clm-table th.col-when   { width: 13%; }
.po-clm-table th.col-cred   { width: 12%; }
.po-clm-table th.col-status { width: 14%; }
.po-clm-table th.col-value  { width: 12%; }
/* A status cell stacks its badge over the verb that moves the claim on: the
   stack gives the row back its normal rhythm. */
.po-clm-table td.col-status { line-height: 1.45; }
.po-clm-table td.col-status .cell-stack > .sub { margin-top: 2px; }
/* Readings inside a cell wrap inside it rather than running into the next. */
.po-clm-table .cell-stack .sub,
.po-clm-table td.col-reason .main { white-space: normal; }
.po-clm-table td.col-reason .po-reading { font-size: 13px; }
.po-clm-table .sub .po-mode svg { width: 12px; height: 12px; }
/* Claim | PO | container: three numbers that each stay whole and wrap as
   wholes, the bar between them drawn in the border ink (the shared `.sep`). */
.po-clm-ids { display: flex; flex-wrap: wrap; align-items: baseline; }
.po-clm-ids > span { white-space: nowrap; }
.po-clm-ids > span:not(:last-child)::after { content: "|"; margin: 0 6px; color: var(--color-border-strong); }
/* A figure and its unit never part ("120.2 sqft", "Fri Oct 9"). */
.po-clm-nw { white-space: nowrap; }

/* How a claim came about, under its number: raised from receiving, passed up
   from Orders, credited on a later PO. A third line one step down (11px), an
   icon and words, muted; a record it names is a plain link. */
.po-clm-note {
  display: block; white-space: normal;
  margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--color-text-muted);
}
/* Block, not flex: the words and the record they name wrap as one sentence;
   a flex row split "Passed up from" and its link into separate items. */
.po-clm-note a { white-space: nowrap; }
.po-clm-note svg { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; color: var(--color-text-subtle); }
.po-clm-linked { margin-top: 2px; font-size: 11px; white-space: normal; }
.po-clm-linked svg { width: 12px; height: 12px; }

/* The words that carry a state inside a cell: due (warn ink), done (success
   ink), refused or broken (danger ink, weight). Words, never chips. */
.po-clm-warn { color: var(--color-warn-ink); font-weight: 500; }
.po-clm-ok { color: var(--color-success-ink); }
.po-clm-urgent { color: var(--color-danger-ink); font-weight: 600; }

/* The verb on an open row (Review and Send, Chase Supplier, Apply) is a word
   in the link blue, never a button in a 14% column. */
.po-clm-acts a { color: var(--color-primary-600); font-weight: 500; text-decoration: none; }
.po-clm-acts a:hover { color: var(--color-primary-700); }

/* ---------- The toolbar's Filters button ---------------------------------------
   After the spacer (memory.md §11), at the buttons' own height. The count of
   filters in force follows its word, a figure in the button's own type. */
.po-clm-tool__n { font-weight: 600; color: var(--color-primary-700); font-variant-numeric: tabular-nums; }
.po-clm-tool__n[hidden] { display: none; }

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

/* ---------- Waiting for you ---------------------------------------------------------
   A strip inside the panel, on the control ground (memory.md §13, §17): what
   waits on a person here, why, and the act that moves it. It is "something
   above the table", so the header's band comes back under it and the wrap's
   own top rule stays off. */
.po-clm-attn {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-clm-attn__head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; font-size: 12px; color: var(--color-text-muted);
}
.po-clm-attn__head svg { width: 14px; height: 14px; color: var(--color-warn); }
.po-clm-attn__head strong { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.po-clm-attn__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.po-clm-attn__row {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid var(--color-control-border);
}
.po-clm-attn__row .cell-stack { flex: 1 1 320px; min-width: 0; }
.po-clm-attn__row .cell-stack .main { font-weight: 400; white-space: normal; }
.po-clm-attn__row .cell-stack .sub { white-space: normal; }
.po-clm-attn__row .main a { color: var(--color-primary-600); font-weight: 500; text-decoration: none; }
.po-clm-attn__row .main a:hover { color: var(--color-primary-700); }
.po-clm-attn__acts { display: inline-flex; gap: 6px; flex: none; margin-left: auto; }
.po-clm-attn__acts .btn { white-space: nowrap; }
.po-clm-attn + .table-wrap { border-top: 0; }

/* ---------- Sections under the register ------------------------------------------------
   Two subsections of the same panel (one card, internal dividers): the heading
   row from the shared `.po-sec__h`, then a small table. The panel has merged
   into its shell, so a table straight in a section takes no side inset of its
   own (§20); its head band stays, because a heading sits above it (§18). */
.po-clm-sec { border-top: 1px solid var(--color-border); padding: 16px 0 4px; }
.po-clm-sec .po-sec__h .po-reading strong { font-weight: 600; }
.po-clm-sec > .table-wrap { padding-inline: 0; border-top: 0; }
.po-clm-sec .data-table td a { color: var(--color-primary-600); text-decoration: none; }
.po-clm-sec .data-table td a:hover { color: var(--color-primary-700); }
.po-clm-sec .cell-stack .sub { white-space: normal; }
.po-clm-sec .sub .po-reading { font-size: 11px; }
.po-clm-sec .sub .po-linked { font-size: 11px; }
.po-clm-sec .sub .po-linked svg { width: 12px; height: 12px; }

.po-clm-owed th.col-sup  { width: 24%; }
.po-clm-owed th.col-what { width: 26%; }
.po-clm-owed th.col-clm  { width: 15%; }
.po-clm-owed th.col-next { width: 20%; }
.po-clm-owed th.col-amt  { width: 15%; }
.po-clm-owed tr.po-clm-owed__total td {
  font-weight: 600; color: var(--color-text);
  border-top: 1px solid var(--color-border-strong);
}
.po-clm-owed tr.po-clm-owed__total td .subtle { font-weight: 400; font-size: 12px; }

.po-clm-rec th.col-sup    { width: 22%; }
.po-clm-rec th.col-claims { width: 24%; }
.po-clm-rec th.col-rate   { width: 13%; }
.po-clm-rec th.col-asked  { width: 14%; }
.po-clm-rec th.col-back   { width: 13%; }
.po-clm-rec th.col-res    { width: 14%; }

/* A closing line under a section: an icon and a sentence in the hint type. */
.po-clm-foot {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-subtle);
}
.po-clm-foot svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.po-clm-foot a { color: var(--color-primary-600); text-decoration: none; }
.po-clm-foot a:hover { color: var(--color-primary-700); }

/* ---------- The claim form -----------------------------------------------------------------
   The search takes the dialog's width; a hint under a field in the hint type. */
.po-clm-search { max-width: none; margin-bottom: 8px; }
.po-clm-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-subtle); }
.po-clm-hint--first { margin: 0 0 8px; }
.po-clm-hint .po-reading { font-size: 12px; }
.po-clm-hint a { color: var(--color-primary-600); text-decoration: none; }
.po-pick-row__meta .po-linked { font-size: 12px; white-space: normal; }

/* One row per slab or crate of the receipt: the box, the slab, the receiving
   photos, the reason (unchosen until picked) and the value. Each row is a box
   inside the white panel, so it stands on the control ground (§13). A line
   that cannot be claimed is greyed and says why. */
.po-clm-lines { display: flex; flex-direction: column; gap: 6px; }
.po-clm-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 11px; cursor: pointer;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-weight: 400;
}
.po-clm-line.is-checked { border-color: var(--color-primary); }
/* A line is a <label> so the whole row ticks its box; inside a `.field` it
   gives back the field label's caps and muted ink and reads as a row. */
.field label.po-clm-line {
  font-size: 13px; text-transform: none; letter-spacing: normal;
  color: var(--color-text); font-weight: 400;
}
.po-clm-line .cell-stack { flex: 1 1 220px; min-width: 0; }
.po-clm-line .cell-stack .main { font-weight: 500; white-space: normal; }
.po-clm-line .cell-stack .sub { white-space: normal; }
.po-clm-line.is-off { opacity: .6; cursor: default; }
.po-clm-line.is-off .po-check { cursor: default; }
.po-clm-line__v { flex: none; min-width: 72px; text-align: right; font-size: 13px; font-weight: 500; color: var(--color-text); }
/* A select sized to its longest reason, never the row (memory.md §9). On the
   control row it inverts back to white: three readable levels. */
.po-clm-reason {
  width: auto; flex: none; max-width: 210px;
  padding: 4px 26px 4px 9px; font-size: 12px;
  background-color: var(--color-surface);
  background-position: right 8px center;
}
/* The photos from receiving: the first as a 40px thumb, the count beside it. */
.po-clm-thumbs { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.po-clm-thumbs img {
  width: 40px; height: 40px; display: block; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--color-border);
}
.po-clm-thumbs__n { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* The supplier's window, read off the supplier, under the lines. */
.po-clm-window { margin-top: 10px; }
.po-clm-window .po-reading { font-size: 12px; }
.po-clm-dates .field { flex: 0 0 170px; }

/* ---------- Narrow screens ------------------------------------------------------------------
   Below 1100 the eight columns fight: the register keeps its shares on a
   1000px table and scrolls sideways inside `.table-wrap` (the house pattern),
   and the two section tables do the same at their own widths. */
@media (max-width: 1100px) {
  .po-clm-table { min-width: 1000px; }
  .po-clm-owed { min-width: 760px; }
  .po-clm-rec { min-width: 720px; }
  /* Four tiles fold two by two, every tile the same size (the hub's rule). */
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .po-clm-attn__row .cell-stack { flex-basis: 100%; }
  .po-clm-attn__acts { margin-left: 0; }
  .po-clm-attn__acts .btn { min-height: 44px; }
  .po-clm-dates .field { flex: 1 1 auto; min-width: 0; }
  .po-clm-line { padding: 10px 11px; }
  .po-clm-reason { min-height: 36px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  /* The header actions take a line of their own and wrap on it. */
  .page-header .page-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  /* The footer count 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; }
  .po-clm-attn__acts { flex-basis: 100%; }
  .po-clm-attn__acts .btn { flex: 1 1 0; justify-content: center; }
  .po-bulk .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .po-bulk .po-bulk__clear { flex-basis: 100%; }
  .po-clm-sec .po-sec__acts { flex-basis: 100%; }
  .po-clm-line .cell-stack { flex-basis: calc(100% - 30px); }
  .po-clm-reason { max-width: none; flex: 1 1 auto; }
}