/* ═══════════════════════════════════════════════════════════
   DTISoft — Graphe « Documents suite / origine » (préfixe dg-)
   Overlay plein écran (96vw × 92vh) affichant la chaîne doc-suite
   complète d'un document sous forme de cartes reliées par des
   flèches (colonnes = profondeur dans la chaîne, gauche → droite).
   Ouvert via window.DocGraph.open(idDocument) — js/modules/doc-graph.js
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay + panneau ─────────────────────────────────────── */
.dg-overlay {
    position: fixed; inset: 0; z-index: 10500;
    background: rgba(15,23,42,.55);
    display: flex; align-items: center; justify-content: center;
}
/* Une fiche a été ouverte DEPUIS le graphe : le JS abaisse le z-index de
   l'overlay sous la fiche (le graphe reste vivant derrière et revient au
   premier plan à la fermeture de la fiche). Le fond est alors allégé. */
.dg-overlay.dg-under { background: rgba(15,23,42,.25); }

.dg-panel {
    width: 96vw; height: 92vh;
    background: #ffffff; border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    display: flex; flex-direction: column; overflow: hidden;
    outline: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
@media (max-width: 900px) {
    .dg-panel { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ── En-tête ───────────────────────────────────────────────── */
.dg-header {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
    font-size: 16px; font-weight: 600; color: #334155;
}
.dg-header > i { color: #64748b; font-size: 17px; }
.dg-title-txt { white-space: nowrap; }
.dg-title-doc { color: #1e3a8a; }
.dg-count { font-weight: 400; color: #64748b; font-size: 13px; white-space: nowrap; }
.dg-tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.dg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 28px; min-width: 28px; padding: 0 10px;
    font-size: 13px; font-weight: 500; line-height: 1;
    background: #ffffff; color: #334155;
    border: 1px solid #cbd5e1; border-radius: 4px;
    cursor: pointer; white-space: nowrap;
}
.dg-btn:hover:not(:disabled) { background: #dbeafe; border-color: #3b82f6; color: #1e5bb5; }
.dg-btn:active:not(:disabled) { background: #f1f5f9; }
.dg-btn:disabled { opacity: .45; cursor: default; }
.dg-btn i { font-size: 12px; }
.dg-zoom-val {
    min-width: 52px; text-align: center; font-size: 12px; color: #64748b;
    font-variant-numeric: tabular-nums;
}
.dg-close {
    margin-left: 6px; background: transparent; border: 0; cursor: pointer;
    color: #64748b; font-size: 20px; line-height: 1; padding: 2px 8px; border-radius: 4px;
}
.dg-close:hover { color: #0f172a; background: #e2e8f0; }

/* ── Sous-en-tête : légende + aide ─────────────────────────── */
.dg-subhead {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 16px;
    background: #ffffff; border-bottom: 1px solid #e2e8f0;
    font-size: 12px; color: #64748b;
}
.dg-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dg-legend-lbl { font-weight: 600; color: #334155; margin-right: 2px; }
.dg-hint { margin-left: auto; white-space: nowrap; }
.dg-hint kbd {
    font-family: inherit; font-size: 11px; padding: 0 5px;
    border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 3px;
    background: #f8fafc; color: #334155;
}

/* ── Bandeau troncature ────────────────────────────────────── */
.dg-banner {
    padding: 7px 16px; font-size: 13px;
    background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a;
}
.dg-banner i { margin-right: 6px; }

/* ── Zone de dessin scrollable ─────────────────────────────── */
.dg-canvas {
    flex: 1 1 auto; min-height: 0; overflow: auto; position: relative;
    background-color: #f1f5f9;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
    outline: none;
}
/* Boîte dimensionnée à la taille du contenu × zoom (donne l'étendue du scroll) */
.dg-box { position: relative; }
/* Monde à l'échelle 1, mis à l'échelle par transform (zoom) */
.dg-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.dg-loading, .dg-error {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 15px; color: #64748b;
}
.dg-error { color: #991b1b; }
.dg-error i { font-size: 18px; }

/* ── Liens (SVG) ───────────────────────────────────────────── */
.dg-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.dg-lines path { fill: none; stroke: #94a3b8; stroke-width: 2; }
.dg-lines path.dg-edge-hi { stroke: #2563eb; stroke-width: 3; }
.dg-world.dg-focus .dg-lines path:not(.dg-edge-hi) { opacity: .3; }

/* ── Cartes ────────────────────────────────────────────────── */
.dg-node {
    position: absolute; box-sizing: border-box;
    /* largeur/hauteur fixées par le JS (CARD_W / CARD_H) — gardées ici en
       repli pour rester cohérent si le JS n'a pas posé les styles */
    width: 300px; height: 222px;
    background: #ffffff;
    border: 2px solid #cbd5e1; border-radius: 8px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 5px;
    box-shadow: 0 2px 6px rgba(15,23,42,.08);
    font-size: 13px; color: #334155;
    cursor: pointer; user-select: none;
    transition: opacity .12s ease, box-shadow .12s ease, border-color .12s ease;
    outline: none;
}
.dg-node:hover, .dg-node:focus-visible { border-color: #64748b; box-shadow: 0 6px 18px rgba(15,23,42,.18); }
.dg-node.dg-node-rel { border-color: #3b82f6; }
.dg-node.dg-node-hi  { border-color: #2563eb; box-shadow: 0 6px 18px rgba(37,99,235,.28); }
.dg-node.dg-node-pinned { box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 6px 18px rgba(37,99,235,.28); }
/* Document dont on a demandé le graphe */
.dg-node.dg-node-current {
    border: 3px solid #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 8px 24px rgba(37,99,235,.3);
}
/* Document annulé : carte grisée */
.dg-node.dg-node-annule { background: #fafafa; border-style: dashed; }
.dg-node.dg-node-annule .dg-docref { color: #94a3b8; text-decoration: line-through; }
/* Focus (survol / épinglé) : on estompe le reste du graphe */
.dg-world.dg-focus .dg-node:not(.dg-node-hi):not(.dg-node-rel) { opacity: .45; }

.dg-row {
    display: flex; align-items: center; gap: 8px;
    min-height: 20px; line-height: 20px; white-space: nowrap; min-width: 0;
}
.dg-row-title { min-height: 24px; line-height: 24px; }
/* Dernière ligne (paiement + centralisé) : deux badges non rétrécissables peuvent
   dépasser 272 px (« Partiel x / y € » + « Centralisé AAAA.MM ») → on autorise le
   retour à la ligne, la carte de 222 px garde ~25 px de marge pour une 2e ligne */
.dg-node > .dg-row:last-child { flex-wrap: wrap; row-gap: 3px; }
/* flex-basis 0 : c'est le texte extensible (nom du tiers, dates) qui absorbe
   TOUT le rétrécissement — les badges voisins (flex: 0 0 auto) ne bougent pas */
.dg-ellip { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 0; }
.dg-docref { font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: .01em; }
.dg-lbl { color: #64748b; }
.dg-val { font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
.dg-sep { color: #cbd5e1; padding: 0 2px; }
.dg-muted { color: #94a3b8; }
.dg-perte .dg-val { color: #b91c1c; }
.dg-dates { color: #64748b; font-size: 11.5px; }
.dg-tiers-alias { font-weight: 600; color: #1e3a8a; }

/* Badges génériques (type de doc, pro/particulier, paiement, centralisé).
   flex: 0 0 auto : un badge ne rétrécit JAMAIS (sinon « Professionnel » était
   coupé net en « Professior » — text-overflow est sans effet sur inline-flex) ;
   c'est le .dg-ellip voisin qui absorbe le manque de place. */
.dg-badge {
    display: inline-flex; align-items: center; gap: 4px;
    height: 20px; padding: 0 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    overflow: hidden; max-width: 100%;
    flex: 0 0 auto;
}
/* Pastille statut dans une carte : même règle (les dates absorbent le manque) */
.dg-row > .dg-st { flex: 0 0 auto; }
.dg-badge-type   { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
/* Type de document (libellé libre, parfois long) : borné à 55 % de la ligne
   avec une VRAIE ellipse → inline-block (text-overflow ne s'applique pas à
   un conteneur flex), hauteur conservée via line-height */
.dg-badge-type   { display: inline-block; line-height: 20px; max-width: 55%; text-overflow: ellipsis; }
.dg-badge-pro    { background: #dbeafe; color: #1e40af; }
.dg-badge-part   { background: #e2e8f0; color: #475569; }
.dg-pay-paye     { background: #d1fae5; color: #065f46; }
.dg-pay-partiel  { background: #ffedd5; color: #c2410c; }
.dg-pay-impaye   { background: #fee2e2; color: #991b1b; }
.dg-cen          { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.dg-cen i        { font-size: 10px; }

/* Pastille statut — couleurs dupliquées de documents.css (.doc-statut.st-*)
   avec le préfixe dg-st-, pour ne pas dépendre du CSS de la liste. */
.dg-st {
    display: inline-flex; align-items: center; justify-content: center;
    height: 22px; padding: 0 10px; border-radius: 11px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.dg-st-open    { background: #e2e8f0; color: #64748b; }   /* = var(--gray-200) / var(--gray-500) */
.dg-st-valid   { background: #d1fae5; color: #065f46; }
.dg-st-fact    { background: #dbeafe; color: #1e40af; }
.dg-st-annul   { background: #fee2e2; color: #991b1b; }
.dg-st-group   { background: #ede9fe; color: #5b21b6; }
.dg-st-sold    { background: #fef3c7; color: #92400e; }
.dg-st-print   { background: #f1f5f9; color: #334155; }
.dg-st-partial { background: #ffedd5; color: #c2410c; }
.dg-st-prep    { background: #cffafe; color: #155e75; }
/* Version compacte pour la légende */
.dg-legend .dg-st { height: 18px; font-size: 11px; padding: 0 8px; }
.dg-legend .dg-badge { height: 18px; }