/* Document detail header (quote / purchase order): the info block (left) sits
   beside a content-width totals card (right). The right column is sized to the
   totals (`auto`), so it stays narrower than the info block; both cards stretch to
   a shared row height. (Distinct from print.css `.doc-head`, the printed header.) */
.detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: stretch; margin-bottom: 14px; }
.detail-head > .card { margin-bottom: 0; height: 100%; }
.detail-head table.totals { margin-top: 0; }

/* Quote head: two equal halves — infos client (densified) + note interne (screen
   only). Quote foot (below the lines): commentaire client (printed) takes the
   remaining width, then the Options card (display toggles + régime + validité), then a
   content-sized totals card (auto column — mirrors .detail-head). Border-first cards, no
   shadow; all collapse to one column on narrow screens. */
.quote-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 14px; }
.quote-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, auto) auto; gap: 12px; align-items: stretch; margin-top: 14px; }
.quote-head > .card, .quote-foot > .card { margin-bottom: 0; height: 100%; }
.quote-foot table.totals { margin-top: 0; }
/* Options card: the two quote-wide display toggles stacked full-width, then the régime /
   validité fields below them. */
.quote-options .opt-toggles { display: flex; flex-direction: row; gap: 6px; margin-bottom: 12px; }
.quote-options .opt-toggles form { flex: 1; margin: 0; }
.quote-options .opt-fields { display: flex; flex-direction: column; gap: 10px; }
/* Régime / validité each on a single row: the select/date stays compact (capped so the
   widest VAT-regime option doesn't blow it up) and the Enregistrer button sits to its
   right (shorter block, no wrap to a second line). */
.quote-options .opt-fields .inline-date { flex-wrap: nowrap; }
.quote-options .opt-fields select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 170px; }
.quote-options .opt-fields input, .quote-options .opt-fields select { font-weight: var(--fw-normal); }
/* Comment cards (Note interne / Commentaire client): Save sits on the title row so the
   textarea fills the whole card height; same-row blocks stretch to equal height. */
.comment-block { display: flex; flex-direction: column; gap: 6px; }
.comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comment-head h3 { margin: 0; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.comment-hint { font-size: var(--fs-11); font-weight: var(--fw-normal); color: var(--muted); text-transform: none; letter-spacing: 0; }
.comment-block form { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.comment-block textarea { width: 100%; max-width: none; flex: 1; min-height: 64px; max-height: none; field-sizing: fixed; }
/* Read-only comment (non-draft): plain text fills the card, muted placeholder when empty. */
.comment-ro { font-size: var(--fs-14); white-space: pre-wrap; flex: 1; }
@media (max-width: 860px) { .quote-head, .quote-foot { grid-template-columns: 1fr; } }

/* Two-column edit/detail shell (ui.editCols): a primary column capped to the reading
   width (--form-col) beside a STATIC right rail of contextual cards (Aperçu, pièces
   jointes…). The form keeps its comfortable width on the left (left track capped to
   --form-col); the right track is 1fr so it absorbs all the extra width and its cards
   stretch full-width to fill the band the cap would otherwise leave empty — no wasted
   space, no sticky follow. Collapses to one column on the narrow rail, the rail
   dropping under the main column. */
.edit-cols { display: grid; grid-template-columns: minmax(0, var(--form-col)) minmax(340px, 1fr); gap: 16px; align-items: start; }
.edit-main { min-width: 0; }
.edit-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.edit-rail > .card { margin-bottom: 0; width: 100%; }
@media (max-width: 900px) { .edit-cols { grid-template-columns: 1fr; } }

/* Editable global-discount row inside the totals table: compact controls in the
   value cell so the editor reads as one more totals line — no boxed-out look. */
.totals .discount-row td { padding-top: 5px; padding-bottom: 7px; }
.totals-discount { display: inline-flex; align-items: center; gap: 6px; }
.totals-discount .discount-input input { width: 64px; }
.totals-discount input, .totals-discount select { height: auto; padding: 3px 7px; font-size: var(--fs-13); border-radius: 6px; }
.totals-discount .btn { min-height: 0; padding: 4px 9px; font-size: var(--fs-13); }
/* Deposit (acompte) edit row on a draft: a plain euro input (no %/€ unit selector), so
   it needs its own width (the discount rule above is scoped to .discount-input). */
.totals-deposit input { width: 90px; text-align: right; }

/* Invoice settlement row: payment entry form (left) beside the Payé / Reste dû
   totals (bottom-right), aligned to the form's baseline rather than stacked. */
.pay-settle { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-top: 18px; }
.pay-settle > form { flex: 1 1 var(--field-lg); }
.pay-settle > table.totals { margin-top: 0; }
/* Enregistrer sits on the fields' row, right after the Date field — not wrapped below
   (overrides the form-grid .form-actions { flex-basis:100% } that stacks it). */
.pay-settle .form-actions { flex-basis: auto; margin: 0; }

/* Per-line discount: a number field glued to its unit selector (% / €). In the
   line-form it hugs its content; in the edit row it fills the column. */
.discount-input { display: inline-flex; gap: 4px; align-items: stretch; }
.discount-input input { width: 72px; margin: 0; }
.discount-input select { width: auto; margin: 0; }
td .discount-input { display: flex; width: 100%; }
td .discount-input input { width: 100%; min-width: 44px; }