/**
 * Phase 1 — RTL directional foundation (light mode default)
 */

html[dir="rtl"] .as-root,
.as-root[dir="rtl"] {
	direction: rtl;
	text-align: start;
	background: var(--as-bg-canvas);
	color: var(--as-text-primary);
}

.as-root :is(h1, h2, h3, h4, h5, h6, p, li, span, a) {
	letter-spacing: var(--as-tracking-arabic) !important;
}

/* Container */
.as-container {
	inline-size: min(var(--as-container-default), 100% - var(--as-space-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--as-space-gutter);
}

.as-container--narrow {
	inline-size: min(var(--as-container-narrow), 100% - var(--as-space-gutter) * 2);
}

.as-container--wide {
	inline-size: min(var(--as-container-wide), 100% - var(--as-space-gutter) * 2);
}

/* Stack & cluster */
.as-stack {
	display: flex;
	flex-direction: column;
	gap: var(--as-stack-gap, var(--as-space-4));
}

.as-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--as-cluster-gap, var(--as-space-3));
}

/* Dashboard shell prep (Phase 2) */
.as-app-shell {
	display: grid;
	grid-template-columns: var(--as-sidebar-width) 1fr;
	grid-template-areas: "sidebar main";
	min-block-size: 100dvh;
	background: var(--as-bg-canvas);
}

.as-app-sidebar {
	grid-area: sidebar;
	border-inline-end: 1px solid var(--as-border-default);
	background: var(--as-bg-surface);
	box-shadow: var(--as-shadow-sm);
}

.as-app-main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.as-app-header {
	block-size: var(--as-header-height);
	padding-inline: var(--as-space-6);
	border-block-end: 1px solid var(--as-border-default);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--as-bg-glass);
	backdrop-filter: blur(var(--as-blur-glass));
}

.as-app-content {
	flex: 1;
	padding: var(--as-space-6);
}

@media (max-width: 1023px) {
	.as-app-shell {
		grid-template-columns: 1fr;
		grid-template-areas: "main";
	}

	.as-app-sidebar {
		display: none;
	}
}

/* Light glass card */
.as-glass {
	background: var(--as-bg-glass);
	border: 1px solid var(--as-border-default);
	backdrop-filter: blur(var(--as-blur-glass));
	border-radius: var(--as-radius-xl);
	box-shadow: var(--as-shadow-sm);
}

/* Subtle paper grain on light canvas */
.as-grain::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var(--as-z-base);
	opacity: var(--as-grain-opacity);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.as-icon-rtl,
[dir="rtl"] .as-icon-logical-forward {
	transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
	.as-root *,
	.as-root *::before,
	.as-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}