/* ===========================================================================
   ÉCRAN NOTIFICATIONS (.ntf-*) — port de la passation « design_handoff_
   notifications » (Projet EasyTime, Design 30).

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css. La passation demandait
   une concaténation ; c'est exactement ce que la charte a cessé de faire —
   chaque branche y entrait en conflit avec toutes les autres sur la dernière
   ligne du gabarit et sur sa clé de cache, jamais sur la substance.

   CE QUI N'EST PAS ICI, ET POURQUOI
     · Le PIED DE TABLE (`pied-tableau.css` de la passation, famille `.lp-*`)
       n'est pas porté : `.tbl-pied` existe déjà dans easytime-shell.css, plage,
       densité et pagination comprises. La feuille de la passation le redéclarait
       en dur — elle aurait écrasé le pied de TOUS les écrans, puisqu'une feuille
       d'écran se charge après les gabarits.
     · L'INTERRUPTEUR d'activation est `.mx-switch`, section 11 de modele-erp.css.
       La passation en écrivait un troisième exemplaire (`.ntf-toggle`) ; c'est le
       même objet, et le gabarit vient précisément de fusionner les deux copies
       qui avaient divergé.

   AUCUNE COULEUR EN DUR : tout passe par les jetons `--et-*`, sans quoi l'écran
   ne suivrait pas le thème sombre.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. BASCULE DE MASSE

   Une table de types × 6 canaux : les cases ne se cochent pas une par une.
   La bascule porte sur le PÉRIMÈTRE FILTRÉ et non sur la page affichée —
   cocher un canal ne doit pas dépendre de l'endroit où l'on se trouve dans la
   liste. Sa bande est donc posée entre la barre d'outils (qui règle le
   périmètre) et la table (qui n'en montre qu'une page).
   --------------------------------------------------------------------------- */
.ntf-masse {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; row-gap: 8px;
    padding: 10px 18px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}
.ntf-masse .lbl {
    margin-right: 4px;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--et-faint);
}
.ntf-masse-btn {
    height: 24px; padding: 0 8px;
    background: var(--et-surface);
    border: 1px solid var(--et-form-border);
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    color: var(--et-ink);
    cursor: pointer; white-space: nowrap;
}
.ntf-masse-btn:hover:not(:disabled) { border-color: var(--et-form-blue); }
.ntf-masse-btn:disabled { cursor: not-allowed; color: var(--et-inerte); }
.ntf-masse-btn.est-actif {
    background: var(--et-tint); border-color: var(--et-form-blue-l);
    color: var(--et-form-blue-d);
}
/* Un canal FACTURÉ se signale en ambre : cocher la colonne d'un coup y a un
   coût par message et par salarié. Le signal est le même à l'en-tête. */
.ntf-masse-btn.est-facture { color: var(--et-avertissement-ink); }

/* ---------------------------------------------------------------------------
   2. LA TABLE

   UNE SEULE table, la catégorie en COLONNE : les cartes par catégorie
   empêchaient de comparer deux types sur les mêmes colonnes de canal.
   --------------------------------------------------------------------------- */
.ntf-defile { overflow-x: auto; }
.ntf-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.ntf-table thead th {
    padding: 8px 12px; text-align: left;
    background: var(--et-table-head);
    border-bottom: 1px solid var(--et-table-head-fonce);
    font-family: var(--et-font-mono);
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--et-sur-ardoise);
    white-space: nowrap; user-select: none;
}
.ntf-table thead th.est-triable { cursor: pointer; }
/* Les en-têtes de canal ne trient pas : pas de fausse affordance. */
.ntf-table thead th.centre { text-align: center; padding: 8px; }
.ntf-table thead th.est-facture { color: var(--et-avertissement-bord); }
/* NON DESSERVI : la colonne existe en base, aucun émetteur ne la lit. Elle s'éteint
   sans disparaître — la case reste enregistrable, et l'infobulle comme la légende
   disent pourquoi elle n'envoie rien aujourd'hui. */
.ntf-table thead th.est-nondesservi { color: var(--et-inerte); }
.ntf-table thead th .fleche { margin-left: 4px; color: var(--et-form-blue-l); }

.ntf-table tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--et-rang);
    white-space: nowrap; color: var(--et-ink);
}
.ntf-table tbody td.centre { text-align: center; padding: 7px 8px; }
.ntf-table tbody tr:hover { background: var(--et-rang); }

/* Une ligne désactivée s'éteint sans disparaître : c'est un réglage, pas une
   absence — et ses cases restent lisibles pour dire ce qui repartirait si on
   la réactivait. */
.ntf-table tbody tr.est-inactif { background: var(--et-surface-3); }
.ntf-table tbody tr.est-inactif .nom { color: var(--et-faint); font-weight: 500; }
.ntf-table tbody tr.est-inactif .ntf-cat .txt { color: var(--et-inerte); }

/* L'interrupteur du gabarit dans une cellule centrée : il s'y pose en ligne,
   et sans le libellé qu'il porte en formulaire. */
.ntf-table .mx-switch { display: inline-flex; }

/* --- La catégorie et son filet ------------------------------------------- */
.ntf-cat { padding-left: 14px !important; }
.ntf-cat .filet { display: inline-block; width: 3px; height: 13px; vertical-align: -2px; margin-right: 7px; }
.ntf-cat .txt { font-size: 12px; color: var(--et-muted); }

/* --- Le destinataire -----------------------------------------------------
   `Recipient` existait dans le catalogue et rien ne l'exploitait. Il est en
   colonne et en facette : « qui reçoit » est la première question qu'on pose
   devant une liste de types. */
.ntf-dest {
    display: inline-flex; align-items: center;
    padding: 1px 7px;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
}
.ntf-dest.est-emp { background: var(--et-info-bg); color: var(--et-form-blue-d); }
.ntf-dest.est-mgr { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.ntf-dest.est-rh  { background: var(--et-succes-bg); color: var(--et-ok); }
.ntf-dest.est-adm { background: var(--et-neutre-bg); color: var(--et-table-head-encre); }

/* --- Le type : nom, code, mention « réglé », seuil ------------------------ */
.ntf-type { white-space: normal; border-right: 1px solid var(--et-rang); }
.ntf-type .nom { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.ntf-type .code { margin-left: 9px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-inerte); }
/* Un type sans ligne en base prend les défauts du produit : le dire évite de
   croire que tous ont été arbitrés. */
.ntf-type .regle { margin-left: 9px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-form-blue-d); }
/* `Param` est un `int?` sans unité : « 15 » ne dit pas quinze quoi. */
.ntf-type .seuil {
    margin-left: 9px; padding: 1px 6px;
    background: var(--et-surface-2);
    font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
}

/* ---------------------------------------------------------------------------
   3. LA CASE DE CANAL

   Un type désactivé GARDE ses canaux cochés en base : la case reste cochée et
   se grise, ce qui dit qu'elle est mémorisée mais sans effet — plutôt que de
   la vider et laisser croire à une décision qui n'a pas été prise.
   --------------------------------------------------------------------------- */
/* La case est .mx-case (modele-erp.css). Deux écarts seulement, et le second était
   un DÉFAUT : elle se pose dans une cellule centrée par text-align, donc en
   inline-grid — `display: grid` en ferait un bloc que text-align ne centre plus —
   et sa marque était écrite `color: var(--et-surface)`, c'est-à-dire « blanc » vu
   depuis le thème clair seulement. En sombre, --et-surface vaut #111A2B : la coche
   partait en encre foncée sur le bleu. Le gabarit dit --et-sur-aplat, qui est le
   blanc des aplats de couleur et ne bascule pas. */
.ntf-case { display: inline-grid; vertical-align: middle; }
.ntf-case.est-inerte { cursor: not-allowed; border-color: var(--et-hairline); background: var(--et-surface-3); }
.ntf-case.est-inerte.est-cochee { background: var(--et-repos-bord); border-color: var(--et-repos-bord); }

/* Décompte du périmètre dans la barre d'outils — un rapport de nombres, donc
   en chasse fixe, comme tous les décomptes de la charte. */
.ntf-compte {
    margin-left: auto;
    font-family: var(--et-font-mono); font-size: 12px;
    font-variant-numeric: tabular-nums; color: var(--et-faint);
}