/**
 * Gheen Academy — design tokens, scoped reset, shared components.
 *
 * RTL is handled entirely by CSS logical properties (margin-inline-start,
 * inset-inline-end, and friends). One stylesheet serves both directions:
 * no rtlcss build step, no second file to keep in sync.
 *
 * Dark mode re-declares token values only. No component rule changes.
 *
 * @package GheenAcademy
 */

:root {
	/* Typography. Swap --gha-font-sans for a brand webfont in one place. */
	--gha-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Noto Sans Arabic", "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
	--gha-font-num: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

	--gha-text-xs: 0.75rem;
	--gha-text-sm: 0.8125rem;
	--gha-text-base: 0.9375rem;
	--gha-text-lg: 1.0625rem;
	--gha-text-xl: 1.375rem;
	--gha-text-2xl: 1.875rem;

	/* Spacing — strict 4px scale. */
	--gha-1: 4px;
	--gha-2: 8px;
	--gha-3: 12px;
	--gha-4: 16px;
	--gha-5: 20px;
	--gha-6: 24px;
	--gha-8: 32px;
	--gha-10: 40px;
	--gha-12: 48px;
	--gha-16: 64px;

	/* Radii. */
	--gha-r-sm: 8px;
	--gha-r: 12px;
	--gha-r-lg: 16px;
	--gha-r-full: 999px;

	/* Brand. Replace these two with the academy palette; nothing else changes. */
	--gha-primary: #7a2e4a;
	--gha-primary-hover: #642440;
	--gha-primary-soft: #fbf1f4;
	--gha-on-primary: #ffffff;

	/* Neutrals. */
	--gha-bg: #f7f8fa;
	--gha-surface: #ffffff;
	--gha-surface-2: #f2f4f7;
	--gha-border: #e6e8ee;
	--gha-border-strong: #d2d7e0;
	--gha-text: #101828;
	--gha-text-2: #566072;
	--gha-text-3: #98a2b3;

	/* Feedback. */
	--gha-success: #027a48;
	--gha-success-soft: #ecfdf3;
	--gha-error: #b42318;
	--gha-error-soft: #fef3f2;
	--gha-info: #175cd3;
	--gha-info-soft: #eff8ff;

	/* Elevation — layered and low-blur, not a blur bomb. */
	--gha-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
	--gha-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	--gha-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.04);

	--gha-ring: 0 0 0 3px rgba(122, 46, 74, 0.16);
	--gha-transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--gha-primary: #c25f83;
		--gha-primary-hover: #d17a99;
		--gha-primary-soft: #2a1a22;
		--gha-on-primary: #ffffff;

		--gha-bg: #0e1014;
		--gha-surface: #16191f;
		--gha-surface-2: #1d212a;
		--gha-border: #262b35;
		--gha-border-strong: #333a47;
		--gha-text: #eceef2;
		--gha-text-2: #9aa3b2;
		--gha-text-3: #6b7484;

		--gha-success: #6ce9a6;
		--gha-success-soft: #05291b;
		--gha-error: #fda29b;
		--gha-error-soft: #2d1513;
		--gha-info: #84caff;
		--gha-info-soft: #0e2440;

		--gha-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--gha-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
		--gha-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
		--gha-ring: 0 0 0 3px rgba(194, 95, 131, 0.24);
	}
}

/* Explicit toggle wins over the OS preference, in both directions. */
:root[data-theme="dark"] {
	--gha-primary: #c25f83;
	--gha-primary-hover: #d17a99;
	--gha-primary-soft: #2a1a22;
	--gha-on-primary: #ffffff;

	--gha-bg: #0e1014;
	--gha-surface: #16191f;
	--gha-surface-2: #1d212a;
	--gha-border: #262b35;
	--gha-border-strong: #333a47;
	--gha-text: #eceef2;
	--gha-text-2: #9aa3b2;
	--gha-text-3: #6b7484;

	--gha-success: #6ce9a6;
	--gha-success-soft: #05291b;
	--gha-error: #fda29b;
	--gha-error-soft: #2d1513;
	--gha-info: #84caff;
	--gha-info-soft: #0e2440;

	--gha-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--gha-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
	--gha-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
	--gha-ring: 0 0 0 3px rgba(194, 95, 131, 0.24);
}

/* -------------------------------------------------------------------------
 * Scoped reset.
 *
 * Deliberately scoped to .gha-app: the plugin renders standalone documents,
 * but the active theme's stylesheet still loads through wp_head(). This keeps
 * it out of our UI without dequeuing anything and risking side effects.
 * ---------------------------------------------------------------------- */

.gha-body {
	margin: 0;
	background: var(--gha-bg);
	color: var(--gha-text);
	font-family: var(--gha-font-sans);
	font-size: var(--gha-text-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.gha-app,
.gha-app *,
.gha-app *::before,
.gha-app *::after {
	box-sizing: border-box;
}

.gha-app h1,
.gha-app h2,
.gha-app h3,
.gha-app p,
.gha-app ul,
.gha-app ol,
.gha-app figure {
	margin: 0;
	padding: 0;
}

.gha-app ul,
.gha-app ol {
	list-style: none;
}

.gha-app img,
.gha-app svg {
	display: block;
	max-width: 100%;
}

.gha-app a {
	color: inherit;
	text-decoration: none;
}

.gha-app button,
.gha-app input,
.gha-app select,
.gha-app textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

.gha-app :focus-visible {
	outline: 2px solid var(--gha-primary);
	outline-offset: 2px;
	border-radius: var(--gha-r-sm);
}

.gha-icon {
	flex: none;
}

.gha-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gha-skip {
	position: absolute;
	inset-inline-start: -9999px;
}

.gha-skip:focus {
	inset-inline-start: var(--gha-4);
	inset-block-start: var(--gha-4);
	z-index: 100;
	padding: var(--gha-2) var(--gha-4);
	background: var(--gha-surface);
	border-radius: var(--gha-r-sm);
	box-shadow: var(--gha-shadow-lg);
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.gha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gha-2);
	padding: 0 var(--gha-5);
	block-size: 42px;
	border: 1px solid transparent;
	border-radius: var(--gha-r-sm);
	background: var(--gha-surface-2);
	color: var(--gha-text);
	font-size: var(--gha-text-base);
	font-weight: 550;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--gha-transition), border-color var(--gha-transition), box-shadow var(--gha-transition);
}

.gha-btn--primary {
	background: var(--gha-primary);
	color: var(--gha-on-primary);
}

.gha-btn--primary:hover {
	background: var(--gha-primary-hover);
}

.gha-btn--primary:active {
	transform: translateY(1px);
}

.gha-btn--ghost {
	background: transparent;
	border-color: var(--gha-border-strong);
	color: var(--gha-text-2);
}

.gha-btn--ghost:hover {
	background: var(--gha-surface-2);
	color: var(--gha-text);
}

.gha-btn--block {
	inline-size: 100%;
}

.gha-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--gha-r-sm);
	background: transparent;
	color: var(--gha-text-2);
	cursor: pointer;
	transition: background var(--gha-transition), color var(--gha-transition);
}

.gha-icon-btn:hover {
	background: var(--gha-surface-2);
	color: var(--gha-text);
}

.gha-link {
	color: var(--gha-primary);
	font-weight: 550;
}

.gha-link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

.gha-form {
	display: flex;
	flex-direction: column;
	gap: var(--gha-4);
}

.gha-field {
	display: flex;
	flex-direction: column;
	gap: var(--gha-2);
}

.gha-field__label {
	font-size: var(--gha-text-sm);
	font-weight: 550;
	color: var(--gha-text-2);
}

.gha-field__required {
	color: var(--gha-error);
	margin-inline-start: 2px;
}

.gha-field__control {
	position: relative;
	display: flex;
	align-items: center;
}

.gha-field__input {
	inline-size: 100%;
	block-size: 44px;
	padding-inline: var(--gha-3);
	border: 1px solid var(--gha-border-strong);
	border-radius: var(--gha-r-sm);
	background: var(--gha-surface);
	color: var(--gha-text);
	transition: border-color var(--gha-transition), box-shadow var(--gha-transition);
}

.gha-field__control.has-icon .gha-field__input {
	padding-inline-start: var(--gha-10);
}

.gha-field__control.has-toggle .gha-field__input {
	padding-inline-end: var(--gha-10);
}

.gha-field__input::placeholder {
	color: var(--gha-text-3);
}

.gha-field__input:focus {
	outline: none;
	border-color: var(--gha-primary);
	box-shadow: var(--gha-ring);
}

.gha-field__icon {
	position: absolute;
	inset-inline-start: var(--gha-3);
	display: flex;
	color: var(--gha-text-3);
	pointer-events: none;
}

.gha-field__toggle {
	position: absolute;
	inset-inline-end: var(--gha-2);
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--gha-r-sm);
	background: transparent;
	color: var(--gha-text-3);
	cursor: pointer;
}

.gha-field__toggle:hover {
	color: var(--gha-text-2);
	background: var(--gha-surface-2);
}

.gha-field.is-invalid .gha-field__input {
	border-color: var(--gha-error);
}

.gha-field__error {
	font-size: var(--gha-text-sm);
	color: var(--gha-error);
}

.gha-field__help {
	font-size: var(--gha-text-sm);
	color: var(--gha-text-3);
}

/* Lives here rather than with the dashboard: the application form is a
   guest page, and it loads this stylesheet and no other. */
.gha-field__textarea {
	inline-size: 100%;
	padding: var(--gha-3);
	border: 1px solid var(--gha-border-strong);
	border-radius: var(--gha-r-sm);
	background: var(--gha-surface);
	color: var(--gha-text);
	line-height: 1.55;
	resize: vertical;
}

.gha-field__textarea:focus {
	outline: none;
	border-color: var(--gha-primary);
	box-shadow: var(--gha-ring);
}

/* A value shown rather than edited — an identity number already on file. */
.gha-field__static {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--gha-text-1);
}

.gha-check {
	display: inline-flex;
	align-items: center;
	gap: var(--gha-2);
	font-size: var(--gha-text-sm);
	color: var(--gha-text-2);
	cursor: pointer;
	user-select: none;
}

.gha-check input {
	inline-size: 16px;
	block-size: 16px;
	accent-color: var(--gha-primary);
	cursor: pointer;
}

.gha-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gha-3);
	flex-wrap: wrap;
	font-size: var(--gha-text-sm);
}

/* Honeypot: off-screen but not display:none, which some bots detect. */
.gha-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Alerts
 * ---------------------------------------------------------------------- */

.gha-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--gha-3);
	padding: var(--gha-3) var(--gha-4);
	border: 1px solid transparent;
	border-radius: var(--gha-r-sm);
	font-size: var(--gha-text-sm);
	line-height: 1.5;
}

.gha-alert__icon {
	display: flex;
	margin-block-start: 1px;
}

.gha-alert__list {
	display: flex;
	flex-direction: column;
	gap: var(--gha-1);
}

.gha-alert--error {
	background: var(--gha-error-soft);
	border-color: color-mix(in srgb, var(--gha-error) 24%, transparent);
	color: var(--gha-error);
}

.gha-alert--success {
	background: var(--gha-success-soft);
	border-color: color-mix(in srgb, var(--gha-success) 24%, transparent);
	color: var(--gha-success);
}

.gha-alert--info {
	background: var(--gha-info-soft);
	border-color: color-mix(in srgb, var(--gha-info) 24%, transparent);
	color: var(--gha-info);
}

.gha-alert--neutral {
	background: var(--gha-surface-2);
	border-color: var(--gha-border);
	color: var(--gha-text-2);
}

.gha-alert a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Stat card / empty state
 * ---------------------------------------------------------------------- */

.gha-stat {
	display: flex;
	flex-direction: column;
	gap: var(--gha-2);
	padding: var(--gha-5);
	block-size: 100%;
	background: var(--gha-surface);
	border: 1px solid var(--gha-border);
	border-radius: var(--gha-r);
	box-shadow: var(--gha-shadow-sm);
}

.gha-stat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gha-2);
}

.gha-stat__label {
	font-size: var(--gha-text-sm);
	font-weight: 550;
	color: var(--gha-text-2);
}

.gha-stat__icon {
	display: flex;
	color: var(--gha-text-3);
}

.gha-stat__value {
	font-size: var(--gha-text-2xl);
	font-weight: 650;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.gha-stat.is-placeholder .gha-stat__value {
	color: var(--gha-text-3);
}

.gha-stat__hint {
	font-size: var(--gha-text-xs);
	color: var(--gha-text-3);
}

.gha-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gha-2);
	padding: var(--gha-12) var(--gha-6);
	text-align: center;
}

.gha-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: var(--gha-2);
	border-radius: var(--gha-r-full);
	background: var(--gha-surface-2);
	color: var(--gha-text-3);
}

.gha-empty__title {
	font-size: var(--gha-text-lg);
	font-weight: 600;
}

.gha-empty__text {
	max-inline-size: 46ch;
	font-size: var(--gha-text-sm);
	color: var(--gha-text-2);
}

.gha-empty .gha-btn {
	margin-block-start: var(--gha-3);
}

@media (prefers-reduced-motion: reduce) {
	.gha-app *,
	.gha-app *::before,
	.gha-app *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * Language switcher
 * ---------------------------------------------------------------------- */

.gha-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: var(--gha-r-sm);
	background: var(--gha-surface-2);
}

.gha-lang__item {
	padding: 4px var(--gha-2);
	border-radius: 6px;
	font-size: var(--gha-text-xs);
	font-weight: 600;
	color: var(--gha-text-3);
	white-space: nowrap;
	transition: background var(--gha-transition), color var(--gha-transition);
}

.gha-lang__item:hover {
	color: var(--gha-text);
}

.gha-lang__item.is-active {
	background: var(--gha-surface);
	color: var(--gha-primary);
	box-shadow: var(--gha-shadow-sm);
}

.gha-auth__lang {
	align-self: flex-start;
}