/* ─── Mini Charts (pure CSS) — Backoffice Mozaïk ─── */

.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
}

.sparkline-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  transition: height 400ms ease;
}

.mini-gauge {
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.mini-gauge-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

.simple-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 100px;
  padding: var(--space-2) 0;
}

.simple-chart .bar {
  flex: 1;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 400ms ease;
  min-width: 8px;
}