/* ===========================================================================
   FEUILLE D'ÉCRAN — Santé des intégrations (INT-07)
   Écran : Components/Pages/Admin/SanteIntegrations.razor
           /admin/sante-integrations

   Une feuille par écran : chacun sa fin de fichier et sa clé de cache. Le
   gabarit fournit tout le reste — la carte (.md-card), la bande de faits
   saillants (.mx-faits / .mx-fait), le tableau de liste (.tbl-*), les badges
   d'état et le pied de méthode (.tbl-methode). Rien n'est redéfini ici.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*.
   =========================================================================== */

/* ===========================================================================
   1. LE JETON DE FAMILLE

   Webhook, connecteur, terminaux. Discret à dessein : la famille sert à
   GROUPER et à comprendre, elle ne porte aucune alerte — la peindre en
   couleur mettrait au même niveau visuel « c'est un webhook » et « il est en
   erreur », alors qu'on ouvre cet écran pour le second.
   =========================================================================== */

.sti-famille {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
    color: var(--et-faint);
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ===========================================================================
   2. LE NOMBRE QUI DEMANDE UN GESTE

   La chasse fixe des colonnes de nombres vient du GABARIT (.tbl-mono, dans
   easytime-shell.css) : une classe déjà partagée ne se recopie pas dans une
   feuille d'écran, sinon deux définitions divergent au premier ajustement.
   Cette feuille n'ajoute que ce qui lui est propre — la couleur.

   Et elle ne peint QUE ce qui demande un geste : erreurs et lot à rejouer.
   La file d'attente reste neutre. Elle se vide toute seule au prochain
   passage du worker, et l'alarmer apprendrait à ignorer la couleur — donc
   à ne plus voir les deux autres colonnes.

   Rien d'autre : la première version ajoutait ici
   « .tbl .tbl-mono { font-variant-numeric: tabular-nums } ». Ce sélecteur ne
   porte aucune marque de cet écran — il aurait donc changé TOUS les tableaux
   de l'application depuis une feuille d'écran, ce que la règle du dépôt
   interdit précisément. Et il n'apportait rien : une police à chasse fixe
   aligne déjà ses chiffres.
   =========================================================================== */

.sti-mauvais {
    color: var(--et-danger-ink);
    font-weight: 600;
}

/* ===========================================================================
   3. L'ÉTAT, ET LA PHRASE SOUS LA PASTILLE

   La pastille dit la gravité, la phrase dit quoi faire — « jeton expiré »,
   « 1 terminal muet », « 412 livraisons abandonnées ». Mettre ce texte dans
   une infobulle l'aurait rendu invisible : personne ne survole une ligne
   verte pour découvrir qu'elle est rouge, et c'est précisément la ligne qu'on
   est venu lire. Il est donc dans le flux, sous la pastille, borné en largeur
   pour ne pas étirer la colonne au détriment des nombres.
   =========================================================================== */

.sti-etat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.sti-detail {
    font-size: 12px;
    line-height: 1.35;
    color: var(--et-faint);
    max-width: 34ch;
}