/* =========================================================
   Vape O Shop — Statistiques (graphiques SVG maison)
   ========================================================= */

.stats-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-lg); }
.period-picker { display: flex; gap: 4px; background: var(--bg-tertiary); padding: 4px;
  border-radius: var(--radius-md); flex-wrap: wrap; }
.period-btn { padding: 7px 13px; border: none; background: transparent; color: var(--text-secondary);
  border-radius: var(--radius-sm); font-family: var(--font); font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.period-btn:hover { color: var(--text-primary); }
.period-btn.active { background: var(--brand); color: #04211d; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-md); margin-bottom: var(--space-lg); }
.chart-grid.full { grid-template-columns: 1fr; }

.chart-card { background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: var(--space-md); }
.chart-card h3 { font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.chart-card .chart-note { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400;
  text-transform: none; letter-spacing: 0; }

.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg text { font-family: var(--font); fill: var(--text-muted); font-size: 10px; }
.chart-svg .grid-line { stroke: var(--border-color); stroke-width: 1; }
.chart-svg .axis-line { stroke: var(--border-light); stroke-width: 1; }
.chart-svg .bar { fill: var(--brand); transition: fill var(--t-fast); }
.chart-svg .bar:hover { fill: var(--brand-light); }
.chart-svg .bar-alt { fill: var(--accent-violet); }
.chart-svg .line-path { fill: none; stroke: var(--brand); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line-path.alt { stroke: var(--accent-amber); }
.chart-svg .area-path { fill: url(#areaGradient); }
.chart-svg .dot { fill: var(--brand); }
.chart-svg .value-label { fill: var(--text-secondary); font-size: 9px; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm);
  font-size: var(--fs-xs); color: var(--text-secondary); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }

/* Barres horizontales (repartitions) */
.hbar-list { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: 1fr 96px; gap: var(--space-sm); align-items: center; }
.hbar-label { font-size: var(--fs-sm); }
.hbar-track { height: 7px; background: var(--bg-tertiary); border-radius: var(--radius-full);
  overflow: hidden; margin-top: 4px; }
.hbar-fill { height: 100%; background: var(--brand); border-radius: var(--radius-full); }
.hbar-value { text-align: right; font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; }
.hbar-share { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; }

/* Heatmap jour x heure */
.heatmap { display: grid; grid-template-columns: 62px repeat(24, 1fr); gap: 2px; font-size: 9px; }
.heat-cell { aspect-ratio: 1; border-radius: 2px; background: var(--bg-tertiary); }
.heat-label { color: var(--text-muted); display: flex; align-items: center; font-size: var(--fs-xs); }
.heat-hour { text-align: center; color: var(--text-muted); font-size: 8px; }

/* Donut */
.donut-wrap { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.donut-legend-row .val { margin-left: auto; font-family: var(--mono); font-weight: 700; }

/* Tableau compact de stats */
.stat-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.stat-table th { text-align: left; padding: 7px 10px; color: var(--text-muted);
  font-size: var(--fs-xs); text-transform: uppercase; border-bottom: 1px solid var(--border-color); }
.stat-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-color); }
.stat-table .num { text-align: right; font-family: var(--mono); }
.stat-table tbody tr:hover { background: var(--bg-hover); }

.rank-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--bg-tertiary);
  font-size: var(--fs-xs); font-weight: 800; }
.rank-badge.top1 { background: #eab308; color: #241500 }
.rank-badge.top2 { background: #94a3b8; color: #101820 }
.rank-badge.top3 { background: #b45309; color: #fff }