/* Component styles for the Scout Trails web UI.
 *
 * Every color, radius, and type value here resolves through a semantic token
 * defined in tokens.css. This file must contain no color literal of any
 * form — hex, functional, or named. See
 * docs-internal/TIER2-WEB-DESIGN-SYSTEM-SPEC.md §Enforcement.
 *
 * This file carries the SVG activity chart and the list-page pager — the two
 * bespoke pieces that could not compose from the wb-* base classes in
 * chrome.css. Everything else on the page draws from those base classes.
 */

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background: var(--wb-canvas);
	color: var(--wb-ink);
	font-family: var(--wb-font-sans);
	font-size: 16px;
	line-height: 1.5;
}

.activity-chart-wrap {
	width: 100%;
	overflow-x: auto;
}

.activity-chart {
	width: 100%;
	height: auto;
	max-height: 200px;
	display: block;
}

/* A chart sharing a row with another card is sized to a slot rather than to
 * its own aspect ratio. The card beside it is a fixed list of rows, so its
 * height does not move with the viewport, while a chart whose height follows
 * its column width would match that at one width only — short at a narrow
 * viewport, and jumping at the point the row goes two-up. The slot height is
 * that list's body, so the pair is level across the whole band.
 *
 * The drawing is rendered near-square for this slot (see chart.BarChartSplit)
 * so it fills the box; what the box's aspect ratio does not match is left as
 * even margin rather than stretched, because the axis labels are text. */
.activity-chart-split {
	height: 300px;
	max-height: none;
}

/* Single-hue visual — the activity chart is one series, so it uses the
 * bar role rather than a categorical slot.
 *
 * rx is set here rather than as an SVG attribute so the radius resolves
 * through the token; SVG geometry properties are stylable from CSS. It
 * rounds all four corners rather than only the top two — at the bar
 * radius, the bottom pair sits on the axis and is not visible. */
.activity-chart rect {
	fill: var(--wb-bar);
	rx: var(--wb-radius-bar);
}

.activity-chart-bar:hover rect {
	fill: var(--wb-primary);
}

/* Y-axis gridlines sit behind the bars in the softest border role, so they
 * orient without competing with the data. The baseline is a step stronger:
 * it reads as the axis itself rather than as the zero gridline. */
.activity-chart-grid {
	stroke: var(--wb-border-soft);
	stroke-width: 1;
}

.activity-chart-axis {
	stroke: var(--wb-border);
	stroke-width: 1;
}

/* Y tick labels: same mono caption treatment as the x labels, so the two
 * axes read as one system. */
.activity-chart-ytick {
	font-size: 11px;
	fill: var(--wb-ink-4);
	font-family: var(--wb-font-mono);
}

/* Axis labels: mono at the caption step, in the quietest ink. */
.activity-chart-label {
	font-size: 11px;
	fill: var(--wb-ink-4);
	font-family: var(--wb-font-mono);
}

.activity-chart-empty text {
	fill: var(--wb-ink-4);
	font-size: 12px;
	font-family: var(--wb-font-sans);
}

.pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.pager button {
	padding: 0.35rem 0.75rem;
	background: var(--wb-panel);
	border: 1px solid var(--wb-border);
	border-radius: var(--wb-radius-control);
	cursor: pointer;
	font: inherit;
	color: var(--wb-link);
}

.pager button:hover:not(:disabled) {
	background: var(--wb-canvas);
}

.pager button:disabled {
	color: var(--wb-ink-4);
	cursor: not-allowed;
	opacity: 0.55;
}

.pager-status {
	color: var(--wb-ink-3);
	font-variant-numeric: tabular-nums;
}