/* kinra cloud UI — login and admin pages.
   Tokens cascade from /styles/tokens.css (imported by both admin.html and
   login.html). This file only defines admin-specific surface tokens that
   the shared cascade does not own. */

/* ── Admin-specific tokens ────────────────────────────────────────────── */
:root {
	/* Surfaces (slightly different shade family from shared --border-color
	   rgba; admin chrome uses opaque hex variants for the sidebar/header.) */
	--border-primary: #2a2a32;
	--border-secondary: #363640;

	/* One notch above --bg-tertiary; used by admin user dropdown and the
	   kiosks resource card to read as a layered surface. */
	--bg-elevated: #252530;

	/* Admin chrome occasionally needs a 24px gap; shared cascade only
	   defines --space-1..5 (4/8/12/16/20). */
	--space-6: 24px;

	/* Severity (per design-language.md §Severity: fill density + Phosphor
	   icon, never hue). Border-weight (1px subtle vs 2px loud) is left to
	   the consumer's selector. */
	--severity-info-bg: var(--accent-cyan-12);
	--severity-info-border: var(--accent-cyan-25);
	--severity-warn-bg: var(--accent-cyan-18);
	--severity-warn-border: var(--accent-cyan-30);
	--severity-danger-bg: var(--accent-cyan-25);
	--severity-danger-border: var(--accent-cyan);
}

/* ── 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-sans);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: inherit;
}

/* Focus ring on chrome controls. .btn handles its own :focus-visible via
   buttons.css; this catches links, dropdown items, and the bespoke
   admin-user-btn / admin-nav-item that don't adopt .btn. */
:is(a, button, [role="button"]):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Touch polish: suppress the default grey tap highlight on iOS / Android.
   Press feedback comes through the existing border-color/background hover
   and active transitions — no scale, no transform. */
a,
button,
[role="button"],
.admin-nav-item,
.admin-user-dropdown-item {
	-webkit-tap-highlight-color: transparent;
}

/* On touch devices :hover sticks after tap. Reset .btn hover styles back
   to rest so the control doesn't look "pressed" until the user taps again. */
@media (hover: none) {
	.btn--secondary:hover {
		background: transparent;
		border-color: var(--accent-cyan-30);
	}
	.btn--icon:hover {
		background: transparent;
		color: var(--text-muted);
	}
	.btn--ghost:hover {
		background: var(--bg-tertiary);
		border-color: var(--border-color);
		color: var(--text-secondary);
	}
}

.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 ───────────────────────────────────────────────────────── */
/* Pure void per design-language.md §Surfaces — no gradients, no tints.
   Brand presence comes from the line-trace logo. */
.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: 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;
}

/* Block fade — opacity only, staggered by data-delay. Starts after the
   border line-trace finishes (~700ms). No transforms per the contract. */
.logo-block {
	opacity: 0;
	animation: logo-block-enter 250ms ease-out forwards;
	animation-delay: calc(700ms + var(--delay) * 18ms);
}

@keyframes logo-block-enter {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Sole CTA on the void login page — adopts .btn--primary and pairs it with
   the line-trace entrance animation (see §Motion). Only the layout/anim
   knobs live here; chrome (border, fill, color, hover) comes from buttons.css. */
.btn-signin {
	padding: 12px 48px;
	min-width: 180px;
	min-height: 44px;
	opacity: 0;
	animation: login-btn-enter 250ms ease-out forwards;
	animation-delay: 1200ms;
}

@keyframes login-btn-enter {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Border line-trace — the canonical "major arrival" gesture per
   design-language.md §Motion. login.js measures path.getTotalLength()
   and writes it into --trace-length so dashoffset starts fully hidden
   and resolves to 0 over 700ms. */
.logo-border {
	opacity: 1;
	animation: logo-border-trace 700ms ease-out forwards;
}

@keyframes logo-border-trace {
	from {
		stroke-dashoffset: var(--trace-length, 1500);
	}
	to {
		stroke-dashoffset: 0;
	}
}

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

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

	.logo-border {
		animation: none;
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

/* ── 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;
}

.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(--accent-cyan-25);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.panel-header {
	padding: 14px 20px;
	border-bottom: 1px solid var(--accent-cyan-25);
	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(--accent-cyan-25);
}

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

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

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

/* ── Empty state template ─────────────────────────────────────────────── */
/* Per design-language.md §Empty states: centered icon (1.5× body, medium
   cyan), headline (white), sub-line (dim white), optional CTA. Same shape
   for "all caught up" / "no kiosks" / "no results" / "no data". */
.admin-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-5) var(--space-4);
	text-align: center;
	color: var(--text-primary);
}

.admin-empty .ph {
	font-size: 21px;
	color: var(--accent-cyan-60);
	margin-bottom: var(--space-1);
}

.admin-empty-title {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-primary);
	margin: 0;
}

.admin-empty-sub {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-muted);
	margin: 0;
	max-width: 360px;
	line-height: 1.5;
}

.admin-empty .btn {
	margin-top: var(--space-3);
}

/* Empty cell variant — sits inside a colspan'd <td> so it doesn't grow
   the row beyond its natural rhythm. Icon stays inline with the text. */
td.admin-empty {
	padding: var(--space-4) var(--space-2);
}

/* ── 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);
}

/* Keyboard-only focus adopts the canonical double-ring; click focus keeps
   the subtle border-only treatment above. */
.form-input:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

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");
}

/* Save row primary button — sized larger than the default .btn so the
   primary CTA reads with weight on a sticky toolbar. Visual chrome comes
   from .btn--primary in buttons.css. */
#save-btn,
#recreate-workspaces-btn {
	padding: 9px 20px;
	min-height: 36px;
}

#save-btn {
	align-self: flex-end;
}

.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);
}

@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 {
		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.
	   .btn covers every action button via the canonical system; the bespoke
	   chrome controls (admin-user-btn, log-hide-btn) bump separately. */
	.btn,
	.admin-user-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;
	}
}