/* AirTimeseries — Influx-backed charts on the public server and mirrors pages and the staff server page.
   Page layout (box, tiles, widths) comes from the generic air_ / eui_ classes; only the widget itself is styled here.
   Colors come from the eui.css theme variables (light and data-theme="dark"; the IPB bundle has them too):
   no fixed light colors here. The canvas (axes, grid) is colored in the JS from the page text color. */

/* No margin: the container (air_page_box, eui_box, mirror card) sets the spacing. */
.air_ts {
	margin: 0;
}

.air_ts_toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.6em;
	margin: 0 0 1em 0;
	padding: 0.6em 0.8em;
	background: var(--object-bg-color);
	border: 1px solid var(--input-border-color);
	border-radius: 4px;
}

.air_ts_toolbar_label {
	font-size: 0.85em;
	opacity: 0.75;
	margin-right: 0.25em;
}

.air_ts_toolbar button,
.air_ts_toolbar .air_ts_btn {
	appearance: none;
	border: 1px solid var(--input-border-color);
	background: var(--input-bg-color);
	color: var(--input-fg-color);
	font: inherit;
	font-size: 0.9em;
	padding: 0.35em 0.7em;
	border-radius: 3px;
	cursor: pointer;
}

.air_ts_toolbar button:hover,
.air_ts_toolbar .air_ts_btn:hover {
	border-color: rgba(85, 124, 216, 0.7);
	color: #557CD8;
}

.air_ts_toolbar button.air_ts_active {
	background: #557CD8;
	border-color: #557CD8;
	color: #fff;
}

/* Background, color and border from the generic eui.css input rule. */
.air_ts_toolbar input[type="datetime-local"] {
	font: inherit;
	font-size: 0.85em;
	padding: 0.25em 0.4em;
	border-radius: 3px;
	max-width: 11.5em;
}

.air_ts_panels {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

/* No background: the panel takes the one of its box or tile, so it follows the dark theme. */
.air_ts_panel {
	border: 1px solid var(--input-border-color);
	border-radius: 4px;
	padding: 0.75em 0.9em 0.4em;
	position: relative;
	min-height: 8em;
}

.air_ts_panel_title {
	font-weight: 600;
	font-size: 1.05em;
	margin: 0 0 0.35em 0;
}

.air_ts_panel_status {
	font-size: 0.85em;
	opacity: 0.7;
	min-height: 1.2em;
	margin: 0 0 0.25em 0;
}

.air_ts_panel_status.air_ts_error {
	opacity: 1;
	color: #b33;
}

/* min-height, not height: uPlot appends the legend below the canvas, a fixed height pushed it out of the panel.
   The JS reads clientHeight of the empty container (= min-height) as the canvas height.
   contain: inline-size keeps the fixed-width canvas out of the intrinsic width of the page or tile,
   so the container can shrink and the ResizeObserver in the JS resizes the chart. */
.air_ts_panel_plot {
	width: 100%;
	min-height: 220px;
	contain: inline-size;
}

.air_ts_panel.air_ts_loading .air_ts_panel_plot {
	opacity: 0.45;
}

.air_ts .uplot {
	font-family: inherit;
}

.air_ts .u-legend {
	font-size: 0.85em;
}

/* uPlot's rgba(0,0,0,0.07) selection box does not show on the dark theme. */
.air_ts .u-select {
	background: rgba(128, 128, 128, 0.2);
}

@media (max-width: 640px) {
	.air_ts_panel_plot {
		min-height: 180px;
	}

	.air_ts_toolbar input[type="datetime-local"] {
		max-width: 100%;
		flex: 1 1 100%;
	}
}