/* ===========================================================================
   FEUILLE D'ÉCRAN — Journal d'audit (SEC-01)
   Écran : Components/Pages/Admin/JournalAudit.razor — /admin/audit

   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 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 BARRE DE FILTRES

   Une grille qui se remplit, plutôt que des colonnes fixes : les six filtres
   n'ont pas la même largeur utile — deux dates courtes, deux textes longs, un
   verbe, un résultat — et un gabarit à colonnes égales aurait donné un champ
   de date aussi large qu'un chemin d'API.
   =========================================================================== */

.aud-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px;
}

.aud-filtres > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    min-width: 0;                 /* sans quoi un champ long pousse la rangée hors de la carte */
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--et-muted);
}

/* Les deux textes libres méritent le double : on y saisit « /api/utilisateurs »,
   pas trois caractères. */
.aud-filtres > label:nth-child(3),
.aud-filtres > label:nth-child(5) { flex: 2 1 220px; }

.aud-filtres-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    /* Alignés sur la ligne des champs, non sur celle de leurs étiquettes. */
    padding-bottom: 1px;
}

/* ===========================================================================
   2. LES CELLULES

   Le journal se lit en balayant une colonne à la fois — « quand », puis
   « qui » —, jamais ligne à ligne. D'où deux informations empilées par
   cellule quand elles vont ensemble (la date et l'heure, l'auteur et son
   rôle) : la seconde est plus faible, et ne gêne pas le balayage de la
   première.
   =========================================================================== */

.aud-quand,
.aud-auteur {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.aud-date   { font-weight: 500; color: var(--et-ink); white-space: nowrap; }
.aud-heure  { font-size: 12px; color: var(--et-muted); font-family: var(--et-font-mono); }
.aud-role   { font-size: 12px; color: var(--et-muted); }

/* « AU NOM DE QUI » (USR-07). Troisième ligne de la cellule de l'auteur, jamais une colonne :
   elle n'apparaît que sur les lignes issues d'une délégation, c'est-à-dire très peu.
   DISTINCTE DU RÔLE SANS ÊTRE UNE ALERTE : la délégation est un fonctionnement normal, pas un
   incident. Même graisse que le rôle, la couleur d’information (--et-info), et non celle du danger. Jeton --et-*
   seulement, aucune couleur en dur. */
.aud-delegant {
    display: block;
    font-size: 12px;
    color: var(--et-info);
}

/* LE CHEMIN EN CHASSE FIXE, et c'est ce qui le rend lisible : les segments
   s'alignent d'une ligne à l'autre, si bien que /api/utilisateurs/7 et
   /api/utilisateurs/9 se comparent d'un coup d'œil. */
.aud-chemin {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-ink);
    word-break: break-all;        /* un chemin long casse plutôt que d'élargir la table */
}

.aud-page {
    font-size: 12px;
    color: var(--et-muted);
    white-space: nowrap;
    align-self: center;
}

/* ===========================================================================
   3. 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. */
@media (max-width: 1024px) {
    .aud-filtres .form-control,
    .aud-filtres .form-select,
    .aud-filtres-actions .mx-btn { min-height: 44px; }
}

/* Deux filtres par rangée : à cette largeur, six champs alignés donnent six
   champs illisibles. */
@media (max-width: 720px) {
    .aud-filtres > label,
    .aud-filtres > label:nth-child(3),
    .aud-filtres > label:nth-child(5) { flex: 1 1 46%; }
    .aud-filtres-actions { flex: 1 1 100%; }
    .aud-filtres-actions .mx-btn { flex: 1; }
}

/* Un filtre par rangée, et la marge intérieure rendue au contenu. */
@media (max-width: 560px) {
    .aud-filtres { gap: 10px; padding: 10px; }
    .aud-filtres > label,
    .aud-filtres > label:nth-child(3),
    .aud-filtres > label:nth-child(5) { flex: 1 1 100%; }
}


/* =====================================================================
   ADM-06 — « CE QUI A CHANGÉ », LA FICHE AVANT/APRÈS ET LES SCEAUX
   (db/1443). Ajouté à la feuille de CET écran, pas au gabarit : ces
   classes ne servent qu'ici (CLAUDE.md, « une classe utilisée par deux
   écrans monte dans le gabarit — jamais l'inverse »).

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

/* --- La colonne « ce qui a changé » ------------------------------------ */
.aud-objet { color: var(--et-ink); }

.aud-resume { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
.aud-resume > i { color: var(--et-avertissement-ink); flex-shrink: 0; }
.aud-resume.est-sensible > span { font-weight: 600; }

/* CE QUI N'A PAS ÉTÉ CONSIGNÉ SE LIT COMME TEL : le chemin d'URL est une
   information de repli, et il ne doit pas avoir le poids d'une phrase
   écrite par un service. */
.aud-resume-absent {
    font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
}

.aud-detail {
    border: 1px solid var(--et-hairline); background: var(--et-surface);
    color: var(--et-form-blue); font-size: 11.5px; padding: 1px 6px;
    white-space: nowrap; cursor: pointer;
}
.aud-detail:hover { background: var(--et-info-bg); }
.aud-detail.est-discret { color: var(--et-muted); border-color: transparent; }

/* --- La fiche : avant et après ----------------------------------------- */
.aud-fiche-entete {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4px 16px; margin-bottom: 14px; font-size: 13px; color: var(--et-ink);
}
.aud-fiche-cle {
    display: inline-block; min-width: 72px;
    font-family: var(--et-font-mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted);
}

.aud-fiche-titre {
    margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--et-muted);
}
.aud-fiche-texte { font-size: 13px; line-height: 1.5; color: var(--et-ink); }

.aud-fiche-rien {
    padding: 10px 12px; background: var(--et-neutre-bg);
    font-size: 12.5px; line-height: 1.45; color: var(--et-muted);
}

/* L'AVANT EST BARRÉ, L'APRÈS EST APPUYÉ : on lit le sens du changement sans
   avoir à comparer deux colonnes mot à mot. */
.aud-diff td { vertical-align: top; }
.aud-avant { color: var(--et-muted); text-decoration: line-through; }
.aud-apres { color: var(--et-ink); font-weight: 600; }

.aud-fiche-consequence {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 14px; padding: 9px 11px;
    background: var(--et-neutre-bg); color: var(--et-ink);
    font-size: 12.5px; line-height: 1.45;
}
.aud-fiche-consequence.est-sensible {
    background: var(--et-avertissement-bg); color: var(--et-avertissement-ink);
}
.aud-fiche-consequence > i { flex-shrink: 0; }

.aud-fiche-empreinte {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--et-hairline);
}

/* Une empreinte de 64 caractères ne se lit pas : ses deux bouts suffisent à la
   comparer à l'œil, l'infobulle porte l'entière. */
.aud-empreinte { font-size: 11.5px; color: var(--et-muted); }

/* --- Les plages scellées ----------------------------------------------- */
.aud-sceaux { margin-top: 18px; border-top: 1px solid var(--et-hairline); padding-top: 14px; }
.aud-sceaux-tete {
    display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--et-muted);
}
.aud-verdict-detail { margin-top: 3px; font-size: 12px; color: var(--et-ink); }

/* --- Responsive : paliers du dépôt, géométrie seulement ---------------- */
@media (max-width: 1024px) {
    /* La cible tactile ne descend jamais sous 44 px, et ne rétrécit jamais. */
    .aud-detail { min-height: 44px; padding: 0 10px; }
}
@media (max-width: 720px) {
    .aud-fiche-entete { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .aud-fiche-consequence, .aud-fiche-rien { padding: 9px 10px; }
}