/* ==========================================================================
   Orders — Payments (orders-payments.html)

   Spec: build/pages.md §7

   Only what is this page's own: the register's column shares, the pay-links
   preview under it, the Record Payment form's method blocks and apply list,
   and how the page folds at 1100 / 768 / 480. Everything another Orders page
   also says — the hub strip, the readings, the bulk bar, the gear dialogs, the
   two-sided switch — is in css/pages/orders.css and is used, never redefined.
   Tokens only; nothing under 10px; no radius past 7px.
   ========================================================================== */

/* ---------- Columns: the register --------------------------------------------
   Seven columns take shares of the table under `table-layout: fixed`. Applied
   To is the longest reading on the row — an invoice number, what the payment
   was for, and the balance it left — so it takes the biggest share; Method is
   next (the word, the card ending, the Vava reading). The money sits last and
   is right-aligned by `.data-table`'s own last-column rule. The shares sum to
   100 so the browser has no slack to hand out. */
.ord-table--payments th.col-check   { width: 4%; }
.ord-table--payments th.col-pay     { width: 15%; }
.ord-table--payments th.col-client  { width: 18%; }
.ord-table--payments th.col-method  { width: 18%; }
.ord-table--payments th.col-applied { width: 21%; }
.ord-table--payments th.col-status  { width: 11%; }
.ord-table--payments th.col-amount  { width: 13%; }
/* A sub-line may wrap onto a second line in the two prose columns; the
   payment and client sub-lines stay one line and clip with an ellipsis so the
   row keeps its two-line height. */
.ord-table--payments td.col-applied .sub,
.ord-table--payments td.col-client .sub { white-space: normal; }
/* The verbs a row carries — Remind · Copy Link, Resend · Expire — are words on
   the sub-line in the link blue, as orders.html writes its Expired row. */
.pay-acts a { color: var(--color-primary-600); font-weight: 500; }
.pay-acts a:hover { color: var(--color-primary-700); }
/* An order number on a sub-line is one token: it never breaks at its hyphens. */
.pay-ref { white-space: nowrap; }

/* ---------- The Pay Links preview ------------------------------------------------
   A subsection of the one register card: its header follows the register's
   footer, so it draws its own top rule and the footer's goes. Five columns,
   money last. */
.pay-section { border-top: 1px solid var(--color-border); border-bottom: 0; padding-top: 16px; }
.pay-section h3 { font-size: 14px; font-weight: 600; }
.pay-section + .table-wrap { border-top: 0; }
.pay-links th.col-link     { width: 28%; }
.pay-links th.col-sent     { width: 14%; }
.pay-links th.col-activity { width: 30%; }
.pay-links th.col-status   { width: 14%; }
.pay-links th.col-amount   { width: 14%; }
.pay-links td.col-link .sub,
.pay-links td.col-activity .sub { white-space: normal; }

/* ---------- Record Payment ------------------------------------------------------------
   The hint under the method chips: what this client usually does, in the hint
   type, so the person recording a wire is told before they pick. */
.pay-hint { margin: 8px 0 0; font-size: 12px; color: var(--color-text-subtle); }
/* The method blocks sit where the stacked-field rhythm puts a field; hidden
   ones take no height. */
.slideover-form .slideover-body .pay-block { margin-top: 14px; }
.pay-block[hidden] { display: none; }
.pay-block .pay-switch { margin-top: 12px; }
/* A note inside the form stands on the control ground (memory.md §13): the
   icon, the sentence, and where there is one, the action after it. */
.pay-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 12px; color: var(--color-text-muted); line-height: 1.45;
}
.pay-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--color-text-muted); }
.pay-note span { flex: 1; min-width: 0; }
.pay-note strong { color: var(--color-text); font-weight: 600; }
.pay-note .btn { flex: none; align-self: center; }
.slideover-form .slideover-body .field-grid + .pay-note { margin-top: 14px; }
/* A figure the form shows rather than asks — the surcharge a card would carry
   — drawn in the field's own row so the label above it reads as its name. */
.pay-figure { font-size: 14px; font-weight: 600; color: var(--color-text); padding-top: 7px; }
.pay-figure__sub { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-subtle); margin-top: 2px; }
/* A subsection head inside the form: the heading and the two-sided choice
   that governs it, on one line. */
.pay-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pay-h h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text); }
/* THE APPLY LIST. A box on the control ground holding one row per open
   invoice: the check, the invoice and what it is for, and the amount to put
   on it. The amount fields invert to white on the tinted box (§13, three
   levels). The sum line closes the box. */
.pay-apply {
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  padding: 4px 12px;
}
.pay-apply__row {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) 140px;
  column-gap: 12px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-control-border);
}
.pay-apply__row .cell-stack .sub { white-space: normal; }
.pay-apply__row .input { background: var(--color-surface); }
.pay-apply__row .input:disabled { background: transparent; color: var(--color-text-subtle); }
.pay-apply__amt { text-align: right; }
.pay-apply__sum { padding: 9px 0 7px; font-size: 12px; color: var(--color-text-muted); }
.pay-apply__sum .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.pay-apply__sum strong { color: var(--color-text); font-weight: 600; margin-left: 4px; }
/* The switches after the apply list: one to a line, switch then label, label
   regular weight (§5), with a qualifier in the subtle ink after it. */
.pay-switches { display: flex; flex-direction: column; gap: 10px; }
.pay-switch { color: var(--color-text); font-weight: 400; }
.pay-switch .subtle { font-weight: 400; }
.pay-switch__l { min-width: 0; }
.slideover-form .slideover-body .pay-switches + .field { margin-top: 14px; }
.pay-foot-note { font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }

/* ---------- Refund and New Pay Link -----------------------------------------------------
   The two two-sided choices on one line, read left to right, nothing pushed
   to the far edge (§16); the pay link's switches two across, because six
   one-per-row settings would be a screen of scrolling for six facts. */
.modal-body .field + .pay-refund-grid,
.modal-body .field-grid + .field,
.modal-body .field + .field { margin-top: 14px; }
.pay-sides-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; }
.pay-switch-grid { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 28px; margin-top: 16px; }
.pay-switch-grid .pay-switch { white-space: nowrap; }

/* ---------- Narrow screens -------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Below 1100px the seven columns fight: the register keeps its shares on a
     960px table and scrolls sideways inside `.table-wrap`. */
  .ord-table--payments { min-width: 960px; }
  .pay-links { min-width: 760px; }
  /* 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) {
  .ord-table--payments .ord-check { width: 18px; height: 18px; }
  .pay-apply__row { grid-template-columns: 15px minmax(0, 1fr); row-gap: 8px; }
  .pay-apply__row .pay-apply__amt { grid-column: 2; }
  .pay-switch-grid { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .ord-bulk .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .ord-bulk .ord-bulk__clear { flex-basis: 100%; }
  .pay-section { flex-wrap: wrap; gap: 10px; }
  .pay-switch-grid { grid-template-columns: 1fr; }
  .pay-switch-grid .pay-switch { white-space: normal; }
  .pay-sides-row { flex-direction: column; }
}