/* Graphiques des tableaux de bord (templates/partials/charts.html).
   Les macros produisaient un balisage sans aucune feuille de style : la
   légende du donut s'affichait en liste à puces et les barres étaient
   invisibles (pistes sans hauteur). */
.chart-donut { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.chart-donut svg { flex:none; }
.chart-legend { list-style:none; margin:0; padding:0; display:grid; gap:6px; min-width:160px; flex:1; }
.chart-legend li { display:grid; grid-template-columns:12px 1fr auto auto; align-items:center; gap:8px; font-size:13px; }
.chart-legend-dot { width:12px; height:12px; border-radius:50%; }
.chart-legend-name { color:var(--text); }
.chart-legend-pct { color:var(--text-3); font-variant-numeric:tabular-nums; }
.chart-legend-val { font-weight:700; font-variant-numeric:tabular-nums; min-width:2ch; text-align:right; }

.chart-bars { display:grid; gap:10px; }
.chart-bar-row { display:grid; grid-template-columns:minmax(70px, 30%) 1fr auto; align-items:center; gap:10px; font-size:13px; }
.chart-bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2); }
.chart-bar-track { height:10px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.chart-bar-fill { height:100%; border-radius:999px; min-width:4px; }
.chart-bar-val { font-weight:700; font-variant-numeric:tabular-nums; }
.chart-bar-unit { font-weight:400; color:var(--text-3); }

.chart-gauge { display:flex; flex-direction:column; align-items:center; gap:4px; }
.chart-gauge-lbl { font-size:13px; color:var(--text-2); text-align:center; }

.chart-spark-svg { width:100%; height:90px; display:block; }
.chart-spark-labels, .chart-spark-range { display:flex; justify-content:space-between; gap:6px; font-size:12px; color:var(--text-3); margin-top:4px; }
.chart-spark-labels span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chart-podium { display:grid; gap:6px; }
.podium-row { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:10px; padding:8px 10px;
  border-radius:var(--r-sm, 8px); background:var(--surface-2); font-size:13px; }
.podium-row.top3 .podium-rank { color:var(--accent); font-weight:800; }
.podium-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.podium-val { font-weight:700; font-variant-numeric:tabular-nums; }

.chart-empty { text-align:center; padding:28px 12px; color:var(--text-3); font-size:13px; }
.chart-empty-icon { font-size:28px; margin-bottom:6px; opacity:.7; }
.chart-donut svg { max-width:100%; height:auto; }