/* ============================================================================
   ÉCRAN — DÉLAIS DE RÈGLEMENT (TRE-18)

   Feuille d'ÉCRAN. Préfixe .dr-, celui de la maquette de la passation
   (docs/modeles/design_handoff_easycompta, TRE-18).

   CE QUI N'EST PAS ICI : le rail d'onglets (.tbd-*, module), la vignette
   (.dr-fait / .dr-faits, css/easycompta-vignette.css) et les fenêtres (.xp-*).
   Cette feuille pose la courbe appariée des deux délais, les jauges d'écart,
   les deux colonnes clients / fournisseurs et les blocs de fiche.
   ========================================================================== */

.appgrid .dr-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 .dr-ligne { cursor: pointer; }
.appgrid .dr-ligne:hover { background: var(--et-surface-3); }

.appgrid .dr-titre { display: flex; align-items: center; gap: 9px; margin: 18px 0 4px; padding-bottom: 5px; border-bottom: 2px solid var(--et-filet-fort); }
.appgrid .dr-titre::before { content: ""; flex: none; width: 3px; height: 14px; background: var(--et-form-blue); }
.appgrid .dr-titre span { 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 .dr-note { margin: 6px 0 10px; max-width: 94ch; font-size: 12px; line-height: 1.6; color: var(--et-muted); }

/* DEUX BARRES APPARIÉES PAR MOIS : le délai d'encaissement en bleu, celui de
   paiement en ambre. Tant que la bleue dépasse l'ambre, la société finance ses
   clients — c'est la seule chose à voir, et elle se voit sans lire un chiffre. */
.appgrid .dr-courbe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 8px; height: 168px; padding: 12px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.appgrid .dr-mois { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; }
.appgrid .dr-paire { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 100%; }
.appgrid .dr-in { width: 40%; background: var(--et-form-blue); }
.appgrid .dr-out { width: 40%; background: var(--et-avertissement); }
.appgrid .dr-mois > span { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .dr-legende { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--et-muted); }
.appgrid .dr-legende i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }

.appgrid .dr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appgrid .dr-jauge { height: 5px; margin-top: 4px; background: var(--et-surface-3); }
.appgrid .dr-jauge > i { display: block; height: 100%; }

.xp-corps .dr-curseur { width: 100%; }

@media (max-width: 1100px) {
  .appgrid .dr-cols { grid-template-columns: minmax(0, 1fr); }
}