/* ── Charts: inline SVG in the tones; the series classes set currentColor ──────────────────────────── */
.rooster-admin-chart {
	@apply m-0 w-full;
}

.rooster-admin-chart__svg {
	@apply block h-auto w-full;
}

.rooster-admin-chart.is-donut .rooster-admin-chart__svg {
	@apply mx-auto max-w-44;
}

.rooster-admin-chart.is-spark .rooster-admin-chart__svg {
	@apply h-8;
}

.rooster-admin-chart__grid {
	@apply text-border;
	stroke-width: 1;
}

.rooster-admin-chart__axis {
	@apply fill-secondary-foreground text-[11px];
}

.rooster-admin-chart__total {
	@apply fill-foreground text-[16px] font-semibold;
}

.rooster-admin-chart__series.is-s1 {
	--ra-series: var(--ra-chart-1);

	color: var(--ra-series);
}
.rooster-admin-chart__series.is-s2 {
	--ra-series: var(--ra-chart-2);

	color: var(--ra-series);
}
.rooster-admin-chart__series.is-s3 {
	--ra-series: var(--ra-chart-3);

	color: var(--ra-series);
}
.rooster-admin-chart__series.is-s4 {
	--ra-series: var(--ra-chart-4);

	color: var(--ra-series);
}
.rooster-admin-chart__series.is-s5 {
	--ra-series: var(--ra-chart-5);

	color: var(--ra-series);
}
.rooster-admin-chart__series.is-s6 {
	--ra-series: var(--ra-chart-6);

	color: var(--ra-series);
}

.rooster-admin-chart__series.is-primary,
.rooster-admin-chart__series.is-success,
.rooster-admin-chart__series.is-warning,
.rooster-admin-chart__series.is-destructive,
.rooster-admin-chart__series.is-info,
.rooster-admin-chart__series.is-mono {
	--ra-series: var(--ra-tone);

	color: var(--ra-series);
}

.rooster-admin-chart__legend {
	@apply m-0 mt-2 flex flex-wrap gap-x-4 gap-y-1 p-0 text-xs text-secondary-foreground;
	list-style: none;
}

.rooster-admin-chart__legend li {
	@apply m-0 flex items-center gap-1.5;
}

/* The label in the text colour; the swatch alone carries the series colour (a 12 px label in the series colour fails
   the contrast, axe). */
.rooster-admin-chart__legend .rooster-admin-chart__series {
	@apply text-secondary-foreground;
}

.rooster-admin-chart__swatch {
	@apply inline-block size-2.5 rounded-sm;
	background: var(--ra-series, currentColor);
}

/* The chart's container (0.75.0, Ui::chart()): the stage reserves its height from the first paint, so nothing shifts
   when the consumer's charting library draws into it (C7); the summary under it in the secondary ink. */
.rooster-admin-chart__stage {
	@apply relative block w-full;
}

.rooster-admin-chart.is-h-sm .rooster-admin-chart__stage {
	@apply h-40;
}

.rooster-admin-chart.is-h-md .rooster-admin-chart__stage {
	@apply h-56;
}

.rooster-admin-chart.is-h-lg .rooster-admin-chart__stage {
	@apply h-80;
}

.rooster-admin-chart.is-h-xl .rooster-admin-chart__stage {
	@apply h-104;
}

.rooster-admin-chart__summary {
	@apply m-0 mt-2 text-xs text-secondary-foreground;
}

/* Two charts side by side in a card, by the card's width (the card's body is the container, below). */
.rooster-admin-charts {
	@apply grid gap-5;
}

.rooster-admin-card__body,
.wrap.rooster-admin {
	container-type: inline-size;
}

.rooster-admin-chart.is-line .rooster-admin-chart__svg,
.rooster-admin-chart.is-bar .rooster-admin-chart__svg {
	@apply max-w-[48rem];
}

@container (min-width: 44rem) {
	.rooster-admin-charts {
		@apply grid-cols-2;
	}
}