/* ═══════════════════════════════════════════════════════════════════════════
   studio-list.css — LE VOCABULAIRE COMMUN DES LISTES (29/07/2026)
   ═══════════════════════════════════════════════════════════════════════════

   POURQUOI CE FICHIER EXISTE (question d'Henri : « pourquoi tu n'arrives pas à
   coder de manière esthétique et homogène ? ») :
   `js/studio-table.js` partageait déjà la QUINCAILLERIE (boutons de toolbar,
   popovers, redimensionnement) — mais `tasks/table-list-standard.md` impose un
   nommage PAR MODULE (`{prefix}-table`). Résultat : `treso-table`, `fact-table`
   et `prj-table` ont chacune leur CSS, donc chacune leur dérive. C'est ainsi que
   la cellule Catégorie est devenue un <select> natif d'un côté et une cellule
   sobre de l'autre (défaut relevé par Henri le 29/07).

   Ce fichier tient LE GRAIN commun : densité, absence de filets, survol, discipline
   de troncature, et le vocabulaire de cellule (pastille, mot d'état, montant).
   Les LARGEURS de colonnes restent propres à chaque module (elles dépendent des
   données), tout le reste vit ICI. Une correction ici tombe dans les trois modules.

   Référence : captures de l'app iPhone Linear (Henri, 29/07) + charte 91STUDIO
   (`ui-91studio`) + Apple HIG. Grain Linear : une ligne = une identité + un
   chiffre ; AUCUN filet entre les lignes, la séparation se fait par le rythme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Le grain : pas de filets entre les lignes (Linear), densité constante ──
   Appliqué aux LISTES seulement. La matrice Facturation (18 colonnes de mois)
   garde ses filets : sans eux, on perd la ligne du regard sur 1 100 px. */
.treso-tx-scroll > table.treso-table > tbody > tr > td,
#prjContent .prj-table > tbody > tr > td {
  border-bottom: 0;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Le survol remplace le filet : c'est lui qui matérialise la ligne. */
.treso-tx-scroll > table.treso-table > tbody > tr:hover > td,
#prjContent .prj-table > tbody > tr:hover > td {
  background: var(--bg-hover, rgba(0, 0, 0, 0.025));
}

/* En-têtes : un seul filet, celui qui sépare l'en-tête du corps. */
.treso-tx-scroll > table.treso-table > thead > tr > th,
#prjContent .prj-table > thead > tr > th {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  height: 34px;
}

/* ── 2. Discipline de troncature : une ligne, jamais de retour à la ligne ──
   Les colonnes de CHIFFRES ne s'élident jamais (mesuré le 29/07 : une règle
   d'ellipsis globale coupait les dates « 28/07/2... » et les montants). */
.treso-tx-scroll > table.treso-table td,
#prjContent .prj-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 3. Vocabulaire de cellule — LES MÊMES CLASSES DANS TOUS LES MODULES ──
   À utiliser à la place de tout composant local réinventé. */

/* 3a. Identité : pastille de couleur + libellé (catégorie, état, famille…) */
.sl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  flex: none;
}
.sl-dot.is-empty {
  background: transparent;
  border: 1px dashed var(--border-color);
}

/* 3b. État : UN MOT COLORÉ (doctrine « la marge est un mot »), jamais une
   pastille pleine ni un fond saturé. */
.sl-word { font-size: 12px; font-weight: 500; }
.sl-word.ok { color: var(--color-success); }
.sl-word.warn { color: var(--color-warning); }
.sl-word.bad { color: var(--color-danger); }
.sl-word.mute { color: var(--text-tertiary); }

/* 3c. Chiffres : tabulaires et alignés à droite, toujours entiers. */
.sl-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  overflow: visible;
}

/* 3d. Second plan : ce qui n'est pas l'information principale de la ligne. */
.sl-meta { font-size: 12px; color: var(--text-tertiary); }

/* ── 4. Aucun débordement horizontal sur une LISTE ──
   (la matrice Facturation est exclue : elle défile horizontalement par nature) */
.treso-tx-scroll,
#prjContent .prj-table-wrap { overflow-x: hidden; }


/* ═══════════════════════════════════════════════════════════════════════════
   LA TABLE GÉNÉRALE `.studio-list` (composant js/studio-list.js)
   Une seule table pour tous les modules ; les spécificités passent par la
   SPÉCIFICATION de colonnes, pas par un CSS parallèle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* BASE = le GRAIN seul (typographie, densité, en-tête, survol, filets).
   Aucune règle de mise en page ici : une table de récapitulatif, un export ou une
   matrice ne doivent pas voir leur largeur changer parce qu'elles adoptent le grain.
   La mise en page appartient aux VARIANTES, appliquées après mesure de l'écran. */
.studio-list { border-collapse: collapse; }

/* Variante LISTE : tout tient dans la largeur, le libellé absorbe le reste. */
.studio-list--list { width: 100%; min-width: 0; table-layout: fixed; }
.studio-list--list th,
.studio-list--list td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Variante MATRICE (Facturation : 12 mois) : défilement horizontal assumé,
   filets conservés — sans eux on perd la ligne du regard sur 1 100 px. */
.studio-list--matrix { width: 100%; table-layout: auto; }

/* Grain commun : en-tête discret, rangées de 40 px, aucun filet entre les
   lignes (Linear) — la séparation se fait par le rythme et le survol. */
/* 🪤 MESURÉ le 29/07 : sans `!important`, les feuilles de module (chargées APRÈS
   et souvent préfixées d'un id comme `#page-content`) reprenaient la main — RH
   était conforme, Facturation restait en 38/11/600 et Trésorerie en 10,5. Le grain
   d'un composant partagé DOIT gagner : c'est sa raison d'être. Les modules gardent
   la main sur ce qui leur appartient (largeurs, couleurs métier, colonnes). */
.studio-list > thead > tr > th {
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  text-align: left;
  border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 30;
}
/* CIBLE TACTILE (91S-222, 21/08/2026). Sur un pointeur grossier, la cellule qui porte un
   controle de tri passe a 44 px. Pourquoi ici et pas sur le composant : le `th` est en
   `overflow: hidden`, donc la zone tapable d'un controle ne peut pas depasser sa cellule -
   mesuree a 35 px tant que la cellule faisait 34, la ou la checklist HIG du CLAUDE.md
   exige 44 sur tout element interactif. `!important` pour la raison ecrite au-dessus, et
   `:has()` pour ne toucher QUE les colonnes reellement triables. L'ordinateur ne bouge pas
   d'un pixel : toute la regle vit sous `hover: none`. */
@media (hover: none) {
  .studio-list > thead > tr > th:has(> .studio-sortcol) { height: 44px !important; }
}

.studio-list > tbody > tr > td {
  height: 40px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  color: var(--text-primary);
  /* Anti-chevauchement : une cellule ne déborde JAMAIS sur sa voisine (capture
     Henri : l'e-mail passait sous la colonne Type dans Candidatures).
     🪤 REMÈDE PIRE QUE LE MAL (mesuré le 04/08, demande Henri « je veux toujours
     TOUT voir ») : ce rôle était tenu par `max-width: 0`, qui écrase les colonnes
     au minimum et cache la donnée derrière une ellipsis — 58/150 cellules coupées
     dans Candidatures (une colonne à 0 px), 83/341 en RH, « Admin 91STUDIO » réduit
     à 57 px pour 158 px nécessaires dans Accès Clients. La contrainte de largeur
     vient désormais de la GRILLE (table-layout fixe + largeurs de colonnes
     réparties, cf. studio-list.js), pas d'un écrasement de cellule. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Chiffres, dates et actions : jamais élidés, ils doivent rester entiers. */
.studio-list > tbody > tr > td.sl-num,
.studio-list > tbody > tr > td:last-child { overflow: visible; }

/* ── Redimensionnement PAR COLONNE (demande Henri 04/08 : « changer la largeur
   d'une colonne SANS changer la largeur des autres »). Poignée de 8 px au bord
   droit de chaque en-tête ; `table-layout: fixed` garantit que les voisines ne
   bougent pas. Largeurs mémorisées par table et par utilisateur (localStorage).
   Le grain reste sobre : la poignée ne se voit qu'au survol (registre, pas chrome). */
   Aucun élément n'est injecté dans le DOM : la zone de saisie est le bord droit de
   l'en-tête, détecté par délégation (studio-list.js) — donc les en-têtes SUR MESURE
   des modules (col.header) en profitent aussi, sans les modifier. */
.studio-list > thead > tr > th { position: relative; }
.studio-list > thead > tr > th.sl-col-edge { cursor: col-resize; }
.studio-list > thead > tr > th.sl-col-edge::after {
  content: ''; position: absolute; top: 6px; bottom: 6px; right: 0; width: 1px;
  background: var(--text-tertiary, rgba(0, 0, 0, 0.35));
}
/* Pendant le glissé : filet d'accent sur la colonne saisie, sélection gelée. */
body.sl-resizing, body.sl-resizing * { cursor: col-resize !important; user-select: none !important; }
/* Le conteneur d'une table redimensionnée doit DÉFILER : sans lui, le navigateur
   replafonne la table à sa largeur et redistribue les colonnes (mesuré le 04/08 :
   324 px demandés, 203,8 px obtenus) — élargir une colonne rétrécirait ses voisines. */
.sl-scroll-x { overflow-x: auto; }
.studio-list > thead > tr > th.sl-col-dragging::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: var(--blue-500);
}
.studio-list--list > tbody > tr > td { border-bottom: 0; }
.studio-list--matrix > tbody > tr > td { border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06)); }
.studio-list > tbody > tr:hover > td { background: var(--bg-hover, rgba(0, 0, 0, 0.025)); }

/* Colonnes de chiffres : tabulaires, à droite, JAMAIS élidées (mesuré 29/07 :
   une ellipsis globale coupait les dates et les montants). */
.studio-list .sl-num { font-variant-numeric: tabular-nums; text-align: right; overflow: visible; }
.studio-list .sl-name { vertical-align: middle; }
.studio-list .sl-name.is-empty { color: var(--text-tertiary); }
.studio-list .sl-empty { text-align: center; color: var(--text-tertiary); padding: 32px 12px; }

/* Colonnes qui tombent : `drop: <px>` dans la spécification devient une classe
   `sl-drop-<px>-<n>` portée par la table. Une règle par palier, pas par module. */
@media (max-width: 1280px) {
  .sl-drop-1280-1 th:nth-child(1), .sl-drop-1280-1 td:nth-child(1),
  .sl-drop-1280-2 th:nth-child(2), .sl-drop-1280-2 td:nth-child(2),
  .sl-drop-1280-3 th:nth-child(3), .sl-drop-1280-3 td:nth-child(3),
  .sl-drop-1280-4 th:nth-child(4), .sl-drop-1280-4 td:nth-child(4),
  .sl-drop-1280-5 th:nth-child(5), .sl-drop-1280-5 td:nth-child(5),
  .sl-drop-1280-6 th:nth-child(6), .sl-drop-1280-6 td:nth-child(6),
  .sl-drop-1280-7 th:nth-child(7), .sl-drop-1280-7 td:nth-child(7),
  .sl-drop-1280-8 th:nth-child(8), .sl-drop-1280-8 td:nth-child(8),
  .sl-drop-1280-9 th:nth-child(9), .sl-drop-1280-9 td:nth-child(9),
  .sl-drop-1280-10 th:nth-child(10), .sl-drop-1280-10 td:nth-child(10) { display: none; }
}
@media (max-width: 1080px) {
  .sl-drop-1080-1 th:nth-child(1), .sl-drop-1080-1 td:nth-child(1),
  .sl-drop-1080-2 th:nth-child(2), .sl-drop-1080-2 td:nth-child(2),
  .sl-drop-1080-3 th:nth-child(3), .sl-drop-1080-3 td:nth-child(3),
  .sl-drop-1080-4 th:nth-child(4), .sl-drop-1080-4 td:nth-child(4),
  .sl-drop-1080-5 th:nth-child(5), .sl-drop-1080-5 td:nth-child(5),
  .sl-drop-1080-6 th:nth-child(6), .sl-drop-1080-6 td:nth-child(6),
  .sl-drop-1080-7 th:nth-child(7), .sl-drop-1080-7 td:nth-child(7),
  .sl-drop-1080-8 th:nth-child(8), .sl-drop-1080-8 td:nth-child(8),
  .sl-drop-1080-9 th:nth-child(9), .sl-drop-1080-9 td:nth-child(9),
  .sl-drop-1080-10 th:nth-child(10), .sl-drop-1080-10 td:nth-child(10) { display: none; }
}
@media (max-width: 860px) {
  .sl-drop-860-1 th:nth-child(1), .sl-drop-860-1 td:nth-child(1),
  .sl-drop-860-2 th:nth-child(2), .sl-drop-860-2 td:nth-child(2),
  .sl-drop-860-3 th:nth-child(3), .sl-drop-860-3 td:nth-child(3),
  .sl-drop-860-4 th:nth-child(4), .sl-drop-860-4 td:nth-child(4),
  .sl-drop-860-5 th:nth-child(5), .sl-drop-860-5 td:nth-child(5),
  .sl-drop-860-6 th:nth-child(6), .sl-drop-860-6 td:nth-child(6),
  .sl-drop-860-7 th:nth-child(7), .sl-drop-860-7 td:nth-child(7),
  .sl-drop-860-8 th:nth-child(8), .sl-drop-860-8 td:nth-child(8),
  .sl-drop-860-9 th:nth-child(9), .sl-drop-860-9 td:nth-child(9),
  .sl-drop-860-10 th:nth-child(10), .sl-drop-860-10 td:nth-child(10) { display: none; }
}

/* ── Écrans calibrés (audit des 18 modules, 29/07) ──
   Deux écarts mesurés après la passe : Candidatures débordait de son cadre
   (10 colonnes, table 1 111 px dans 1 095 — d'où les textes qui se chevauchaient
   sur la capture d'Henri) et Facturation gardait un en-tête à 11 px.
   Règle appliquée ici, pas dans les modules : c'est la table générale qui décide. */
#page-content table.cand-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  /* 🪤 MESURÉ : `border-collapse: separate` ajoutait la bordure de CHAQUE colonne
     à la largeur totale — 22 px de débordement sur 10 colonnes, invisible à l'œil
     mais suffisant pour décaler les cellules. */
  border-collapse: collapse;
}
#page-content table.cand-table th:nth-child(1) { width: 15%; }   /* Nom */
#page-content table.cand-table th:nth-child(2) { width: 19%; }   /* Email */
#page-content table.cand-table th:nth-child(3) { width: 8%; }    /* Type */
#page-content table.cand-table th:nth-child(4) { width: 13%; }   /* Dates de stage */
#page-content table.cand-table th:nth-child(5) { width: 13%; }   /* Formation */
#page-content table.cand-table th:nth-child(6) { width: 8%; }    /* Niveau */
#page-content table.cand-table th:nth-child(7) { width: 8%; }    /* Docs */
#page-content table.cand-table th:nth-child(8) { width: 8%; }    /* Statut */
#page-content table.cand-table th:nth-child(9) { width: 8%; }    /* Date */
/* Fenêtre resserrée : Formation puis Dates cèdent — jamais le nom ni le statut. */
@media (max-width: 1280px) {
  #page-content table.cand-table th:nth-child(5),
  #page-content table.cand-table td:nth-child(5) { display: none; }
}
@media (max-width: 1080px) {
  #page-content table.cand-table th:nth-child(4),
  #page-content table.cand-table td:nth-child(4) { display: none; }
}
/* Facturation : l'en-tête rejoint l'échelle commune (11 px → 11,5 px). */
#page-content table.fact-table > thead > tr > th { font-size: 11.5px !important; }

/* 🪤 MESURÉ (29/07, 22 px de débordement sur Candidatures) : la 10e colonne
   (Actions) n'avait PAS de largeur déclarée — les neuf premières totalisaient
   100 %, et Actions s'ajoutait par-dessus. Dans une table à largeur fixe, TOUTES
   les colonnes doivent être déclarées, et la somme doit faire 100. */
#page-content table.cand-table th:nth-child(1) { width: 14%; }
#page-content table.cand-table th:nth-child(2) { width: 17%; }
#page-content table.cand-table th:nth-child(3) { width: 7%; }
#page-content table.cand-table th:nth-child(4) { width: 12%; }
#page-content table.cand-table th:nth-child(5) { width: 12%; }
#page-content table.cand-table th:nth-child(6) { width: 7%; }
#page-content table.cand-table th:nth-child(7) { width: 8%; }
#page-content table.cand-table th:nth-child(8) { width: 8%; }
#page-content table.cand-table th:nth-child(9) { width: 7%; }
#page-content table.cand-table th:nth-child(10) { width: 8%; }