/* ============================================================
   Fichier  : kdp-diag-fiche.css
   Rôle     : Phase 3 de la refonte Diagnostic (voir
              PLAN-REFONTE-DIAGNOSTIC.md) — panneau latéral
              (FicheDrawer/FicheCiblage/FicheTerme), boîtes de
              verdict, grille KPI, et badges liés au lien
              ciblage ↔ terme (conflit d'enchères, candidats
              exclusion/récolte, "déjà en Exact ?", "dernière
              modif."). Utilisés aussi bien dans le panneau que
              dans CiblagesTableauView / SearchTermsTableauView
              (badges sur les lignes de tableau).

              Feuille de style GLOBALE (non scopée), même raison
              que kdp-diag-tableaux.css : ces classes sont
              partagées entre plusieurs composants différents.
              Référencée une fois dans Components/App.razor.
              Palette reprise de wwwroot/app.css et
              kdp-diag-tableaux.css pour rester cohérent avec le
              reste du module (pas de nouvelles couleurs).
   ============================================================ */

/* ── SCRIM + DRAWER ───────────────────────────────────────── */
.fiche-scrim {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 11, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
    z-index: 1040;
}

.fiche-scrim-on {
    opacity: 1;
    pointer-events: auto;
}

.fiche-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(680px, 95vw);
    z-index: 1050;
    background: var(--sol-panel, #0e1b2d);
    border-left: 1px solid #2a3a50;
    transform: translateX(102%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 50px rgba(0, 0, 0, .45);
    outline: none;
}

.fiche-drawer-on {
    transform: none;
}

.fiche-drawer-head {
    padding: 14px 18px;
    border-bottom: 1px solid #2a3a50;
    background: var(--sol-panel-raised, #16263b);
}

.fiche-drawer-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: var(--sol-muted, #a7b6ca);
    margin-bottom: 7px;
    flex-wrap: wrap;
}

    .fiche-drawer-crumb button {
        background: none;
        border: none;
        color: #45c4dc;
        font-size: .72rem;
        cursor: pointer;
        padding: 0;
    }

        .fiche-drawer-crumb button:hover {
            text-decoration: underline;
        }

.fiche-drawer-crumb-now {
    color: #e6ecf3;
    font-weight: 500;
}

.fiche-drawer-crumb-sep {
    color: #2a3a50;
}

.fiche-drawer-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .fiche-drawer-title h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        color: #e6ecf3;
        letter-spacing: -.01em;
    }

.fiche-drawer-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--sol-muted, #a7b6ca);
    cursor: pointer;
    padding: 0 4px;
}

    .fiche-drawer-close:hover {
        color: #e6ecf3;
    }

.fiche-drawer-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

/* ── SECTIONS / KPIS ──────────────────────────────────────── */
.fiche-sec {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sol-muted, #a7b6ca);
    font-weight: 600;
    margin: 22px 0 9px;
}

    .fiche-sec:first-child {
        margin-top: 0;
    }

.fiche-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 7px;
}

.fiche-kpi {
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 6px;
    padding: 8px 10px;
}

.fiche-kpi-l {
    font-size: .62rem;
    color: var(--sol-muted, #a7b6ca);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fiche-kpi-v {
    font-size: .92rem;
    font-weight: 600;
    color: #e6ecf3;
    margin-top: 2px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
}

.fiche-kpi-amber {
    color: #e0a040;
}

/* ── VERDICT ──────────────────────────────────────────────── */
.fiche-verdict {
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: .78rem;
    line-height: 1.55;
}

.fiche-verdict-warn {
    background: rgba(224, 86, 106, .09);
    border: 1px solid rgba(224, 86, 106, .3);
}

.fiche-verdict-good {
    background: rgba(46, 201, 138, .08);
    border: 1px solid rgba(46, 201, 138, .28);
}

.fiche-verdict-info {
    background: rgba(69, 196, 220, .08);
    border: 1px solid rgba(69, 196, 220, .28);
}

.fiche-verdict-ico {
    font-size: 1rem;
    line-height: 1.2;
    flex: 0 0 auto;
}

.fiche-verdict b {
    display: block;
    margin-bottom: 3px;
    font-size: .82rem;
    color: #e6ecf3;
}

.fiche-verdict-why {
    color: var(--sol-muted, #a7b6ca);
}

.fiche-reco {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #2a3a50;
    color: var(--sol-muted, #a7b6ca);
    font-size: .74rem;
}

    .fiche-reco b {
        display: inline;
        color: #FF9900;
        font-size: .74rem;
    }

.fiche-self {
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
    font-style: italic;
    margin-top: 8px;
}

/* ── HISTORIQUE ───────────────────────────────────────────── */
.fiche-hist {
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.fiche-hist-old {
    color: #ef5a5a;
}

.fiche-hist-new {
    color: #2ec98a;
}

/* Colonne « Cycle » de l'historique : oui = l'événement fait repartir le suivi */
.fiche-cycle { font-size: .72rem; white-space: nowrap; }
.fiche-cycle-oui { color: var(--sol-accent, #FF9900); font-weight: 600; }
.fiche-cycle-non { color: var(--sol-muted, #a7b6ca); }

/* ── LIGNES / BADGES PARTAGÉS (tableaux Ciblages / Termes) ─── */
.diag-tr-clic {
    cursor: pointer;
}

.diag-tr-conflit {
    background: rgba(224, 86, 106, .06);
}

.diag-lien-fiche {
    color: #45c4dc;
    font-size: .72rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid rgba(69, 196, 220, .28);
    background: rgba(69, 196, 220, .07);
    white-space: nowrap;
    cursor: pointer;
}

    .diag-lien-fiche:hover {
        background: rgba(69, 196, 220, .16);
    }

.diag-badge-modif {
    color: #45c4dc;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-weight: 500;
    font-size: .65rem;
}

.diag-badge-conflit {
    color: #ef5a5a;
    font-weight: 600;
    font-size: .65rem;
}

.diag-badge-candidat-exclusion {
    display: inline-block;
    color: #ef5a5a;
    background: rgba(224, 86, 106, .12);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
}

.diag-badge-candidat-recolte {
    display: inline-block;
    color: #2ec98a;
    background: rgba(46, 201, 138, .12);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
}

/* Badges "à baisser"/"à monter" par ligne de ciblage (KdpPilotProV26) — même
   forme que candidat-exclusion/candidat-recolte ci-dessus, couleur alignée sur
   le Niveau de l'action (Amber/Vert), pas sur le rouge des termes. */
.diag-badge-ciblage-baisser {
    display: inline-block;
    color: #E0A040;
    background: rgba(224, 160, 64, .12);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
}

.diag-badge-ciblage-monter {
    display: inline-block;
    color: #2ec98a;
    background: rgba(46, 201, 138, .12);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
}

/* Ciblage sans vente (KdpPilotProV27) — actif = même rouge que
   candidat-exclusion (fuite active, urgent) ; historique = gris neutre,
   délibérément moins voyant : c'est un signal informatif, pas une urgence. */
.diag-badge-ciblage-sans-vente-actif {
    display: inline-block;
    color: #ef5a5a;
    background: rgba(224, 86, 106, .12);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
}

.diag-badge-ciblage-sans-vente-historique {
    display: inline-block;
    color: var(--sol-muted, #a7b6ca);
    background: rgba(167, 182, 202, .12);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
}

/* Fiche ciblage — décision du moteur et fenêtres de décision (P6) */
.fiche-decision {
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid var(--sol-line, #22304a);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.fiche-decision-texte {
    white-space: pre-line;   /* le texte « Pourquoi ? » de la V4 sépare Récent / Passé / 15 derniers jours par des retours à la ligne */
    margin: 8px 0 4px;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--sol-text, #e6edf7);
}

/* « Pourquoi ? » structuré (règle Vf §14.2) : libellé à gauche, valeur à droite */
.fiche-pourquoi {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 12px;
    margin: 8px 0 4px;
    font-size: .76rem;
}

.fiche-pourquoi dt {
    color: var(--sol-muted, #a7b6ca);
    font-weight: 500;
}

.fiche-pourquoi dd {
    margin: 0;
    color: var(--sol-text, #e6edf7);
}

.fiche-decision-ligne {
    margin: 4px 0 0;
    font-size: .78rem;
    color: var(--sol-text, #e6edf7);
}

.fiche-decision-note {
    display: inline-block;
    margin-left: 6px;
    font-size: .68rem;
    color: var(--sol-muted, #a7b6ca);
    font-weight: 400;
}

.fiche-fenetre-prov td {
    opacity: .7;
    font-style: italic;
}

/* État d'information (garder, données insuffisantes, aucune diffusion, déjà en pause) : discret, jamais compté */
.diag-badge-ciblage-info {
    display: inline-block;
    color: var(--sol-muted, #a7b6ca);
    background: transparent;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 500;
    margin-right: 4px;
    white-space: nowrap;
    opacity: .8;
}

.diag-badge-ciblage-surveiller {
    display: inline-block;
    color: var(--sol-muted, #a7b6ca);
    background: rgba(167, 182, 202, .12);
    border: 1px dashed rgba(167, 182, 202, .45);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
}

/* Règle Vf §14.1 : « Test en cours » (une baisse corrective est mesurée) et « Aucune diffusion » (distincts de « À garder ») */
.diag-badge-ciblage-test {
    display: inline-block;
    color: #5aa9ef;
    background: rgba(90, 169, 239, .12);
    border: 1px solid rgba(90, 169, 239, .4);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
}

.diag-badge-ciblage-aucune-diffusion {
    display: inline-block;
    color: var(--sol-muted, #a7b6ca);
    background: transparent;
    border: 1px dotted rgba(167, 182, 202, .45);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .62rem;
    font-weight: 500;
    margin-right: 4px;
    white-space: nowrap;
    opacity: .85;
}

/* Bouton « Action appliquée » (règle Vf §7) et avertissement secondaire d'une suggestion */
.diag-action-appliquee {
    display: inline-block;
    background: transparent;
    color: var(--sol-text, #e6edf7);
    border: 1px solid var(--sol-line, #22304a);
    border-radius: 3px;
    padding: 0 6px;
    margin-left: 2px;
    font-size: .6rem;
    cursor: pointer;
    white-space: nowrap;
}

.diag-action-appliquee:hover {
    border-color: #5aa9ef;
    color: #5aa9ef;
}

.diag-suggestion-avert {
    color: #E0A040;
    font-size: .7rem;
    margin-right: 4px;
    cursor: help;
}

.diag-badge-exact-oui {
    display: inline-block;
    color: #2ec98a;
    background: rgba(46, 201, 138, .12);
    border-radius: 3px;
    padding: 1px 7px;
    font-size: .68rem;
    font-weight: 600;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-badge-exact-non {
    display: inline-block;
    color: var(--sol-muted, #a7b6ca);
    background: rgba(255, 255, 255, .05);
    border-radius: 3px;
    padding: 1px 7px;
    font-size: .68rem;
}

.fiche-suivi-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

    .fiche-suivi-bar .diag-suivi-btn {
        font-size: .72rem;
        border: 1px solid #2a3a50;
        border-radius: 20px;
        padding: 3px 10px;
    }

.diag-cmd-hint {
    display: block;
    font-size: .62rem;
    color: var(--sol-muted, #a7b6ca);
    margin-top: 1px;
}

@media (max-width: 640px) {
    .fiche-drawer {
        width: 100vw;
    }
}

/* ── Pertinence d'un terme (V42) : sélecteur à trois états ── */
.pert-sel { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pert-btn {
    min-height: 36px; padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: .8rem;
    background: transparent; color: var(--sol-muted, #a7b6ca); border: 1px solid var(--sol-line, #22304a);
}
.pert-sel-compact .pert-btn { min-height: 28px; min-width: 32px; padding: 2px 8px; font-size: .75rem; }
.pert-btn:hover { border-color: var(--sol-accent, #FF9900); }
.pert-btn:focus-visible { outline: 2px solid var(--sol-accent, #FF9900); outline-offset: 2px; }
.pert-btn-actif { color: #111; font-weight: 600; }
.pert-btn-neutre { background: var(--sol-muted, #a7b6ca); border-color: var(--sol-muted, #a7b6ca); }
.pert-btn-ok { background: #2ec98a; border-color: #2ec98a; }
.pert-btn-non { background: #ef5a5a; border-color: #ef5a5a; }

/* Exclusion proposée pour un terme non pertinent */
.fiche-exclusion { margin: 10px 0; padding: 10px 12px; border-left: 4px solid #ef5a5a; background: var(--sol-panel, #0e1b2d); border-radius: 6px; font-size: .85rem; }
.fiche-exclusion-note { color: var(--sol-muted, #a7b6ca); font-size: .75rem; }
.fiche-exclusion-liste { margin: 4px 0 8px; padding-left: 1.2rem; }
.fiche-exclusion-alerte { color: #E0A040; }
.fiche-exclusion-confirm { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: .8rem; color: var(--sol-muted, #a7b6ca); }

/* ── « Signaler un problème » ── */
.signal-bloc { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--sol-line, #22304a); }
.signal-ouvrir { min-height: 36px; background: none; border: 0; color: var(--sol-muted, #a7b6ca); cursor: pointer; font-size: .8rem; text-decoration: underline dotted; }
.signal-ouvrir:hover, .signal-ouvrir:focus-visible { color: var(--sol-accent, #FF9900); }
.signal-panneau { margin-top: 6px; }
.signal-label { display: block; font-size: .75rem; color: var(--sol-muted, #a7b6ca); margin-bottom: 4px; }
.signal-texte {
    width: 100%; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: .85rem;
    background: var(--sol-panel, #0e1b2d); color: var(--sol-text, #e6edf7); border: 1px solid var(--sol-line, #22304a);
}
.signal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.signal-btn { min-height: 40px; padding: 6px 14px; border-radius: 8px; cursor: pointer; background: transparent; color: var(--sol-text, #e6edf7); border: 1px solid var(--sol-line, #22304a); }
.signal-btn-primaire { background: var(--sol-accent, #FF9900); border-color: var(--sol-accent, #FF9900); color: #111; font-weight: 600; }
.signal-btn:disabled { opacity: .6; cursor: default; }
.signal-message { font-size: .8rem; color: var(--sol-muted, #a7b6ca); }

/* Blocs de décision lisibles dans le panneau, sans tableau horizontal. */
.fiche-justification { margin-top: 12px; border-top: 1px solid var(--sol-line, #22304a); padding-top: 10px; }
.fiche-justification summary, .fiche-periode-plus summary { cursor: pointer; color: #45c4dc; }
.fiche-periodes { display: grid; gap: 10px; }
.fiche-periode { padding: 14px; border: 1px solid var(--sol-line, #22304a); border-radius: 8px; min-width: 0; }
.fiche-periode header h3 { margin: 0 0 3px; font-size: .9rem; }
.fiche-periode header > span, .fiche-periode-dates, .fiche-periode-vide {
    color: var(--sol-muted, #a7b6ca); font-size: .72rem; line-height: 1.5;
}
.fiche-periode-dates { margin: 7px 0 12px; }
.fiche-periode-vide { margin: 10px 0 0; }
.fiche-periode-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.fiche-periode-chiffres dt { color: var(--sol-muted, #a7b6ca); font-size: .68rem; font-weight: 400; }
.fiche-periode-chiffres dd { margin: 3px 0 0; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fiche-periode-plus { margin-top: 12px; font-size: .7rem; }
.fiche-periode-plus[open] summary { margin-bottom: 12px; }
.fiche-periode-provisoire { border-style: dashed; }
.fiche-decision > [class*="diag-badge"] { white-space: normal; }
@media (max-width: 480px) {
    .fiche-periode-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fiche-pourquoi { grid-template-columns: 1fr; }
}

/* Une explication par bloc, avec un début et une fin visibles. */
.fiche-decision-synthese {
    padding: 12px; margin: 12px 0; border-radius: 6px;
    background: var(--sol-panel-raised, #16263b); font-weight: 600; line-height: 1.5;
}
.fiche-explication-blocs { display: grid; gap: 8px; margin: 12px 0 18px; }
.fiche-explication-bloc {
    padding: 12px 14px; border: 1px solid var(--sol-line, #22304a);
    border-left: 3px solid #45c4dc; border-radius: 6px;
}
/* Bloc « Détails de calcul » (À baisser) : une ligne par information de vérification, discret */
.fiche-explication-details { margin: 6px 0 0; padding-left: 18px; font-size: .78rem; color: var(--sol-muted, #a7b6ca); }
.fiche-explication-details li { margin: 2px 0; }
.fiche-explication-bloc h4 {
    margin: 0 0 6px; color: var(--sol-muted, #a7b6ca); font-size: .72rem;
    font-weight: 600; line-height: 1.4;
}
.fiche-explication-bloc p { margin: 0; font-size: .8rem; line-height: 1.65; overflow-wrap: anywhere; }
.fiche-justification[open] { padding-bottom: 12px; border-bottom: 1px solid var(--sol-line, #22304a); margin-bottom: 16px; }

/* ── Frise fixe à cinq zones (lot L1) : Passé | Référence | ▲ modification | Décision | Provisoires ── */
.fiche-frise { margin: 4px 0 14px; }
.fiche-frise-zones { display: flex; align-items: stretch; gap: 6px; }
.fiche-frise-zone {
    flex: 1 1 0; min-width: 0; padding: 10px 11px; border: 1px solid var(--sol-line, #22304a); border-radius: 8px;
    display: flex; flex-direction: column; gap: 3px; background: var(--sol-panel, #0e1b2d);
}
.fiche-frise-zone b { font-size: .8rem; }
.fiche-frise-dates { font-size: .7rem; color: var(--sol-muted, #a7b6ca); line-height: 1.35; }
.fiche-frise-zone small { font-size: .68rem; color: var(--sol-muted, #a7b6ca); line-height: 1.35; }
.fiche-frise-passe { flex-grow: 1.15; }
.fiche-frise-reference { flex-grow: 1.15; }
.fiche-frise-decision { flex-grow: 1.15; border-top: 2px solid var(--sol-accent, #ff9900); }
.fiche-frise-decision b { color: var(--sol-accent, #ff9900); }
.fiche-frise-provisoire { border-style: dashed; }
.fiche-frise-attente { color: var(--sol-accent, #ff9900) !important; }
.fiche-frise-modif {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0 2px; color: var(--sol-accent, #ff9900); font-size: .8rem; line-height: 1;
}
.fiche-frise-modif small { font-size: .62rem; color: var(--sol-muted, #a7b6ca); white-space: nowrap; }
.fiche-frise-legende { margin: 7px 0 0; font-size: .68rem; color: var(--sol-muted, #a7b6ca); line-height: 1.45; }
@media (max-width: 760px) {
    .fiche-frise-zones { flex-direction: column; }
    .fiche-frise-modif { flex-direction: row; justify-content: flex-start; padding: 2px 0; }
}

/* ── EN-TÊTE ET ONGLETS DE LA FICHE CIBLAGE ───────────────── */
.fiche-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 8px; font-size: .78rem; color: var(--sol-muted, #a7b6ca); }
.fiche-entete-type { font-weight: 700; color: var(--sol-text, #e8eef7); }
.fiche-entete-camp { word-break: break-all; }
.fiche-entete-bid { color: var(--sol-accent, #FF9900); font-weight: 600; }
.fiche-entete-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 10px; }
.fiche-onglets { margin: 8px 0 12px; }
.fiche-onglet-note { font-size: .72rem; font-style: italic; color: var(--sol-muted, #a7b6ca); margin: 0 0 10px; }
.fiche-onglet-note-moteur { color: var(--sol-accent, #FF9900); }