/* CoachKar visual language, derived from the CatchKar design system. */
:root,
[data-theme="light"] {
	--coachkar-navy: #0f1c26;
	--coachkar-navy-600: #2a3a46;
	--coachkar-ocean: #1e6b8c;
	--coachkar-ocean-900: #0d3d52;
	--coachkar-ocean-50: #eef4f7;
	--coachkar-gold: #c8891a;
	--coachkar-gold-soft: #e8d098;
	--coachkar-page: #f4f7f9;
	--coachkar-page-soft: #f8fafb;
	--coachkar-border: #e4e8ec;
	--coachkar-muted: #596b78;

	--surface-base: #ffffff;
	--surface-sidebar: #f8fafb;
	--surface-gray-1: #f4f7f9;
	--surface-gray-2: #eef4f7;
	--surface-gray-3: #dceaf0;
	--surface-gray-4: #c0d8e8;
	--surface-elevation-1: #ffffff;
	--surface-elevation-2: #ffffff;
	--surface-elevation-3: #eef4f7;
	--ink-gray-5: #596b78;
	--ink-gray-6: #4a6070;
	--ink-gray-7: #2a3a46;
	--ink-gray-8: #0f1c26;
	--ink-gray-9: #0f1c26;
	--ink-blue-link: #1e6b8c;
	--outline-gray-1: #e4e8ec;
	--outline-gray-2: #dce3e8;
	--outline-gray-3: #c0d8e8;
	--outline-gray-4: #5a8a9e;
	--outline-gray-5: #1e6b8c;
}

[data-theme="dark"] {
	--coachkar-navy: #0f1c26;
	--coachkar-navy-600: #2a3a46;
	--coachkar-ocean: #4f9cbc;
	--coachkar-ocean-900: #0d3d52;
	--coachkar-ocean-50: #163446;
	--coachkar-gold: #d9a33d;
	--coachkar-gold-soft: #e8d098;
	--coachkar-page: #0b1720;
	--coachkar-page-soft: #10232f;
	--coachkar-border: #29404d;
	--coachkar-muted: #9bb0bd;

	--surface-base: #0f1c26;
	--surface-sidebar: #0b1720;
	--surface-gray-1: #152733;
	--surface-gray-2: #1a3241;
	--surface-gray-3: #214456;
	--surface-gray-4: #2b566b;
	--surface-elevation-1: #152733;
	--surface-elevation-2: #19303e;
	--surface-elevation-3: #0d3d52;
	--ink-gray-5: #9bb0bd;
	--ink-gray-6: #b7c6cf;
	--ink-gray-7: #d5dfe5;
	--ink-gray-8: #eef4f7;
	--ink-gray-9: #ffffff;
	--ink-blue-link: #79bdd8;
	--outline-gray-1: #29404d;
	--outline-gray-2: #355363;
	--outline-gray-3: #466b7e;
	--outline-gray-4: #5a8a9e;
	--outline-gray-5: #79bdd8;
}

html,
body,
#app {
	min-height: 100%;
}

html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] #app {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	background: var(--coachkar-page);
	color: var(--ink-gray-9);
	font-family: "InterVariable", "Inter", "Segoe UI", sans-serif;
	font-feature-settings: "ss01" 1, "cv01" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body,
html[lang="fa"] body,
:lang(fa) {
	font-family: "Vazirmatn", "Noto Sans Arabic", Tahoma, sans-serif;
}

.coachkar-shell main,
.coachkar-shell main > div,
.coachkar-shell main section,
.coachkar-shell main article {
	min-width: 0;
}

.coachkar-shell a[href*="/lms/courses/"] > .overflow-auto {
	overflow-x: hidden !important;
}

.coachkar-shell a[href*="/lms/courses/"] .mt-auto.flex.items-center.justify-between {
	min-width: 0;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.coachkar-shell [data-coachkar-hidden] {
	display: none !important;
}

main#main-content,
main#scrollContainer {
	background:
		radial-gradient(circle at 12% 8%, rgb(30 107 140 / 8%), transparent 28%),
		linear-gradient(180deg, var(--coachkar-page-soft), var(--coachkar-page));
	overflow-x: hidden !important;
}

.coachkar-shell [role="tablist"] {
	max-width: 100%;
	height: auto !important;
	flex-wrap: wrap;
	overflow: visible;
}

.bg-surface-sidebar {
	box-shadow: 12px 0 36px rgb(15 28 38 / 5%);
}

html[dir="rtl"] .bg-surface-sidebar {
	box-shadow: -12px 0 36px rgb(15 28 38 / 5%);
}

.bg-surface-elevation-3 {
	border: 1px solid color-mix(in srgb, var(--coachkar-ocean) 34%, transparent);
	color: var(--ink-gray-9);
}

.rounded-4 {
	border-radius: 10px !important;
}

.rounded-5 {
	border-radius: 12px !important;
}

.rounded-6 {
	border-radius: 16px !important;
}

.rounded-7 {
	border-radius: 20px !important;
}

.rounded-8 {
	border-radius: 24px !important;
}

.shadow-sm {
	box-shadow: 0 5px 18px rgb(15 28 38 / 8%) !important;
}

button,
a,
input,
textarea,
select {
	transition-duration: 180ms;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--coachkar-ocean) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--coachkar-ocean) 26%, transparent);
}

button.bg-surface-gray-7,
button.bg-surface-gray-8,
a.bg-surface-gray-7,
a.bg-surface-gray-8 {
	border-color: transparent !important;
	background: linear-gradient(135deg, var(--coachkar-navy), var(--coachkar-ocean-900)) !important;
	box-shadow: 0 10px 24px rgb(15 28 38 / 18%);
}

button.bg-surface-gray-7:hover,
button.bg-surface-gray-8:hover,
a.bg-surface-gray-7:hover,
a.bg-surface-gray-8:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.text-ink-amber-5 {
	color: var(--coachkar-gold) !important;
}

.bg-surface-amber-2,
.bg-surface-amber-3 {
	background-color: color-mix(in srgb, var(--coachkar-gold) 16%, var(--surface-base)) !important;
}

.header-frame {
	background: color-mix(in srgb, var(--surface-base) 92%, transparent);
	backdrop-filter: blur(16px);
}

@media (max-width: 639px) {
	main#main-content,
	main#scrollContainer {
		background: var(--coachkar-page);
	}

	.coachkar-shell .min-w-80 {
		min-width: 0 !important;
		width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}