/* ==================================================================
   AI API Gateway — Full Panel (Tabbed Shell) Stylesheet
   ==================================================================
   Only tab navigation + tab-pane switching lives here. All colors
   are pulled from the token set declared in panel.css, so this file
   never hardcodes a color — that is what keeps it correct in both
   light and dark mode automatically.
   ================================================================== */

.aiapi-full-panel {
	max-width: 1080px;
}

/* ------------------------------------------------------------------ */
/* Tab navigation — pill-style segmented control (icon + label)         */
/* ------------------------------------------------------------------ */

.aiapi-tabs-nav {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 20px;
	background: var(--aiapi-muted);
	border-radius: calc(var(--aiapi-radius-sm) + 4px);
	overflow-x: auto;
}

.aiapi-tab-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	border-radius: var(--aiapi-radius-xs);
	padding: var(--aiapi-density-tab-pad, 8px 14px);
	font-size: var(--aiapi-density-tab-font, 13px);
	font-weight: 600;
	color: var(--aiapi-muted-foreground);
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.aiapi-tab-btn.is-active {
	background: var(--aiapi-card);
	color: var(--aiapi-foreground);
	box-shadow: var(--aiapi-shadow-xs);
}

.aiapi-tab-btn .aiapi-icon {
	color: var(--aiapi-muted-foreground-soft);
}

.aiapi-tab-btn.is-active .aiapi-icon {
	color: var(--aiapi-primary);
}

/* ------------------------------------------------------------------ */
/* Tab panes                                                             */
/* ------------------------------------------------------------------ */

.aiapi-tab-pane {
	display: none;
}

/* A flex column that fills the full height of .aiapi-shell-main. Most
   tabs (Overview, Wallet, Plans, Profile) just render their natural
   content height inside it, same as a plain block would. Tabs whose
   content is a scrollable data list (Keys, Usage Logs) opt into
   filling that height themselves — see the ".aiapi-keys-panel" /
   ".aiapi-ulogs" rules — so their own toolbar and pagination stay in
   view and only the row list scrolls, instead of the whole tab. */
.aiapi-tab-pane.is-active {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* Nested panels inside a tab pane already sit inside the outer
   .aiapi-full-panel wrapper, so their own max-width constraint is removed
   to avoid a double-narrowed layout. */
.aiapi-tab-pane .aiapi-panel {
	max-width: none;
}

@media (max-width: 640px) {
	.aiapi-tabs-nav {
		gap: 2px;
	}

	.aiapi-tab-btn {
		padding: 7px 11px;
		font-size: 12.5px;
	}

	.aiapi-tab-btn .aiapi-icon {
		width: 14px;
		height: 14px;
	}
}