/* ==================================================================
   AI API Gateway — Period Selector
   ==================================================================
   The segmented "12h / 24h / 7d / 30d / 3m / 6m / 1y" control used on
   every analytics card that supports a variable window (paired with
   aiapi-period.js). Pure design tokens, so it repaints with dark mode
   / color presets exactly like the rest of the panel, and its layout
   uses logical properties so it mirrors correctly under [dir="rtl"].
   ================================================================== */

.aiapi-period-selector {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: calc(3px * var(--aiapi-density-scale, 1));
    flex-wrap: wrap;
}

.aiapi-period-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--aiapi-muted-foreground);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: calc(7px * var(--aiapi-density-scale, 1)) calc(12px * var(--aiapi-density-scale, 1));
	border-radius: var(--aiapi-radius-xs, 0.5rem);
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.aiapi-period-btn:hover:not(:disabled):not(.is-active) {
    color: var(--aiapi-primary);
    background: var(--aiapi-primary-soft);
}

.aiapi-period-btn.is-active {
	background: var(--aiapi-primary-soft);
    color: var(--aiapi-primary);
}

.aiapi-period-btn:disabled {
	cursor: default;
	opacity: .6;
}

.aiapi-period-panel {
	position: relative;
}

/* A subtle shimmer instead of hiding the chart/KPIs while a new range
   loads — keeps the card from "jumping" and reads as alive, not stuck. */
.aiapi-period-panel.is-loading {
	pointer-events: none;
}

.aiapi-period-panel.is-loading .aiapi-chart,
.aiapi-period-panel.is-loading .aiapi-linechart,
.aiapi-period-panel.is-loading .aiapi-barchart,
.aiapi-period-panel.is-loading [data-aiapi-period-kpi] {
	opacity: .45;
	transition: opacity .15s ease;
}

.aiapi-period-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(12px * var(--aiapi-density-scale, 1));
	flex-wrap: wrap;
	margin-bottom: calc(14px * var(--aiapi-density-scale, 1));
}

@media (max-width: 640px) {
	.aiapi-period-head {
		flex-direction: column;
		align-items: stretch;
	}
	.aiapi-period-selector {
		width: 100%;
		justify-content: space-between;
	}
	.aiapi-period-btn {
		flex: 1;
		text-align: center;
		padding: calc(7px * var(--aiapi-density-scale, 1)) calc(6px * var(--aiapi-density-scale, 1));
	}
}