/* ==========================================================================
   Contrôles de pré-paie (lot D de l'audit EasyPaie, 2026-10-02)
   Pages/Paie/ControlesPrePaie.razor — porté de « Controles de pre-paie.dc.html ».

   Mobilier d'écran en .ppa-* par-dessus easypaie.css : indicateurs, bandeau, lignes de
   contrôle (.ep-ligne), table et modale viennent du module ; ici seulement l'en-tête de
   famille, le glyphe, la mention de levée, le comparatif et la synthèse par service.
   Jetons seulement.
   ========================================================================== */

.appgrid .ppa-filtre-service { width: auto; max-width: 240px; }

.appgrid .ppa-vide { padding: 44px; text-align: center; color: var(--et-muted); }

.appgrid .ppa-verdict__glyphe { flex: none; font-size: 18px; line-height: 1.3; }
.appgrid .ep-bandeau--negatif  .ppa-verdict__glyphe { color: var(--et-danger-ink); }
.appgrid .ep-bandeau--critique .ppa-verdict__glyphe { color: var(--et-avertissement-ink); }
.appgrid .ep-bandeau--positif  .ppa-verdict__glyphe { color: var(--et-succes-ink); }
.appgrid .ppa-verdict__corps { flex: 1 1 320px; min-width: 0; }

/* --- Familles -------------------------------------------------------------- */
.appgrid .ppa-famille {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px 7px; border-top: 1px solid var(--et-rang);
}
.appgrid .ppa-famille__libelle {
  flex: none; font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--et-table-head-encre);
}
.appgrid .ppa-famille__compte { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.appgrid .ppa-famille__filet { flex: 1; min-width: 20px; height: 1px; background: var(--et-hairline); }

/* --- Ligne de contrôle ----------------------------------------------------- */
.appgrid .ppa-glyphe { flex: none; font-size: 15px; line-height: 1.4; }
.appgrid .ppa-glyphe--bloquant { color: var(--et-danger-ink); }
.appgrid .ppa-glyphe--leve,
.appgrid .ppa-glyphe--avertissement { color: var(--et-avertissement-ink); }
.appgrid .ppa-glyphe--conforme { color: var(--et-succes-ink); }
.appgrid .ppa-glyphe--non_evalue { color: var(--et-faint); }
.appgrid .ppa-ligne__tete { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.appgrid .ppa-levee {
  margin-top: 6px; padding: 6px 9px; font-size: 12px; line-height: 1.5;
  background: var(--et-avertissement-bg); color: var(--et-avertissement-ink);
}
.appgrid .ppa-compte--bloquant { color: var(--et-danger-ink); }
.appgrid .ppa-compte--leve,
.appgrid .ppa-compte--avertissement { color: var(--et-avertissement-ink); }
.appgrid .ppa-compte--conforme,
.appgrid .ppa-compte--non_evalue { color: var(--et-faint); }

/* --- Comparatif et services, côte à côte ----------------------------------- */
.appgrid .ppa-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.appgrid .ppa-comparatif__libelle { font-weight: 600; color: var(--et-ink); }
.appgrid .ppa-comparatif__cause { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }

.appgrid .ppa-services { padding: 4px 18px 12px; }
.appgrid .ppa-service {
  display: flex; align-items: center; gap: 12px; row-gap: 6px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--et-rang);
}
.appgrid .ppa-service__nom { flex: 1 1 160px; min-width: 0; }
.appgrid .ppa-service__libelle { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.appgrid .ppa-service__effectif { margin-top: 2px; font-size: 12px; color: var(--et-faint); }
.appgrid .ppa-service__compte { flex: none; min-width: 84px; text-align: right; }
.appgrid .ppa-service__valeur { font-family: var(--et-font-mono); font-size: 14px; font-weight: 500; color: var(--et-faint); }
.appgrid .ppa-service__valeur.est-bloquant { color: var(--et-danger-ink); }
.appgrid .ppa-service__valeur.est-avert { color: var(--et-avertissement-ink); }
.appgrid .ppa-service__base { margin-top: 1px; font-size: 12px; color: var(--et-muted); }
.appgrid .ppa-services__methode { padding-top: 9px; font-size: 12px; line-height: 1.55; color: var(--et-faint); }

.appgrid .ppa-motif { margin-top: 12px; }
.appgrid .ppa-motif__saisie { width: 100%; resize: vertical; }

/* --- Paliers --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .appgrid .ppa-deux { grid-template-columns: minmax(0, 1fr); }
}

/* Lot E5 (banc d'écran à 390 px). Le comparatif passe en cartes sous 720 px
   (easypaie.css § 18) : la grandeur et sa cause prennent la largeur, les deux mois et
   l'écart se lisent sous leur libellé. L'en-tête de famille — capitales espacées et
   compte, tous deux insécables — et la note du bandeau débordaient leur bloc : ils
   passent à la ligne. */
@media (max-width: 720px) {
  .appgrid .ppa-famille { flex-wrap: wrap; row-gap: 2px; }
  .appgrid .ppa-famille__libelle { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .appgrid .ppa-famille__filet { display: none; }
  .appgrid .ppa-controles .ep-carte__note { flex: 1 1 100%; min-width: 0; }
}