/*
 * Styles du lot E — journal d'audit et supervision.
 * Fichier propriété du lot E (lié par base.html.twig). Classes préfixées gp-admin-.
 * Réutilise les jetons de app.css : aucune couleur en dur.
 */

/* ================================================================== */
/* Sections                                                           */
/* ================================================================== */

.gp-admin-section {
    margin-bottom: var(--gp-e6);
}

.gp-admin-section__titre {
    display: flex;
    align-items: center;
    gap: var(--gp-e3);
    margin-bottom: var(--gp-e3);
}

/* Filet qui prolonge l'intitulé : repère de lecture sur une page longue. */
.gp-admin-section__titre::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gp-trait);
}

.gp-admin-note {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    margin: var(--gp-e2) 0 var(--gp-e3);
}

/* ================================================================== */
/* Indicateurs (tuiles chiffrées)                                     */
/* ================================================================== */

.gp-admin-kpi {
    height: 100%;
    padding: var(--gp-e3) var(--gp-e4);
    background: var(--gp-surface);
    border: 1px solid var(--gp-trait);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-ombre);
}

/* Une tuile en alerte se repère aussi sans la couleur : filet épais à gauche + libellé. */
.gp-admin-kpi--alerte {
    border-color: var(--gp-rouge);
    box-shadow: inset 4px 0 0 var(--gp-rouge), var(--gp-ombre);
}

.gp-admin-kpi__intitule {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.gp-admin-kpi__valeur {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
    font-variant-numeric: tabular-nums;
    margin-top: var(--gp-e1);
}

.gp-admin-kpi__valeur--texte {
    font-size: 1.25rem;
}

.gp-admin-kpi__unite {
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 0.15rem;
    color: var(--bs-secondary-color);
}

.gp-admin-kpi__detail {
    margin-top: var(--gp-e2);
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Jauge d'occupation : trait fin, extrémité arrondie, couleur doublée du libellé. */
.gp-admin-jauge {
    height: 6px;
    margin-top: var(--gp-e2);
    border-radius: 3px;
    background: var(--gp-fond-creux);
    overflow: hidden;
}

.gp-admin-jauge__barre {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--gp-vert);
}

.gp-admin-jauge__barre--attention { background: var(--gp-ambre); }
.gp-admin-jauge__barre--critique  { background: var(--gp-rouge); }

/* Moyennes et pics des 24 dernières heures : une ligne par mesure au téléphone. */
.gp-admin-tendance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--gp-e2) var(--gp-e4);
}

.gp-admin-tendance dt {
    font-weight: 600;
    color: var(--gp-ardoise-700);
    font-size: 0.875rem;
}

.gp-admin-tendance dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ================================================================== */
/* Barre des utilisateurs actifs (une seule série, une seule teinte)  */
/* ================================================================== */

.gp-admin-barre-cellule {
    min-width: 10rem;
}

.gp-admin-barre {
    display: flex;
    align-items: center;
    gap: var(--gp-e2);
}

.gp-admin-barre__trace {
    display: block;
    height: 0.625rem;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--gp-bleu-chantier);
}

.gp-admin-barre__valeur {
    font-weight: 700;
    color: var(--bs-body-color);
}

/* ================================================================== */
/* Journal                                                            */
/* ================================================================== */

.gp-admin-journal__libelle {
    min-width: 16rem;
}

.gp-admin-donnees summary {
    cursor: pointer;
    color: var(--bs-link-color);
    font-size: 0.875rem;
    white-space: nowrap;
    /* Cible confortable au doigt, sans grossir la ligne sur écran large. */
    padding-block: 0.35rem;
}

.gp-admin-donnees pre {
    max-width: 32rem;
    max-height: 20rem;
    overflow: auto;
    margin-top: var(--gp-e2);
    padding: var(--gp-e2) var(--gp-e3);
    background: var(--gp-fond-creux);
    border-radius: var(--gp-radius-sm);
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.gp-admin-commande {
    color: var(--gp-ardoise-900);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ================================================================== */
/* Tableaux empilés au téléphone                                      */
/* ================================================================== */

/*
 * Sous 768 px, chaque ligne devient une carte et chaque cellule une paire
 * « intitulé : valeur » (attribut data-label) : pas de défilement horizontal à
 * 375 px, et rien n'est tronqué.
 */
@media (max-width: 767.98px) {
    .gp-admin-empile thead {
        display: none;
    }

    .gp-admin-empile,
    .gp-admin-empile tbody,
    .gp-admin-empile tr,
    .gp-admin-empile td,
    .gp-admin-empile th {
        display: block;
        width: 100%;
    }

    .gp-admin-empile tr {
        padding: var(--gp-e3) var(--gp-e4);
        border-bottom: 1px solid var(--gp-trait);
    }

    .gp-admin-empile tr:last-child {
        border-bottom: 0;
    }

    .gp-admin-empile > :not(caption) > * > * {
        display: flex;
        gap: var(--gp-e3);
        padding: 0.2rem 0;
        border: 0;
        text-align: left;
        min-width: 0;
    }

    .gp-admin-empile [data-label]::before {
        content: attr(data-label);
        flex: 0 0 6.5rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
        padding-top: 0.15rem;
    }

    .gp-admin-empile [data-label] > * {
        min-width: 0;
    }

    .gp-admin-journal__libelle,
    .gp-admin-barre-cellule {
        min-width: 0;
    }

    .gp-admin-barre {
        flex: 1;
    }

    .gp-admin-donnees pre {
        max-width: calc(100vw - 4rem);
    }

    /*
     * Variante compacte (utilisateurs actifs par mois) : le mois et sa barre
     * sur une ligne, le détail dessous — douze mois tiennent sans intitulés.
     */
    .gp-admin-empile--compact tr {
        display: grid;
        grid-template-columns: 9.5rem 1fr; /* colonne fixe : les barres partent toutes du même point */
        column-gap: var(--gp-e3);
        align-items: center;
    }

    .gp-admin-empile--compact [data-label]::before {
        display: none;
    }

    .gp-admin-empile--compact tr > :last-child {
        grid-column: 1 / -1;
    }
}

/*
 * Tablette (768 à 1 199 px, là où la barre de navigation passe au menu) : le
 * journal et ses sept colonnes demandent ~1 030 px. Il s'empile donc
 * jusqu'au grand écran, comme au téléphone — sans quoi « Voir le détail »,
 * l'IP et les données sortaient de la carte (le corps de page, en
 * overflow-x: hidden, les coupait sans moyen d'y défiler). Mêmes règles que
 * le bloc précédent, pour ce seul tableau ; son .table-responsive reste un
 * filet pour un contenu exceptionnellement large (adresse IPv6).
 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .gp-admin-empile--jusqua-xl thead {
        display: none;
    }

    .gp-admin-empile--jusqua-xl,
    .gp-admin-empile--jusqua-xl tbody,
    .gp-admin-empile--jusqua-xl tr,
    .gp-admin-empile--jusqua-xl td,
    .gp-admin-empile--jusqua-xl th {
        display: block;
        width: 100%;
    }

    .gp-admin-empile--jusqua-xl tr {
        padding: var(--gp-e3) var(--gp-e4);
        border-bottom: 1px solid var(--gp-trait);
    }

    .gp-admin-empile--jusqua-xl tr:last-child {
        border-bottom: 0;
    }

    .gp-admin-empile--jusqua-xl > :not(caption) > * > * {
        display: flex;
        gap: var(--gp-e3);
        padding: 0.2rem 0;
        border: 0;
        text-align: left;
        min-width: 0;
    }

    .gp-admin-empile--jusqua-xl [data-label]::before {
        content: attr(data-label);
        flex: 0 0 6.5rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
        padding-top: 0.15rem;
    }

    .gp-admin-empile--jusqua-xl [data-label] > * {
        min-width: 0;
    }

    .gp-admin-empile--jusqua-xl .gp-admin-journal__libelle {
        min-width: 0;
    }
}

@media print {
    .gp-admin-kpi {
        box-shadow: none;
        break-inside: avoid;
    }

    .gp-admin-donnees pre {
        max-height: none;
    }
}