/* ==========================================================================
   Orders — Invoice Detail (order-invoice.html)

   Spec: build/pages.md §9 · model: quote.html (its header and figure bar),
   drawn here under an `inv-` prefix because `.req-*` lives in quotes.css and
   this page links orders.css instead. One card with subsections (owner
   preference), the shared vocabulary from css/pages/orders.css, and only what
   is this page's own below: the header, the figure bar, the sections, the two
   tables' column shares, the totals block, the settings rows and the folds.
   Tokens only; nothing under 10px; no radius past 7px; nothing white on white.
   ========================================================================== */

/* ---------- Header -----------------------------------------------------------
   The left block gives when the row is tight so the actions never squash; the
   chips wrap inside it. Crumb, then the client and the number on one line with
   the status at the number's own scale. Edit Invoice leads the action row
   (memory.md §15: the identity lives up here, so Edit stands in this header). */
.inv-head > :first-child { flex: 1 1 0; min-width: 0; }
.inv-crumb {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; font-size: 12px; color: var(--color-text-subtle);
}
.inv-crumb a { color: var(--color-text-muted); }
.inv-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Client, then number: the bar between them is drawn, not typed, so each is its
   own text. Muted, because it is joinery. */
.inv-title-row .page-title .inv-client::after {
  content: "|"; margin: 0 9px;
  color: var(--color-text-subtle); font-weight: 400;
}
/* A `.badge` is 11px in a 2px box. Beside 22px type it is a footnote, so the
   status is scaled to stand as tall as the number while its word stays a step
   under the heading. The family colour is the badge's own (memory.md §19). */
.inv-status { font-size: 14px; padding: 5px 12px; }
.inv-title-row .ord-hold { font-size: 13px; }
/* The chip row: what can be SET is a field with a pencil; what is a fact about
   the record is a reading in the muted ink. Both are 12px, so the row reads as
   one line of facts rather than two kinds of thing. */
.inv-chips { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 6px; }
.inv-chips .subtle { font-size: 12px; }
.inv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.inv-chip svg { width: 12px; height: 12px; color: var(--color-text-subtle); flex: none; }
.inv-chip a { color: var(--color-primary-600); font-weight: 500; }
.inv-chip a:hover { color: var(--color-primary-700); }
.inv-field {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: left;
  padding: 2px 6px; margin-left: -6px;
  font: inherit; font-size: 12px; color: inherit; white-space: nowrap;
}
.inv-field:hover { border-color: var(--color-border); background: var(--color-surface); }
.inv-field svg { width: 12px; height: 12px; color: var(--color-text-subtle); flex: none; }
/* The pencil is always there: a chip without one reads as a label, and a pencil
   that waits for a hover is one a finger never sees. */
.inv-field .inv-edit { opacity: 1; }

/* ---------- The figure bar ---------------------------------------------------
   One box, a hairline between readings (quotes.css `.req-stats--bar`): total,
   deposit credited, balance, and when the balance falls due. The figure leads
   and its caption sits under it in the label's small type. The one action you
   take with these figures closes the bar on the right, unframed. */
.inv-stats {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0;
  margin-bottom: var(--page-gap);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.inv-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 14px; min-width: 0;
}
.inv-stat + .inv-stat { border-left: 1px solid var(--color-border); }
.inv-stat .v { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.inv-stat .l { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.inv-stat--ok .v  { color: var(--color-success-ink); }
.inv-stat--due .v { color: var(--color-warn-ink); }
.inv-stat--held .v { color: var(--color-danger-ink); }
.inv-stat--grand .l { color: var(--color-text); }
.inv-bar-action { margin-left: auto; margin-right: 10px; align-self: center; flex: none; }

/* ---------- Five tabs, a card of sections in each -------------------------------
   Each section is a header line (its name, a sub-reading, the actions that
   belong to it) over its content, and a hairline divides it from the next.
   Nothing inside repeats the panel's colour (§13). */
.inv-card > .inv-sec { padding: 16px; border-top: 1px solid var(--color-border); }
.inv-card > .inv-sec:first-child { border-top: 0; }
/* Inside the tab shell the shell is the white box and its padding the inset,
   so a section gives up its own sides, the first its top, the last its foot. */
.tab-shell .inv-card > .inv-sec { padding-left: 0; padding-right: 0; }
.tab-shell .inv-card > .inv-sec:first-child { padding-top: 0; }
.tab-shell .inv-card > .inv-sec:last-child { padding-bottom: 0; }
.inv-sec__head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 12px; }
.inv-sec__head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.inv-sec__head .ord-reading { font-size: 12px; color: var(--color-text-muted); }
.inv-sec__acts { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* A table inside a section: the section's own 16px already stands it off, so
   the wrap's inset and its full-width top rule both come off — the section
   head is what separates it from what came before. The head band (§18) stays:
   there is a heading above the table. */
.inv-sec > .table-wrap { padding-inline: 0; border-top: 0; }
.inv-note { margin: 10px 0 0; font-size: 12px; color: var(--color-text-subtle); }
.inv-note strong { color: var(--color-text-muted); font-weight: 600; }

/* ---------- Lines ------------------------------------------------------------------
   Seven columns take shares of the table under `table-layout: fixed`. The
   material carries two lines (name; type · size · thickness · origin), so it
   takes a third; the figures are sized for their widest plausible value and the
   money sits last, right-aligned by `.data-table`'s own rule. The export
   invoice prints the HS code per line, so it has a column of its own. */
.inv-lines th.col-material { width: 32%; }
.inv-lines th.col-hs       { width: 11%; }
.inv-lines th.col-qty      { width: 9%; }
.inv-lines th.col-area     { width: 13%; }
.inv-lines th.col-kg       { width: 11%; }
.inv-lines th.col-rate     { width: 11%; }
.inv-lines th.col-total    { width: 13%; }
.inv-lines td.col-total { font-weight: 600; }
/* The foot sums the three figures that add. A rule above it, the heavier ink,
   and the gross weight as a qualifier under the net because the container was
   filled to the gross (the fixture's 26,675 kg) and the invoice bills the net. */
.inv-lines tfoot td {
  padding: 10px var(--table-pad-x);
  border-top: 1px solid var(--color-border);
  font-weight: 600; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.inv-lines tfoot td .sub { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-subtle); }
.inv-lines tfoot td:last-child { text-align: right; }

/* ---------- Terms & totals ------------------------------------------------------------
   Two blocks side by side: what the document refers to (the order, the
   proforma it replaces, the container and its bill of lading, the terms) as a
   key–value grid, and the arithmetic as a totals block. The totals stand on
   the control ground because they are a box inside a white card (§13); label
   right, value left, tight at the centre (memory feedback), never spread. */
.inv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px 32px; align-items: start; }
.inv-totals {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px; row-gap: 7px; align-items: baseline;
  padding: 12px 14px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 13px;
}
.inv-totals .l { text-align: right; color: var(--color-text-muted); font-size: 12px; }
.inv-totals .l .sub { display: block; font-size: 11px; color: var(--color-text-subtle); }
.inv-totals .v { font-variant-numeric: tabular-nums; color: var(--color-text); }
.inv-totals .v .sub { font-size: 11px; color: var(--color-text-subtle); margin-left: 6px; }
.inv-totals .v.is-neg { color: var(--color-success-ink); }
.inv-totals .is-rule { grid-column: 1 / -1; height: 1px; background: var(--color-control-border); margin: 3px 0; }
.inv-totals .l.is-grand, .inv-totals .v.is-grand { font-weight: 600; color: var(--color-text); font-size: 14px; }
.inv-totals .v.is-balance { font-weight: 600; color: var(--color-warn-ink); font-size: 15px; }
.inv-totals .l.is-balance { color: var(--color-text); font-weight: 600; }
.inv-kv dd .ord-hold { font-size: 12px; }

/* ---------- Payments ----------------------------------------------------------------
   Six columns: when, how, the bank's reference, what it settled, its state and
   the money last. The row menu is the house dropdown on a ghost button, so it
   is the action column's whole content and the money keeps the right edge. */
.inv-pay th.col-date    { width: 11%; }
.inv-pay th.col-method  { width: 19%; }
.inv-pay th.col-ref     { width: 14%; }
.inv-pay th.col-applied { width: 24%; }
.inv-pay th.col-status  { width: 13%; }
.inv-pay th.col-acts    { width: 6%; }
.inv-pay th.col-amount  { width: 13%; }
.inv-pay td.col-acts { text-align: center; }
.inv-pay td.col-amount { font-weight: 600; }
.inv-pay tr.is-awaited td { color: var(--color-text-muted); }
.inv-pay tr.is-awaited td.col-amount { color: var(--color-warn-ink); }
.inv-rowmenu { display: inline-flex; }
.inv-rowmenu .btn { padding: 4px 6px; }
.inv-rowmenu .dropdown-menu { right: 0; left: auto; min-width: 220px; }

/* ---------- Sends & views -----------------------------------------------------------
   The delivery log is a table (when, how, to whom, state); above it one line
   of readings says what matters: sent, opened how often, last opened, who has
   not looked. */
.inv-log th.col-when   { width: 16%; }
.inv-log th.col-how    { width: 20%; }
.inv-log th.col-to     { width: 40%; }
.inv-log th.col-state  { width: 24%; }
.inv-log td.col-state .badge { vertical-align: middle; }
.inv-log td.col-state .sub { display: block; font-size: 11px; color: var(--color-text-subtle); margin-top: 2px; }
/* A payment-status column holds a badge and may hold a word under it. */
.inv-pay td.col-status .sub { display: block; font-size: 11px; color: var(--color-text-subtle); margin-top: 2px; }

/* ---------- Reminders: settings two across (memory.md §16) ------------------------
   [switch] [label] [value], each after the last, two to a row, the block ending
   where its content ends. Values that belong to a label sit with it. */
.inv-settings { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 48px; align-items: center; }
.inv-setting { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text); min-width: 0; }
.inv-setting .switch { flex: none; }
.inv-setting .val { color: var(--color-text-muted); font-size: 12px; }
.inv-setting .val.is-warn { color: var(--color-warn-ink); font-weight: 600; }
.inv-setting .val a { color: var(--color-primary-600); font-weight: 500; }
/* The cadence as a path: the steps the tenant configured for overseas
   distributors, the next one lit. Reuses the status-path drawing. */
.inv-cadence { margin-top: 14px; }
.inv-cadence .ord-path { font-size: 12px; }
.inv-cadence__lead { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }

/* ---------- Documents --------------------------------------------------------------
   The house `.ord-doc` row. The reading after the version says who issued it
   and when; the badge says whether the client has it. */
.inv-docs .ord-doc__meta { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.inv-docs .ord-doc__name a { color: var(--color-text); }
.inv-docs .ord-doc__name a:hover { color: var(--color-primary-700); }
.inv-docs__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 14px 0 2px; }
.inv-docs__group:first-child { margin-top: 0; }

/* ---------- Dialog pieces -----------------------------------------------------------
   Recipient rows: a switch, the person, their role as a grey word. Sized to
   content, two across where there is room. */
.inv-recips { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 32px; }
.inv-recips .switch-field { color: var(--color-text); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; }
/* A switch row standing where a field's label would stand is a setting, not
   a caption: app.css's uppercase field-label type comes off it so the name
   reads as a name (memory.md §5: label regular weight). This sheet loads on
   this page only. */
.field > label.switch-field { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--color-text); }
.inv-recips .role { font-size: 11px; color: var(--color-text-subtle); margin-left: 4px; }
/* A short field stays short (memory.md §9): an amount, a date, a reference. */
.inv-amount-in { width: 160px; }
.inv-date-in   { width: 170px; }
.inv-ref-in    { width: 220px; }
.inv-select-sm { width: auto; min-width: 180px; }
.inv-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
/* The bank-details block in the pay-link dialog: facts on the control ground. */
.inv-bank { padding: 10px 12px; background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius); }
.inv-bank .ord-kv { row-gap: 4px; }
/* The credit-note lines: a check per line with its quantity and amount. */
.inv-cn-lines { display: flex; flex-direction: column; gap: 8px; }
.inv-cn-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) 90px 120px; gap: 10px; align-items: center; font-size: 13px; }
.inv-cn-line .input { padding: 4px 8px; font-size: 12px; }
/* The line's name is a label for its checkbox, so app.css's uppercase
   field-label type would land on a material name: it reads as a name. */
.inv-cn-line label.cell-stack { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--color-text); cursor: pointer; }
.inv-cn-line .cell-stack .sub { font-size: 11px; font-weight: 400; color: var(--color-text-subtle); }
.inv-cn-line .amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: 12px; }
.inv-void-warn strong { font-weight: 600; }
.inv-lock-ico { width: 12px; height: 12px; color: var(--color-text-subtle); margin-left: 4px; vertical-align: middle; }

/* ---------- Folds ------------------------------------------------------------------
   1200: terms and totals stack. 768: the figure bar becomes a two-by-two grid
   (its hairlines drawn by the grid's own gap), settings go one per row, the
   tables keep their shares on a wider table and scroll inside their wrap,
   and the touch targets grow to the 44px floor. 480: the section actions take
   the row and share it. */
@media (max-width: 1200px) {
  .inv-two { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  /* The title block takes the full width and the actions drop under it, as on
     order.html, instead of the heading being squeezed beside four buttons. */
  .inv-head > :first-child { flex-basis: 100%; }
  .inv-lines { min-width: 760px; }
  .inv-pay   { min-width: 820px; }
  .inv-log   { min-width: 640px; }
  /* A document row no longer fits on one line: the reading drops to a line
     of its own under the name (past the icon), and the name, version, badge
     and actions keep the first. */
  .inv-docs .ord-doc__meta { order: 10; flex-basis: 100%; white-space: normal; padding-left: 34px; }
}
@media (max-width: 900px) {
  /* The section's actions no longer fit beside its name: they take the next
     line from the left edge rather than hanging off the right. */
  .inv-sec__acts { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 768px) {
  .inv-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--color-border); overflow: hidden;
  }
  .inv-stat { background: var(--color-surface); }
  .inv-stat + .inv-stat { border-left: 0; }
  .inv-bar-action { grid-column: 1 / -1; margin: 0; justify-self: start; background: var(--color-surface); width: 100%; justify-content: center; border-radius: 0; }
  .inv-settings { grid-template-columns: 1fr; gap: 10px; }
  .inv-recips { grid-template-columns: 1fr; }
  .inv-sec__acts .btn { min-height: 44px; }
  .inv-cn-line { grid-template-columns: 18px minmax(0, 1fr) 70px 90px; }
}
@media (max-width: 480px) {
  .inv-card > .inv-sec { padding: 14px 12px; }
  .inv-sec__acts { margin-left: 0; flex-basis: 100%; }
  .inv-sec__acts .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .inv-title-row .page-title { font-size: 18px; }
  .inv-stat .l, .inv-stat .v { white-space: normal; }
  /* A setting's value drops under its label on a phone (qualifier under the
     value, never beside it), indented past the switch so the switch column
     still reads straight down the block. */
  .inv-setting { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; }
  .inv-setting .val { grid-column: 2; }
  /* The qualifier beside a total has no room on a phone: it goes under it. */
  .inv-totals .v .sub { display: block; margin-left: 0; }
  .inv-title-row .page-title .inv-client::after { margin: 0 7px; }
  .inv-title-row .page-title .inv-number { white-space: nowrap; }
  .inv-amount-in, .inv-date-in, .inv-ref-in, .inv-select-sm { width: 100%; }
}