/* ============================================================================
   Copilote de croissance (DESIGN-08B)
   Porté par `body.ui-v2`. Réutilise les primitives existantes — `.v2-panel`,
   `.v2-badge`, `.v2-table`, `.v2-tabs`, `.v2-inline-state`, `.v2-skel`,
   `.v2-metagrid`, `.v2-chip` — et n'ajoute que ce qui n'existait pas.

   Aucun héros IA, aucun dégradé, aucune bulle de conversation : le moteur est
   déterministe, l'écran est un poste de travail. L'information commence haut.
   ============================================================================ */

/* ─── Onglets défilables ────────────────────────────────────────────────────
   Huit onglets sont le vrai risque responsive de cet écran. Plutôt que de
   tronquer des libellés — ce que le §59 interdit — la barre défile
   horizontalement et l'onglet actif reste atteignable. */
.v2-tabs-scroll {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* `.v2-page` est un conteneur flex en colonne : sans `min-width: 0`, la
     barre d'onglets garde sa largeur min-content — huit boutons — et pousse
     toute la page en débordement horizontal au lieu de défiler sur elle-même.
     Même piège que la table filtrée des opérations agents. */
  min-width: 0;
  max-width: 100%;
}
.v2-tabs-scroll .v2-tab { white-space: nowrap; flex: 0 0 auto; }

/* ─── Fraîcheur ─────────────────────────────────────────────────────────────
   Compact et textuel : une ligne de métadonnée, pas un badge géant. */
.v2-growth-fresh {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs); color: var(--text-faint);
}
.v2-growth-fresh-label {
  font-weight: 600; color: var(--text-secondary);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.v2-growth-fresh[data-fresh="enregistre"] .v2-growth-fresh-label { color: var(--text-muted); }
.v2-growth-fresh-note { line-height: var(--leading-tight); }

/* ─── Confiance ─────────────────────────────────────────────────────────────
   Jamais portée par la seule couleur : la barre est doublée du pourcentage. */
.v2-growth-confidence { display: inline-flex; align-items: center; gap: var(--space-2); }
.v2-growth-conf-track {
  display: inline-block; width: 44px; height: 4px; border-radius: 2px;
  background: var(--border-default); overflow: hidden;
}
.v2-growth-conf-track i { display: block; height: 100%; background: var(--text-muted); }

/* ─── Recommandation ────────────────────────────────────────────────────────
   Des sections séparées par un filet, pas une carte par recommandation :
   l'opérateur en lit dix à la suite. */
.v2-growth-rec { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.v2-growth-rec:first-child { border-top: 0; padding-top: 0; }
.v2-growth-rec-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.v2-growth-rec-conf { margin-left: auto; }
.v2-growth-rec-title {
  margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 600;
  color: var(--text-primary); line-height: var(--leading-tight);
}
.v2-growth-rec-body {
  margin: 0 0 var(--space-3); font-size: var(--text-sm);
  color: var(--text-secondary); line-height: var(--leading-normal);
}
.v2-growth-rec-meta { margin: 0; display: grid; gap: var(--space-2); }
.v2-growth-rec-meta > div { display: grid; grid-template-columns: 108px 1fr; gap: var(--space-3); }
.v2-growth-rec-meta dt {
  font-size: var(--text-xs); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.v2-growth-rec-meta dd { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.v2-growth-rec-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.v2-growth-rec-actions:empty { margin-top: 0; }

/* ─── Signaux ───────────────────────────────────────────────────────────────
   Le liseré donne la catégorie ; le texte la porte aussi, pour ne pas
   dépendre de la couleur seule. */
.v2-growth-signals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.v2-growth-signal {
  display: grid; gap: 2px; padding-left: var(--space-3);
  border-left: 2px solid var(--border-default);
}
.v2-growth-signal.is-critical { border-left-color: var(--danger); }
.v2-growth-signal.is-risk { border-left-color: var(--warning); }
.v2-growth-signal.is-opportunity { border-left-color: var(--accent); }
.v2-growth-signal-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.v2-growth-signal-action {
  font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-tight);
}

/* ─── Risques ───────────────────────────────────────────────────────────────*/
.v2-growth-risk { padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.v2-growth-risk:first-child { border-top: 0; padding-top: 0; }
.v2-growth-risk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-2);
}
.v2-growth-risk-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.v2-growth-risk-note, .v2-growth-risk-conf {
  margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-faint);
  line-height: var(--leading-tight);
}

/* ─── Entonnoir ─────────────────────────────────────────────────────────────
   Une barre par étape suffit : pas de camaïeu, pas d'animation. */
.v2-growth-funnel th[scope="row"] { font-weight: 500; color: var(--text-primary); }
.v2-growth-bar-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 160px; }
.v2-growth-bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--border-subtle); overflow: hidden; min-width: 40px;
}
.v2-growth-bar i { display: block; height: 100%; background: var(--accent); }
.v2-growth-gap { font-size: var(--text-xs); color: var(--text-faint); }

/* ─── Prévisions ────────────────────────────────────────────────────────────*/
.v2-growth-forecast { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.v2-growth-forecast:first-child { border-top: 0; padding-top: 0; }
.v2-growth-forecast-title {
  margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
}
.v2-growth-assumptions {
  margin: var(--space-3) 0 0; padding-left: var(--space-4);
  font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-normal);
}

/* ─── Coûts ─────────────────────────────────────────────────────────────────*/
.v2-growth-cost-note {
  margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-faint);
  line-height: var(--leading-tight);
}

/* ─── État désactivé global ─────────────────────────────────────────────────
   L'état nominal en production aujourd'hui : dix drapeaux sur dix à faux.
   Il doit donc être délibéré et lisible, pas une page vide ni une erreur
   rouge. Les capacités sont nommées pour que l'opérateur sache ce qu'il
   obtiendrait — sans jamais citer un nom de variable d'environnement. */
.v2-growth-disabled {
  max-width: 640px; margin: var(--space-6) auto; padding: var(--space-6);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--bg-surface); text-align: center;
}
.v2-growth-disabled-icon { display: inline-flex; color: var(--text-faint); }
.v2-growth-disabled-icon .v2-icon { width: 28px; height: 28px; }
.v2-growth-disabled-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-lg); font-weight: 600; color: var(--text-primary);
}
.v2-growth-disabled-body {
  margin: 0 auto var(--space-4); max-width: 46ch;
  font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal);
}
.v2-growth-capabilities {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
}
.v2-growth-capabilities li {
  padding: 3px var(--space-3); border: 1px solid var(--border-subtle);
  border-radius: 999px; font-size: var(--text-xs); color: var(--text-muted);
}
.v2-growth-disabled-note {
  margin: 0; font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-tight);
}

/* ─── Étroit ────────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  .v2-growth-rec-meta > div { grid-template-columns: 1fr; gap: 2px; }
  .v2-growth-rec-conf { margin-left: 0; }
}
@media (max-width: 560px) {
  .v2-growth-disabled { padding: var(--space-4); margin: var(--space-4) 0; }
}

/* Mouvement réduit : rien n'anime ici, la règle vaut déclaration d'intention. */
@media (prefers-reduced-motion: reduce) {
  .v2-growth-bar i, .v2-growth-conf-track i { transition: none; }
}

/* ─── Vue d'ensemble : deux colonnes de hauteurs inégales ───────────────────
   Les priorités occupent une colonne longue ; les signaux, la gouvernance et
   les opportunités sont courts. Une grille à colonnes égales étirait le
   panneau « Demande attention » et creusait un vide sous deux lignes de
   texte — visible seulement à la capture, comme souvent. */
.v2-growth-overview {
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.v2-growth-overview-side { display: grid; gap: var(--space-4); align-content: start; }
@media (max-width: 1100px) { .v2-growth-overview { grid-template-columns: 1fr; } }