/* ===========================================================================
   FEUILLE D'ÉCRAN — Webhooks sortants (INT-02)
   Écran : Components/Pages/Admin/Webhooks.razor — /admin/webhooks

   Une feuille par écran : chacun sa fin de fichier et sa clé de cache.
   Le gabarit fournit les cartes, la grille dense, le tableau de liste, les
   badges d'état et le pied de méthode ; rien n'est redéfini ici. Les en-têtes
   de section (.ets-section-*) sont empruntés à l'écran d'état, comme sur
   l'écran de conservation.

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

/* ===========================================================================
   1. LE PANNEAU DU SECRET DE SIGNATURE

   Même forme que celui des clés d'API, et pour la même raison : il porte une
   information qui ne se retrouve pas. Ce n'est pas une modale — une modale se
   ferme d'un clic à côté, et ce clic coûterait le secret.
   =========================================================================== */

.whk-secret {
    border-left: 3px solid var(--et-avertissement-mark);
    padding: 14px;
}

.whk-secret-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--et-ink);
    margin-bottom: 6px;
}

.whk-secret-tete .bi { color: var(--et-avertissement-ink); }

.whk-secret-avert {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: var(--et-muted);
    line-height: 1.5;
    max-width: 82ch;
}

.whk-secret-valeur {
    padding: 10px 12px;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono);
    font-size: 13px;
    color: var(--et-ink);
    word-break: break-all;
    user-select: all;
    margin-bottom: 8px;
}

/* ===========================================================================
   2. LE CHOIX DES ÉVÉNEMENTS

   Deux événements aujourd'hui, davantage demain. Une grille auto-ajustée
   plutôt qu'une colonne : elle tient les deux sans paraître vide, et la
   dixième sans devenir une liste à faire défiler.

   Chaque ligne porte son EXPLICATION en clair sous le code : « pointage.recu »
   ne dit rien à qui découvre l'écran, « un pointage arrive d'un terminal » si.
   =========================================================================== */

.whk-evenements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 4px 12px;
    padding: 8px 14px 12px 14px;
}

.whk-evenement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 4px 0;
    font-size: 12px;
    cursor: pointer;
}

.whk-evenement > input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
}

.whk-evenement code {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-ink);
}

.whk-evenement-note {
    display: block;
    font-size: 12px;
    color: var(--et-muted);
}

.whk-vide {
    padding: 14px;
    font-size: 13px;
    color: var(--et-muted);
    max-width: 82ch;
}

.whk-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 14px 12px 14px;
}

/* ===========================================================================
   3. LA LISTE

   L'adresse peut faire cent caractères. On la borne et on la coupe : le texte
   entier reste en infobulle et à la sélection, et les six autres colonnes
   restent lisibles. Élargir la colonne les pousserait hors de l'écran.
   =========================================================================== */

.whk-url {
    display: inline-block;
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-family: var(--et-font-mono);
    font-size: 12px;
}

.whk-nb {
    font-family: var(--et-font-mono);
    cursor: help;
}

/* Un compteur d'échecs non nul est ce qu'on vient lire. La couleur
   d'avertissement, pas celle du danger : tant que l'abonnement n'est pas
   suspendu, il rattrape encore. */
.whk-echecs {
    font-family: var(--et-font-mono);
    color: var(--et-avertissement-ink);
    font-weight: 600;
    cursor: help;
}

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

   Tableau écrit à la main : il n'apparaît que sur un geste, ne se trie pas et
   ne s'exporte pas — le gabarit de liste apporterait sa barre d'outils
   au-dessus de six colonnes qu'on ne fait que lire.
   =========================================================================== */

.whk-journal-cadre {
    overflow-x: auto;
    max-height: 50vh;
    overflow-y: auto;
}

.whk-journal {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

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

.whk-journal thead th {
    position: sticky;
    top: 0;
    font-weight: 600;
    color: var(--et-muted);
    background: var(--et-surface-2);
}

/* Le motif d'échec vient d'un serveur tiers : il est long, et il n'est pas de
   nous. Borné en largeur, coupé, disponible en entier à la sélection. */
.whk-motif {
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--et-danger-ink);
}

/* ===========================================================================
   5. PALIERS

   Recette à 390 / 768 / 1280 / 1600 px (docs/conventions-responsive.md).
   =========================================================================== */

/* 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. La ligne de la liste
   porte trois boutons — c'est le cas le plus serré de l'écran. */
@media (max-width: 1024px) {
    .ecran-tete .mx-outils .mx-btn,
    .whk-actions .mx-btn,
    .whk-secret .mx-btn { min-height: 44px; }

    .whk-evenement { min-height: 44px; align-items: center; }
    /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes
       les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */
    .whk-evenement > input[type="checkbox"] { margin-top: 0; }
}

@media (max-width: 720px) {
    .whk-evenements { grid-template-columns: 1fr; }

    /* L'adresse reprend la largeur laissée par les colonnes qui se replient
       dans le gabarit de liste. */
    .whk-url { max-width: 24ch; }
    .whk-journal th,
    .whk-journal td { padding: 5px 8px; }
}

@media (max-width: 560px) {
    .whk-secret { padding: 12px; }
    .whk-evenements,
    .whk-actions { padding-left: 12px; padding-right: 12px; }
    .whk-motif { max-width: none; }
}