/* ===========================================================================
   ÉCRAN ÉLÉMENTS VARIABLES (.elv-*)
   Components/Pages/Paie/ElementsVariables.razor — PAY-02.

   SA PROPRE FEUILLE, ET NON LA QUEUE DE easypaie.css. Règle du dépôt : un
   écran, un fichier, un <link> dans App.razor après la feuille de module dont
   il emprunte les composants. Barre d'outils, cartes, tables, pastilles,
   indicateurs, bandeaux, modales et champs viennent d'easypaie.css sans être
   redéfinis.

   AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. BARRE D'OUTILS ET BANDEAUX.
   --------------------------------------------------------------------------- */
.elv-outils { margin-bottom: 12px; }
.elv-filtre { width: auto; min-width: 120px; }
.elv-filtre--large { min-width: 280px; }
.elv-bandeau { margin-bottom: 12px; }

/* Le lien vers l'import, dans le bandeau : un lien, pas un bouton — c'est une
   ADRESSE, elle s'ouvre dans un onglet et se met en favori. */
.elv-lien { color: var(--et-form-blue-encre); font-weight: 600; }

/* ---------------------------------------------------------------------------
   2. LES DEUX TOTAUX, ET CE QUI LES SÉPARE.

   DEUX INDICATEURS, JAMAIS TROIS. La tuile « effet net » qu'on serait tenté
   d'ajouter serait fausse : les gains entrent au BRUT et traversent
   cotisations et impôt, les retenues s'appliquent au NET. Ils ne se
   soustraient pas, et la mention sous eux est là pour que personne ne le
   fasse de tête.

   Deux colonnes fixes plutôt que l'`auto-fit` du module : à deux tuiles, la
   grille automatique les étirait sur toute la largeur de l'écran, et deux
   nombres séparés de huit cents pixels cessent de se comparer.
   --------------------------------------------------------------------------- */
.elv-indicateurs { grid-template-columns: repeat(2, minmax(0, 360px)); }

.elv-mention {
    margin: 8px 0 14px;
    font-size: 12px; line-height: 1.5; color: var(--et-faint);
}

/* ---------------------------------------------------------------------------
   3. LA LISTE.
   --------------------------------------------------------------------------- */
.elv-liste { margin-bottom: 0; overflow-x: auto; }

/* Le bouton d'engagement vit dans le bandeau de carte, qui aligne ses enfants
   sur la ligne de base : un bouton de 32 px y descendrait sous l'intitulé. */
.elv-ajout { margin-left: auto; align-self: center; }

.elv-etat { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--et-muted); }

/* Un CODE d'élément est un identifiant : chasse fixe, pour que deux codes
   posés l'un sous l'autre se comparent d'un coup d'œil. */
.elv-code { font-family: var(--et-font-mono); font-size: 13px; color: var(--et-muted); }

/* Colonne d'actions : jamais de retour à la ligne. */
.elv-actions { white-space: nowrap; text-align: right; }
.elv-actions .ep-btn { width: 30px; padding: 0; justify-content: center; }
.elv-actions .ep-btn + .ep-btn { margin-left: 4px; }

/* ---------------------------------------------------------------------------
   4. LA MODALE DE SAISIE.
   --------------------------------------------------------------------------- */

/* Deux champs prennent la largeur entière de la grille plutôt qu'une de ses
   colonnes : la rubrique, parce qu'elle PRÉCÈDE les autres dans le geste et
   que ses intitulés sont longs ; le commentaire, parce que c'est une phrase. */
.elv-champ-large { grid-column: 1 / -1; }

/* Le code se saisit en capitales — c'est ainsi qu'il part au calcul. La
   transformation est d'AFFICHAGE : la valeur liée reste ce qui a été tapé, et
   le serveur normalise. */
.elv-maj { text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   5. LA CONFIRMATION DE SUPPRESSION.

   620 px est la largeur d'un formulaire. Une confirmation ne porte que deux
   phrases : à 620 px elles tiennent sur une ligne et demie, et l'œil ne sait
   plus où revenir à la ligne suivante.
   --------------------------------------------------------------------------- */
.elv-modale-courte { max-width: 470px; }
.elv-confirme { font-size: 14px; color: var(--et-ink); }
.elv-confirme-note { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   6. PALIERS — docs/conventions-responsive.md.
   --------------------------------------------------------------------------- */

/* Règle tactile (lot 02) : sous 1024 px, aucune cible sous 44 px. */
@media (max-width: 1024px) {
    .elv-actions .ep-btn { width: 44px; height: 44px; }
    .elv-outils .ep-btn, .elv-ajout { min-height: 44px; }
    .elv-filtre { min-height: 44px; }
}

/* Sous 720 px les filtres prennent la rangée entière, et les deux totaux se
   mettent en colonne : à cette largeur, deux montants côte à côte se coupent. */
@media (max-width: 720px) {
    .elv-filtre, .elv-filtre--large { width: 100%; min-width: 0; }
    .elv-indicateurs { grid-template-columns: 1fr; }
    .elv-ajout { margin-left: 0; }
}