/**
 * Kakapo Academy — LMS SPA theme overlay (KDS tier A).
 * Loaded on /lms/* shell only. Targets frappe-ui CSS variables + baked Tailwind utilities.
 */
@import url("/assets/kakapo_academy/css/kakapo-tokens.css");

/* Olive in oklch (~#7c8c03, hue 122) */
:root,
#app {
	--ka-olive-oklch-1: oklch(0.985 0.012 122);
	--ka-olive-oklch-2: oklch(0.96 0.03 122);
	--ka-olive-oklch-3: oklch(0.92 0.05 122);
	--ka-olive-oklch-5: oklch(0.62 0.13 122);
	--ka-olive-oklch-6: oklch(0.562 0.145 122);
	--ka-olive-oklch-7: oklch(0.48 0.12 122);
	--ka-olive-oklch-8: oklch(0.4 0.1 122);

	/* Surfaces — calm page chrome, content stays on white elevation tokens */
	--surface-base: var(--ka-olive-oklch-1);
	--surface-sidebar: var(--ka-olive-oklch-2);
	--surface-gray-1: oklch(0.98 0.008 122);
	--surface-gray-2: oklch(0.965 0.015 122);
	--surface-gray-3: oklch(0.94 0.02 122);

	/* Primary actions (solid buttons use gray-10 in frappe-ui) */
	--surface-gray-10: var(--ka-olive-oklch-6);
	--surface-green-6: var(--ka-olive-oklch-6);
	--surface-green-7: var(--ka-olive-oklch-7);

	/* Links & focus — one accent, less ERP-blue */
	--ink-blue-5: var(--ka-olive-oklch-5);
	--ink-blue-6: var(--ka-olive-oklch-6);
	--ink-blue-7: var(--ka-olive-oklch-7);
	--surface-blue-5: var(--ka-olive-oklch-6);
	--surface-blue-6: var(--ka-olive-oklch-6);
	--focus-outline-blue: color-mix(in oklch, var(--ka-olive-oklch-6) 42%, transparent);
	--focus-outline-green: color-mix(in oklch, var(--ka-olive-oklch-6) 40%, transparent);
	--focus-outline-default: color-mix(in oklch, var(--ka-olive-oklch-6) 35%, transparent);

	--surface-teal-5: var(--ka-olive-oklch-6);
	--surface-teal-6: var(--ka-olive-oklch-6);
	--surface-teal-7: var(--ka-olive-oklch-7);
	--ink-teal-6: var(--ka-olive-oklch-6);
	--ink-teal-7: var(--ka-olive-oklch-7);
}

[data-theme="dark"],
[data-theme="dark"] #app {
	--surface-base: oklch(0.2 0.02 122);
	--surface-sidebar: oklch(0.17 0.022 122);
	--surface-gray-1: oklch(0.24 0.02 122);
	--surface-gray-2: oklch(0.28 0.025 122);
	--surface-gray-3: oklch(0.32 0.028 122);
	--surface-elevation-1: oklch(0.22 0.02 122);
	--surface-elevation-2: oklch(0.25 0.022 122);
	--surface-gray-10: var(--ka-olive-oklch-5);
	--ink-blue-6: oklch(0.72 0.12 122);
	--ink-blue-7: oklch(0.78 0.11 122);
	--focus-outline-blue: color-mix(in oklch, var(--ka-olive-oklch-5) 50%, transparent);
}

body:has(#app) {
	background-color: var(--ka-bg);
	color: var(--ka-text);
}

#app {
	-webkit-font-smoothing: antialiased;
}

/* Sidebar wayfinding — active item (frappe-ui uses bg-surface-gray-2 on current link) */
#app .bg-surface-sidebar nav .bg-surface-gray-2,
#app .bg-surface-sidebar .bg-surface-gray-2.rounded-md,
#app .bg-surface-sidebar a.bg-surface-gray-2,
#app .bg-surface-sidebar button.bg-surface-gray-2 {
	background-color: var(--ka-brand-olive-surface) !important;
	color: var(--ka-brand-olive-darker) !important;
	box-shadow: inset 3px 0 0 var(--ka-brand-olive);
}

#app .bg-surface-sidebar nav a:hover,
#app .bg-surface-sidebar nav button:hover {
	background-color: color-mix(in srgb, var(--ka-brand-olive-muted) 55%, transparent);
}

/* In-content links using ink utilities */
#app a.text-ink-blue-6,
#app a.text-ink-blue-7,
#app .text-ink-blue-6,
#app .text-ink-blue-7 {
	color: var(--ka-brand-olive-dark);
}

#app a.text-ink-blue-6:hover,
#app a.text-ink-blue-7:hover {
	color: var(--ka-brand-olive-darker);
}

/* Baked Tailwind utilities (oklch in bundle — override under #app) */
#app .bg-teal-500,
#app .bg-blue-500,
#app .bg-blue-700 {
	background-color: var(--ka-brand-olive) !important;
}

#app .bg-teal-100,
#app .bg-blue-100,
#app .bg-blue-200 {
	background-color: var(--ka-brand-olive-muted) !important;
}

#app .text-teal-600,
#app .text-blue-600,
#app .text-blue-700 {
	color: var(--ka-brand-olive-dark) !important;
}

#app .bg-green-500,
#app .bg-green-700 {
	background-color: var(--ka-mastered) !important;
}

#app .bg-green-100,
#app .bg-green-200 {
	background-color: color-mix(in srgb, var(--ka-mastered) 18%, white) !important;
}

/* Progress / success chips — align with concept map semantics */
#app .text-green-700,
#app .text-green-800 {
	color: var(--ka-mastered) !important;
}

#app img[src*="kakapo-mark"] {
	width: 2.1rem;
	height: 1.75rem;
	object-fit: contain;
}

/* @assistant request progress (lms_assistant_status_patch.js) */
.ka-assistant-status {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 1200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.65rem;
	max-width: min(32rem, calc(100vw - 2rem));
	padding: 0.65rem 0.9rem;
	border-radius: 0.75rem;
	border: 1px solid var(--ka-border);
	background: var(--ka-surface);
	box-shadow: var(--ka-shadow);
	font-size: 0.85rem;
	color: var(--ka-text);
}

.ka-assistant-status.is-pending {
	border-color: color-mix(in srgb, var(--ka-practicing) 45%, var(--ka-border));
}

.ka-assistant-status.is-slow {
	border-color: color-mix(in srgb, var(--ka-practicing) 65%, var(--ka-border));
}

.ka-assistant-status.is-failed {
	border-color: color-mix(in srgb, #b42318 40%, var(--ka-border));
	background: color-mix(in srgb, #fef3f2 70%, var(--ka-surface));
}

.ka-assistant-status-spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid color-mix(in srgb, var(--ka-muted) 35%, transparent);
	border-top-color: var(--ka-primary);
	border-radius: 50%;
	animation: ka-assistant-spin 0.75s linear infinite;
}

@keyframes ka-assistant-spin {
	to {
		transform: rotate(360deg);
	}
}

.ka-assistant-status-text {
	font-weight: 600;
}

.ka-assistant-status-timer {
	font-variant-numeric: tabular-nums;
	color: var(--ka-muted);
}

.ka-assistant-status-slow {
	flex: 1 1 100%;
	font-size: 0.78rem;
	color: var(--ka-muted);
}

.ka-assistant-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: #b42318;
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
	cursor: help;
}

.ka-assistant-status-hint {
	font-size: 0.78rem;
	color: var(--ka-muted);
	cursor: help;
	text-decoration: underline dotted;
}