/* [LIOFO-FLOW-ENGINE-P8 2026-07-26] Page /flux-de-fonds — suggestions R3 + arbre des flux
   + affectation des soldes fiat (sélecteur de convention FIFO / proportionnelle, spec §8)
   + lignée de l'argent au survol (liens masqués par défaut, parts en %).
   Graphe hiérarchique : niveau 1 = bulles de date dans les comptes ;
   niveau 2 = zoom sémantique, les dates s'ouvrent sur leurs transactions.
   Charte Liofo : bleu #0cc0df, vert #00bf63, rose #ff66c4, surfaces sombres.
   NB : cette feuille doit être enfilée à priorité > 100 sur wp_enqueue_scripts
   (cf. scripts/pages/page-flux-de-fonds.php) sinon elle est purgée par
   desactiver_tous_les_styles_sauf_perso() et n'est jamais servie. */

.liofo-flux-surface {
    padding: 24px 12px 48px;
}

.liofo-flux-page {
    max-width: 1240px;
    margin: 0 auto;
    text-align: left;
}

.liofo-flux-head {
    margin-bottom: 20px;
}

.liofo-flux-title {
    font-family: var(--liofo-font-title, inherit);
    letter-spacing: var(--liofo-letter-spacing-title, 0.05em);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: #fff;
    margin: 0 0 8px;
}

.liofo-flux-sub {
    color: rgba(255, 255, 255, 0.7);
    max-width: 860px;
    line-height: 1.55;
    margin: 0 0 6px;
}

.liofo-flux-back {
    color: #0cc0df;
    text-decoration: none;
    font-size: 0.92rem;
}

.liofo-flux-back:hover {
    text-decoration: underline;
}

.liofo-flux-card,
.liofo-flux-graph-card {
    position: relative;
    background: rgba(6, 8, 14, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
}

.liofo-flux-h2 {
    font-size: 1.15rem;
    color: #fff;
    margin: 0 0 12px;
}

.liofo-flux-h3 {
    font-size: 0.98rem;
    color: #0cc0df;
    margin: 16px 0 8px;
}

.liofo-flux-loading,
.liofo-flux-empty {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin: 8px 0;
}

/* ---- Suggestions ---- */

.liofo-flux-sugg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.liofo-flux-sugg-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 420px;
}

.liofo-flux-badge {
    background: rgba(12, 192, 223, 0.16);
    color: #0cc0df;
    border: 1px solid rgba(12, 192, 223, 0.4);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 3px 10px;
    white-space: nowrap;
}

.liofo-flux-sugg-legs {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    line-height: 1.6;
}

.liofo-flux-dir {
    display: inline-block;
    min-width: 52px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.liofo-flux-dir-out { color: #ff66c4; }
.liofo-flux-dir-in { color: #00bf63; }

.liofo-flux-muted { color: rgba(255, 255, 255, 0.5); }

.liofo-flux-sugg-carry {
    width: 100%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.liofo-flux-sugg-actions {
    display: flex;
    gap: 8px;
}

.liofo-flux-btn {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.liofo-flux-btn:disabled { opacity: 0.5; cursor: wait; }
.liofo-flux-btn:hover:not(:disabled) { filter: brightness(1.15); }

.liofo-flux-btn-accept {
    background: rgba(0, 191, 99, 0.18);
    color: #00bf63;
    border-color: rgba(0, 191, 99, 0.5);
}

.liofo-flux-btn-reject {
    background: rgba(255, 102, 196, 0.12);
    color: #ff66c4;
    border-color: rgba(255, 102, 196, 0.4);
}

.liofo-flux-decided {
    margin: 4px 0;
    color: rgba(255, 255, 255, 0.75);
}

/* ---- [P7] Affectation des soldes en euros (spec §8) ---- */

.liofo-flux-alloc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
}

.liofo-flux-alloc-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
}

.liofo-flux-alloc-select {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.92rem;
    max-width: 100%;
}

.liofo-flux-alloc-select:focus {
    outline: none;
    border-color: #0cc0df;
    box-shadow: 0 0 0 2px rgba(12, 192, 223, 0.25);
}

.liofo-flux-alloc-select option {
    background: #0a0d16;
    color: #fff;
}

.liofo-flux-alloc-help {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 8px;
}

.liofo-flux-alloc-meta {
    font-size: 0.85rem;
    margin: 0 0 6px;
}

/* ---- Positions ---- */

.liofo-flux-positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.liofo-flux-pos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 12px 14px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.liofo-flux-pos:hover {
    border-color: rgba(12, 192, 223, 0.55);
    transform: translateY(-1px);
}

.liofo-flux-pos-symbol { color: #0cc0df; font-weight: 700; }
.liofo-flux-pos-name { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; }
.liofo-flux-pos-meta { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; }

/* ---- Graphe ---- */

.liofo-flux-graph-host {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: radial-gradient(circle at 30% 20%, rgba(12, 192, 223, 0.05), transparent 60%), rgba(4, 6, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    touch-action: none;
}

.liofo-flux-graph-host svg { display: block; cursor: grab; }
.liofo-flux-graph-host svg:active { cursor: grabbing; }

.liofo-flux-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    margin-bottom: 10px;
}

.liofo-flux-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    vertical-align: -1px;
    margin-right: 4px;
}

/* [P6] Refonte graphe 2026-07-26 : légende façon Obsidian. */
.liofo-flux-dot-account {
    width: 14px;
    height: 14px;
    background: rgba(12, 192, 223, 0.18);
    box-shadow: 0 0 0 2px rgba(12, 192, 223, 0.35);
}

.liofo-flux-dot-tx {
    background: #00bf63;
}

.liofo-flux-dot-unknown {
    background: rgba(154, 163, 181, 0.12);
    border: 1px dashed #9aa3b5;
}

.liofo-flux-line {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 2px solid #0cc0df;
    vertical-align: 3px;
    margin-right: 4px;
}

.liofo-flux-line-dash { border-top-style: dashed; border-top-color: #ff66c4; }

.liofo-flux-tooltip {
    /* [P6B] position fixe (coordonnées écran) : immunisé contre le CSS des ancêtres. */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    max-width: 260px;
    background: rgba(6, 8, 14, 0.95);
    border: 1px solid rgba(12, 192, 223, 0.35);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 8px 10px;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* [P6D 2026-07-26] Montserrat sur tout le texte du graphe et de la bulle
   contextuelle (le thème force Nikumaru sur strong/b avec !important). */
.liofo-flux-graph-host svg text,
#liofo-flux-tooltip,
#liofo-flux-tooltip strong,
.liofo-flux-tooltip strong {
    font-family: var(--liofo-font-body, 'Montserrat', sans-serif) !important;
    letter-spacing: 0.02em;
}

/* [P6B 2026-07-26] Survol : le flux connexe reste net et grossit légèrement,
   tout le reste s'estompe (retour QA Thomas). */
.liofo-flux-graph-host svg .lf-el {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.liofo-flux-graph-host svg.lf-focus .lf-el {
    opacity: 0.16;
}

/* [P6D] Les transactions vivent DANS leur bulle de date : une bulle imbriquée
   hérite de l'estompage de son parent (sinon 0.16 × 0.16 = invisible). */
.liofo-flux-graph-host svg.lf-focus .lf-el .lf-el {
    opacity: 1;
}

.liofo-flux-graph-host svg.lf-focus .lf-el.lf-hl {
    opacity: 1;
}

.liofo-flux-graph-host svg g.lf-node {
    transform-box: fill-box;
    transform-origin: center;
}

.liofo-flux-graph-host svg.lf-focus g.lf-node.lf-hl {
    transform: scale(1.09);
}

/* En graphe dense, les sommes des liens n'apparaissent qu'au survol du flux. */
.liofo-flux-graph-host svg.lf-dense .lf-lbl-auto {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.liofo-flux-graph-host svg.lf-dense.lf-focus .lf-el.lf-hl .lf-lbl-auto {
    opacity: 1;
}

/* [P8 2026-07-26] Mode « calme » : par défaut AUCUNE ligne de lien visible
   (retour QA Thomas — les liens d'affectation intra-compte saturaient la vue).
   La lignée de l'argent (classe lf-hl posée par flux-fonds.js) réapparaît au
   survol / à l'épinglage, avec ses étiquettes de part. */
.liofo-flux-graph-host svg.lf-calm .lf-link {
    opacity: 0.045;
    pointer-events: none;
}

.liofo-flux-graph-host svg.lf-calm .lf-link .lf-lbl-auto {
    opacity: 0;
}

/* Pendant une lignée (lf-focus), les liens hors lignée restent invisibles
   (sans cette règle, l'estompage générique 0.16 les rendrait PLUS visibles). */
.liofo-flux-graph-host svg.lf-calm.lf-focus .lf-link:not(.lf-hl) {
    opacity: 0.03;
}

.liofo-flux-graph-host svg.lf-calm .lf-link.lf-hl {
    opacity: 1;
    pointer-events: auto;
}

.liofo-flux-graph-host svg.lf-calm .lf-link.lf-hl .lf-lbl-auto {
    opacity: 1;
}

.liofo-flux-hint {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    margin: 10px 0 0;
}

@media (max-width: 720px) {
    .liofo-flux-card,
    .liofo-flux-graph-card { padding: 14px; }
    .liofo-flux-sugg-actions { width: 100%; justify-content: flex-end; }
}