/* ═══════════════════════════════════════════════════════════
   DTISoft — Composant échéancier partagé (ERP)
   Préfixe : ech-  · consommé par tiers-detail.js et document-detail.js
   Présentation seulement — aucune donnée métier codée ici.
   ═══════════════════════════════════════════════════════════ */
.ech-overlay {
    position: fixed; inset: 0; z-index: 10500;           /* > fiches Tiers(9600)/Doc(8000) */
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.ech-popup {
    position: relative;
    width: 640px; max-width: 100%; max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--white); border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
    overflow: hidden;
    animation: echPop .14s ease-out;
}
@keyframes echPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ech-close {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 30px; height: 30px; border: none; border-radius: 6px;
    background: rgba(148, 163, 184, .16); color: var(--gray-500);
    cursor: pointer; font-size: 15px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.ech-close:hover { background: rgba(148, 163, 184, .3); color: var(--gray-900); }
.ech-body { overflow-y: auto; min-height: 0; }

/* Conteneur de contenu (utilisé aussi en rendu embarqué) */
.ech-root { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 16px; }

/* ── En-tête ─────────────────────────────────────────────── */
.ech-head { display: flex; flex-direction: column; gap: 2px; padding-right: 36px; }
.ech-head-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--gray-900); }
.ech-head-title > i { color: var(--blue-mid); }
.ech-head-info { color: var(--gray-400); font-size: 13px; cursor: help; margin-left: 2px; }
.ech-head-info:hover { color: var(--blue-mid); }
.ech-head-client { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.ech-head-ref { font-size: 12px; color: var(--gray-500); }

/* ── Hero solde ──────────────────────────────────────────── */
.ech-hero { border-radius: 9px; padding: 16px 18px; border: 1px solid transparent; }
.ech-hero-amt { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ech-hero-sub { font-size: 13px; font-weight: 600; margin-top: 3px; }
.ech-hero--due     { background: #fef2f2; border-color: #fecaca; }
.ech-hero--due .ech-hero-amt { color: #b91c1c; }
.ech-hero--due .ech-hero-sub { color: #dc2626; }
.ech-hero--credit  { background: #f0fdf4; border-color: #bbf7d0; }
.ech-hero--credit .ech-hero-amt { color: #15803d; }
.ech-hero--settled { background: var(--gray-50); border-color: var(--gray-200); }
.ech-hero--settled .ech-hero-amt { color: var(--gray-500); font-size: 18px; }

/* ── Barre d'ancienneté ──────────────────────────────────── */
.ech-aging { display: flex; flex-direction: column; gap: 8px; }
.ech-aging-bar {
    display: flex; height: 20px; border-radius: 6px; overflow: hidden;
    background: var(--gray-100); box-shadow: inset 0 0 0 1px var(--gray-200);
}
.ech-seg { min-width: 4px; height: 100%; }
.ech-seg--r4 { background: #7f1d1d; }   /* +90 j, le plus foncé */
.ech-seg--r3 { background: #b91c1c; }
.ech-seg--r2 { background: #ef4444; }
.ech-seg--r1 { background: #f87171; }
.ech-seg--b1 { background: #60a5fa; }   /* à échoir */
.ech-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ech-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-700); }
.ech-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ech-dot--r4 { background: #7f1d1d; }
.ech-dot--r3 { background: #b91c1c; }
.ech-dot--r2 { background: #ef4444; }
.ech-dot--r1 { background: #f87171; }
.ech-dot--b1 { background: #60a5fa; }
.ech-legend-lbl { color: var(--gray-500); }
.ech-legend-val { font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; }
/* Aucune tranche + compte non débiteur (§4.3) : note discrète en lieu de barre */
.ech-aging-empty { font-size: 12px; font-style: italic; color: var(--gray-400); }

/* ── Crédit disponible (NC) ──────────────────────────────── */
.ech-credit { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 14px; }
.ech-credit-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #15803d; }
.ech-credit-head > i { color: #16a34a; }
.ech-credit-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ech-credit-item { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--gray-700); }
.ech-credit-doc { color: var(--gray-600); }
.ech-credit-mt { font-weight: 700; color: #15803d; font-variant-numeric: tabular-nums; }

/* ── Encours (ERP only) ──────────────────────────────────── */
.ech-encours { border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 14px; background: var(--gray-50); }
.ech-encours-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); margin-bottom: 8px; }
.ech-encours-grid { display: flex; flex-direction: column; gap: 4px; }
.ech-encours-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--gray-700); }
.ech-encours-lbl { color: var(--gray-600); }
.ech-encours-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.ech-encours-total { border-top: 1px solid var(--gray-200); margin-top: 4px; padding-top: 6px; font-weight: 700; }
.ech-encours-total .ech-encours-lbl,
.ech-encours-total .ech-encours-val { color: var(--gray-900); }
.ech-encours-row.ech-neg .ech-encours-val { color: #dc2626; }
.ech-encours-row.ech-muted .ech-encours-val { color: var(--gray-400); font-weight: 500; font-style: italic; }

/* ── Détail groupé (sections repliables) ─────────────────── */
.ech-detail { display: flex; flex-direction: column; gap: 8px; }
.ech-sec { border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.ech-sec-head {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border: none; background: var(--gray-50);
    cursor: pointer; font-family: inherit; font-size: 13px; text-align: left;
    color: var(--gray-700);
}
.ech-sec-head:hover { background: var(--gray-100); }
.ech-sec-chev { color: var(--gray-400); width: 12px; font-size: 12px; }
.ech-sec-title { font-weight: 700; }
.ech-sec-count { color: var(--gray-400); font-weight: 600; }
.ech-sec-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ech-sec--due .ech-sec-title, .ech-sec--due .ech-sec-total { color: #b91c1c; }
.ech-sec--soon .ech-sec-title, .ech-sec--soon .ech-sec-total { color: var(--blue-mid); }
.ech-sec--credit .ech-sec-title, .ech-sec--credit .ech-sec-total { color: #15803d; }
.ech-sec-body { max-height: 260px; overflow: auto; }

.ech-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ech-tbl th {
    position: sticky; top: 0; z-index: 1;
    background: var(--white); padding: 6px 8px; text-align: left;
    font-weight: 600; color: var(--gray-500); white-space: nowrap;
    border-bottom: 1px solid var(--gray-200);
}
.ech-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--gray-100); white-space: nowrap; color: var(--gray-700); }
.ech-tbl tr:last-child td { border-bottom: none; }
.ech-r { text-align: right; }
.ech-c-icon { width: 20px; text-align: center; }
.ech-c-num { text-align: right; font-variant-numeric: tabular-nums; }
.ech-c-mt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.ech-c-mt.ech-neg { color: #15803d; }
.ech-c-mt.ech-pos-late { color: #b91c1c; }
.ech-c-label { color: var(--gray-700); }

/* Ligne paiement/avoir : libellé fusionné (§4.1) — jamais un négatif nu */
.ech-lbl-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ech-lbl-title { font-weight: 700; color: #15803d; }        /* vert : entrée d'argent / NC */
.ech-lbl-ref { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.ech-lbl-date { color: var(--gray-400); }

/* ── Rapprochements (groupes lettrés MatchNo, §4.2) ──────── */
.ech-groups { display: flex; flex-direction: column; gap: 6px; }
.ech-groups-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--gray-500);
}
.ech-groups-title > i { color: var(--gray-400); }
.ech-group { border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.ech-group--due { border-left: 3px solid #dc2626; }
.ech-group--credit { border-left: 3px solid #16a34a; }
.ech-group--settled { border-left: 3px solid var(--gray-300); }
.ech-group-head {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border: none; background: var(--gray-50);
    cursor: pointer; font-family: inherit; font-size: 13px; text-align: left;
    color: var(--gray-700);
}
.ech-group-head:hover { background: var(--gray-100); }
.ech-group-chev { color: var(--gray-400); width: 12px; font-size: 12px; }
.ech-group-ic { color: var(--gray-400); font-size: 12px; }
.ech-group-title { font-weight: 700; }
.ech-group-count { color: var(--gray-400); font-weight: 600; }
.ech-group-net { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ech-group-net--due { color: #b91c1c; }
.ech-group-net--credit { color: #15803d; }
.ech-group-net--settled { color: var(--gray-500); }
.ech-group-body { max-height: 260px; overflow: auto; }

/* Compteur des groupes soldés masqués */
.ech-settled-toggle {
    width: 100%; text-align: left;
    padding: 7px 12px; border: 1px dashed var(--gray-200); border-radius: 8px;
    background: transparent; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; color: var(--gray-500);
}
.ech-settled-toggle:hover { background: var(--gray-50); color: var(--gray-700); }
.ech-settled-box { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.ech-ic-credit  { color: #16a34a; }
.ech-ic-late    { color: #dc2626; }
.ech-ic-soon    { color: var(--blue-light); }

.ech-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ech-badge--late { background: #fee2e2; color: #b91c1c; }
.ech-badge--soon { background: var(--blue-pale); color: var(--blue-mid); }

/* ── Lignes : simple clic = sélection, double-clic = ouvrir (§4.1) ── */
/* user-select: none → le double-clic ouvre au lieu de surligner un mot */
.ech-row--click { cursor: pointer; -webkit-user-select: none; user-select: none; }
.ech-row--click:hover td { background: var(--blue-pale); }
.ech-row--click:focus { outline: 2px solid var(--blue-light); outline-offset: -2px; }

/* Ligne SÉLECTIONNÉE (une seule à la fois dans tout le popup) : bleu plus
   soutenu que le survol (#dbeafe = --blue-pale) + barre latérale, sinon la
   ligne sélectionnée est indiscernable d'une ligne survolée. Spécificité
   `.ech-tbl tr.ech-row--sel` (0,3,1) > `.ech-row--click:hover td` (0,2,1) :
   la sélection reste visible même sous le curseur (l'ordre de déclaration ne
   suffisait PAS — le survol l'emportait par spécificité). */
.ech-tbl tr.ech-row--sel > td { background: #bfdbfe; }
.ech-tbl tr.ech-row--sel > td:first-child { box-shadow: inset 3px 0 0 var(--blue-mid); }
.ech-tbl tr.ech-row--sel > .ech-c-type,
.ech-tbl tr.ech-row--sel > .ech-c-num,
.ech-tbl tr.ech-row--sel > .ech-c-label { color: var(--gray-900); }

/* ── Origine d'une note de crédit (§4.3) ─────────────────── */
/* Mention discrète sur sa propre ligne dans la cellule libellée fusionnée
   (flex-basis 100%) → n'altère pas l'alignement des colonnes. */
.ech-origine {
    flex: 0 0 100%;
    font-size: 11px; color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}
.ech-origine--click { cursor: pointer; -webkit-user-select: none; user-select: none; }
.ech-origine--click:hover { color: var(--blue-mid); text-decoration: underline; }
.ech-origine--click:focus { outline: 2px solid var(--blue-light); outline-offset: 1px; border-radius: 3px; }

/* ── Pied : total de contrôle ────────────────────────────── */
.ech-foot { text-align: right; font-size: 11px; color: var(--gray-400); }
.ech-foot-warn { color: #dc2626; font-weight: 700; }

/* ── Notice transitoire (échec de chargement de l'échéancier) ─ */
.ech-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 10600;                                      /* > .ech-overlay (10500) */
    max-width: 90vw;
    background: #b91c1c; color: #fff;
    padding: 10px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    opacity: 1; transition: opacity .4s ease;
}
.ech-toast--out { opacity: 0; }

/* ── Fiche ouverte DEPUIS l'échéancier (§4.2) ─────────────── */
/* AUCUN filet CSS ici, et c'est volontaire : `echeancier.js` ne touche JAMAIS
   au z-index d'une fiche ouverte depuis l'échéancier — elle garde son
   empilement NATUREL (dd 8000 / tr 9500 / sd 1000), donc tous ses popups
   propres (confirmations 10300, compensation 10500, menu contextuel 10001,
   picker 11000, doc suite 10500, PJ/audit 10600, fiche article/tiers empilée
   9600…) restent devant elle sans liste de classes à maintenir.
   Ce sont les OUVREURS qui descendent sous la fiche (z-index inline posé puis
   retiré par echeancier.js::syncZ) : ce popup et, le cas échéant, la fiche
   Tiers qui l'héberge. Fond allégé tant que l'échéancier est ainsi masqué —
   même convention que le graphe de documents (`.dg-overlay.dg-under`). */
.ech-overlay.ech-under { background: rgba(15, 23, 42, .25); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 680px) {
    .ech-popup { width: 100%; max-height: 94vh; }
    .ech-root { padding: 14px 14px 12px; }
    .ech-hero-amt { font-size: 19px; }
}