/*
 * DD-08 Bar chart — the signature chart. app/components/ui/bar_chart_component.rb
 *
 * Capsule bars cycling accent → warning → success → violet — a decorative
 * signature on the one series in this product (months). Value labels
 * always print above the bar in --color-ink (never inside it — none of
 * the four bar hues passes AA contrast for in-bar text; deviation from
 * the Figma flagged in the DD-08 styleguide section). No gridlines, per
 * spec.
 *
 * .is-loading is a forced state (see the component's own comment) —
 * swaps the real SVG/table for the DD-14 skeleton chart preset.
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-bar-chart {
  width: 100%;
}

/*
 * The SVG carries its natural width/height attributes so bars stay at their
 * designed 24px capsule size — max-width lets it shrink in narrow containers
 * but never stretch a sparse chart into giant bars.
 */
.ui-bar-chart__svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.ui-bar-chart__skeleton {
  display: none;
}

.ui-bar-chart.is-loading .ui-bar-chart__skeleton {
  display: block;
}

.ui-bar-chart.is-loading .ui-bar-chart__svg,
.ui-bar-chart.is-loading .ui-bar-chart__empty {
  display: none;
}

/* Bar fills — reference tokens only, never inline hex on the rect. */
.ui-bar-chart__bar--accent { fill: var(--color-accent); }
.ui-bar-chart__bar--warning { fill: var(--color-warning); }
.ui-bar-chart__bar--success { fill: var(--color-success); }
.ui-bar-chart__bar--violet { fill: var(--color-violet); }

/* Desktop hover — real interaction plus a forced .is-hover demo class. */
.ui-bar-chart__bar {
  transition: opacity var(--duration-fast) var(--ease-out);
}

.ui-bar-chart__bar:hover,
.ui-bar-chart.is-hover .ui-bar-chart__bar {
  opacity: 0.85;
}

/* Value labels always print above the bar, in ink — no bar hue passes AA
   contrast for text painted inside it (see the component's DD-08
   styleguide note), so there is no separate in-bar treatment here. */
.ui-bar-chart__value-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  fill: var(--color-ink);
  font-variant-numeric: var(--numeric-tabular);
}

.ui-bar-chart__month-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  fill: var(--color-ink-muted);
}

.ui-bar-chart__axis-label {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  fill: var(--color-ink-soft);
}

.ui-bar-chart__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-inset);
}

.ui-bar-chart__empty-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}