/* ── Chart wrappers ─────────────────────────────────────────── */
.chart-wrapper {
  position: relative;
  width: 100%;
}

.chart-wrapper canvas {
  display: block;
  max-width: 100%;
}

/* Standard chart heights */
.chart-wrapper--sm  { height: 160px; }
.chart-wrapper--md  { height: 240px; }
.chart-wrapper--lg  { height: 320px; }

/* Legend (custom, below chart) */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
}
.chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--clr-text-secondary);
}
.chart-legend__dot {
  width: 10px; height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Chart period tabs */
.chart-tabs {
  display: flex;
  gap: var(--sp-1);
  background: var(--clr-bg);
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
}
.chart-tab {
  padding: 4px var(--sp-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--clr-text-muted);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.chart-tab:hover   { color: var(--clr-text-primary); }
.chart-tab.active  {
  background: var(--clr-surface);
  color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-semibold);
}

/* Donut centre label */
.donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.donut-center__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--clr-text-primary);
  line-height: 1;
}
.donut-center__label {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  margin-top: 2px;
}