/* ===========================================================================
   ÉCRAN TABLEAU DE BORD PAIE & RH (.tbp-*)
   Components/Pages/Paie/TableauBord.razor — PAR-01.

   SA PROPRE FEUILLE, ET NON UN <style> DANS LA PAGE. C'est ce que cette feuille
   remplace, et la raison mérite d'être écrite : une balise « style » dans un
   composant Blazor n'est PAS portée — ce n'est pas du CSS isolé `.razor.css`.
   Elle entre dans le document et s'applique PARTOUT tant que la page est
   montée. Celle d'ici redéfinissait `.kpi`, que easytime-shell.css déclare pour
   l'application entière et que quatre autres écrans emploient.

   Elle ne porte QUE la mise en colonnes propre à cet écran : indicateurs,
   cartes, tables, pastilles, bandeaux et barres de répartition viennent
   d'easypaie.css sans être redéfinis.

   AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css. Le
   bloc remplacé en portait quatre (#e9edf2, #7a8794, #3f9ad6 et un dégradé),
   plus deux posées en attribut sur une tuile.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. BANDEAUX ET INDICATEURS.
   --------------------------------------------------------------------------- */
.tbp-bandeau { margin-bottom: 12px; }
.tbp-indicateurs { margin-bottom: 14px; }

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

/* Un lien mène là où le manque se corrige. Un lien et non un bouton : c'est une
   ADRESSE — elle s'ouvre dans un onglet et se met en favori. */
.tbp-lien { color: var(--et-form-blue-encre); text-decoration: none; font-weight: 600; }
.tbp-lien:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   2. LES DEUX COLONNES.

   Sept parts contre cinq dans la grille Bootstrap remplacée. La répartition par
   service a besoin de la largeur — ses barres ne se comparent qu'à condition
   d'être longues —, les deux cartes de droite tiennent en colonne étroite.

   `minmax(0, …)` sur la première : sans le minimum à zéro, un nom de service
   long impose sa largeur à toute la colonne et pousse la seconde hors champ.
   --------------------------------------------------------------------------- */
.tbp-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 14px;
    align-items: start;
}
.tbp-pile { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------------------
   3. LA RÉPARTITION PAR SERVICE.
   --------------------------------------------------------------------------- */
.tbp-liste { padding: 14px 18px; display: flex; flex-direction: column; gap: 13px; }

.tbp-service-tete {
    display: flex; align-items: baseline; gap: 9px;
    margin-bottom: 5px;
}
.tbp-service-nom { font-size: 13px; font-weight: 600; color: var(--et-ink); }

/* L'effectif accompagne le nom sans lui disputer la ligne : il explique le
   coût, il n'est pas la donnée qu'on vient lire. */
.tbp-service-effectif { flex: 1; min-width: 0; font-size: 12px; color: var(--et-faint); }

/* LE COÛT EST UN NOMBRE — chasse fixe et chiffres tabulaires, pour que la
   colonne se compare au caractère près d'un service à l'autre. C'est ce que la
   barre ne dit pas : elle donne l'ordre de grandeur, pas la valeur. */
.tbp-service-cout {
    flex: none;
    font-family: var(--et-font-mono); font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 500; color: var(--et-ink);
}

/* ---------------------------------------------------------------------------
   4. LES COMPTES « À COMPLÉTER ».
   --------------------------------------------------------------------------- */
.tbp-compte { width: 90px; text-align: right; }

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

/* Sous 1100 px les deux colonnes se mettent l'une sous l'autre : à cette
   largeur, la colonne de droite descend sous 340 px et ses deux tables de
   montants commencent à s'enrouler. */
@media (max-width: 1100px) {
    .tbp-colonnes { grid-template-columns: 1fr; }
}

/* Règle tactile (lot 02) : sous 1024 px, aucune cible sous 44 px. */
@media (max-width: 1024px) {
    .tbp-lien { display: inline-block; min-height: 44px; line-height: 44px; }
}

/* Sous 720 px le nom du service et son coût passent sur deux lignes plutôt que
   de comprimer le nom à trois caractères. */
@media (max-width: 720px) {
    .tbp-service-tete { flex-wrap: wrap; }
    .tbp-service-effectif { flex-basis: 100%; order: 3; }
}