/* =============================================================
   STATS.CSS — Styles section Stats
   Matrix, global bar, ranking, gammes, CC buttons
   Dépend de variables.css
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   NAVIGATION SECONDAIRE STATS — Grille 2×3 centrée (mobile-first)
   ───────────────────────────────────────────────────────────── */
#stats-pills-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 4px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.stats-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  font-family: inherit;
  letter-spacing: 0.01em;
}

.stats-pill:active { transform: scale(0.95); }

.stats-pill:not(.active):hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.stats-pill.active {
  background: var(--color-info);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   TUILES KPI CHAPEAU
   ───────────────────────────────────────────────────────────── */
.stats-kpi-chapeau {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stats-kpi-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  border: 1px solid var(--color-gray-100);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--transition-fast);
}

.stats-kpi-card:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.stats-kpi-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 8px;
}

.stats-kpi-value {
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  line-height: 1;
  margin-bottom: 6px;
}

/* Valeur textuelle (tendance) — taille réduite pour tenir */
.stats-kpi-value--text {
  font-size: 15px;
  line-height: 1.3;
}

.stats-kpi-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600, #374151);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

.stats-kpi-month {
  font-size: 11px;
  color: var(--color-gray-400);
}

/* Couleurs sémantiques des valeurs KPI */
.stats-kpi-value.kpi-good    { color: var(--color-taux-good); }
.stats-kpi-value.kpi-mid     { color: var(--color-taux-mid);  }
.stats-kpi-value.kpi-bad     { color: var(--color-taux-bad);  }
.stats-kpi-value.kpi-info    { color: var(--color-info);      }
.stats-kpi-value.kpi-neutral { color: var(--color-gray-600, #374151); }

/* ─────────────────────────────────────────────────────────────
   BARRE GLOBALE STATS
   ───────────────────────────────────────────────────────────── */
.stats-global-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(135deg, var(--color-info-darker) 0%, var(--color-info-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  margin-bottom: var(--space-4);
}

.stats-global-item  { text-align: center; flex: 1; }

.stats-global-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.stats-global-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stats-global-sep {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   TABLEAU MATRIX
   ───────────────────────────────────────────────────────────── */
.stats-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  margin-bottom: var(--space-1);
}

.stats-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.stats-matrix th,
.stats-matrix td {
  padding: var(--space-2) var(--space-2_5, 10px);
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-gray-100);
}

.stats-matrix thead th {
  background: var(--color-bg-surface);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.stats-matrix th:first-child,
.stats-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-sticky);
  background: var(--color-white);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  min-width: 110px;
  border-right: 2px solid var(--color-gray-200);
}

.stats-matrix thead th:first-child {
  z-index: calc(var(--z-sticky) + 1);
  background: var(--color-bg-surface);
}

/* Colonne mois courant */
.stats-matrix .month-current {
  background: var(--color-info-pale);
  font-weight: var(--font-weight-bold);
  color: var(--color-info-dark);
}

.stats-matrix thead .month-current {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

/* Colonne forecast */
.stats-matrix .month-forecast {
  color: var(--color-gray-400);
  font-style: italic;
}

.stats-matrix .month-forecast-bg {
  background: var(--color-warning-pale);
}

.stats-matrix thead .month-forecast-bg {
  background: var(--color-warning-pale-dark);
  color: var(--color-warning-deep);
}

/* Ligne total */
.stats-matrix .row-total td {
  font-weight: var(--font-weight-bold);
  border-top: 2px solid var(--color-gray-200);
  background: var(--color-bg-surface);
  color: var(--color-black);
}

.stats-matrix .row-total td:first-child { background: var(--color-bg-surface); }

/* Ligne cumul */
.stats-matrix .row-cumul td {
  font-weight: var(--font-weight-semibold);
  color: var(--color-info);
  background: var(--color-info-pale);
}

.stats-matrix .row-cumul td:first-child { background: var(--color-info-pale); }

/* Ligne taux */
.stats-matrix .row-taux td {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  font-size: 11px;
}

/* Colorisation taux */
.stats-matrix .taux-good { color: var(--color-taux-good); font-weight: var(--font-weight-semibold); }
.stats-matrix .taux-mid  { color: var(--color-taux-mid);  font-weight: var(--font-weight-semibold); }
.stats-matrix .taux-bad  { color: var(--color-taux-bad);  font-weight: var(--font-weight-semibold); }

/* Dot couleur CC */
.stats-matrix .cc-color-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.stats-table-hint {
  text-align: right;
  font-size: 10px;
  color: var(--color-gray-400);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
}

/* ─────────────────────────────────────────────────────────────
   BOUTONS CC — GRAPHIQUES (multi-select)
   ───────────────────────────────────────────────────────────── */
.stats-cc-btn {
  padding: 5px var(--space-2_5, 10px);
  border: 1.5px solid var(--color-gray-200);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.stats-cc-btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.stats-cc-btn .cc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.stats-cc-btn.active {
  border-width: 2px;
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

.stats-cc-btn.active .cc-dot { transform: scale(1.3); }

/* ─────────────────────────────────────────────────────────────
   BOUTONS VISIBILITÉ CC — TABLEAUX
   ───────────────────────────────────────────────────────────── */
.stats-vis-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-vis);
  border: 1px solid var(--color-vis-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2_5, 10px);
}

.vis-label {
  font-size: 10px;
  color: var(--color-vis-label);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-right: 2px;
}

.stats-vis-btn {
  font-size: 11px;
  font-weight: var(--font-weight-normal) !important;
  padding: 2px 9px 2px 6px;
  border-radius: var(--radius-full);
  border: 1px solid transparent !important;
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
  box-shadow: none !important;
}

.stats-vis-btn .cc-dot {
  width: 6px !important;
  height: 6px !important;
  transform: none !important;
  flex-shrink: 0;
}

.stats-vis-btn.active {
  border-width: 1px !important;
  font-weight: var(--font-weight-normal) !important;
  box-shadow: none !important;
}

.stats-vis-btn:not(.active) {
  text-decoration: line-through;
  opacity: 0.38;
  color: var(--color-gray-400);
}

.stats-vis-btn:hover {
  opacity: 1 !important;
  background: var(--color-gray-100) !important;
}

/* ─────────────────────────────────────────────────────────────
   META INFO
   ───────────────────────────────────────────────────────────── */
.stats-meta {
  text-align: center;
  font-size: 11px;
  color: var(--color-gray-400);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────
   CLASSEMENT CC
   ───────────────────────────────────────────────────────────── */
.stats-cc-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.stats-cc-item:last-child  { border-bottom: none; }
.stats-cc-item:active      { background: var(--color-gray-50); }

.stats-cc-rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-3);
  flex-shrink: 0;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.stats-cc-rank.rank-1 { background: var(--color-rank-1-bg); color: var(--color-rank-1-text); }
.stats-cc-rank.rank-2 { background: var(--color-rank-2-bg); color: var(--color-rank-2-text); }
.stats-cc-rank.rank-3 { background: var(--color-rank-3-bg); color: var(--color-rank-3-text); }

.stats-cc-info  { flex: 1; min-width: 0; }

.stats-cc-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-cc-detail {
  font-size: 11px;
  color: var(--color-gray-400);
  margin-top: 2px;
}

.stats-cc-metrics {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  color: var(--color-gray-500);
  margin-top: 3px;
  flex-wrap: wrap;
}

.stats-cc-metric strong             { font-weight: var(--font-weight-semibold); color: var(--color-black); }
.stats-cc-metric strong.taux-good   { color: var(--color-taux-good); }
.stats-cc-metric strong.taux-mid    { color: var(--color-taux-mid); }
.stats-cc-metric strong.taux-bad    { color: var(--color-taux-bad); }
.stats-cc-metric-sep                { color: var(--color-gray-300); }

.stats-cc-values { text-align: right; flex-shrink: 0; }

.stats-cc-main-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-info);
}

.stats-cc-sub-value {
  font-size: 11px;
  color: var(--color-gray-400);
  margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────
   PROGRESS STATS
   ───────────────────────────────────────────────────────────── */
.stats-progress {
  height: 4px;
  background: var(--color-gray-200);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.stats-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--transition-slow);
}

/* ─────────────────────────────────────────────────────────────
   RANKING — LÉGENDE ET SCORE
   ───────────────────────────────────────────────────────────── */
.ranking-legend {
  font-size: 11px;
  color: var(--color-gray-400);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  text-align: center;
}

.ranking-score-badge {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.ranking-reason {
  font-size: 11px;
  color: var(--color-gray-500);
  margin-top: var(--space-1);
  font-style: italic;
}

.ranking-qual {
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-650);
}

/* ─────────────────────────────────────────────────────────────
   GAMMES & RÉSILIATIONS
   ───────────────────────────────────────────────────────────── */
.gamme-pct {
  font-size: 10px;
  color: var(--color-gray-400);
  display: block;
  line-height: 1.2;
}

.stats-matrix td .gamme-pct { margin-top: 1px; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .stats-global-bar       { padding: var(--space-3) var(--space-2); }
  .stats-global-value     { font-size: var(--font-size-base); }
  .stats-matrix           { font-size: 11px; }
  .stats-matrix th, .stats-matrix td { padding: 6px var(--space-2); }
}