/**
 * Chart containers and legends — requires tokens.css first.
 */

.tb-chart-card {
  border-radius: var(--tb-dash-card-radius);
  border: var(--tb-dash-card-border);
  padding: var(--tb-dash-card-pad);
  background: var(--tb-color-bg-panel);
  box-shadow: var(--tb-shadow-sm), var(--tb-shadow-inset-glow);
}

.tb-chart-card__title {
  margin: 0 0 var(--tb-space-4);
  font-size: var(--tb-text-md);
  font-weight: var(--tb-font-heavy);
  color: var(--tb-color-text-primary);
}

.tb-chart-card__canvas {
  position: relative;
  min-height: 12rem;
  border-radius: var(--tb-radius-md);
  background: var(--tb-color-bg-inset);
  border: 1px dashed var(--tb-color-border-strong);
}

/* Placeholder when no chart library is mounted */
.tb-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: var(--tb-space-6);
  color: var(--tb-color-text-muted);
  font-size: var(--tb-text-sm);
  text-align: center;
}

.tb-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-3) var(--tb-space-5);
  margin-top: var(--tb-space-4);
  padding: 0;
  list-style: none;
}

.tb-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-space-2);
  font-size: var(--tb-text-xs);
  color: var(--tb-color-text-secondary);
}

.tb-chart-legend__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--tb-radius-sm);
  flex-shrink: 0;
}

.tb-chart-legend__swatch--teal {
  background: var(--tb-color-accent);
}

.tb-chart-legend__swatch--muted {
  background: var(--tb-color-text-muted);
}

.tb-chart-legend__swatch--amber {
  background: var(--tb-color-status-amber);
}

.tb-chart-legend__swatch--red {
  background: var(--tb-color-status-red);
}