/* ══════════════════════════════════════════════════════════════════
   central/tableau.css — LE tableau du dashboard, une seule fois
   ══════════════════════════════════════════════════════════════════
   Créé le 2026-09-17 (soir) en écrivant l'écran « Contrôle des tares ».

   docs/TABLEAUX.md §1 : « Ces quatre tableaux sont quatre copies du même
   dessin (`.bl-` `.fs-` `.ce-` `.cj-`). Le PROCHAIN tableau ne fait pas une
   cinquième copie : il sort les règles de la section 4 dans une feuille
   commune central/tableau.css (préfixe `.gt-`), il l'utilise, et les tableaux
   existants y migrent quand on les touche. »
   C'est ce fichier. Les valeurs sont celles de `.bl-*` (dashboard.css),
   validées à l'œil avec l'utilisateur le 2026-09-12 au soir.

   ⚠ Ce qui touche les COLONNES (ordre d'abandon en tablette, cartes en
   téléphone) reste dans la feuille de CHAQUE écran, sous son propre préfixe :
   deux tableaux n'ont pas les mêmes colonnes, et une règle `nth-child`
   partagée masque la mauvaise (#256). Ici, seulement ce qui est commun.

   ⚠ Fichier SERVI (pas un require) : route dans central/static-assets.js ET
   entrée dans package.json > build.files, sinon 404 silencieux dans l'EXE
   (#155 / #182).
   ══════════════════════════════════════════════════════════════════ */

/* Palette « cahier », reprise du journal de la Caisse. Définie ICI, jamais
   empruntée au <style> d'un autre écran — sinon les couleurs dépendraient de
   l'ouverture préalable de cet écran. */
:root               { --gt-th:#F5F2F1; --gt-hover:#F7E7DB; --gt-sep:#D8E2EE; --gt-sep2:#25374B; --gt-sep2-txt:#FFFFFF; --gt-filet:#CBD5E1; }
[data-theme="dark"] { --gt-th:#191D22; --gt-hover:#432C1E; --gt-sep:#243547; --gt-sep2:#3D5673; --gt-sep2-txt:#E5E7EB; --gt-filet:#334155; }

/* ── Barre d'outils, au-dessus du cadre ─────────────────────────── */
.gt-outils { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.gt-outils .titre { font-weight:700; font-size:13px; }
.gt-outils .d     { font-size:11.5px; color:var(--text-3); }
.gt-outils .pousse { margin-left:auto; }

/* ── Le cadre et la zone qui défile ─────────────────────────────── */
.gt-wrap   { background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.gt-wrap.busy { opacity:.45; transition:opacity 120ms 220ms; }   /* voile RETARDÉ : une réponse rapide ne montre rien */
.gt-scroll { max-height:min(84vh, calc(100vh - 110px)); min-height:300px; overflow:auto; overflow-anchor:none; scrollbar-width:thin; }

/* ── Le tableau ─────────────────────────────────────────────────── */
.gt-tbl    { width:100%; border-collapse:collapse; font-size:12.5px; table-layout:auto; }
.gt-tbl th { position:sticky; top:0; z-index:3; background:var(--gt-th); text-align:left; padding:8px 10px;
             font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2);
             border-bottom:2px solid var(--gt-filet); white-space:nowrap; }
.gt-tbl td { padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
/* Filets verticaux : sans eux, sur 8-10 colonnes, on lit un client sur une
   ligne et son tonnage sur la suivante. Scopés aux lignes, pas aux barres. */
.gt-tbl thead th + th, .gt-tbl tbody tr.gt-op td + td { border-left:1px solid var(--border); }
/* `td.gt-r`, pas `.gt-r` : une classe seule perd contre `.gt-tbl td` (#255). */
.gt-tbl th.gt-r, .gt-tbl td.gt-r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-family:Consolas,monospace; }
.gt-tbl td.gt-num  { font-family:Consolas,monospace; white-space:nowrap; }
.gt-tbl td.gt-date { font-family:Consolas,monospace; font-size:11.5px; color:var(--text-2); white-space:nowrap; }
.gt-tbl td.gt-date .gt-approx { color:var(--text-3); font-style:italic; cursor:help; }
.gt-tbl td.gt-txt  { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
.gt-tbl tr.gt-op   { cursor:pointer; }
.gt-tbl tr.gt-op:hover td { background:var(--gt-hover); }
.gt-tbl tr.gt-vide td { padding:26px; text-align:center; color:var(--text-3); }
/* Erreur : DANS le corps du tableau, avec sa raison — jamais un toast qui
   s'efface, jamais « HTTP 400 ». */
.gt-tbl tr.gt-err td { padding:22px; text-align:center; color:var(--bad); font-weight:600; }

/* ── Barres de groupe (fond LÉGER : l'aplat sombre est au pied) ──── */
.gt-tbl tr.gt-sep td { padding:0; border-bottom:0; }
.gt-sepbar { display:flex; align-items:center; gap:9px; padding:6px 10px; background:var(--gt-sep); color:var(--text);
             border-top:1px solid var(--gt-filet); border-bottom:1px solid var(--gt-filet); cursor:pointer; }
.gt-sepbar:hover { filter:brightness(.97); }
.gt-sepbar:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.gt-sepbar .gt-ch  { width:10px; font-size:11px; color:var(--text-3); }
.gt-sepbar .gt-ti  { font-weight:700; font-size:12px; }
.gt-sepbar .gt-nb  { font-size:11px; color:var(--text-3); }
.gt-sepbar .gt-tot { margin-left:auto; font-size:11.5px; font-family:Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gt-sepbar .gt-tot .k { font-family:inherit; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin:0 4px 0 10px; }

/* ── Pied collant, HORS du <table> mais dans la zone qui défile ─── */
.gt-foot { position:sticky; bottom:0; z-index:5; }
.gt-frow { display:flex; align-items:baseline; gap:16px; padding:7px 12px; background:var(--gt-sep2); color:var(--gt-sep2-txt);
           font-weight:800; font-size:12.5px; border-top:2px solid var(--gt-sep2); }
.gt-flab { text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; font-weight:700; }
.gt-fn   { margin-left:auto; font-family:Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gt-fn + .gt-fn { margin-left:0; }
/* Étiquette d'un total du pied (2026-09-19). Les totaux sont poussés à droite et
   ne se lisent donc PAS sous leur colonne : dès qu'il y en a plus de deux, « 0 0 »
   ne dit plus ce qu'il compte (vu sur Comptes clients). Même dessin que l'étiquette
   des totaux de groupe (.gt-sepbar .gt-tot .k), pour n'avoir qu'une façon de nommer
   un total dans tout le tableau. */
.gt-fn .k { font-family:inherit; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
            font-weight:700; opacity:.72; margin-right:5px; }

/* ── Téléphone : chaque ligne devient une carte ─────────────────── */
/* L'en-tête disparaît, les filets s'enlèvent, les totaux des barres passent à
   la ligne — et CHAQUE VALEUR REPREND SON LIBELLÉ : hors tableau, « 14 980 »
   et « 14 320 » l'un sous l'autre ne disent pas lequel est la tare.
   ⭐ Le libellé vient de `data-l` sur le <td>, jamais d'un `nth-child` : une
   règle par rang se trompe de colonne dès qu'un écran en a d'autres (#256),
   et c'est comme ça que le bordereau a hérité des règles des bons. */
@media (max-width:700px) {
  .gt-tbl tbody tr.gt-op td[data-l]:before {
    content:attr(data-l); display:inline-block; min-width:92px; margin-right:6px;
    font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3);
  }
  .gt-tbl tbody tr.gt-op td:empty { display:none; }
  .gt-scroll { max-height:none; }
  .gt-tbl, .gt-tbl tbody, .gt-tbl tr, .gt-tbl td { display:block; width:auto; }
  .gt-tbl thead { display:none; }
  .gt-tbl tbody tr.gt-op { padding:8px 10px; border-bottom:1px solid var(--border); }
  .gt-tbl tbody tr.gt-op td { border:0; border-left:0 !important; padding:2px 0; }
  .gt-tbl tbody tr.gt-op td.gt-r { text-align:left; }
  /* Plus de survol sur un téléphone : un texte coupé par une ellipse y est
     définitivement perdu. En carte, il passe à la ligne. */
  .gt-tbl td.gt-txt { max-width:none; white-space:normal; overflow:visible; text-overflow:clip; }
  .gt-sepbar { flex-wrap:wrap; }
  .gt-sepbar .gt-tot { margin-left:0; flex-basis:100%; }
  .gt-frow { flex-wrap:wrap; gap:8px 14px; }
  .gt-fn { margin-left:0; }
}

/* ── Impression : encre noire sur fond blanc ────────────────────── */
/* Un bandeau inversé s'imprime blanc sur blanc — les navigateurs suppriment
   les fonds (#206). */
@media print {
  .gt-scroll { max-height:none; overflow:visible; }
  .gt-tbl th, .gt-sepbar, .gt-frow { background:#fff !important; color:#000 !important; }
  .gt-sepbar { border-top:1px solid #000; border-bottom:1px solid #000; }
  .gt-frow { border-top:2px solid #000; }
  .gt-wrap { border:1px solid #000; }
}