/* ============================================================
   Fichier  : kdp-dashboard.css
   Rôle     : Styles globaux de la page Dashboard (préfixe dash-) et de
              CarteKpi. Global (pas .razor.css) car partagé entre la page et
              ses composants. Couleurs = variables --dash-* de solyvr-theme.css.
   ============================================================ */

.dash-page {
    max-width: 1440px;
    margin: 0 auto;
    color: var(--sol-text, #ededee);
}

.dash-header { border-bottom: 1px solid var(--sol-line, #333336); }
.dash-title { margin: 0; font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); font-weight: 650; letter-spacing: -.035em; color: var(--sol-text, #ededee); }
.dash-subtitle { margin: .25rem 0 0; color: var(--sol-muted, #b0b0b6); font-size: .85rem; }

.dash-panel {
    background: var(--sol-panel, #151516);
    border: 1px solid var(--sol-line, #333336);
    border-radius: 12px;
    padding: 14px 16px;
}

.dash-section-titre {
    margin: 22px 0 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sol-muted, #b0b0b6);
}

/* ── Barre de période ─────────────────────────────────────── */
.dash-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-raccourcis { display: flex; gap: 4px; flex-wrap: wrap; }
.dash-raccourci {
    background: transparent;
    border: 1px solid var(--sol-line, #333336);
    border-radius: 6px;
    color: var(--sol-muted, #b0b0b6);
    font-size: .78rem;
    padding: 6px 10px;
    cursor: pointer;
}
.dash-raccourci:hover { border-color: var(--dash-orange); color: var(--dash-orange); }
.dash-raccourci-actif {
    background: rgba(241,175,61,.12);
    border-color: var(--dash-orange);
    color: var(--dash-orange);
    font-weight: 700;
}
.dash-dates { display: flex; align-items: center; gap: 6px; }
.dash-dates-sep { color: var(--sol-muted, #b0b0b6); }
.dash-input-date {
    background: var(--sol-panel-raised, #202022);
    border: 1px solid var(--sol-line, #333336);
    border-radius: 6px;
    color: var(--sol-text, #ededee);
    font-size: .78rem;
    padding: 6px 8px;
}
.dash-input-date:focus { outline: none; border-color: var(--dash-orange); }
.dash-btn-actualiser {
    margin-left: auto;
    background: var(--dash-orange);
    color: #000;
    border: none;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 700;
    padding: 7px 14px;
    cursor: pointer;
}
.dash-btn-actualiser:hover:not(:disabled) { opacity: .85; }
.dash-btn-actualiser:disabled { opacity: .35; cursor: not-allowed; }

.dash-erreur {
    background: rgba(237,147,143,.10);
    border: 1px solid rgba(237,147,143,.35);
    color: var(--dash-negatif);
    border-radius: 8px;
    font-size: .82rem;
    padding: 12px 14px;
}

/* ── Cartes KPI ───────────────────────────────────────────── */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.dash-kpi {
    background: var(--sol-panel, #151516);
    border: 1px solid var(--sol-line, #333336);
    border-top: 3px solid var(--sol-line, #333336);
    border-radius: 12px;
    padding: 14px 16px 12px;
    min-width: 0;
}
.dash-kpi-orange    { border-top-color: var(--dash-orange); }
.dash-kpi-ads       { border-top-color: var(--dash-ads); }
.dash-kpi-organique { border-top-color: var(--dash-organique); }
.dash-kpi-positif   { border-top-color: var(--dash-positif); }
.dash-kpi-negatif   { border-top-color: var(--dash-negatif); }

.dash-kpi-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-kpi-titre { font-size: .82rem; font-weight: 650; color: var(--sol-text, #ededee); }
.dash-kpi-ico { color: var(--sol-muted, #b0b0b6); font-size: .9rem; }
.dash-kpi-val {
    margin: 10px 0 4px;
    font-size: 1.9rem;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.dash-kpi-orange .dash-kpi-val    { color: var(--dash-orange); }
.dash-kpi-ads .dash-kpi-val       { color: var(--dash-ads); }
.dash-kpi-organique .dash-kpi-val { color: var(--dash-organique); }
.dash-kpi-positif .dash-kpi-val   { color: var(--dash-positif); }
.dash-kpi-negatif .dash-kpi-val   { color: var(--dash-negatif); }
.dash-kpi-val-vide { color: var(--sol-muted, #b0b0b6) !important; }
.dash-kpi-note { font-size: .78rem; color: var(--sol-muted, #b0b0b6); min-height: 1.2em; }

/* ── Bandeau d'indicateurs secondaires ────────────────────── */
.dash-bandeau {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    align-items: baseline;
    margin-top: 12px;
}
.dash-bandeau-item { font-size: .85rem; color: var(--sol-muted, #b0b0b6); }
.dash-bandeau-item strong { color: var(--sol-text, #ededee); margin-left: 8px; font-size: .95rem; }
.dash-pos { color: var(--dash-positif) !important; }
.dash-neg { color: var(--dash-negatif) !important; }
.dash-partiel {
    margin-left: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--dash-orange);
}

@media (max-width: 600px) {
    .dash-btn-actualiser { margin-left: 0; }
    .dash-kpi-val { font-size: 1.6rem; }
}

/* ── Tableau détaillé par livre ───────────────────────────── */
.dash-table-wrap { padding: 0; overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .82rem; white-space: nowrap; }
.dash-table th, .dash-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--sol-line, #333336);
}
.dash-table th {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sol-muted, #b0b0b6);
    font-weight: 700;
}
.dash-table tbody tr:hover { background: var(--sol-panel-raised, #202022); }
.dash-table tfoot td { font-weight: 700; border-bottom: none; border-top: 1px solid var(--sol-line, #333336); }
.dash-t-titre { font-weight: 700; }
.dash-t-num { text-align: right; }
.dash-t-vide { color: var(--sol-muted, #b0b0b6); text-align: center; }
.dash-t-orange { color: var(--dash-orange); }
.dash-t-link { color: var(--dash-orange); text-decoration: none; font-size: .78rem; white-space: nowrap; }
.dash-t-link:hover { text-decoration: underline; }

/* ── Graphique d'évolution + origine des ventes ───────────── */
.dash-ligne-graphiques {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 960px) { .dash-ligne-graphiques { grid-template-columns: minmax(0, 1fr); } }

.dash-evo-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dash-evo-titre { font-size: 1.05rem; font-weight: 700; }
.dash-evo-sous { font-size: .8rem; color: var(--sol-muted, #b0b0b6); margin-top: 2px; }
.dash-evo-note { font-size: .75rem; color: var(--sol-muted, #b0b0b6); margin-top: 6px; }
.dash-evo-vide { padding: 40px 0; text-align: center; color: var(--sol-muted, #b0b0b6); font-size: .85rem; }

.dash-onglets {
    display: flex;
    gap: 2px;
    background: var(--sol-bg, #0b0b0c);
    border: 1px solid var(--sol-line, #333336);
    border-radius: 10px;
    padding: 3px;
}
.dash-onglet {
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--sol-muted, #b0b0b6);
    font-size: .82rem;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
}
.dash-onglet:hover { color: var(--sol-text, #ededee); }
.dash-onglet-actif { background: rgba(241,175,61,.16); color: var(--dash-orange); }

/* ── Par livre : barres et rentabilité ────────────────────── */
.dash-par-livre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.dash-barres-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dash-barres-total { font-size: 1.15rem; font-weight: 750; white-space: nowrap; }
.dash-barres-total-orange { color: var(--dash-orange); }
.dash-barres-total-ads { color: var(--dash-ads); }
.dash-barres-total-organique { color: var(--dash-organique); }
.dash-barres-total-positif { color: var(--dash-positif); }
.dash-barres { margin-top: 14px; display: grid; gap: 12px; }
.dash-barre-ligne {
    display: grid;
    grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
}
.dash-barre-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-barre-piste { display: block; height: 12px; border-radius: 6px; background: var(--sol-panel-raised, #202022); overflow: hidden; }
.dash-barre-remplie { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.dash-barre-orange { background: var(--dash-orange); }
.dash-barre-ads { background: var(--dash-ads); }
.dash-barre-organique { background: var(--dash-organique); }
.dash-barre-positif { background: var(--dash-positif); }
.dash-barre-valeur { font-weight: 700; text-align: right; white-space: nowrap; }
.dash-barres-pied { margin-top: 14px; font-size: .75rem; color: var(--sol-muted, #b0b0b6); }


.dash-surv-ligne {
    display: grid;
    grid-template-columns: 14px minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sol-line, #333336);
    font-size: .85rem;
}
.dash-surv-ligne:last-of-type { border-bottom: none; }
.dash-surv-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .85rem; }
.dash-surv-motif { color: var(--sol-muted, #b0b0b6); }
.dash-surv-montant { font-weight: 700; white-space: nowrap; text-align: right; }
.dash-surv-rien { color: var(--sol-muted, #b0b0b6); font-size: .85rem; }
@media (max-width: 640px) { .dash-surv-ligne { grid-template-columns: 14px minmax(0, 1fr) auto; } .dash-surv-motif { grid-column: 2 / 4; grid-row: 2; } }

.dash-origine-total { font-size: 2.6rem; font-weight: 750; text-align: center; margin: 14px 0 0; line-height: 1.1; }
.dash-origine-lib { text-align: center; color: var(--sol-muted, #b0b0b6); font-size: .85rem; margin-bottom: 14px; }
.dash-origine-barre { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: var(--sol-panel-raised, #202022); }
.dash-origine-ads { background: var(--dash-ads); }
.dash-origine-orga { background: var(--dash-organique); }
.dash-origine-legende { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.dash-origine-leg { font-size: .8rem; color: var(--sol-muted, #b0b0b6); }
.dash-origine-leg b { display: block; font-size: 1.5rem; color: var(--sol-text, #ededee); margin-top: 2px; }
.dash-origine-leg small { font-size: .78rem; font-weight: 400; color: var(--sol-muted, #b0b0b6); }
.dash-puce { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dash-puce-ads { background: var(--dash-ads); }
.dash-puce-orga { background: var(--dash-organique); }
.dash-origine-phrase {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--sol-panel-raised, #202022);
    border-radius: 10px;
    font-size: .82rem;
    color: var(--sol-muted, #b0b0b6);
}

/* Tableau détaillé : colonne Résultat triable et pastille devant le livre */
.dash-th-tri { cursor: pointer; user-select: none; }
.dash-th-tri:hover { color: var(--sol-text, #ededee); }
.dash-t-gras { font-weight: 700; }
.dash-t-titre .dash-pastille { margin-right: 8px; vertical-align: middle; }

/* Pastilles de rentabilité (tableau détaillé) */
.dash-pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--sol-muted, #b0b0b6); display: inline-block; }
.dash-pastille-pos { background: var(--dash-positif); }
.dash-pastille-neg { background: var(--dash-negatif); }

/* ── Comparaison de périodes (« Comparer à ») ─────────────── */
.dash-cmp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-cmp-off { opacity: .5; }
.dash-cmp-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--sol-line, #333336);
    background: transparent;
    color: var(--sol-muted, #b0b0b6);
    font-size: .78rem;
    cursor: pointer;
}
.dash-cmp-toggle:hover:not(:disabled) { border-color: rgba(155,124,224,.5); color: var(--sol-text, #ededee); }
.dash-cmp-toggle:disabled { cursor: not-allowed; }
.dash-cmp-actif .dash-cmp-toggle { border-color: rgba(155,124,224,.5); background: rgba(155,124,224,.08); color: #9b7ce0; }
.dash-cmp-switch { position: relative; width: 30px; height: 17px; border-radius: 9px; background: var(--sol-panel-raised, #202022); border: 1px solid var(--sol-line, #333336); flex: 0 0 auto; }
.dash-cmp-switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: #7a7a82; transition: .18s; }
.dash-cmp-actif .dash-cmp-switch { background: rgba(155,124,224,.35); border-color: #9b7ce0; }
.dash-cmp-actif .dash-cmp-switch::after { transform: translateX(13px); background: #9b7ce0; }
.dash-cmp-select { min-width: 0; width: auto; }
.dash-cmp-plage {
    font-size: .72rem;
    color: var(--sol-muted, #b0b0b6);
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--sol-line, #333336);
    white-space: nowrap;
}
.dash-cmp-plage-alerte { border-color: rgba(224,160,64,.45); background: rgba(224,160,64,.08); color: #E0A040; }
.dash-avert {
    background: rgba(224,160,64,.08);
    border: 1px solid rgba(224,160,64,.35);
    color: #E0A040;
    border-radius: 8px;
    font-size: .8rem;
    padding: 10px 14px;
}
.dash-kpi-delta { margin: -2px 0 4px; font-size: .8rem; }

/* Origine des ventes : valeur de la période comparée */
.dash-origine-delta { font-size: 1rem; font-weight: 400; margin-left: 6px; }
.dash-origine-avant { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .75rem; font-weight: 400; color: var(--sol-muted, #b0b0b6); }
.dash-origine-avant .diag-delta { display: inline; margin-top: 0; font-size: .75rem; }
.dash-origine-part { white-space: nowrap; }