/* ═══ FILING ═══════════════════════════════════════════════════════════════
   The surfaces that write to the POS: the batch run's plan / progress / summary
   dialog, and the note a single receipt leaves in its own footer.

   Linked by index.html, render-blocking, with the data-filing-styles marker
   receipts/file.js guards on, so the dialog never opens unstyled; the module
   links it as the fallback, so it still travels with the code that owns it.

   Every value here is a token from styles.css. Nothing declares a colour of its
   own, so both themes and forced-colors keep working without a second palette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The dialog ─────────────────────────────────────────────────────────── */
.bf-lede {
  margin: 0 0 var(--space-4);
  max-width: var(--prose-max);
  line-height: var(--leading-loose);
}
.bf-head-state { display: inline-flex; align-items: center; }
.bf-sec-head {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--ink-muted);
}
.bf-sec-head--held { margin-top: var(--space-5); }
.bf-list {
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden;
  /* The list names itself the pane, so its rows collapse on the space they have. */
  container-type: inline-size; container-name: pane;
}
/* The row in flight is scrolled to the nearest edge of the body; the padding
   keeps it off the rule the large dialog draws there, so a row brought into
   view never reads as cut. */
.bf-body { scroll-padding-block: var(--space-2); }
/* A short window (a phone held sideways, 390px high) left the list 78px
   between the fixed head, lede, total and foot. There the whole card scrolls
   as one page and the list takes its natural height, so every receipt can be
   read; the foot ends the page instead of standing over the list. */
@media (max-height: 31.25em) {
  .bf-dialog { overflow-y: auto; overscroll-behavior: contain; }
  .bf-dialog > .bf-body { flex: none; overflow: visible; }
}
/* The sum of the run, beside the button that sends it: the count on the left in
   words, the figure on the right in the numeric face, so it can be checked
   against the pile of paper in the operator's hand. No fill of its own: the
   sunken surface already means "will not be filed" on the rows above it. The
   side padding is the row's, so the figure stands under the rows' figures. */
.bf-total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0 var(--row-pad-x);
}
.bf-total-k { color: var(--ink-muted); font-size: var(--text-sm); }
.bf-total-v {
  font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-strong);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.bf-progress {
  margin: var(--space-3) 0 0;
  min-height: var(--space-5);
  font-size: var(--text-sm); color: var(--ink-muted);
}
.bf-progress:empty { display: none; }

/* ── One receipt in the run ─────────────────────────────────────────────── */
/* The note spans the full width so a POS refusal — the longest text on the
   screen and the one that must be read — never squeezes the figures. */
.bf-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "state main figs"
    "note  note note";
  align-items: start;
  gap: var(--space-2) var(--space-4);
  padding: var(--row-pad-y) var(--row-pad-x);
  background: var(--surface-raised);
}
.bf-row + .bf-row { border-top: 1px solid var(--rule); }
.bf-row-state { grid-area: state; display: flex; align-items: center; gap: var(--space-2); }
/* The plan's box per receipt (GAP_REGISTER Part 3): the native checkbox the
   base sheet already styles, in a label that pads it out to a target a
   pointer can hit. */
/* The box is the kit's --check square, and its label is the target: a
   control's height on each side, so a thumb on a phone lands on it. The
   negative margin gives the padding back, and the row keeps its rhythm. */
.bf-row-pick {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-h-sm); min-height: var(--control-h-sm);
  margin: calc(var(--space-1) * -1) 0; cursor: pointer;
}
.bf-row-pick input { width: var(--check); height: var(--check); margin: 0; }
.bf-row-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bf-row-figs { grid-area: figs; display: flex; gap: var(--space-5); justify-self: end; }
.bf-row-note { grid-area: note; min-width: 0; }
.bf-row-note:empty { display: none; }

.bf-row-name {
  color: var(--ink-strong); font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
/* Each fact sits in its own element and carries its own label: a translation
   reorders them, and none of them is half of a sentence. */
.bf-row-sub { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); min-width: 0; }
.bf-meta { display: inline-flex; align-items: baseline; gap: var(--space-1); min-width: 0; }
.bf-meta-k { color: var(--ink-faint); }
.bf-meta-v { overflow-wrap: anywhere; }
/* "Vérifiée": the operator checked this invoice before the run (receipts/checked.js).
   The word carries the state; the colour only repeats it. */
.bf-meta--checked .bf-meta-v { color: var(--state-done-fg); font-weight: var(--weight-medium); }

.bf-fig { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.bf-fig-k {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--ink-muted);
}
.bf-fig-v {
  font-size: var(--text-md); color: var(--ink-strong);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* State is already a word in the chip; the edge only repeats it, so a
   monochrome screen loses nothing. A refusal is the one state that also takes
   a fill — it is where the run stopped. */
.bf-row[data-state="filed"] { box-shadow: var(--edge) var(--state-done-edge); }
.bf-row[data-state="filing"] { box-shadow: var(--edge) var(--state-progress-edge); }
.bf-row[data-state="held"], .bf-row--held { box-shadow: var(--edge) var(--state-attention-edge); }
.bf-row[data-state="refused"] {
  box-shadow: var(--edge) var(--state-blocked-edge);
  background: var(--state-blocked-bg);
}
/* A row nothing was sent to recedes onto the sunken surface instead of being
   dimmed: measured, opacity .6 took its supplier line to 2.62:1, and the chip
   already says "Not attempted" in words. */
.bf-row[data-state="notAttempted"] { background: var(--surface-sunken); }
/* Unticked by the operator on the plan: never sent, so it recedes the same way. */
.bf-row[data-state="excluded"] { background: var(--surface-sunken); }

/* ── The note a single receipt leaves in its own footer ─────────────────── */
.bf-note {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.bf-note--done { border-color: var(--state-done-rule); background: var(--state-done-bg); }
.bf-note--ready { border-color: var(--state-ready-rule); background: var(--state-ready-bg); }
.bf-note--attention { border-color: var(--state-attention-rule); background: var(--state-attention-bg); }
.bf-note--blocked { border-color: var(--state-blocked-rule); background: var(--state-blocked-bg); }
.bf-note-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--ink-strong); font-weight: var(--weight-medium);
}
/* The note reads as the kit callout: its state's symbol, then the sentence. */
.bf-note-head > svg { flex: none; width: var(--icon); height: var(--icon); }
.bf-note--done .bf-note-head > svg { color: var(--state-done-fg); }
.bf-note--attention .bf-note-head > svg { color: var(--state-attention-fg); }
.bf-note-line {
  margin: var(--space-2) 0 0;
  max-width: var(--prose-max);
  font-size: var(--text-sm); line-height: var(--leading-loose);
}
.bf-note-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.bf-note-body:empty { display: none; }
/* Only the number changes each second, so only the number is re-rendered. */
.bf-count { font-variant-numeric: tabular-nums lining-nums; font-weight: var(--weight-semibold); }

/* ── Narrow ─────────────────────────────────────────────────────────────── */
/* The figures drop under the receipt rather than compressing, because a French label
   is a third longer and must wrap; the list is the pane, so the row reads its own space. */
@container pane (max-width: 640px) {
  .bf-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "state main"
      "figs  figs"
      "note  note";
  }
  .bf-row-figs { justify-self: start; gap: var(--space-4); }
  .bf-fig { text-align: left; }
}

/* ── what followed the filing ───────────────────────────────────────────────
   Under the "Filed" note: one line per step (the folder, the mail), the
   state chip carrying the sentence, and the one button that repairs a step
   that did not land. receipts/afterFiling.js paints and wires it. */
.after-filing { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.after-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.after-line .state { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.after-line .btn { flex: none; }

/* ── a filed TRANSFER document (receipts/dashboard.js renderFiledTransfer) ──
   The note, the four facts, the lines with their sign, the total: no order
   bar and no verification panel, because there is nothing to reconcile. */
.tf-filed { display: flex; flex-direction: column; gap: var(--space-4); }
.tf-filed .doc-meta { margin: 0; }
.tf-filed-lines tfoot th { text-align: right; font-weight: var(--weight-semibold); }
.tf-filed-lines tfoot td { font-weight: var(--weight-semibold); }

/* ── The filed invoice (REDESIGN 4.5) ───────────────────────────────────── */
/* The paper beside the lines, as in the review: about 45% on the left, sticky
   under the header and the full height of the window, readable and zoomable;
   the lines, the correction and the history on the right. One column on a
   narrow window, the paper first at a readable height. */
.fi { --fi-paper-h-narrow: 60vh; }
.fi-panes { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: var(--space-4); align-items: start; }
.fi-paper {
  position: sticky; top: var(--review-rail-top);
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--review-rail-top) - var(--space-4));
  aspect-ratio: auto; max-height: none; cursor: auto;
}
.fi-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
/* No paper on this computer: the slot sits over the lines, which take the
   width, exactly as on the review (.rv-nopdf). */
.fi-panes:has(> .fi-paper .pdf-attach--slot) { grid-template-columns: minmax(0, 1fr); }
.fi-paper:has(.pdf-attach--slot) { position: static; height: auto; }
/* The lines read as on the review: the title row, then the bordered table.
   The region names itself the review's receipt pane (rvwork, styles/review.css),
   so on a narrow pane the filed lines take the review's two-line rows: this
   pane is not #review-detail, and below 900px the six fixed columns left the
   Article column 0px at 390 and pushed the amount out of a frame that clipped. */
.fi-lines { container-type: inline-size; container-name: rvwork; min-width: 0; }
.fi-lines > .stl.rv-lines { border: 0; border-radius: 0; background: transparent; }
.fi-mark { color: var(--ink-muted); }
@media (max-width: 900px) {
  .fi-panes { grid-template-columns: minmax(0, 1fr); }
  .fi-paper { position: static; height: var(--fi-paper-h-narrow); }
}

/* The correction, in the same table. While it is open the table says so with
   its edge, the printed rows step aside, and Auphan's lines take their place.
   Every editable row keeps one height whatever it holds: the "before" under a
   changed figure has its line reserved in every cell, empty until the figure
   differs, so marking a cell never moves the rows below (REDESIGN 4.3.2). */
/* The edge is drawn on the table's frame, which no row's ground covers. */
/* The table being corrected is told apart by its fields and the changed-cell
   tint, not by a coloured edge down its side. */
/* The editor's fields need the room of a field, not of a figure. */
.rv-lines .rv-table.is-editing col.c-qty { width: 96px; }
.rv-lines .rv-table.is-editing col.c-unit { width: 144px; }
.rv-lines .rv-table.is-editing col.c-price { width: 120px; }
.rv-lines .rv-table.is-editing col.c-amount { width: 128px; }
.rv-lines .rv-table.is-editing col.c-actions { width: 88px; }
.fi-edit .qty-input, .fi-edit .price-input, .fi-edit .select { width: 100%; min-width: 0; }
[data-correct-count] { margin-top: var(--space-2); }
.fi-edit tr.fi-row > td { height: calc(var(--row-h) + var(--space-4)); vertical-align: top; padding-top: var(--space-1); }
.fi-cell { white-space: nowrap; }
/* The "before" line and the changed mark are the kit's changed cell
   (.ui-changed-cell, styles.css); only the overflow of a long name is here. */
.fi-was { white-space: nowrap; }
.fi-item-main { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.fi-item { max-width: 100%; }
.fi-row-note:empty, .fi-row-err[hidden] { display: none; }
.fi-row-note { display: block; font-size: var(--text-xs); color: var(--state-attention-fg); }
.fi-row-err { display: block; white-space: normal; }
/* A removed line stays in its place, receded, with "Remettre" beside it. */
.fi-row--removed > td { color: var(--ink-muted); background: var(--surface-sunken); }
.fi-row--removed .stl-name, .fi-row--removed .fi-item { text-decoration: line-through; }
/* The footer of gaps, under the lines: the two figures, then the two presses. */
.fi-edit-foot .fi-foot { padding: var(--space-3) var(--row-pad-x-dense); border-top: 1px solid var(--rule); background: var(--surface-raised); white-space: normal; }
.fi-gaps { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-strong); }
.fi-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.fi-lede[hidden] { display: none; }
.fi-actions:empty { display: none; }
.fi-history-list { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.fi-history-row > .small { display: block; }
[data-history-said]:empty { display: none; }

/* ── A write in flight (REDESIGN section 5, "Pending and done") ─────────── */
/* The note a receipt shows while Auphan is being written: the progress tint,
   and the seconds it has run beside the step it is at. Only the number
   changes each second; it is set in tabular figures so the row never shifts
   as it counts. */
.bf-note--progress { border-color: var(--state-progress-rule); background: var(--state-progress-bg); }
.bf-elapsed {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-sm); font-weight: var(--weight-regular);
  color: var(--ink-muted);
  white-space: nowrap;
}
.bf-row-note .bf-elapsed { margin-inline-start: var(--space-2); }

/* A changed cell and a changed row carry the kit's tint and the "Avant" line;
   the edge stripe the shared .row--attention and .ui-changed-cell draw is
   dropped here, where every row of the table is a field being edited. */
.fi-edit tr.fi-row.row--attention { box-shadow: none; }
.fi-edit .ui-changed-cell.is-changed { box-shadow: none; }

/* ── The correction on a narrow pane ──────────────────────────────────────
   The editor's fixed columns take 620px (the is-editing widths above), so
   on a narrow pane the product list had what was left: 34px of select at
   768, nothing at 390, where the amount and the remove button sat outside a
   frame that clipped them. There each line is a block: its number, the
   product list across the row and its presses; under it the quantity and the
   unit, then the price and the line's total, two to a line, each under its
   column's name (data-label, receipts/correct.js). The "before" line keeps its
   place in every cell as in the table, so marking a change moves nothing. The
   printed rows' body stays hidden: only a body without [hidden] is reached.
   The pane is .fi-lines, named rvwork above; 760 is the width the filed
   lines already stacked at, which leaves the list at least 140px above it. */
@container rvwork (max-width: 760px) {
  .rv-lines .rv-table.is-editing, .rv-table.is-editing > tbody:not([hidden]), .rv-table.is-editing > tfoot,
  .rv-table.is-editing > tfoot > tr, .rv-table.is-editing > tfoot > tr > td { display: block; }
  .rv-table.is-editing > colgroup, .rv-table.is-editing > thead { display: none; }
  .rv-table.is-editing tr.fi-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "no item item act" "qty qty unit unit" "price price amount amount";
    gap: var(--space-2); align-items: start;
    padding: var(--space-3); border-bottom: 1px solid var(--rule);
  }
  .fi-edit tr.fi-row > td { display: block; height: auto; padding: 0; border: 0; text-align: left; background: transparent; }
  /* The figure cells keep the kit's changed-cell box (a column, its tint when
     changed), drawn here as a block rather than a table cell. */
  .fi-edit tr.fi-row > td.fi-cell { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-xs); }
  .fi-edit tr.fi-row > td.ui-changed-cell.is-changed { background: var(--state-attention-bg); }
  .fi-edit tr.fi-row > td.stl-no { grid-area: no; width: auto; padding-top: var(--space-2); }
  .fi-edit tr.fi-row > td[data-cell="item"] { grid-area: item; }
  .fi-edit tr.fi-row > td[data-cell="qty"] { grid-area: qty; }
  .fi-edit tr.fi-row > td[data-cell="unit"] { grid-area: unit; }
  .fi-edit tr.fi-row > td[data-cell="price"] { grid-area: price; }
  .fi-edit tr.fi-row > td[data-cell="amount"] { grid-area: amount; align-items: flex-end; text-align: right; }
  .fi-edit tr.fi-row > td.stl-actions { grid-area: act; }
  /* The lists take their cell's width: the kit's 300px cap on a small select
     left half the row empty beside the product's name. */
  .fi-edit tr.fi-row .select { max-width: none; }
  .fi-edit tr.fi-row > td[data-label]::before {
    content: attr(data-label);
    font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps);
    text-transform: uppercase; color: var(--ink-muted);
  }
  /* The total under its name reads at a field's height, level with the price. */
  .fi-edit tr.fi-row > td[data-cell="amount"] > .tnum { display: flex; align-items: center; min-height: var(--control-h-sm); }
  .fi-edit tr.fi-row.fi-row--removed { background: var(--surface-sunken); }
  .fi-edit-foot .fi-foot { padding: var(--space-3); }
}