/* ============================================================
   Fichier  : kdp-diag-tableaux.css
   Rôle     : Styles du tableau générique + barre de filtres
              partagés entre plusieurs endroits du module
              KdpAdsPilotPro — l'onglet Budget (Diagnostic.razor,
              scopé), et les composants réutilisables
              CiblagesTableauView / SearchTermsTableauView
              (Components/KdpAdsPilotPro/Components/Shared/).

              Feuille de style GLOBALE (non scopée) volontairement
              — l'isolation CSS de Blazor (.razor.css) ne
              s'applique qu'au balisage écrit dans le même
              composant ; ces classes devant être identiques dans
              plusieurs composants différents, une seule source de
              vérité ici évite 3 copies à resynchroniser à chaque
              changement de style.

              Référencée une fois dans Components/App.razor.
              Préfixe : diag- (même convention que
              Diagnostic.razor.css, dont ces règles ont été
              déplacées).
   ============================================================ */

/* ── TABLEAU GÉNÉRIQUE ────────────────────────────────────── */
.diag-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #1c2638;
}

.diag-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    background: var(--sol-panel, #0e1b2d);
    color: #e6ecf3;
}

.diag-th {
    background: var(--sol-panel-raised, #16263b);
    color: var(--sol-muted, #a7b6ca);
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid #2a3a50;
    white-space: nowrap;
}

.diag-th-tri {
    cursor: pointer;
}

    .diag-th-tri:hover {
        color: #45C4DC;
    }

.diag-th-num {
    text-align: right;
}

.diag-th-large {
    min-width: 200px;
}

.diag-td {
    padding: 7px 10px;
    border-bottom: 1px solid #1c2638;
    vertical-align: middle;
}

/* Une cellule chiffrée ne se coupe JAMAIS (2026-09-13). Elle se brisait
   partout où la colonne était étroite : « 12,79 » sur une ligne et « € » sur
   la suivante, « ▲ » puis « nouveau » en dessous — la hauteur des lignes
   variait d'une ligne à l'autre et le tableau perdait son alignement. C'est
   la COLONNE qui s'élargit maintenant, jamais la valeur qui se scinde ; le
   tableau défile horizontalement si besoin (.diag-table-wrap). */
.diag-td-num {
    text-align: right;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.diag-tr:hover {
    background: var(--sol-panel-raised, #16263b);
}

.diag-tr-inactif {
    opacity: .45;
}

.diag-targeting-nom {
    font-weight: 600;
    color: #e6ecf3;
}

/* Ligne de méta sous le nom du ciblage — passée en flex (2026-09-13).
   Elle était un simple flux de texte : quand la ligne devenait trop longue,
   la coupure tombait n'importe où — « 0,38 » sur une ligne et « € » sur la
   suivante, « ⚠ domine ton » puis « Exact » en dessous. Chaque élément est
   maintenant insécable et c'est la LIGNE qui passe à la suivante, jamais le
   contenu d'un badge ou d'un montant. */
.diag-targeting-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 5px;
    font-size: .65rem;
    color: var(--sol-muted, #a7b6ca);
    margin-top: 3px;
}

    .diag-targeting-meta > * {
        white-space: nowrap;
    }

.diag-meta-sep {
    margin: 0;
    color: #2a3a50;
}

/* Ligne dédiée pour un changement de Bid récent (KdpPilotProV… — Fix 3, voir
   CLAUDE.md "Réorganiser la cellule Ciblage") — même couleur que
   .diag-badge-modif dont elle reprend le rôle, mais sur sa propre ligne sous
   .diag-targeting-meta au lieu d'être noyée parmi les autres badges à puces :
   un changement d'enchère est l'information la plus actionnable de la ligne,
   elle mérite d'être vue d'un coup d'œil, pas cherchée dans une liste. */
.diag-targeting-bid-modif {
    font-size: .65rem;
    color: #45c4dc;
    font-weight: 500;
    margin-top: 3px;
}

/* Colonne "Suggestion" dédiée (Fix 3) : regroupe les 4 badges d'action par
   ciblage (⛔ ne diffuse pas, ⚠ conflit, ▼ à baisser, ▲ à monter) — un
   ciblage peut en cumuler plusieurs, empilés verticalement plutôt que mis
   bout à bout avec des "•" comme avant. */
/* Ne JAMAIS mettre display:flex sur un <td> : il cesse d'être une cellule de
   tableau (hauteur de ligne, vertical-align et bordure perdus — le trait de
   séparation tombait au milieu de la ligne et le fond de .diag-tr-conflit
   s'arrêtait en haut de cette colonne). Les badges s'empilent en display:block,
   la cellule reste une vraie cellule. */
.diag-td-suggestion {
    font-size: .65rem;
    vertical-align: middle;
    width: 220px;
    min-width: 190px;
    max-width: 220px;
    overflow-wrap: anywhere;
}

.diag-td-suggestion > span {
    display: block;
    width: fit-content;   /* le badge garde la largeur de son texte */
    white-space: normal;
    margin-right: 0;
}

.diag-td-suggestion > span + span {
    margin-top: 4px;
}

/* Seule la suggestion est bornée : le tableau et les chiffres gardent leur taille. */
.diag-suggestion-resume {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.diag-suggestion-resume > span {
    max-width: 100%;
    white-space: normal;
    margin: 0;
}

.diag-suggestion-motif {
    color: var(--sol-muted, #a7b6ca);
    line-height: 1.35;
}

.diag-suggestion-enchere {
    color: var(--sol-text, #e6edf7);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.diag-enchere {
    color: #E0A040;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-zero {
    color: var(--sol-muted, #a7b6ca);
}

.diag-kenp-val {
    color: #2EC98A;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-kenp-hint {
    font-size: .62rem;
    color: #2EC98A;
    margin-left: 3px;
}

/* ── ACOS Amazon coloré vs Break-even ────────────────────── */
.diag-acos-ok {
    color: #2EC98A;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-acos-nok {
    color: #ef5a5a;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

.diag-acos-limit {
    color: #E0A040;
    font-weight: 700;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
}

/* ── FILTRES CIBLAGES / TERMES ───────────────────────────── */
.diag-ciblage-bar {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── FILTRES — refonte 2026-09-13 ─────────────────────────────
   Chaque filtre était une boîte autonome : bordure, fond, couleur
   d'accent, plus une pastille grise pour le compteur. Six boîtes et
   six pastilles côte à côte pour un contrôle qui ne fait que
   restreindre une liste — d'où cet aspect à la fois chargé et terne,
   chaque élément parlant aussi fort que son voisin.

   Ils deviennent un sélecteur segmenté : UNE boîte, des segments sans
   contour, et seul l'actif se détache par un relief. Les tailles de
   police et de padding ne bougent pas — c'est le nombre de bordures
   qui baisse, pas la lisibilité. */
.diag-filtres {
    display: inline-flex;
    gap: 2px;
    background: var(--sol-panel, #0e1b2d);
    border: 1px solid #1c2638;
    border-radius: 7px;
    padding: 2px;
}

.diag-filtre {
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .70rem;
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s;
}

    .diag-filtre:hover {
        background: rgba(255,255,255,.04);
        color: #e6ecf3;
    }

/* Le segment actif se lit au relief plutôt qu'à la couleur : une
   surface soulevée et du texte franc suffisent, sans mobiliser
   l'orange qui reste réservé aux vraies actions. */
.diag-filtre-actif {
    background: #232e3d;
    color: #e6ecf3;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Le compteur était une pastille grise sur fond gris — un deuxième
   objet pour une simple information de volume. Il redevient du texte. */
.diag-filtre-count {
    background: transparent;
    color: var(--sol-muted, #a7b6ca);
    font-size: .60rem;
    font-variant-numeric: tabular-nums;
    padding: 0;
    border-radius: 0;
}

.diag-filtre-actif .diag-filtre-count {
    color: #FF9900;
}

/* Un compteur à zéro n'a rien à dire : il s'efface sans disparaître. */
.diag-filtre-count-zero {
    opacity: .4;
}

/* Second niveau (type de ciblage) : même mécanique, un cran plus
   discret. Le filet de séparation disparaît — deux sélecteurs
   distincts se lisent déjà comme deux objets. */
.diag-filtres-type {
    margin-top: 2px;
}

.diag-filtre-type {
    font-size: .65rem;
    padding: 3px 8px;
    color: var(--sol-muted, #a7b6ca);
}

    .diag-filtre-type:hover {
        color: #e6ecf3;
    }

.diag-filtre-type-actif {
    background: #232e3d;
    color: #e6ecf3;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

    /* Turquoise sur le seul compteur : il distingue ce second niveau du
       premier sans introduire une deuxième couleur pleine. */
    .diag-filtre-type-actif .diag-filtre-count {
        color: #45C4DC;
    }

.diag-recherche {
    background: var(--sol-panel-raised, #16263b);
    border: 1px solid #2a3a50;
    border-radius: 6px;
    color: #e6ecf3;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .76rem;
    padding: 6px 10px;
    flex: 1;
    min-width: 180px;
    max-width: 300px;
}

    .diag-recherche:focus {
        outline: none;
        border-color: #FF9900;
        box-shadow: 0 0 0 2px rgba(255,153,0,.10);
    }

    .diag-recherche::placeholder {
        color: var(--sol-muted, #a7b6ca);
    }

.diag-vide {
    text-align: center;
    padding: 32px;
    color: var(--sol-muted, #a7b6ca);
    font-size: .82rem;
}

/* ── Cascade de non-diffusion (campagne/groupe/annonce suspendu) ── */
.diag-cascade-badge {
    color: var(--amber);
    font-weight: 600;
}

@media (max-width: 640px) {
    .diag-ciblage-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .diag-recherche {
        max-width: none;
        width: 100%;
    }

    .diag-table {
        font-size: .70rem;
    }

    .diag-th,
    .diag-td {
        padding: 6px 7px;
    }
}

/* ============================================================
   PASTILLES DE TYPE DE CORRESPONDANCE — ajout 2026-09-13
   ------------------------------------------------------------
   Colonne "Ciblage", ligne de méta. Reprend le code couleur de la
   maquette : chaque match type a sa teinte, tenue par un fond
   translucide de la même couleur pour rester lisible sur le fond
   sombre sans crier plus fort que la valeur de la ligne.

   Volontairement PAS touché ici :
   - .diag-lien-fiche (turquoise des boutons "N termes ›")
   - .diag-enchere (couleur de l'enchère)
   ============================================================ */
.diag-pastille {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-family: var(--sol-font, "Segoe UI", system-ui, sans-serif);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: baseline;
}

/* Exact = le ciblage que tu contrôles au mot près → vert */
.diag-pastille-exact {
    background: rgba(46, 201, 138, .15);
    color: #2EC98A;
}

/* Phrase = intermédiaire → bleu */
.diag-pastille-phrase {
    background: rgba(57, 135, 229, .15);
    color: #5a9ef0;
}

/* Broad = le plus large, celui qui capte ce que tu n'as pas prévu → ambre */
.diag-pastille-broad {
    background: rgba(224, 160, 64, .15);
    color: #E0A040;
}

/* Auto = Amazon décide → violet, hors de l'échelle Exact/Phrase/Broad */
.diag-pastille-auto {
    background: rgba(155, 124, 224, .15);
    color: #9b7ce0;
}

/* Catégorie / produit : pas de match type au sens mot-clé → neutre */
.diag-pastille-neutre {
    background: rgba(138, 155, 176, .13);
    color: var(--sol-muted, #a7b6ca);
}

/* Densité réservée au tableau des ciblages, sans changer son conteneur. */
.kdp-shell .diag-table-ciblages .diag-th,
.kdp-shell .diag-table-ciblages .diag-td { padding-left: 6px; padding-right: 6px; }
.kdp-shell .diag-table-ciblages .diag-th { letter-spacing: .025em; }
.kdp-shell .diag-table-ciblages .diag-th-large { min-width: 160px; }
.kdp-shell .diag-table-ciblages .diag-td-targeting { max-width: 200px; overflow-wrap: anywhere; }
.kdp-shell .diag-table-ciblages .diag-td-suggestion { width: 155px; min-width: 140px; max-width: 170px; }
.kdp-shell .diag-table-ciblages .diag-suggestion-resume { gap: 2px; }
.kdp-shell .diag-table-ciblages .diag-suggestion-resume > span:first-child {
    border: 0; border-radius: 5px; padding: 3px 7px; font-weight: 650;
}
.diag-ciblage-dates > span { display: block; font-size: .65rem; line-height: 1.6; }
.diag-mod-tag { color: var(--sol-accent, #FF9900); }
/* Ligne d'enchère : même bleu que l'ancienne ligne « Bid a → b » (.diag-targeting-bid-modif) */
.diag-ciblage-dates > span.diag-mod-bid { color: #45c4dc; font-weight: 500; }
/* Lignes d'information sous « Mod. » : elles passent à la ligne au lieu d'élargir la colonne */
.diag-ciblage-dates > span.diag-mod-ligne { font-size: .62rem; white-space: normal; max-width: 9.5rem; margin-left: auto; line-height: 1.35; }
.diag-ciblage-dates > span:first-child { color: var(--sol-muted, #a7b6ca); }
.diag-suggestion-ouvrir {
    display: inline-block; padding: 2px 0; margin-top: 2px;
    border: 0; background: transparent; color: #45c4dc; font: inherit; cursor: pointer;
}
.diag-suggestion-ouvrir:hover { text-decoration: underline; }
.diag-suggestion-ouvrir:focus-visible { outline: 2px solid #45c4dc; outline-offset: 3px; }

/* ── Bandeaux d'en-tête du tableau des ciblages : analyse du moteur (indépendante des dates) / période choisie ── */
.diag-table-ciblages .diag-bandeau-ligne th { padding-top: 8px; padding-bottom: 6px; border-bottom: 0; }
.diag-table-ciblages .diag-bandeau { text-align: center; font-weight: 600; font-size: .78rem; letter-spacing: .02em; }
.diag-table-ciblages .diag-bandeau span { display: block; }
.diag-table-ciblages .diag-bandeau small { display: block; font-weight: 400; font-size: .7rem; opacity: .75; margin-top: 1px; }
.diag-table-ciblages .diag-bandeau-moteur { color: var(--sol-accent, #ff9900); border-bottom: 2px solid var(--sol-accent, #ff9900) !important; text-align: center; white-space: normal; line-height: 1.25; }
.diag-table-ciblages .diag-bandeau-periode { color: var(--sol-text, #e8ecf2); text-align: center; white-space: nowrap; border-bottom: 2px solid var(--sol-muted, #a7b6ca) !important; }
.diag-table-ciblages .diag-bandeau-vide { border-bottom: 0 !important; }