/* ==============================================
   REPORTINGS.CSS — bloc de filtres de la liste
   des reportings EMG (pages.php?mp=emg&ms=reportings)

   Rendu par reporting_filtre_html() / reporting_periode_modale_html()
   (modules/fx/reporting.php), piloté par modules/emg/reportings.js.

   Le bloc est un <fieldset><legend>Filtres</legend> : bordure, fond de
   légende et neutralisation du reset Bootstrap sont DÉJÀ pris en charge
   par gpage/_form.css — rien à redéfinir ici.
   ============================================== */

/* Deux colonnes : les critères à gauche, les actions à droite, séparées par un
   filet. `align-items: stretch` fait courir le filet sur toute la hauteur. */
.emg-filtre {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
}

.emg-filtre-criteres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.5rem;
    flex: 1 1 auto;
    min-width: 0; /* autorise le retour à la ligne dans un conteneur flex */
}

.emg-filtre-champ {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* La période occupe sa propre ligne quelle que soit la largeur : c'est le seul
   contrôle d'une autre nature (une valeur cliquable, pas un menu), et sa longueur
   varie avec les dates choisies — la laisser suivre le flux ferait sauter la mise
   en page d'un filtre à l'autre. */
.emg-filtre-champ-periode {
    flex-basis: 100%;
}

/* Bootstrap 4 pose un margin-bottom sur label : il désaligne la ligne. */
.emg-filtre label,
.emg-filtre-lib {
    margin-bottom: 0;
    white-space: nowrap;
}

.emg-filtre select {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-ctrl);
    border-radius: 0.4rem;
    background-color: var(--background-light);
}

/* ── Recherche sur l'EMG (liste ADMIN uniquement) ─────────────────────────
   Habillé exactement comme les <select> voisins : c'est un critère parmi les
   autres, il n'a pas à se distinguer d'être le seul champ de saisie. */
.emg-filtre input[type="search"] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-ctrl);
    border-radius: 0.4rem;
    background-color: var(--background-light);
    color: var(--text);
}

/* Assez large pour qu'un NOM DE STRUCTURE tienne en entier — « EMG test HEMI 31 »
   fait déjà 17 caractères, et le placeholder en annonce trois. Un champ trop court
   obligerait à faire défiler ce qu'on vient de taper.
   ⚠️ **1rem = 10px ici** (`:root {font-size: 62.5%}`, gpage/_base.css) : 22rem font
   donc **220px**, pas 352px. Ne pas y appliquer le réflexe « root = 16px ».
   `min-width: 0` pour qu'il puisse rétrécir dans le flex parent. */
.emg-filtre-champ-emg input[type="search"] {
    width: 22rem;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 640px) {
    .emg-filtre-champ-emg {
        flex-basis: 100%;
    }

    .emg-filtre-champ-emg input[type="search"] {
        width: 100%;
    }
}

/* ── La période : la valeur EST le bouton ─────────────────────────────────
   Habillée comme un champ (fond clair, bordure fine) et non comme un bouton
   d'action : elle porte une valeur, elle ne doit pas rivaliser avec « Filtrer ». */
.emg-filtre-periode {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border-ctrl);
    border-radius: 0.4rem;
    background-color: var(--background-light);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.emg-filtre-periode:hover {
    background-color: var(--button-hover);
    border-color: var(--border-ctrl);
    color: var(--text);
}

/* Accès clavier : l'anneau de focus est la seule affordance pour qui n'utilise
   pas la souris — ne jamais le supprimer. */
.emg-filtre-periode:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.emg-filtre-periode .bi-pencil {
    opacity: 0.6;
}

/* Colonne d'actions : Filtrer au-dessus de Réinitialiser, séparée des critères
   par un filet vertical. `stretch` leur donne la même largeur. */
.emg-filtre-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    padding-left: 1.5rem;
    border-left: 1px solid var(--gris-leger);
}

.emg-filtre-reset {
    white-space: nowrap;
    text-align: center;
}

/* ── Modale d'édition de la période ───────────────────────────────────────
   ⚠️ margin:auto EXPLICITE : `* { margin:0 }` (gpage/_base.css) écrase le
   margin:auto de la feuille navigateur et collerait la modale en haut à
   gauche (piège documenté dans conventions_code.md). */
.emg-modperiode {
    width: min(42rem, 92vw);
    margin: auto;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 0.6rem;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.25);
}

.emg-modperiode::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.emg-modperiode-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid #e0e0e0;
    background: var(--background-aside, rgba(0, 0, 0, 0.03));
    font-weight: bold;
}

.emg-modperiode-fermer {
    background: none;
    border: 0;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

.emg-modperiode-corps {
    padding: 1.4rem;
}

.emg-modperiode-lib {
    font-weight: bold;
    margin-bottom: 0.6rem;
}

/* Deux options seulement : des radios se lisent d'un coup d'œil, là où un menu
   déroulant oblige à l'ouvrir pour savoir ce qu'il contient. */
.emg-modperiode-choix {
    display: block;
    font-weight: normal;
    margin-bottom: 0.4rem;
}

.emg-modperiode-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.emg-modperiode-dates label {
    margin-bottom: 0;
}

.emg-modperiode-dates input[type="date"] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-ctrl);
    border-radius: 0.4rem;
}

.emg-modperiode-aide {
    margin-top: 0.8rem;
    font-size: 1.3rem;
    color: var(--color-muted-fg);
}

.emg-modperiode-pied {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid #e0e0e0;
}

/* Mobile : les deux colonnes s'empilent, chaque critère sur sa propre ligne.
   Le filet vertical devient horizontal — il sépare toujours les mêmes choses. */
@media only screen and (max-width: 800px) {
    .emg-filtre {
        flex-direction: column;
        gap: 0.8rem;
    }

    .emg-filtre-criteres {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .emg-filtre-actions {
        padding-left: 0;
        padding-top: 0.8rem;
        border-left: 0;
        border-top: 1px solid var(--gris-leger);
    }

    .emg-modperiode-pied {
        justify-content: stretch;
    }
}

/* ==============================================
   Bouton « Télécharger » de la menubar (lot 5)

   Reprend l'habillage de .gpage-btn-list-ajout (défini dans gpage/_form.css) —
   il est porté en plus de cette classe, et non à sa place : deux boutons voisins
   qui ne se ressemblent pas se liraient comme deux natures d'action.
   Ne restent ici que l'alignement de l'icône et l'espacement entre les deux.
   ============================================== */
.emg-btn-export {
    margin-left: 0.4rem;
}

.emg-btn-export i,
.gpage-btn-list-ajout i {
    margin-right: 0.15rem;
}

/* ==============================================
   Bouton « Ajouter » = action PRINCIPALE de l'écran (retour bêta Tour 1,
   Adeline, demandé trois fois : « en gras pour être bien voyant »).

   Plein, couleur de charte, gras — là où « Télécharger » garde le contour de
   .gpage-btn-list-ajout. Deux natures d'action, deux poids : créer une fiche
   est le geste quotidien, télécharger l'exception. Couleurs par variables de
   charte (--color-primary*), jamais en dur (cf. écran admin de la charte).
   ============================================== */
.emg-btn-ajout {
    font-weight: 700;
    color: var(--color-primary-text, #fff);
    background: var(--color-primary);
    border-color: var(--color-primary-dark, var(--color-primary));
}

.emg-btn-ajout:hover,
.emg-btn-ajout:focus-visible {
    color: var(--color-primary-text, #fff);
    background: var(--color-primary-dark, var(--color-primary));
    box-shadow: var(--bouton-shadow);
}

/* ==============================================
   Compteur « n saisies en cours » (lot 6)

   Posé sous le bloc de filtres, au-dessus du tableau. Discret : c'est un
   rappel, pas une alerte — la couleur reprend celle du sablier de la colonne
   « État » pour que l'œil fasse le lien entre les deux.
   ============================================== */
.emg-compteur-saisies {
    margin: 0.6rem 0 0.2rem;
    font-size: 0.95em;
}

.emg-compteur-saisies a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-ctrl);
}

.emg-compteur-saisies a:hover,
.emg-compteur-saisies a:focus-visible {
    border-bottom-style: solid;
}

/* La couleur vient de .text-warning (Bootstrap), comme le sablier de la colonne
   « État » : ne rien redéfinir ici, sinon les deux divergeraient au prochain thème. */
.emg-compteur-saisies i {
    margin-right: 0.2rem;
}

/* Cadenas de la colonne d'action : fiche ouverte sur un autre poste (verrou collégial,
   lot suivant). Atténué et non cliquable — il dit « pas maintenant » sans faire cliquer,
   là où les autres lignes portent un crayon actif. Le libellé vit dans title/aria-label
   (reporting_liste_action_html). */
.emg-fiche-verrou {
    color: var(--color-fg-muted, #6c757d);
    cursor: default;
}