/* kinra cloud UI — login and admin pages
   Self-contained; does not import kinra-static tokens
   so the login page works without authentication. */

/* ── Core tokens (subset of kinra tokens.css) ────────────────────────── */
:root {
	--bg-primary: #0c0c0f;
	--bg-secondary: #141418;
	--bg-tertiary: #1e1e24;
	--bg-elevated: #252530;
	--border-primary: #2a2a32;
	--border-secondary: #363640;
	--text-primary: #e0e4eb;
	--text-secondary: #a8b0c0;
	--text-muted: #5c6370;
	--accent-cyan: #52c9e8;
	--accent-cyan-10: color-mix(in srgb, #52c9e8 10%, transparent);
	--accent-cyan-15: color-mix(in srgb, #52c9e8 15%, transparent);
	--accent-cyan-20: color-mix(in srgb, #52c9e8 20%, transparent);
	--accent-cyan-30: color-mix(in srgb, #52c9e8 30%, transparent);
	--accent-cyan-45: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
	--accent-cyan-60: color-mix(in srgb, var(--accent-cyan) 60%, transparent);
	--glow-cyan-subtle: 0 0 3px color-mix(in srgb, var(--accent-cyan) 12%, transparent);
	--glow-cyan-soft: 0 0 4px color-mix(in srgb, var(--accent-cyan) 18%, transparent);
	--accent-green: #5cb85c;
	--accent-red: #dc5c5c;
	--accent-yellow: #c9a227;
	--status-ok: var(--accent-green);
	--status-warn: var(--accent-yellow);
	--status-err: var(--accent-red);

	/* Text on accent-colored backgrounds (admin user avatar, etc.) */
	--text-on-accent: #fff;

	/* Provider API key status — teal/amber pair distinct from status-ok/warn */
	--provider-key-set-color: #5a9;
	--provider-key-set-bg: rgba(80, 160, 100, 0.12);
	--provider-key-missing-color: #c84;
	--provider-key-missing-bg: rgba(200, 130, 40, 0.12);

	/* Dashboard live-activity status hues (dashboard panels, endpoints table).
	   Tailwind-style palette chosen for glanceable distinction across five
	   states; intentionally different from --status-ok/warn/err which are
	   Minnesota-palette-tuned. */
	--live-status-connected: #22c55e; /* green — fully connected / engaged */
	--live-status-working: #f59e0b; /* amber — agent actively working */
	--live-status-stream: #06b6d4; /* cyan — streaming / tool activity */
	--live-status-recent: #64748b; /* slate — recent but inactive */
	--live-status-idle: #334155; /* dark slate — idle / dormant */
	--live-status-error: #ef4444; /* red — unreachable / failed */

	/* Endpoint vendor accents */
	--endpoint-kind-vllm: #a970ff; /* purple — vLLM vendor */
	--endpoint-kind-llamacpp: #ffa657; /* orange — llama.cpp vendor */

	/* Dark overlay surfaces for tooltips / popovers (slightly bluer than
	   --bg-primary so they read as distinct elevated elements). */
	--chart-tooltip-surface: rgba(15, 15, 20, 0.92);
	--popover-surface-dark: rgba(15, 15, 20, 0.95);

	--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
	--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;
	--shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
	--shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
	--shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.4);
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--duration-fast: 100ms;
	--duration-normal: 150ms;
	--duration-slow: 200ms;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: inherit;
}

:is(a, button, [role="button"], .btn-signin, .btn-save, .btn-stop, .btn-recreate):focus-visible {
	outline: 2px solid var(--accent-cyan);
	outline-offset: 2px;
}

/* Touch polish: suppress the default grey tap highlight on iOS / Android
   (we handle feedback via :active scale). Matches the main-app convention. */
a,
button,
[role="button"],
.admin-nav-item,
.admin-user-dropdown-item {
	-webkit-tap-highlight-color: transparent;
}

/* Press feedback — a subtle 3% scale-down on active matches the main app.
   Declared with the transform transition so Safari animates smoothly. */
.btn-signin,
.btn-save,
.btn-stop,
.btn-recreate,
.btn-reset,
.btn-resources,
.btn-logs,
.btn-restart-sidecar,
.btn-mcp-action,
.btn-mcp-add,
.btn-mcp-save,
.btn-mcp-cancel,
.btn-confirm-ok,
.btn-queue-toggle,
.btn-cancel-run,
.btn-recreate-all,
.btn-fetch,
.admin-user-btn,
.admin-nav-item,
.log-hide-btn,
.admin-sidebar-add,
.admin-pf-btn {
	transition:
		background var(--duration-normal),
		border-color var(--duration-normal),
		color var(--duration-normal),
		transform var(--duration-fast) ease;
}

.btn-signin:active,
.btn-save:active,
.btn-stop:active,
.btn-recreate:active,
.btn-reset:active,
.btn-resources:active,
.btn-logs:active,
.btn-restart-sidecar:active,
.btn-mcp-action:active,
.btn-mcp-add:active,
.btn-mcp-save:active,
.btn-mcp-cancel:active,
.btn-confirm-ok:active,
.btn-queue-toggle:active,
.btn-cancel-run:active,
.btn-recreate-all:active,
.btn-fetch:active,
.admin-user-btn:active,
.log-hide-btn:active,
.admin-sidebar-add:active,
.admin-pf-btn:active {
	scale: 0.97;
}

/* On touch devices :hover sticks after tap. Reset hover styles to match
   idle so the button doesn't look "pressed" until the user taps again. */
@media (hover: none) {
	.btn-stop:hover,
	.btn-recreate:hover,
	.btn-reset:hover,
	.btn-resources:hover,
	.btn-logs:hover,
	.btn-restart-sidecar:hover,
	.btn-mcp-action:hover,
	.btn-mcp-add:hover,
	.btn-confirm-ok:hover,
	.btn-queue-toggle:hover,
	.btn-cancel-run:hover,
	.btn-fetch:hover {
		background: transparent;
		color: var(--text-secondary);
		border-color: var(--border-primary);
	}
}

.skip-link {
	position: absolute;
	left: var(--space-4);
	top: -48px;
	padding: 8px 12px;
	border: 1px solid var(--accent-cyan);
	border-radius: var(--radius-md);
	background: var(--bg-secondary);
	color: var(--accent-cyan);
	font-family: var(--font-mono);
	font-size: 12px;
	text-decoration: none;
	z-index: 1000;
}

.skip-link:focus-visible {
	top: var(--space-3);
}

/* ── Login page ───────────────────────────────────────────────────────── */
.login-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(32px, 6vh, 48px);
	min-height: 100dvh;
	padding: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px))
		calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
	background:
		radial-gradient(
			circle at 18% 12%,
			color-mix(in srgb, var(--accent-cyan) 10%, transparent),
			transparent 45%
		),
		radial-gradient(
			circle at 82% 90%,
			color-mix(in srgb, var(--accent-cyan) 8%, transparent),
			transparent 50%
		), var(--bg-primary);
	user-select: none;
}

/* Animated logo wrapper */
.login-logo-anim {
	pointer-events: none;
}

.login-logo-anim svg {
	display: block;
	width: min(260px, 90vw);
	height: auto;
	color: var(--text-primary);
	overflow: visible;
}

/* Logo block animation — mirrors empty-state.css */
.logo-block {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center top;
	animation: logo-block-enter 0.4s ease-out forwards;
	animation-delay: calc(180ms + var(--delay) * 18ms);
}

@keyframes logo-block-enter {
	from {
		opacity: 0;
		transform: perspective(400px) rotateX(-89deg);
	}
	to {
		opacity: 1;
		transform: perspective(400px) rotateX(0deg);
	}
}

.btn-signin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 48px;
	min-width: 180px;
	min-height: 44px;
	background: var(--accent-cyan-10);
	border: 1px solid var(--accent-cyan-20);
	border-radius: var(--radius-sm);
	color: var(--accent-cyan);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--duration-normal),
		border-color var(--duration-normal);
	opacity: 0;
	animation: login-btn-enter 0.35s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
	animation-delay: 1.2s;
}

.btn-signin:hover {
	background: var(--accent-cyan-20);
	border-color: var(--accent-cyan);
}

/* Button ejects up from below the border */
@keyframes login-btn-enter {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Border surges on both sides then settles — stroke-width expands equally in and out */
.logo-border {
	opacity: 0;
	animation: logo-border-enter 0.7s ease-out forwards;
	animation-delay: 1s;
}

@keyframes logo-border-enter {
	0% {
		opacity: 0;
		stroke-width: 5;
		filter: drop-shadow(0 0 0px #52b5dc);
	}
	25% {
		opacity: 1;
		stroke-width: 6;
		filter: drop-shadow(0 0 3px #73c6e5);
	}
	65% {
		opacity: 1;
		stroke-width: 5;
		filter: drop-shadow(0 0 2px #52b5dc);
	}
	100% {
		opacity: 1;
		stroke-width: 5;
		filter: drop-shadow(0 0 1px #52b5dc);
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo-block {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.btn-signin {
		animation: none;
		opacity: 1;
	}

	.logo-border {
		animation: none;
		opacity: 1;
		filter: none;
	}
}

/* ── Admin layout ─────────────────────────────────────────────────────── */
.admin-page {
	display: grid;
	grid-template-rows: auto 1fr;
	/* Pin the single implicit column to the grid container's width.
	   Without this, CSS Grid uses auto (= max-content) sizing, so any
	   child that's wider than the viewport (e.g. the horizontal admin
	   nav at <=800px with 11 tabs) stretches the whole grid column and
	   cascades to header + main + every panel inside. minmax(0, 1fr)
	   caps the column at 100% of the grid and lets content overflow
	   inside scroll wrappers instead of the whole page. */
	grid-template-columns: minmax(0, 1fr);
	min-height: 100dvh;
}

.admin-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: env(safe-area-inset-top, 0px) var(--space-6) 0;
	height: calc(52px + env(safe-area-inset-top, 0px));
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-primary);
	position: sticky;
	top: 0;
	z-index: 10;
	backdrop-filter: blur(6px);
}

.admin-header-title {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

.admin-header-sub {
	font-size: 12px;
	color: var(--text-secondary);
}

.admin-body {
	display: grid;
	grid-template-columns: 1fr 360px;
	padding: var(--space-6);
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	gap: var(--space-6);
}

.admin-panel {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-panel);
}

.panel-header {
	padding: 14px 20px;
	border-bottom: 1px solid var(--border-primary);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.panel-body {
	padding: var(--space-5);
}

/* ── User table ───────────────────────────────────────────────────────── */
.user-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.user-table th {
	text-align: left;
	padding: 8px 12px;
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-bottom: 1px solid var(--border-primary);
}

.user-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-secondary);
	color: var(--text-primary);
	font-family: var(--font-mono);
	font-size: 12px;
}

.user-table tr:last-child td {
	border-bottom: none;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-family: var(--font-mono);
	padding: 2px 8px;
	border-radius: 100px;
}

.status-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.status-running {
	color: var(--status-ok);
	background: color-mix(in srgb, var(--status-ok) 10%, transparent);
}
.status-stopped {
	color: var(--text-muted);
	background: color-mix(in srgb, var(--text-muted) 10%, transparent);
}
.status-exited {
	color: var(--status-warn);
	background: color-mix(in srgb, var(--status-warn) 10%, transparent);
}

.btn-stop {
	padding: 6px 10px;
	min-height: 32px;
	font-family: var(--font-mono);
	font-size: 11px;
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}

.btn-stop:hover {
	background: color-mix(in srgb, var(--status-err) 10%, transparent);
	border-color: var(--status-err);
	color: var(--status-err);
}

.container-actions {
	display: flex;
	gap: 6px;
}

.btn-recreate {
	padding: 6px 10px;
	min-height: 32px;
	font-family: var(--font-mono);
	font-size: 11px;
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}

.btn-recreate:hover {
	background: color-mix(in srgb, var(--status-warn) 10%, transparent);
	border-color: var(--status-warn);
	color: var(--status-warn);
}

.btn-reset {
	padding: 6px 10px;
	min-height: 32px;
	font-family: var(--font-mono);
	font-size: 11px;
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}

.btn-reset:hover {
	background: color-mix(in srgb, var(--status-err) 10%, transparent);
	border-color: var(--status-err);
	color: var(--status-err);
}

/* ── Config form ──────────────────────────────────────────────────────── */
.config-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-label {
	font-size: 11px;
	font-family: var(--font-mono);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.form-input {
	padding: 8px 10px;
	background: var(--bg-primary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: var(--font-mono);
	font-size: 13px;
	outline: none;
	transition: border-color var(--duration-normal);
}

.form-input:focus {
	border-color: var(--accent-cyan);
	box-shadow: 0 0 0 2px var(--accent-cyan-10);
}

/* Keyboard-only focus adopts the main-app double-ring pattern for
   visibility. Click focus keeps the subtle border-only treatment above. */
.form-input:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--bg-primary),
		0 0 0 4px var(--accent-cyan);
}

select.form-input {
	min-height: 36px;
	appearance: none;
	background-color: var(--bg-tertiary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c6370' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	padding-right: 32px;
	border-radius: var(--radius-md);
	cursor: pointer;
}

select.form-input:hover {
	border-color: var(--border-secondary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8b0c0' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}

select.form-input:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2352c9e8' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
}

.btn-save {
	padding: 9px 20px;
	min-height: 36px;
	background: var(--accent-cyan-10);
	border: 1px solid var(--accent-cyan-20);
	border-radius: var(--radius-sm);
	color: var(--accent-cyan);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background var(--duration-normal),
		border-color var(--duration-normal);
	align-self: flex-end;
}

.btn-save:hover {
	background: var(--accent-cyan-20);
	border-color: var(--accent-cyan);
}

.form-saved {
	font-size: 12px;
	color: var(--text-secondary);
	font-family: var(--font-mono);
	line-height: 1.4;
	min-height: 1.4em;
}

/* ── Logout link ──────────────────────────────────────────────────────── */
.logout-link {
	font-size: 12px;
	color: var(--text-secondary);
	text-decoration: none;
	font-family: var(--font-mono);
}
.logout-link:hover {
	color: var(--text-primary);
}

.btn-save:disabled,
.btn-stop:disabled,
.btn-recreate:disabled,
.btn-reset:disabled,
.btn-resources:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@media (max-width: 720px) {
	.login-page {
		gap: 32px;
		padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px))
			calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
	}

	.login-logo-anim svg {
		width: min(220px, 78vw);
	}

	.btn-signin {
		width: min(100%, 320px);
		padding: 12px 20px;
	}

	.admin-header {
		padding: env(safe-area-inset-top, 0px) var(--space-4) 0;
	}

	.panel-body {
		padding: var(--space-4);
	}

	.btn-stop,
	.btn-recreate,
	.btn-reset,
	.btn-resources,
	.btn-save {
		min-height: 36px;
	}
}

/* iOS Safari auto-zooms inputs with font-size < 16px on focus.
   Bump all admin text inputs to 16px on phone-sized viewports. */
@media (max-width: 560px) {
	.form-input,
	textarea.form-input,
	.admin-pf-resource-grid input {
		font-size: 16px;
	}

	/* Apple HIG / Material touch target minimum — 44px. Accept that
	   table rows and button rows grow taller on phones; this is correct
	   for touch. Covers every button that actually fires an action. */
	.btn-save,
	.btn-stop,
	.btn-recreate,
	.btn-reset,
	.btn-resources,
	.btn-logs,
	.btn-restart-sidecar,
	.btn-mcp-action,
	.btn-mcp-add,
	.btn-mcp-save,
	.btn-mcp-cancel,
	.btn-confirm-ok,
	.btn-queue-toggle,
	.btn-cancel-run,
	.btn-recreate-all,
	.btn-fetch,
	.admin-user-btn,
	.log-hide-btn,
	.admin-sidebar-add,
	.admin-pf-btn {
		min-height: 44px;
	}
}

@media (max-width: 480px) {
	.login-page {
		gap: 24px;
		padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px))
			calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
	}

	.login-logo-anim svg {
		width: min(190px, 74vw);
	}

	.btn-signin {
		max-width: 280px;
	}
}

/* Respect the user's motion preference — disable animations and shrink
   transitions so keyboard focus and state changes still respond crisply
   without kinetic effects. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.btn-signin:active,
	.btn-save:active,
	.btn-stop:active,
	.btn-recreate:active,
	.btn-reset:active,
	.btn-resources:active,
	.btn-logs:active,
	.btn-restart-sidecar:active,
	.btn-mcp-action:active,
	.btn-mcp-add:active,
	.btn-mcp-save:active,
	.btn-mcp-cancel:active,
	.btn-confirm-ok:active,
	.btn-queue-toggle:active,
	.btn-cancel-run:active,
	.btn-recreate-all:active,
	.btn-fetch:active,
	.admin-user-btn:active,
	.log-hide-btn:active,
	.admin-sidebar-add:active,
	.admin-pf-btn:active {
		scale: 1;
	}
}