/* ============================================================================
   ÉCRAN « Délégations temporaires » — /admin/delegations (USR-07).

   Les .dlg-* ne servent qu'ici. Le tableau, ses colonnes et ses badges viennent
   du gabarit (.tbl-*, .md-card, Tableau.razor) et de Bootstrap (.badge
   bg-*-subtle) — même convention que ClesApi.razor, AlertesAdmin.razor et
   Anonymisation.razor pour un état calculé. La modale de création vient du
   gabarit (.mx-voile, .mx-modale-*, .mx-form, .mx-champ) : rien de nouveau n'y
   est inventé.

   Aucune couleur en dur : jetons --et-* seulement.
   ============================================================================ */

/* --- Avertissement de tête : « Déléguer des droits sensibles » ---
   Jetons --et-avertissement* : le texte du titre utilise --et-avertissement-ink
   et non --et-avertissement — ce dernier ne vaut que 2,9:1 sur le fond pâle,
   sous le seuil AA (easytech-theme.css). Le corps du texte reste sur --et-ink,
   plus lisible qu'une teinte ambre sur trois lignes. */
.dlg-avert {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--et-avertissement-bg);
    border: 1px solid var(--et-avertissement-bord);
}
.dlg-avert-titre {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
    font-size: 14px; font-weight: 700;
    color: var(--et-avertissement-ink);
}
.dlg-avert p { margin: 0 0 6px; font-size: 13px; color: var(--et-ink); }
.dlg-avert p:last-child { margin-bottom: 0; }
.dlg-avert-bornes { color: var(--et-muted); }

/* --- Colonne « Rôle délégué » ---
   Chasse fixe : c'est un nom technique (celui de core.Role), pas une phrase, et il se
   compare visuellement mieux en colonne quand chaque lettre a la même largeur. */
.dlg-role { font-family: var(--et-font-mono); font-size: 13px; color: var(--et-ink); }

/* --- Colonne « Période » --- */
.dlg-periode { display: flex; flex-direction: column; gap: 2px; }
.dlg-jours { font-size: 12px; color: var(--et-muted); }

/* --- Colonne « État » : le badge, et la date de révocation en dessous --- */
.dlg-etat { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.dlg-revoc { font-size: 12px; color: var(--et-muted); }

/* --- Actions de fin de ligne : prolonger, révoquer --- */
.dlg-actions-ligne { display: flex; gap: 6px; flex-wrap: wrap; }