/* ===========================================================================
   FEUILLE D'ÉCRAN — État du système (INT-03 / INT-04, puis SEC-03 / SEC-04)
   Écran : Components/Pages/Admin/EtatSysteme.razor — /admin/etat-systeme

   POURQUOI CE FICHIER EXISTE, ET PAS UN BLOC DE PLUS DANS modele-erp.css
   Les styles d'écran s'y empilaient tous en fin de fichier, et deux branches
   ouvertes le même jour s'y télescopaient — non sur le fond, qui ne se
   recouvre jamais, mais sur la dernière ligne du fichier et sur la clé de
   cache. Une feuille par écran donne à chacun sa fin de fichier et sa clé.

   CE QUI RESTE DANS LE GABARIT : tout ce qui sert à DEUX écrans ou plus. Les
   badges d'état, la barre du tableau, le pied de méthode et .md-card viennent
   de là et ne sont pas redéfinis ici. Une classe promue au gabarit ne
   redescend pas.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*, y compris les
   variantes sombres qu'ils portent déjà (easytech-theme.css).

   Chargée APRÈS modele-erp.css : ses règles peuvent affiner le gabarit à
   spécificité égale, l'inverse n'est pas vrai.
   =========================================================================== */

/* ===========================================================================
   1. LA BANDE DE FAITS SAILLANTS

   Cinq mesures, dans l'ordre où on les regarde quand quelque chose ne va pas.
   Une grille AUTO-AJUSTÉE plutôt que cinq colonnes fixes : à 1280 px les cinq
   tiennent sur une rangée, à 768 px elles passent à trois puis à deux, sans
   qu'aucun palier n'ait à le dire. Le minimum de 190 px est la largeur en
   dessous de laquelle « Dernier pointage reçu » se coupe en trois lignes.

   Elle n'emprunte pas .mx-faits (bande de fiche) : celle-ci n'est pas dans une
   page-objet, elle n'a pas de fiche derrière elle, et la faire dépendre du
   gabarit de fiche lierait deux choses qui n'évoluent pas ensemble.
   =========================================================================== */

.ets-faits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;                          /* le filet EST l'espace : charte à surfaces plates */
    background: var(--et-hairline);
    border: 1px solid var(--et-hairline);
}

.ets-fait {
    background: var(--et-surface);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ets-fait-libelle {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--et-muted);
}

.ets-fait-valeur {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--et-ink);
}

.ets-fait-note {
    font-size: 12px;
    color: var(--et-muted);
    min-height: 1.2em;                 /* une tuile sans note ne raccourcit pas la rangée */
}

/* L'ALERTE SE MARQUE PAR UN LISERÉ, PAS PAR UN FOND TEINTÉ. Cinq tuiles dont
   trois en orange vif se lisent comme un incident généralisé ; le liseré dit la
   même chose sans crier, et laisse la valeur — le chiffre — rester le premier
   élément lu. */
.ets-fait-alerte {
    box-shadow: inset 3px 0 0 0 var(--et-avertissement);
}

.ets-fait-alerte .ets-fait-note { color: var(--et-avertissement-ink); }

/* ===========================================================================
   2. LES SECTIONS DE LA BANDE PLATEFORME
   =========================================================================== */

.ets-section-tete {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
}

.ets-section-titre {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--et-ink);
}

.ets-section-note {
    font-size: 12px;
    color: var(--et-muted);
}

.ets-vide {
    padding: 16px 14px;
    font-size: 13px;
    color: var(--et-muted);
}

/* ===========================================================================
   3. LE BLOC DÉFINITIONS (version du binaire)

   Étiquette / valeur en deux colonnes, la première à 158 px et alignée à
   droite : c'est la règle de la grille dense du gabarit (passation-design-7),
   reprise ici pour que ce bloc se lise comme une fiche et non comme un
   tableau. Il n'utilise pas ChampFiche, qui sert à SAISIR — ici on ne saisit
   rien, et le composant apporterait ses lignes d'aide et ses compteurs.
   =========================================================================== */

.ets-defs {
    display: grid;
    grid-template-columns: 158px 1fr;
    gap: 0;
    margin: 0;
    padding: 10px 14px;
}

.ets-defs > dt {
    text-align: right;
    padding: 5px 12px 5px 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--et-muted);
}

.ets-defs > dd {
    margin: 0;
    padding: 5px 0;
    font-size: 13px;
    color: var(--et-ink);
    min-width: 0;
    word-break: break-word;
}

/* ===========================================================================
   4. LE JOURNAL DES MIGRATIONS

   Tableau écrit à la main, parce que ses colonnes ne sont connues qu'à
   l'exécution : elles varient d'une base à l'autre selon l'âge du journal
   (voir l'en-tête de MigrationsController). Il ne peut donc pas passer par
   Tableau<T>, qui les veut à la compilation.

   IL DÉFILE, IL NE CACHE PAS (docs/tables-larges.md) : sur un journal, la
   colonne qu'on vient lire est justement celle qu'on n'attendait pas — décider
   à sa place laquelle est secondaire ferait manquer la seule utile. La
   première colonne est figée, comme les treize tables larges du produit.
   =========================================================================== */

.ets-journal-cadre {
    overflow-x: auto;
    /* La hauteur borne le défilement vertical : 144 scripts aujourd'hui, et
       la page entière ne doit pas devenir un journal de migrations. */
    max-height: 60vh;
    overflow-y: auto;
}

.ets-journal {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: var(--et-font-mono);
    white-space: nowrap;
}

.ets-journal th,
.ets-journal td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--et-hairline);
    text-align: left;
}

.ets-journal thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--et-surface-2);
    color: var(--et-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-family: inherit;
}

.ets-journal tbody td { color: var(--et-ink); }

/* COLONNE D'ANCRE FIGÉE — le numéro du script reste visible pendant le
   défilement horizontal, sans quoi on lit une empreinte SHA-256 sans savoir
   de quel script elle est. Le fond est opaque : transparent, les colonnes
   défilantes passeraient dessous. */
.ets-journal th:first-child,
.ets-journal td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--et-surface);
    box-shadow: 1px 0 0 0 var(--et-hairline);
}

.ets-journal thead th:first-child {
    z-index: 3;                        /* au croisement des deux figements */
    background: var(--et-surface-2);
}

/* ===========================================================================
   5. LA COLONNE « DERNIÈRE ERREUR »

   Un message d'exception tient rarement sur une ligne, et l'élargir pousserait
   les quatre autres colonnes hors de l'écran. On le borne et on le coupe : le
   texte entier reste disponible à la sélection, et l'état — la colonne d'à
   côté — suffit à décider s'il faut aller le lire.
   =========================================================================== */

.ets-erreur {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 42ch;
    font-size: 12px;
    color: var(--et-danger-ink);
    word-break: break-word;
}

/* ===========================================================================
   6. LES TROUSSEAUX DE CLÉS (SEC-03)

   DEUX BLOCS DANS UNE CARTE, séparés par un filet — l'API et le back-office
   ont chacun leur trousseau, et les lire côte à côte est tout l'intérêt de la
   section. Deux cartes distinctes les éloigneraient l'un de l'autre, alors
   qu'on les compare : même dossier configuré ? même échéance ?

   Aucune couleur en dur : les états passent par les jetons Bootstrap déjà
   employés par le tableau des tâches, et les filets par --et-ligne.
   =========================================================================== */

.ets-trousseau {
    border-top: 1px solid var(--et-hairline);
    padding-top: 4px;
}

/* Le premier bloc suit directement l'en-tête de section, qui porte déjà son
   filet : un second ferait un double trait. */
.ets-trousseau:first-of-type {
    border-top: 0;
}

.ets-trousseau-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px 0 14px;
}

.ets-trousseau-nom {
    font-size: 13px;
    font-weight: 600;
    color: var(--et-ink);
}

.ets-trousseau-alerte {
    margin: 8px 14px 0 14px;
}

.ets-trousseau-consequence {
    margin-top: 4px;
    font-size: 12px;
    /* Hérite de la couleur de l'alerte : la conséquence appartient au message,
       la détacher en gris la ferait lire comme une note facultative. */
    opacity: .85;
}

.ets-trousseau-note {
    font-size: 12px;
    color: var(--et-muted);
}

/* Tableau des clés : colonnes CONNUES à la compilation, contrairement au
   journal des migrations — il n'a donc ni colonne figée ni hauteur bornée.
   Un trousseau compte une à trois clés ; borner sa hauteur n'aurait servi
   qu'à faire douter qu'il y en ait d'autres. Il défile en largeur, pour la
   même raison que partout ailleurs (docs/tables-larges.md). */
.ets-cles-cadre {
    overflow-x: auto;
    padding: 0 14px 12px 14px;
}

.ets-cles {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ets-cles th,
.ets-cles td {
    padding: 5px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--et-hairline);
}

.ets-cles thead th {
    font-weight: 600;
    color: var(--et-muted);
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}

.ets-cles tbody tr:last-child td {
    border-bottom: 0;
}

/* ===========================================================================
   7. PALIERS

   Recette à 390 / 768 / 1280 / 1600 px (docs/conventions-responsive.md), et
   paliers pris dans l'échelle retenue — 1024 pour la règle tactile, 720 et 560
   pour la géométrie. Pas de palier à 980 px : rien à y porter.
   =========================================================================== */

/* Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible ne
   descend sous 44 px — et une cible ne rétrécit jamais. Cet écran n'a qu'un
   bouton, celui de la barre d'outils ; le tableau des tâches est servi par le
   gabarit de liste, qui porte déjà la règle. */
@media (max-width: 1024px) {
    .ecran-tete .mx-outils .mx-btn { min-height: 44px; }
}

/* La colonne d'étiquettes de la fiche « binaire déployé » se replie : à cette
   largeur, 158 px de libellé ne laissent pas de quoi lire un nom de machine. */
@media (max-width: 720px) {
    .ets-defs { grid-template-columns: 1fr; }
    .ets-defs > dt { text-align: left; padding: 6px 0 0 0; }
    .ets-defs > dd { padding: 0 0 6px 0; }
}

/* Sur un téléphone, l'erreur n'est plus bornée en largeur — il n'y a plus de
   colonnes à préserver — mais reste bornée en hauteur. */
@media (max-width: 560px) {
    .ets-erreur { max-width: none; }
    .ets-fait { padding: 10px 12px; }
    .ets-fait-valeur { font-size: 18px; }

    /* Les marges latérales rendues au contenu : un chemin de disque et un
       identifiant de clé sont longs, et douze pixels de chaque côté valent
       mieux ici qu'un alignement avec le reste de la carte. */
    .ets-trousseau-tete,
    .ets-cles-cadre { padding-left: 12px; padding-right: 12px; }
    .ets-trousseau-alerte { margin-left: 12px; margin-right: 12px; }
}