/* Kontex Ventes — Documents (Devis, Facture proforma, Fiche atelier, Paramètres › Documents et TVA).
   Spec: design/13-phase2-spec.md §2.D. Kontex Design System only (tokens of /kontex.css): no amber at all on the
   documents, Teal 700 for actions, Teal 600 identifies (the 2 px rule under the header), Plex Mono for money and
   refs, no horizontal page scroll at 390 px. Print (DS README « Documents »): A4, 20 mm margins (the @page rules
   come from /api/documents/<kind>/<id>/page.css with the legal footer and « Page X / Y »), wordmark top-left,
   body Poppins 10 pt, tables IBM Plex Mono 9 pt, Slate 900 on white, seam rules #243243.
   Every class is prefixed "doc-". */

/* ================= 1. In the app: Documents cards and the settings tab ================= */
.doc-card .doc-list{display:flex;flex-direction:column}
.doc-row{display:flex;align-items:center;gap:12px;padding-block:10px;border-bottom:1px solid var(--border-subtle);min-width:0}
.doc-row:last-child{border-bottom:none}
.doc-row>.ico{color:var(--brand-text)}
.doc-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.doc-row__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.doc-row__ref{font:600 13px/1.4 var(--kx-font-mono);color:var(--text)}
.doc-row__meta{font:400 12px/1.45 var(--kx-font-sans);color:var(--text3)}
.doc-row__meta .num{font-size:12px;font-weight:500;color:var(--text2)}
.doc-row__acts{display:flex;gap:4px;flex-shrink:0}
.doc-sub-h{font:600 11px/1 var(--kx-font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-top:4px}
.doc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.doc-card .callout{margin:0}

/* Paramètres › Documents et TVA */
.doc-settings .doc-rib-preview{font:500 13px/1.4 var(--kx-font-mono);color:var(--text2);min-height:18px}
.doc-settings .doc-checks{display:flex;flex-direction:column;gap:4px}
.doc-settings textarea.kx-input{min-height:72px;resize:vertical}
.doc-settings .doc-save{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ================= 2. The printable pages (served by /api/documents/…) ================= */
.doc-body{background:var(--kx-slate-100);color:var(--kx-slate-900);min-height:100vh}

/* screen toolbar (hidden in print) */
.doc-toolbar{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border);min-height:56px}
/* title block on the left (the version links wrap under the title), « Fermer » and the print button kept together */
.doc-toolbar__in{max-width:calc(210mm + 48px);margin:0 auto;padding:8px 24px;min-height:56px;display:flex;align-items:center;gap:12px}
.doc-toolbar__lead{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px}
.doc-toolbar__title{font:600 15px/1.4 var(--kx-font-sans);color:var(--text);min-width:0}
.doc-toolbar__title .mono{font-weight:600}
.doc-toolbar__close,.doc-toolbar__print{flex-shrink:0}
.doc-toolbar__versions{display:inline-flex;align-items:center;gap:6px;font:400 13px/1.4 var(--kx-font-sans);color:var(--text3);flex-wrap:wrap}
.doc-vlink{display:inline-flex;align-items:center;height:28px;padding:0 8px;border-radius:var(--kx-radius-xs);font:500 13px/1 var(--kx-font-mono);color:var(--brand-text)}
.doc-vlink[aria-current="page"]{background:var(--tint);color:var(--text);font-weight:600}
.doc-view{max-width:calc(210mm + 48px);margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.doc-callouts{display:flex;flex-direction:column;gap:8px}

/* the sheet: an A4 page on screen */
.doc-paper{background:#ffffff;color:var(--kx-slate-900);width:100%;max-width:210mm;min-height:297mm;margin:0 auto;padding:20mm;
  box-shadow:var(--kx-shadow-raised);border-radius:2px;font:400 13px/1.5 var(--kx-font-sans);display:flex;flex-direction:column;gap:20px;
  --doc-teal:#0f8b6a;--doc-line:#dae0e7;--doc-soft:#515f70}
.doc-paper--msg{min-height:0}
.doc-paper a{color:#0b6f55}
.doc-paper .num{font-family:var(--kx-font-mono);font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.doc-paper .mono{font-family:var(--kx-font-mono);font-variant-numeric:tabular-nums}

/* header: wordmark top-left, title and ref top-right, 2 px Teal 600 rule */
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--doc-teal);flex-wrap:wrap}
.doc-logo{height:28px;width:auto}
.doc-head__t{text-align:end;display:flex;flex-direction:column;gap:2px;margin-left:auto}
.doc-title{font:600 20px/1.2 var(--kx-font-sans);letter-spacing:.08em;color:var(--kx-slate-900)}
.doc-ref{font:600 15px/1.3 var(--kx-font-mono);color:var(--kx-slate-900)}
.doc-sub{font:400 12px/1.4 var(--kx-font-sans);color:var(--doc-soft)}

.doc-banner{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px solid #f4bec2;background:#fdedee;color:#981f27;border-radius:4px;font:600 13px/1.4 var(--kx-font-sans)}
.doc-context{font:400 13px/1.5 var(--kx-font-sans);color:var(--kx-slate-900)}
.doc-eyebrow{font:600 10px/1 var(--kx-font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--doc-soft);margin-bottom:6px}

/* client and issuer */
.doc-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.doc-party{border:1px solid var(--doc-line);border-radius:4px;padding:12px 14px;font:400 12.5px/1.5 var(--kx-font-sans);min-width:0;overflow-wrap:anywhere}
.doc-party__name{font:600 14px/1.4 var(--kx-font-sans)}

/* tables: hairlines, no zebra; numbers in Plex Mono */
.doc-tablewrap{overflow-x:auto;min-width:0}
.doc-table{width:100%;border-collapse:collapse;font:400 12.5px/1.45 var(--kx-font-sans)}
.doc-table thead th{font:600 10px/1.2 var(--kx-font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--doc-soft);text-align:start;padding:8px 8px;border-bottom:1px solid var(--kx-slate-900);white-space:nowrap}
.doc-table thead th.num{text-align:end}
.doc-table tbody td{padding:9px 8px;border-bottom:1px solid var(--doc-line);vertical-align:top}
.doc-table td.num{font:500 12px/1.45 var(--kx-font-mono)}
.doc-col-n{width:28px;color:var(--doc-soft)}
.doc-line-title{font-weight:600}
.doc-line-detail{color:var(--doc-soft);font-size:12px}
.doc-line-detail .mono{color:var(--kx-slate-900)}

/* totals and terms */
.doc-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px;align-items:start}
.doc-sum__l{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.doc-valid{font-weight:500}
.doc-terms{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.doc-note{white-space:pre-line;color:var(--kx-slate-900)}
.doc-bank{font-weight:500}
.doc-totals{display:flex;flex-direction:column}
.doc-total{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--doc-line);font:400 13px/1.4 var(--kx-font-sans)}
.doc-total .num{font:500 13px/1.4 var(--kx-font-mono)}
.doc-total--due{border-bottom:1.5px solid var(--kx-slate-900);font-weight:600}
.doc-total--due .num{font-weight:600;font-size:14px}
.doc-total--adv{border-bottom:none;color:var(--doc-soft);padding-top:10px}
.doc-words{font:400 13px/1.55 var(--kx-font-sans);padding:10px 14px;border-left:3px solid var(--doc-teal);background:#effaf7}
.doc-disclaimer{font:500 12px/1.5 var(--kx-font-sans);color:var(--doc-soft);font-style:italic}

.doc-sign{display:flex;justify-content:flex-end}
.doc-sign__box{width:min(300px,100%);min-height:110px;border:1px dashed var(--kx-slate-400);border-radius:4px;padding:10px 14px;font-size:12px;color:var(--doc-soft)}

/* footer: seam rule + legal identifiers */
.doc-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;font:400 10.5px/1.5 var(--kx-font-sans);color:var(--doc-soft)}
.doc-seam{width:100%;height:2px;display:block;overflow:visible}
.doc-seam line{stroke:var(--seam)}

/* fiche atelier */
.doc-info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;margin:0}
.doc-kv{min-width:0}
.doc-kv dt{font:600 10px/1.2 var(--kx-font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--doc-soft);margin-bottom:3px}
.doc-kv dd{margin:0;font:400 13px/1.45 var(--kx-font-sans);overflow-wrap:anywhere}
.doc-notes{border:1px solid var(--doc-line);border-left:3px solid var(--doc-teal);border-radius:4px;padding:10px 14px;white-space:pre-line}
.doc-block{display:flex;flex-direction:column;gap:12px}
.doc-h2{font:600 15px/1.35 var(--kx-font-sans);display:flex;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--doc-line)}
.doc-h2__meta{font:500 12px/1 var(--kx-font-sans);color:var(--doc-soft)}
.doc-line{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--doc-line);border-radius:4px;break-inside:avoid}
.doc-line__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.doc-line__n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:4px;background:#ebeff4;font:600 12px/1 var(--kx-font-mono)}
.doc-line__head h3{font:600 14px/1.35 var(--kx-font-sans);flex:1;min-width:0}
.doc-line__kind{font:600 10px/1 var(--kx-font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--doc-soft)}
.doc-line__facts{font-size:12.5px}
.doc-line__desc{white-space:pre-line;font-size:13px}
.doc-sizes{width:auto;min-width:50%}
.doc-sizes td.num,.doc-sizes th.num{text-align:center;min-width:44px}
.doc-sizes td.num{font-size:14px}
.doc-places td.num{text-align:start}
.doc-change{border-left:3px solid var(--kx-slate-300);padding:4px 12px;font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.doc-change__out{font-weight:600}
.doc-maqs{break-inside:avoid}
.doc-maq{margin:0;display:flex;flex-direction:column;gap:6px;break-inside:avoid}
.doc-maq img{max-width:100%;max-height:120mm;width:auto;object-fit:contain;border:1px solid var(--doc-line);border-radius:4px;background:#f5f7fa}
.doc-maq figcaption{font:400 11px/1.4 var(--kx-font-sans);color:var(--doc-soft)}

/* error page */
.doc-msg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:24px 0}
.doc-msg .ico{color:var(--doc-soft)}
.doc-msg h1{font:600 18px/1.35 var(--kx-font-sans)}

/* ---------- phones: no horizontal page scroll at 390 px ----------
   screen only: the printed A4 content box (170 mm ≈ 643 px) is narrower than 768 px and keeps the desktop layout */
@media screen and (max-width:767px){
  /* row 1: title (+ versions) and « Fermer »; row 2: the print button, full width */
  .doc-toolbar__in{padding:8px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .doc-toolbar__lead{grid-column:1;grid-row:1}
  .doc-toolbar__title{font-size:14px}
  .doc-toolbar__close{grid-column:2;grid-row:1;align-self:start}
  .doc-toolbar__print{grid-column:1 / -1;grid-row:2;width:100%}
  .doc-view{padding:12px 0;gap:12px}
  .doc-callouts{padding:0 12px}
  .doc-paper{min-height:0;padding:20px 16px;border-radius:0;gap:16px;font-size:13px}
  .doc-head{gap:10px}
  .doc-head__t{text-align:start;margin-left:0}
  .doc-parties,.doc-sum{grid-template-columns:minmax(0,1fr)}
  .doc-info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc-table thead th,.doc-table tbody td{padding-inline:6px}
  /* lines: the designation takes the whole row, the numbers follow underneath */
  .doc-lines thead{display:none}
  .doc-lines,.doc-lines tbody{display:block}
  .doc-lines tr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:8px;padding:10px 0;border-bottom:1px solid var(--doc-line)}
  .doc-lines td{border:none!important;padding:0!important}
  .doc-lines td.doc-col-d{grid-column:2 / 4}
  .doc-lines td.num{grid-column:2 / 4;display:flex;justify-content:space-between;gap:8px;padding-top:4px!important}
  .doc-lines td.num::before{content:attr(data-label);font:400 12px/1.45 var(--kx-font-sans);color:var(--doc-soft)}
  .doc-sign{justify-content:stretch}
  .doc-sign__box{width:100%}
  /* fiche: each placement as a 2 × 2 block, the column names above the values */
  .doc-places thead{display:none}
  .doc-places,.doc-places tbody{display:block}
  .doc-places tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:8px 0;border-bottom:1px solid var(--doc-line)}
  .doc-places td{border:none!important;padding:0!important;min-width:0}
  .doc-places td::before{content:attr(data-label);display:block;font:600 10px/1.2 var(--kx-font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--doc-soft);margin-bottom:2px}
}

/* ---------- print: A4, Slate 900 on white, no screen chrome ---------- */
@media print{
  :root{color-scheme:light}
  html,body,.doc-body{background:#ffffff!important}
  .doc-screen,.doc-toolbar,.doc-callouts{display:none!important}
  .doc-view{max-width:none;margin:0;padding:0;display:block}
  .doc-paper{max-width:none;width:auto;min-height:0;margin:0;padding:0;box-shadow:none;border-radius:0;font-size:10pt;gap:6mm;color:#243243}
  .doc-paper,.doc-paper *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .doc-logo{height:9mm}
  .doc-title{font-size:16pt}
  .doc-ref{font-size:11pt}
  .doc-sub,.doc-party,.doc-sum__l,.doc-line__facts,.doc-change,.doc-line-detail{font-size:9pt}
  .doc-context,.doc-words,.doc-kv dd,.doc-line__desc{font-size:10pt}
  .doc-party__name,.doc-line__head h3,.doc-h2{font-size:11pt}
  .doc-table{font-size:9pt}
  .doc-table td.num,.doc-total .num,.doc-sizes td.num{font-size:9pt}
  .doc-total{font-size:10pt}
  .doc-total--due .num{font-size:10pt}
  .doc-table thead{display:table-header-group}
  .doc-table tr,.doc-line,.doc-total,.doc-sign,.doc-words,.doc-parties,.doc-maq{break-inside:avoid}
  .doc-head,.doc-h2{break-after:avoid}
  .doc-seam line{stroke:#243243}
  /* the legal identifiers and « Page X / Y » run in the @page margin boxes of every page (page.css); the in-flow
     copy would repeat them on the last page. Where margin boxes are unsupported, the « Émis par » block keeps them. */
  .doc-foot{margin-top:4mm;font-size:8pt}
  .doc-foot p{display:none}
  .doc-paper a{color:inherit;text-decoration:none}
  .doc-maq img{max-height:110mm}
}