/* ==========================================================================
   Rappels et régularisations, paie sur papier blanc (lot F.2 de l'audit EasyPaie, 2026-10-03)
   Pages/Paie/Rappels.razor (.rap-*) et Pages/Paie/PapierBlanc.razor (.pab-*), portés de
   « Rappels et regularisations.dc.html » et « Paie papier blanc.dc.html ».

   Indicateurs, bandeaux, cartes, tables, pastilles, barres et modales viennent d'easypaie.css ;
   ici seulement la mise en page des deux écrans. Jetons seulement. Le préfixe .pbl-* n'est PAS
   celui de la paie à blanc : il appartient au passage à blanc des connecteurs.
   ========================================================================== */

/* ---- Rappels ---- */
.appgrid .rap-vide { padding: 44px; text-align: center; color: var(--et-muted); }
.appgrid .rap-vue__compte { margin-left: 4px; color: var(--et-faint); }
.appgrid .ep-vues__btn[aria-pressed="true"] .rap-vue__compte { color: var(--et-sur-ardoise); }

/* La répartition passe SOUS la table : à côté, elle laissait à la table 660 px à 1280 et la
   faisait défiler en largeur. */
.appgrid .rap-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.appgrid .rap-grille .ep-carte { margin: 0; }
/* position: relative — le libellé masqué de la colonne d'actions ne sort pas du cadre défilant. */
.appgrid .rap-table-cadre { position: relative; overflow-x: auto; }
.appgrid .rap-table { min-width: 760px; }
.appgrid .rap-table thead th { white-space: normal; vertical-align: bottom; }
.appgrid .rap-vide-ligne { padding: 24px 12px; text-align: center; color: var(--et-muted); }
.appgrid .rap-ligne--close td { color: var(--et-muted); }
.appgrid .rap-salarie__nom { display: block; font-weight: 600; color: var(--et-ink); white-space: nowrap; }
.appgrid .rap-salarie__sous { display: block; font-size: 12px; color: var(--et-muted); }
.appgrid .rap-motif { display: block; color: var(--et-ink); }
/* Le détail se lit entier : coupé, il cachait ce qu'un rappel régularise (banc P5). */
.appgrid .rap-detail { display: block; max-width: 320px; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.appgrid .rap-retenue { color: var(--et-danger-ink); }
.appgrid .rap-actions { display: inline-flex; gap: 2px; justify-content: flex-end; white-space: nowrap; }
.appgrid .rap-geste { padding: 0 8px; color: var(--et-lien); font-weight: 600; }
.appgrid .rap-geste--retirer { color: var(--et-danger-ink); }
.appgrid .rap-geste:disabled,
.appgrid .rap-geste--retirer:disabled { color: var(--et-faint); }
.appgrid .rap-methode { padding: 10px 18px 14px; font-size: 12px; line-height: 1.5; color: var(--et-muted); border-top: 1px solid var(--et-hairline); }

.appgrid .rap-motifs__corps { padding: 10px 16px 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; }
.appgrid .rap-motif-ligne__tete { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 13px; color: var(--et-ink); }
.appgrid .rap-motif-ligne__compte { font-size: 12px; color: var(--et-muted); }
.appgrid .rap-form { display: flex; flex-direction: column; gap: 12px; }
.appgrid .rap-periode { display: flex; gap: 8px; }
.appgrid .rap-periode select:first-child { flex: 1 1 auto; }
.appgrid .rap-periode select:last-child { flex: 0 0 110px; }
.appgrid .rap-saisie-detail { width: 100%; resize: vertical; }
.appgrid .rap-saisie-montant { max-width: 220px; }
.appgrid .rap-avertissement { color: var(--et-avertissement-ink); }

/* ---- Paie sur papier blanc ---- */
.appgrid .pab-sans-engagement { margin-bottom: 14px; }
.appgrid .pab-glyphe { flex: none; font-size: 16px; line-height: 1.4; }
.appgrid .pab-hypotheses { margin-bottom: 14px; }
.appgrid .pab-hypotheses__corps { padding: 12px 18px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.appgrid .pab-fixe { font-size: 13px; color: var(--et-ink); }
.appgrid .pab-unite { display: flex; align-items: center; gap: 6px; color: var(--et-muted); }
.appgrid .pab-saisie-court { max-width: 140px; }
.appgrid .pab-constante { display: flex; gap: 8px; flex-wrap: wrap; }
.appgrid .pab-constante select { flex: 1 1 200px; min-width: 0; }
.appgrid .pab-indicateurs { margin-bottom: 14px; }
.appgrid .pab-table-cadre { overflow-x: auto; }
.appgrid .pab-table { min-width: 620px; }
.appgrid .pab-code { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; }
.appgrid .pab-inchangee td { color: var(--et-muted); }
.appgrid .pab-ecart { color: var(--et-faint); }
.appgrid .pab-ecart.est-hausse { color: var(--et-avertissement-ink); font-weight: 600; }
.appgrid .pab-ecart.est-baisse { color: var(--et-danger-ink); font-weight: 600; }
.appgrid .pab-salarie { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--et-ink); }
.appgrid .pab-salarie:hover .pab-salarie__nom { color: var(--et-lien); text-decoration: underline; }
.appgrid .pab-salarie__nom { font-weight: 600; white-space: nowrap; }
.appgrid .pab-salarie__mat { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .pab-methode { padding: 10px 18px 14px; font-size: 12px; line-height: 1.5; color: var(--et-muted); border-top: 1px solid var(--et-hairline); }
.appgrid .pab-indicateurs + .ep-bandeau, .appgrid .ep-carte + .ep-bandeau { margin-bottom: 14px; }

/* Lot P5 — les rappels versés avec la paie (origine mentionnée), la revalorisation rétroactive et
   l'effet d'un rappel porté. Leurs tables ont cinq colonnes : elles tiennent sans largeur imposée. */
.appgrid .rap-declares { margin-top: 14px; }
.appgrid .rap-declares .rap-table, .appgrid .rap-simulation { min-width: 0; }
/* .rap-modale-large → .ep-modale.est-large (lot E2), même 880. */
.appgrid .rap-avert { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }
.appgrid .rap-impact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--et-hairline); }
.appgrid .rap-impact > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .rap-impact > div:nth-child(odd) { border-right: 1px solid var(--et-hairline); }
.appgrid .rap-impact dt { font-weight: 400; font-size: 13px; color: var(--et-muted); }
.appgrid .rap-impact dd { margin: 0; font-family: var(--et-font-mono); font-size: 13px; color: var(--et-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 720px) {
  .appgrid .pab-hypotheses__corps { grid-template-columns: 1fr; }
}

/* Sous 560 px, l'effet d'un rappel passe sur une colonne, et la simulation en cartes. */
@media (max-width: 560px) {
  .appgrid .rap-impact { grid-template-columns: minmax(0, 1fr); }
  .appgrid .rap-impact > div:nth-child(odd) { border-right: 0; }
  .appgrid .rap-simulation, .appgrid .rap-simulation tbody { display: block; width: 100%; }
  .appgrid .rap-simulation thead { display: none; }
  .appgrid .rap-simulation tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 12px; border-top: 1px solid var(--et-hairline); }
  .appgrid .rap-simulation td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
  .appgrid .rap-simulation td:first-child, .appgrid .rap-simulation td[colspan] { grid-column: 1 / -1; }
  .appgrid .rap-simulation td[data-lib]::before {
    content: attr(data-lib); display: block;
    font-family: var(--et-font); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--et-muted);
  }
}

/* Banc P5 : sous 1024 px, les tables des rappels passent en cartes — chaque valeur garde son
   libellé (data-lib), aucune colonne n'est retirée ; et les libellés des indicateurs se lisent
   entiers au lieu d'être coupés. */
@media (max-width: 1024px) {
  .appgrid .rap-table { min-width: 0; }
  .appgrid .rap-table-cadre { overflow-x: visible; }
  .appgrid .rap-table, .appgrid .rap-table tbody { display: block; width: 100%; }
  .appgrid .rap-table thead { display: none; }
  .appgrid .rap-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 12px; border-top: 1px solid var(--et-hairline); }
  .appgrid .rap-table td { display: block; padding: 0 !important; border: 0; text-align: left !important; min-width: 0; }
  .appgrid .rap-table td:first-child, .appgrid .rap-table td[colspan], .appgrid .rap-table--liste td:nth-child(3),
  .appgrid .rap-table .rap-cellule-gestes { grid-column: 1 / -1; }
  .appgrid .rap-table td:empty { display: none; }
  .appgrid .rap-detail { max-width: none; }
  .appgrid .rap-actions { justify-content: flex-start; }
  .appgrid .rap-table td[data-lib]::before {
    content: attr(data-lib); display: block;
    font-family: var(--et-font); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--et-muted);
  }
}