/* ==========================================================================
   Écritures comptables de paie (lot F.3 de l'audit EasyPaie, 2026-10-03)
   Pages/Paie/Ecritures.razor — porté de « Ecritures comptables de paie.dc.html ».

   Mobilier d'écran en .odp-* (OD de paie) par-dessus easypaie.css : indicateurs, bandeaux,
   vues, tables, barres, pastilles et effets viennent du module. Jetons seulement.
   ========================================================================== */
.appgrid .odp-vide { padding: 44px; text-align: center; color: var(--et-muted); }

.appgrid .odp-equilibre { margin-bottom: 14px; flex-wrap: nowrap; align-items: center; }
.appgrid .odp-equilibre__texte { flex: 1; min-width: 0; }
.appgrid .odp-equilibre__chiffres { flex: none; display: flex; gap: 22px; }
.appgrid .odp-equilibre__libelle { display: block; font-size: 12px; color: var(--et-muted-sur-alerte); }   /* sur le bandeau teinté : 4,10:1 en sombre avec --et-muted */
.appgrid .odp-equilibre__valeur { display: block; font-family: var(--et-font-mono); font-size: 14px; font-weight: 600; color: var(--et-ink); white-space: nowrap; }
.appgrid .odp-bandeau { margin-bottom: 14px; }

.appgrid .odp-attention { margin-bottom: 14px; }
.appgrid .odp-attention__tete { padding: 10px 18px; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--et-ink); cursor: pointer; }
.appgrid .odp-attention__compte { font-family: var(--et-font-mono); font-weight: 400; color: var(--et-muted); }
.appgrid .odp-attention__liste { margin: 0; padding: 4px 18px 12px 36px; font-size: 13px; line-height: 1.55; color: var(--et-avertissement-ink); }
.appgrid .odp-attention__liste li + li { margin-top: 4px; }

.appgrid .odp-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.appgrid .odp-piece { margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

/* position: relative — un libellé masqué ne sort pas du cadre défilant. */
.appgrid .odp-table-cadre { position: relative; overflow-x: auto; }
.appgrid .odp-table { min-width: 720px; }
.appgrid .odp-table thead th { white-space: normal; vertical-align: bottom; }
.appgrid .odp-groupe td { padding-top: var(--et-cellule-total-y); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--et-muted); background: var(--et-surface-3); }
.appgrid .odp-compte { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); white-space: nowrap; }
.appgrid .odp-section { font-size: 12px; color: var(--et-muted); }
.appgrid .odp-origine { font-size: 12px; color: var(--et-muted); }
.appgrid .odp-total td { font-weight: 600; border-top: 1px solid var(--et-hairline); }
.appgrid .odp-ok { color: var(--et-succes-ink); }
.appgrid .odp-ko { color: var(--et-danger-ink); }
.appgrid .odp-vide-ligne { padding: 24px 12px; text-align: center; color: var(--et-muted); }
.appgrid .odp-methode { padding: 10px 18px 14px; font-size: 12px; line-height: 1.5; color: var(--et-muted); border-top: 1px solid var(--et-hairline); }
.appgrid .odp-methode--libre { border-top: 0; padding: 0 2px 14px; }

.appgrid .odp-services { padding: 12px 18px 6px; display: flex; flex-direction: column; gap: 14px; }
.appgrid .odp-service__tete { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.appgrid .odp-service__libelle { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.appgrid .odp-service__effectif { font-size: 12px; color: var(--et-muted); }

.appgrid .odp-effets { margin-top: 14px; }
.appgrid .odp-effets__corps { padding: 2px 18px 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

@media (max-width: 720px) {
  .appgrid .odp-equilibre { flex-wrap: wrap; }
  .appgrid .odp-equilibre__texte { flex-basis: 100%; }
  .appgrid .odp-effets__corps { grid-template-columns: minmax(0, 1fr); }
  .appgrid .odp-piece { margin-left: 0; }
}

/* Le journal et le règlement se lisent l'un sous l'autre : mêmes colonnes, mêmes largeurs. */
.appgrid .odp-table:has(colgroup) { table-layout: fixed; }
.appgrid .odp-col-compte { width: 84px; }
.appgrid .odp-col-section { width: 110px; }
.appgrid .odp-col-montant { width: 120px; }
.appgrid .odp-col-origine { width: 250px; }
.appgrid .odp-total td:last-child { font-size: 12px; }
/* Sous la largeur d'un bureau, l'origine (puis la section) passe sous l'intitulé au lieu de
   faire défiler le journal : le compte, l'intitulé et les montants restent de front. */
.appgrid .odp-sous { display: none; font-size: 12px; line-height: 1.45; color: var(--et-muted); }
@media (max-width: 1024px) {
  /* Mise en page automatique : une colonne masquée disparaît avec ses cellules, sans qu'un
     <col> resté en place ne décale les autres. */
  .appgrid .odp-table:has(colgroup) { min-width: 0; table-layout: auto; }
  .appgrid .odp-table:has(colgroup) col { width: auto; }
  .appgrid .odp-table:has(colgroup) tr > :last-child:not([colspan]) { display: none; }
  .appgrid .odp-sous--origine { display: block; }
  .appgrid .odp-table:has(colgroup) .ep-num { white-space: nowrap; }
}
@media (max-width: 560px) {
  .appgrid .odp-table:has(colgroup) .odp-section,
  .appgrid .odp-table:has(colgroup) thead th:nth-child(3) { display: none; }
  .appgrid .odp-sous--section { display: block; }
  .appgrid .odp-table:has(colgroup) th,
  .appgrid .odp-table:has(colgroup) td { padding-left: 6px; padding-right: 6px; }
  .appgrid .odp-table:has(colgroup) .odp-groupe td { white-space: normal; }
  .appgrid .odp-table:has(colgroup) .ep-num { font-size: 12px; }
  .appgrid .odp-table:has(colgroup) .odp-compte { font-size: 12px; }
}

/* Lot E5 : sous 720 px, les quatre tables passent en cartes (easypaie.css § 18). Chaque
   colonne y retrouve sa place sous son libellé : la section et l'origine, que les paliers
   1024 et 560 rangeaient sous l'intitulé ou masquaient, reprennent leur cellule, et les
   sous-lignes qui les remplaçaient s'effacent — aucune colonne ne manque à la carte. */
@media (max-width: 720px) {
  .appgrid .odp-table.ep-cartes-etroit { min-width: 0; }
  .appgrid .odp-table.ep-cartes-etroit .odp-sous { display: none; }
  .appgrid .odp-table.ep-cartes-etroit:has(colgroup) > tbody > tr > td:last-child:not([colspan]):not(:empty),
  .appgrid .odp-table.ep-cartes-etroit:has(colgroup) > tbody > tr > td.odp-section:not(:empty) { display: block; }
}