/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    JOURNAL DES DÉCISIONS (2026-10-14) : préfixe `jd-`.
     · l'onglet « Décisions tenues ? » du Reporting (Pages/JournalDecisionsVue.razor), posé DANS `.rep-root` : il reprend les cartes
       et les jetons du module (`rep-card`, `--rep-*`) et les tableaux de « Prévisions tenues ? » (`pg-tab`, prevision-glissante.css) ;
     · le geste « Enregistrer comme décision » du simulateur (Pages/Overview.razor, sous l'écart « vos décisions ») : jetons de la
       vue Trésorerie (--o6, --o12, --sl3, --mut1, --brand).
    Rien ici n'invente une couleur : tout se tire des jetons.
    ⚠️ Toute modification ici doit bumper le `?v=` de journal-decisions.css dans index.html.
    ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.jd { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jd-q { margin: 6px 0 0; font: 600 14px/1.4 var(--font-family); color: var(--rep-sub); }

/* ── Le tableau des décisions ────────────────────────────────────────────────────────────────── */
.jd-liste .rep-card-h, .jd-det .rep-card-h { margin-bottom: 10px; }
.jd-tab td { vertical-align: middle; }
.jd-eff { min-width: 13rem; text-align: left !important; white-space: normal; font-size: 12px; color: var(--rep-sub); }
.jd-tab th:nth-child(2) { text-align: left; }
.jd-st {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--rep-hair); background: var(--rep-tint); font: 700 11px/1.3 var(--font-family); color: var(--rep-sub);
}
.jd-st.is-ok { color: var(--rep-ok); border-color: color-mix(in srgb, var(--rep-ok) 40%, transparent); background: color-mix(in srgb, var(--rep-ok) 9%, transparent); }
.jd-st.is-bad { color: var(--rep-bad); border-color: color-mix(in srgb, var(--rep-bad) 40%, transparent); background: color-mix(in srgb, var(--rep-bad) 9%, transparent); }
.jd-st.is-warn { color: var(--rep-warn); border-color: color-mix(in srgb, var(--rep-warn) 40%, transparent); background: color-mix(in srgb, var(--rep-warn) 9%, transparent); }
.jd-tab b.is-ok, .jd-tab-d b.is-ok { color: var(--rep-ok); }
.jd-tab b.is-bad, .jd-tab-d b.is-bad { color: var(--rep-bad); }

/* ── Le détail ───────────────────────────────────────────────────────────────────────────────── */
.jd-lecture { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--rep-ink); }
.jd-tab-d td, .jd-tab-d th { white-space: nowrap; }
.jd-tab-d .jd-princ > td { background: var(--rep-tint-2); }
.pg-badge.jd-badge { margin-left: 8px; }
.jd-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--rep-sub); overflow-wrap: anywhere; }

/* ── Verrou de la vitrine (formule Reporting) ────────────────────────────────────────────────── */
.jd-verrou-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.jd-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--rep-hair); background: var(--rep-tint); font: 700 11.5px/1.3 var(--font-family); color: var(--rep-sub);
}
.jd-verrou-r .rep-cta2 { margin-top: 0; }

/* ── « Enregistrer comme décision » (vue Trésorerie, sous l'écart « vos décisions ») ─────────── */
.jd-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; margin-top: 4px; }
.jd-save-b, .jd-save-ok, .jd-save-l {
    appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font: 600 11.5px/1.2 var(--font-family);
    color: var(--brand-strong, var(--brand)); background: color-mix(in srgb, var(--brand) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
}
.jd-save-b:hover, .jd-save-ok:hover, .jd-save-l:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.jd-save-b:focus-visible, .jd-save-ok:focus-visible, .jd-save-l:focus-visible, .jd-save-x:focus-visible, .jd-save-i:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.jd-save-ok { color: var(--brand-contrast, #04121a); background: var(--brand); border-color: var(--brand); }
.jd-save-ok:hover { filter: brightness(1.08); background: var(--brand); }
.jd-save-ok:disabled { opacity: .6; cursor: default; filter: none; }
.jd-save-l { background: transparent; }
.jd-save-x {
    appearance: none; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--o12); background: transparent; cursor: pointer;
    font: 600 11.5px/1.2 var(--font-family); color: var(--mut1);
}
.jd-save-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.jd-save-i {
    flex: 1 1 16rem; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--o12); background: var(--o6); color: var(--sl3); font: 500 12px var(--font-family);
}
.jd-save-i.jd-save-n { flex-basis: 12rem; }
.jd-save-i::placeholder { color: var(--mut1); }
.jd-save-s, .jd-save-m { font-size: 11px; line-height: 1.45; color: var(--mut1); }
.jd-save-m { color: var(--sl3); }

/*  Pastille d'état « ni juste ni fausse » (non attribuable, écart dit) : le Reporting n'a que is-ok / is-bad. */
.jd .rep-chip.is-warn, .t13 .rep-chip.is-warn { border-color: color-mix(in srgb, var(--rep-warn) 36%, transparent); background: color-mix(in srgb, var(--rep-warn) 9%, transparent); }
.jd .rep-chip.is-warn > b, .t13 .rep-chip.is-warn > b { color: var(--rep-warn); }

@media (max-width: 640px) {
    .jd-save-f { flex-direction: column; align-items: stretch; }
    .jd-save-i, .jd-save-i.jd-save-n { flex-basis: auto; }
}