/* ============================================================
   CSS/CHARTS.CSS — Chart wrappers and stat rows
   ============================================================ */

.chart-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-wrapper--tall { height: 340px; }

/* Stats row */
.chart-stats {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.chart-stat { display: flex; flex-direction: column; gap: var(--space-1); }

.chart-stat-label {
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.chart-stat-value {
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--color-text);
  font-feature-settings: 'tnum';
}

.chart-stat-value--green  { color: var(--color-green); }
.chart-stat-value--yellow { color: var(--color-yellow); }
.chart-stat-value--blue   { color: var(--color-primary); }
.chart-stat-value--purple { color: var(--color-purple); }

/* Loading */
.chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--size-sm);
}

.chart-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: chartSpin 0.8s linear infinite;
}

@keyframes chartSpin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .chart-section     { padding: var(--space-4); }
  .chart-wrapper     { height: 220px; }
  .chart-wrapper--tall { height: 260px; }
  .chart-stats       { gap: var(--space-4); }
}

@media (max-width: 480px) {
  .chart-wrapper      { height: 180px; }
  .chart-wrapper--tall { height: 220px; }
}