/* ============================================================================
   Rapports (DESIGN-09)
   Porté par `body.ui-v2`. Réutilise `.v2-panel`, `.v2-table`, `.v2-skel`,
   `.v2-inline-state`, `.v2-select`, `.v2-empty-cell`.

   Un poste d'analyse : période, distribution, comparaison, réserve. Moins
   « action requise » que les Opérations, moins « recommandation » que la
   Croissance. Aucun dégradé, aucun camaïeu par catégorie.
   ============================================================================ */

/* ─── Barre de contexte ─────────────────────────────────────────────────────
   Deux à trois dimensions réelles : période, dates, commercial. Pas de tiroir
   de filtres géant pour trois contrôles. */
.v2-rep-context {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: var(--bg-surface);
}
/* `min-width: 0` seul ne suffit pas : la base flex `auto` dimensionne encore le
   champ sur le max-content de son `<select>` (noms de commerciaux). On borne
   aussi la largeur au conteneur. */
.v2-rep-field {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 4px; min-width: 0; max-width: 100%;
}
.v2-rep-field > .v2-select, .v2-rep-field > .v2-input { max-width: 100%; }
.v2-rep-field.is-hidden { display: none; }
.v2-rep-field-label {
  font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-faint); font-weight: 500;
}
.v2-input {
  font: inherit; font-size: var(--text-sm); color: var(--text-primary);
  background: var(--bg-canvas); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 5px var(--space-3); min-width: 0;
}
.v2-input:focus-visible, .v2-select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.v2-rep-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }

/* ─── Portée résolue ────────────────────────────────────────────────────────
   Ce que le backend a RÉELLEMENT appliqué, pas ce qui a été demandé. */
.v2-rep-scope {
  margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted);
}
.v2-rep-scope:empty { margin: 0; }

/* ─── Sections ──────────────────────────────────────────────────────────────*/
/* `minmax(0, 1fr)` et non la piste implicite `auto` : une piste `auto` est
   plancherée par la largeur min-content de la section, si bien qu'un panneau
   contenant une table large fait grandir la piste (mesuré : 823 px dans un
   conteneur de 290 px) et déborde toute la page. Avec `minmax(0, 1fr)` la
   piste ne dépasse jamais le conteneur et le défilement retombe sur
   `.v2-panel-body { overflow-x: auto }`, là où il est voulu. */
.v2-rep-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.v2-rep-subtitle {
  margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm);
  font-weight: 600; color: var(--text-primary);
}
.v2-rep-subtitle:first-child { margin-top: 0; }

/* ─── Métriques ─────────────────────────────────────────────────────────────
   Une grille dense de valeurs comparables, pas une carte par chiffre. */
.v2-rep-metrics {
  display: grid; gap: var(--space-4) var(--space-5); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.v2-rep-metrics.is-compact { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.v2-rep-metric { display: grid; gap: 2px; min-width: 0; }
.v2-rep-metric-label {
  font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-faint); font-weight: 500;
}
.v2-rep-metric-value {
  margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.v2-rep-metric-note {
  margin: 0; font-size: var(--text-2xs); color: var(--text-faint);
  line-height: var(--leading-tight);
}

/* ─── Barres ────────────────────────────────────────────────────────────────
   Zéro se dessine à zéro. L'écran hérité imposait 2 % de largeur minimale :
   une étape vide y paraissait peuplée. */
.v2-rep-bars { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.v2-rep-bar-row { display: flex; align-items: center; gap: var(--space-3); }
.v2-rep-bar-label {
  flex: 0 0 auto; width: 180px; font-size: var(--text-sm); color: var(--text-secondary);
}
.v2-rep-bar {
  flex: 1; min-width: 40px; height: 8px; border-radius: 4px;
  background: var(--border-subtle); overflow: hidden;
}
.v2-rep-bar i { display: block; height: 100%; background: var(--accent); }
.v2-rep-bar-num {
  flex: 0 0 auto; width: 56px; text-align: right;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
}
.v2-rep-bar-extra {
  flex: 0 0 auto; width: 64px; text-align: right;
  font-size: var(--text-xs); color: var(--text-faint);
}

/* ─── Tables et réserves ────────────────────────────────────────────────────*/
.v2-rep-table { margin-top: var(--space-3); }
/* Un `<th scope="row">` est centré par défaut dans le navigateur : dans une
   colonne large, le libellé flottait au milieu, désaligné de son en-tête. La
   sémantique (en-tête de ligne, pour les lecteurs d'écran) est conservée ;
   seul l'alignement est corrigé. */
.v2-rep-table tbody th[scope="row"] {
  text-align: left; font-weight: 500; color: var(--text-primary);
}
.v2-rep-caveat {
  margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-faint);
  line-height: var(--leading-tight);
}
/* Réserve placée sous un sous-titre : elle qualifie le groupe qui SUIT, elle
   ne conclut pas celui d'au-dessus. L'espacement doit le dire. */
.v2-rep-subtitle + .v2-rep-caveat { margin: 0 0 var(--space-3); }
.v2-inline-state.is-warning { border-left: 2px solid var(--warning); padding-left: var(--space-3); }

/* ─── Étroit ────────────────────────────────────────────────────────────────*/
@media (max-width: 1000px) {
  .v2-rep-actions { margin-left: 0; }
}
@media (max-width: 640px) {
  .v2-rep-bar-label { width: 110px; font-size: var(--text-xs); }
  .v2-rep-bar-extra { display: none; }
  .v2-rep-context { gap: var(--space-3); }
  .v2-rep-field { flex: 1 1 45%; }
}
/* Les tables larges défilent dans leur panneau, jamais la page entière.
   Le bloc conteneur qui rend ce défilement complet est déclaré une seule fois,
   avec la classe elle-même (voir `prospect-360.css`). */
.v2-panel-body { overflow-x: auto; }