/* Pricevra — phase 55 : lisibilité du tableau de bord et de la page Opportunités, rendu différé hors écran.
   Chargé APRÈS theme-dark.css (base.html) : uniquement des compléments, aucun composant reconstruit. Retirer la ligne
   <link> annule tout. Couleurs : jetons existants seulement (theme-v50.css / theme-dark.css), déjà vérifiés AA ;
   les paires utilisées ici sont recontrôlées par tests/test_phase55_dashboard.py. CSP : aucun style en ligne. */

/* ───────────────────────── 1. Indicateurs (cartes KPI) ───────────────────────── */
/* Avec la barre latérale, 6 colonnes ne tiennent qu'au-delà de ~1600 px : en dessous, 3 colonnes (libellés sur une ligne) */
@media (min-width: 1101px) and (max-width: 1599px) { .kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpis.six .stat { display: flex; flex-direction: column; }
.kpis.six .stat .foot { margin-top: auto; padding-top: 8px; }   /* pieds alignés, cartes de même hauteur */
.stat .label { gap: 10px; color: var(--ink-secondary); font-weight: 600; font-size: 13px; line-height: 1.3; }
/* La pastille est dessinée sur l'icône elle-même (fond + marge intérieure) : balisage des cartes inchangé */
.stat[data-kpi] .label > .ic { box-sizing: border-box; width: 32px; height: 32px; padding: 7px; border-radius: 9px; flex: none;
  background: var(--kpi-bg, var(--brand-soft)); color: var(--kpi-fg, var(--brand)); stroke-width: 1.9; }
.stat .value { margin-top: 12px; }
/* Une teinte par indicateur, reprise de la barre latérale (trait ≥ 4,5:1 sur sa pastille, clair et sombre) */
.stat[data-kpi="products"]    { --kpi-fg: var(--nav-dashboard);     --kpi-bg: var(--nav-dashboard-bg); }
.stat[data-kpi="competitors"] { --kpi-fg: var(--nav-matching);      --kpi-bg: var(--nav-matching-bg); }
.stat[data-kpi="changes"]     { --kpi-fg: var(--nav-intelligence);  --kpi-bg: var(--nav-intelligence-bg); }
.stat[data-kpi="out"]         { --kpi-fg: var(--nav-alerts);        --kpi-bg: var(--nav-alerts-bg); }
.stat[data-kpi="opps"]        { --kpi-fg: var(--nav-opportunities); --kpi-bg: var(--nav-opportunities-bg); }
.stat[data-kpi="success"]     { --kpi-fg: var(--nav-settings);      --kpi-bg: var(--nav-settings-bg); }
/* Vert du logo (#29c19d, décoratif) : anneau de la pastille « opportunités », à côté du filet violet → vert des cartes */
.stat[data-kpi="opps"] .label > .ic { box-shadow: inset 0 0 0 1.5px var(--jade-400); }
@media (max-width: 600px) { .stat[data-kpi] .label > .ic { width: 26px; height: 26px; padding: 5px; border-radius: 8px; } .stat .label { gap: 8px; font-size: 12px; } }
@media (forced-colors: active) { .stat[data-kpi] .label > .ic { background: none; color: CanvasText; box-shadow: none; } }

/* ───────────────────────── 2. Tableau des variations de prix ───────────────────────── */
#ptable td.num, #ptable th.num, .opp-metrics .value-sm, table[data-testid="groups-table"] td.num { font-variant-numeric: tabular-nums; }
#ptable tbody tr { transition: background-color .12s; }
#ptable tbody tr:hover, table[data-testid="groups-table"] tbody tr:hover { background: var(--violet-50); }
@media (min-width: 601px) {
  #ptable td { padding-top: 11px; padding-bottom: 11px; }
  /* variations alignées : même largeur de pastille, date dessous */
  #ptable td.num .chip.drop, #ptable td.num .chip.rise, #ptable td.num .chip.flat { min-width: 74px; justify-content: center; }
}
#ptable .price { font-size: 14.5px; }
#ptable .old { font-size: 13px; }

/* ───────────────────────── 3. Cartes opportunité ───────────────────────── */
.opp-card { padding: 18px 20px; }
.opp-card-head { gap: 6px 8px; }
.opp-card-head .opp-score { padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--muted);
  font-weight: 600; font-variant-numeric: tabular-nums; }
.opp-product { font-size: 17px; }
.opp-card .opp-metrics { gap: 10px; }
.opp-card .opp-metrics > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.opp-card .opp-metrics .value-sm { overflow-wrap: anywhere; }
/* Mode sombre : la surface générique (theme-dark.css) remettait border-color à --line, effaçant le filet de priorité */
:root[data-theme="dark"] .opp-card { border-left-color: var(--jade-400); }
:root[data-theme="dark"] .opp-card.priority-high { border-left-color: var(--red); }
:root[data-theme="dark"] .opp-card.priority-medium { border-left-color: var(--amber); }
:root[data-theme="dark"] .opp-card.priority-low { border-left-color: var(--brand); }
:root[data-theme="dark"] .opp-card:has(.chip.margin) { border-left-color: var(--accent-graphic); }
:root[data-theme="dark"] .opp-card .opp-metrics > div { background: var(--bg); border-color: var(--line); }

/* ───────────────────────── 4. Rendu différé (« lazy ») des blocs sous la ligne de flottaison ───────────────────────── */
/* Le navigateur ne met en page / ne peint ces blocs qu'à l'approche de l'écran : premier affichage plus rapide sur les
   grands comptes (tableau produits, alertes récentes, groupes, sélecteur de 1 000 concurrents). Contenu toujours dans le
   HTML (recherche dans la page, lecteurs d'écran, ancres #products / #add-own inchangés). */
@supports (content-visibility: auto) {
  .pv-lazy { content-visibility: auto; contain-intrinsic-size: auto 720px; }
}
@media print { .pv-lazy { content-visibility: visible; } }