/* ==========================================================================
   Orders — the Invoices register (orders-invoices.html)

   Spec: build/pages.md §8

   Only what is this page's own: the register's column shares, the type word,
   the aging reading on its KPI tile, the statements strip under the table,
   the invoicing source under the title, the sync word per row, the short fields in the New Invoice form, and
   how the page folds at 1100 / 768 / 480. Everything another Orders page also
   says — the hub strip, the readings, the hold word, the gear
   dialogs — is in css/pages/orders.css and is not restated here. Every class
   of this page's own carries the `inv-` prefix.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Seven columns take shares of the table under `table-layout: fixed` (which
   `.data-table` sets), so they resize with the browser and never with the data.
   Terms · Due is the widest reading on the row ("Net 15 · Sep 24 · 9 Days
   Late" over a sub-line naming the reminders), so it takes the biggest share;
   Client and Invoice carry a sub-line each and take the next. Type is one or
   two words. The money sits last and is right-aligned by `.data-table`'s own
   last-column rule. The shares sum to 100 so the browser hands out no slack. */
.inv-table th.col-inv    { width: 14%; }
.inv-table th.col-client { width: 19%; }
.inv-table th.col-type   { width: 13%; }
.inv-table th.col-due    { width: 22%; }
.inv-table th.col-status { width: 12%; }
.inv-table th.col-sync   { width: 8%; }
.inv-table th.col-total  { width: 12%; }

/* The sync reading: one word with its dot, never a badge (readings are words).
   The dot carries the family (Synced good, Pending waiting, Not Synced idle);
   the word stays in the row ink so the column reads quietly. */
.inv-syncword { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.inv-syncword .dot-status { flex: none; }
.inv-syncword.is-pending { color: var(--color-warn-ink); }

/* A document's kind is a category, not a state (memory.md §19): a word in the
   row's own type, never a badge. It keeps the main line's weight so the column
   reads as a column, and the grey is the muted ink a category takes. */
.inv-type { color: var(--color-text-muted); font-weight: 500; }

/* The sub-line of Client and Terms · Due is a sentence of facts (emailed,
   opened, reminders, what the wire did). It may wrap to a second line in a
   19% column at 1440; `.cell-stack .sub` is 11px and the wrap keeps it. A
   reading inside the sub-line inherits the sub-line's size and ink instead of
   orders.css's 13px row type, so the network word and the dates stay one line
   of the same weight. */
.inv-table td .sub .ord-reading { font-size: inherit; color: inherit; row-gap: 0; }
.inv-table td .sub .ord-reading > *:not(:last-child)::after { margin: 0 4px 0 1px; }
.inv-table td .sub .ord-linked { font-size: inherit; }
.inv-table td .sub .ord-reading svg { width: 12px; height: 12px; }

/* ---------- The aging reading ---------------------------------------------------
   Three buckets on one KPI tile, each a bucket name and its figure, joined by
   the middle dot and written as links because each one narrows the register.
   Link ink, no underline (the house rule for clickable words); the figure is
   the darker ink so the money reads first. */
.inv-aging { flex-wrap: wrap; row-gap: 2px; }
.inv-aging a { color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.inv-aging a:hover { color: var(--color-primary-700); }
.inv-aging a .tnum { color: var(--color-text); font-weight: 600; margin-left: 2px; }
.inv-aging a + a::before { content: "·"; margin: 0 6px 0 0; color: var(--color-text-subtle); font-weight: 400; }

/* ---------- The statements strip -------------------------------------------------
   One line under the register: what a statement is for, the last one out,
   the next run, and the action. It is a thing inside a white panel, so it
   stands on the control ground (memory.md §13), and it opens above the footer
   with the table's own side inset. */
.inv-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--color-text-muted);
}
.inv-note__ico { width: 16px; height: 16px; flex: none; color: var(--color-text-subtle); }
.inv-note__text { flex: 1 1 320px; min-width: 0; }
.inv-note__text strong { color: var(--color-text); font-weight: 600; }
.inv-note .btn { flex: none; }

/* The invoicing source under the page title: where the invoices are created
   and when the books last came back, as a word with its icon. */
.inv-source { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.inv-source svg { width: 13px; height: 13px; flex: none; color: var(--color-text-subtle); }

/* ---------- The New Invoice and Run Statement forms --------------------------------
   Fields are sized to what goes in them (memory.md §9): a currency code, a
   date and a document number are short, so their fields do not stretch to a
   third of the form each. The section heading inside the form is the house's
   13px label weight, with room above it. */
.inv-field--short { flex: 0 1 180px; }
.inv-field--number { flex: 0 1 220px; }
.inv-field--number .input { color: var(--color-text-muted); }
.inv-form__h {
  margin: 22px 0 10px;
  font-size: 13px; font-weight: 600; color: var(--color-text);
}
.inv-form__h + .switch-field { margin-top: 0; }
/* The read-only preview of what the order hands the invoice: a key–value grid
   on the control ground, because it is a box inside a white panel. */
.inv-preview {
  padding: 10px 12px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
/* The option switches stack one to a line with breathing room (memory
   feedback: rows never touch). */
.inv-form .switch-field { display: flex; }
.inv-form .switch-field + .switch-field { margin-top: 10px; }
.inv-form .form-row + .switch-field,
.inv-form .field + .switch-field { margin-top: 14px; }

/* ---------- Narrow screens --------------------------------------------------------
   Below 1100px the seven columns fight: the register keeps its desktop shares
   on a 960px table and scrolls sideways inside `.table-wrap` (the house
   pattern). The KPI grid folds two by two, then one to a line, as the hub
   page does. */
@media (max-width: 1100px) {
  .inv-table { min-width: 960px; }
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 768px) {
  .inv-note .btn { min-height: 44px; }
  .inv-field--short,
  .inv-field--number { flex: 1 1 140px; }
}
@media (max-width: 480px) {
  .inv-note__text { flex-basis: 100%; }
  .inv-note .btn { flex: 1 1 100%; justify-content: center; }
}