/* ============================================================================
   ÉCRAN — RECOUVREMENT ET RELANCES (TRS-04)

   Feuille d'ÉCRAN. Préfixe .r4-, celui de la maquette de la passation
   (docs/modeles/design_handoff_easycompta, TRS-04).

   CE QUI N'EST PAS ICI : le rail d'onglets interne (.eca-onglets, gabarit de
   module css/easycompta-onglets.css), la vignette (.r4-fait / .r4-faits,
   css/easycompta-vignette.css) et les fenêtres (.xp-*). Cette feuille pose
   l'échelle de niveau de relance, les blocs de fiche et le fil d'historique.
   ========================================================================== */

.appgrid .r4-chip { display: inline-block; padding: 1px 7px; background: var(--et-surface-3); border: 1px solid var(--et-form-border); font-family: var(--et-font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }

.appgrid .r4-ligne { cursor: pointer; }
.appgrid .r4-ligne:hover { background: var(--et-surface-3); }

/* L'ÉCHELLE DE RELANCE : trois barres, une par niveau franchi. Un compteur
   « 2 » se lit ; trois barres dont deux allumées se VOIENT, et c'est ce qu'on
   cherche en balayant une file de cinquante dossiers. La troisième vire au
   rouge : passé la mise en demeure, ce n'est plus une relance. */
.appgrid .r4-niveaux { display: flex; gap: 2px; }
.appgrid .r4-niveau { width: 16px; height: 6px; background: var(--et-surface-3); }
.appgrid .r4-niveau.pris { background: var(--et-avertissement); }
.appgrid .r4-niveau.dur { background: var(--et-danger); }

.appgrid .r4-paire, .xp-corps .r4-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.appgrid .r4-note { margin: 10px 0 0; max-width: 94ch; font-size: 12px; line-height: 1.6; color: var(--et-muted); }

/* Le fil d'historique : ce qui a été fait sur le dossier, dans l'ordre. */
.xp-corps .r4-fil { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--et-hairline); }
.xp-corps .r4-fil > i { flex: none; width: 18px; text-align: center; font-size: 13px; margin-top: 2px; }
.xp-corps .r4-fil .t { font-size: 13px; color: var(--et-ink); line-height: 1.5; }
.xp-corps .r4-fil .d { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }

@media (max-width: 1024px) {
  .appgrid .r4-paire, .xp-corps .r4-paire { grid-template-columns: minmax(0, 1fr); }
}

/* Les largeurs de colonnes et de champs. Elles vivaient EN DUR dans le Razor
   (style="width:150px;text-align:right" sur chaque <th>, style="width:5rem" sur
   le délai) ; une largeur dans une page est ce que docs/conventions-responsive.md
   interdit, et c'est ici qu'un palier peut les relâcher. Les td suivent leur th.
   Une classe par RÔLE : les six colonnes d'argent des trois files (encours, échu,
   montant, encaissé, créance, provision) partagent .r4-col-montant, les quatre
   colonnes de date .r4-col-date. Les min-width des trois DataGrid restent dans
   la page : tools/paliers-responsive.ps1 les lit pour exiger l'ancre.
   Les deux tables des fenêtres sont écrites comme .r4-paire, dans les deux
   portées, parce qu'elles vivent sous .xp-corps. */
.appgrid .r4-champ-delai { width: 5rem; }
.appgrid .r4-champ-niveau { max-width: 180px; }

.appgrid .r4-col-client { min-width: 200px; }
.appgrid .r4-col-montant { width: 150px; text-align: right; }
.appgrid .r4-col-age { width: 110px; text-align: right; }
.appgrid .r4-col-taux { width: 110px; text-align: right; }
.appgrid .r4-col-niveau { width: 130px; }
.appgrid .r4-col-etat { width: 130px; }
.appgrid .r4-col-date { width: 120px; }
.appgrid .r4-col-cotation { width: 120px; }
.appgrid .r4-col-action { width: 150px; }
.appgrid .r4-col-etape { width: 150px; }
.appgrid .r4-col-obtenue { min-width: 200px; }
.appgrid .r4-col-conseil { min-width: 180px; }

/* Fenêtre du dossier : les pièces échues. */
.appgrid .r4-col-piece, .xp-corps .r4-col-piece { width: 150px; }
.appgrid .r4-col-echeance, .xp-corps .r4-col-echeance { width: 105px; }
.appgrid .r4-col-retard, .xp-corps .r4-col-retard { width: 80px; }
.appgrid .r4-col-solde, .xp-corps .r4-col-solde { width: 130px; }

/* Fenêtre de relance groupée : la case, le client et le niveau visé. Le client
   y est plus étroit (170) que dans les files (200) : deux largeurs, deux classes. */
.appgrid .r4-col-case, .xp-corps .r4-col-case { width: 40px; }
.appgrid .r4-col-client-cible, .xp-corps .r4-col-client-cible { min-width: 170px; }
.appgrid .r4-col-echu, .xp-corps .r4-col-echu { width: 130px; }
.appgrid .r4-col-niveau-vise, .xp-corps .r4-col-niveau-vise { width: 150px; }