/*
 * Hadara Accessibility — Presets
 * قاعدة 0.9: كل preset مبني حصريًا من Tokens، ولا توجد أي قيمة CSS خام هنا.
 * قاعدة 0.9.2: الحالات التفاعلية (hover / active / focus-visible / disabled)
 * موحّدة في hadara-a11y-frontend.css لكل الـ presets بلا استثناء،
 * والاستثناء الموثّق الوحيد هو "توهج خفيف" الذي يضيف توهجًا فوق السلوك الموحّد.
 */

/* ═══════════ أشكال الزر العائم ═══════════ */

/* Preset: circle-full — دائري كامل
   radius: full | shadow: lg | border: none | motion: base */
.hadara-a11y-btn-circle-full .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-lg);
}

/* Preset: circle-soft — دائري ناعم
   radius: xl | shadow: md | border: none | motion: base */
.hadara-a11y-btn-circle-soft .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-xl) !important;
	box-shadow: var(--hadara-shadow-md);
}

/* Preset: rounded-square — مربع مستدير
   radius: lg | shadow: md | border: none | motion: base */
.hadara-a11y-btn-rounded-square .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-lg) !important;
	box-shadow: var(--hadara-shadow-md);
}

/* Preset: soft-square — مربع ناعم
   radius: md | shadow: sm | border: thin | motion: base */
.hadara-a11y-btn-soft-square .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-md) !important;
	box-shadow: var(--hadara-shadow-sm);
	border: var(--hadara-border-thin) solid var(--hadara-color-accent) !important;
}

/* Preset: capsule — كبسولة
   radius: full | shadow: md | border: none | width: زر ممدود أفقيًا */
.hadara-a11y-btn-capsule { width: calc(var(--hadara-a11y-button-size) * 1.6); }
.hadara-a11y-btn-capsule .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-md);
}
.hadara-a11y-btn-capsule .hadara-a11y-toggle svg { width: 46%; height: 58%; }

/* Preset: glass — زجاجي
   radius: full | shadow: sm | border: thin (شفاف) | blur: md | glass-opacity: light */
.hadara-a11y-btn-glass .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-sm);
	border: var(--hadara-border-thin) solid rgba(255, 255, 255, .35) !important;
	backdrop-filter: blur(var(--hadara-blur-md));
	-webkit-backdrop-filter: blur(var(--hadara-blur-md));
	opacity: var(--hadara-glass-opacity-light);
}

/* Preset: outline — إطار فقط
   radius: full | shadow: none | border: medium | خلفية سطح */
.hadara-a11y-btn-outline .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-none);
	border: var(--hadara-border-medium) solid var(--hadara-color-brand) !important;
	background: var(--hadara-color-surface) !important;
	color: var(--hadara-color-brand) !important;
}

/* Preset: filled — مصمت
   radius: md | shadow: none | border: none */
.hadara-a11y-btn-filled .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-md) !important;
	box-shadow: var(--hadara-shadow-none);
}

/* Preset: neon — توهج خفيف
   radius: full | shadow: neon | border: thin | motion: base
   استثناء موثّق (قاعدة 0.9.2): يضيف توهجًا إضافيًا على hover فوق السلوك الموحّد. */
.hadara-a11y-btn-neon .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-neon);
	border: var(--hadara-border-thin) solid var(--hadara-color-accent) !important;
}
.hadara-a11y-btn-neon .hadara-a11y-toggle:hover {
	box-shadow: var(--hadara-shadow-neon), var(--hadara-shadow-lg);
}

/* Preset: double-border — إطار مزدوج
   radius: full | shadow: sm | border: double */
.hadara-a11y-btn-double-border .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-sm), 0 0 0 var(--hadara-border-double) var(--hadara-color-accent);
	border: var(--hadara-border-medium) solid var(--hadara-color-surface) !important;
}

/* Preset: badge — شارة بحلقة
   radius: full | shadow: md | حلقة خارجية بلون مميّز مفصولة بفراغ */
.hadara-a11y-btn-badge .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-md), 0 0 0 var(--hadara-border-thin) var(--hadara-color-surface),
		0 0 0 var(--hadara-border-double) var(--hadara-color-accent);
}

/* Preset: beveled — بارز مجسّم
   radius: lg | حافة سفلية داكنة تعطي عمقًا حقيقيًا للضغط */
.hadara-a11y-btn-beveled .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-lg) !important;
	box-shadow: 0 var(--hadara-border-double) 0 var(--hadara-color-brand-strong), var(--hadara-shadow-md);
	border: var(--hadara-border-thin) solid var(--hadara-color-brand-strong) !important;
}

.hadara-a11y-btn-beveled .hadara-a11y-toggle:active {
	box-shadow: 0 var(--hadara-border-thin) 0 var(--hadara-color-brand-strong), var(--hadara-shadow-sm);
}

/* Preset: ticket — بطاقة مشطوفة
   radius: مختلط | شكل غير متماثل يميّزه عن بقية الأشكال */
.hadara-a11y-btn-ticket .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-lg) var(--hadara-radius-sm) var(--hadara-radius-lg) var(--hadara-radius-sm) !important;
	box-shadow: var(--hadara-shadow-lg);
	border: var(--hadara-border-medium) solid var(--hadara-color-accent) !important;
}

/* Preset: ring-pulse — حلقة نابضة
   radius: full | حلقة تتنفّس ببطء، وتتوقّف تمامًا عند تفضيل تقليل الحركة */
.hadara-a11y-btn-ring-pulse .hadara-a11y-toggle {
	border-radius: var(--hadara-radius-full) !important;
	box-shadow: var(--hadara-shadow-md);
	position: relative;
}

.hadara-a11y-btn-ring-pulse .hadara-a11y-toggle::after {
	content: "";
	position: absolute;
	inset: calc(var(--hadara-border-double) * -1);
	border-radius: var(--hadara-radius-full);
	border: var(--hadara-border-medium) solid var(--hadara-color-accent);
	animation: hadara-a11y-ring 2.4s var(--hadara-ease) infinite;
	pointer-events: none;
}

@keyframes hadara-a11y-ring {
	0%, 100% { opacity: .85; transform: scale(1); }
	50%      { opacity: .25; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.hadara-a11y-btn-ring-pulse .hadara-a11y-toggle::after { animation: none; }
}

html.hadara-a11y-motion-reduced .hadara-a11y-btn-ring-pulse .hadara-a11y-toggle::after { animation: none; }

/* ═══════════ تصاميم النافذة ═══════════ */

/* Preset: classic — كلاسيكي
   radius: lg | shadow: xl | border: thin | spacing: lg */
.hadara-a11y-panel-classic .hadara-a11y-panel {
	border-radius: var(--hadara-radius-lg);
	box-shadow: var(--hadara-shadow-xl);
	border: var(--hadara-border-thin) solid var(--hadara-color-border);
}

/* Preset: soft — ناعم
   radius: xl | shadow: lg | border: none | spacing: lg */
.hadara-a11y-panel-soft .hadara-a11y-panel {
	border-radius: var(--hadara-radius-xl);
	box-shadow: var(--hadara-shadow-lg);
	border: var(--hadara-border-none);
}

/* Preset: elevated — مرتفع الظل
   radius: lg | shadow: xl مضاعف | border: none */
.hadara-a11y-panel-elevated .hadara-a11y-panel {
	border-radius: var(--hadara-radius-lg);
	box-shadow: var(--hadara-shadow-xl), var(--hadara-shadow-lg);
	border: var(--hadara-border-none);
}

/* Preset: bordered — محدَّد بإطار
   radius: md | shadow: none | border: medium */
.hadara-a11y-panel-bordered .hadara-a11y-panel {
	border-radius: var(--hadara-radius-md);
	box-shadow: var(--hadara-shadow-none);
	border: var(--hadara-border-medium) solid var(--hadara-color-brand);
}

/* Preset: minimal — بسيط
   radius: sm | shadow: sm | border: thin */
.hadara-a11y-panel-minimal .hadara-a11y-panel {
	border-radius: var(--hadara-radius-sm);
	box-shadow: var(--hadara-shadow-sm);
	border: var(--hadara-border-thin) solid var(--hadara-color-border);
}
.hadara-a11y-panel-minimal .hadara-a11y-panel__header {
	background: var(--hadara-color-surface);
	color: var(--hadara-color-text);
	border-block-end: var(--hadara-border-thin) solid var(--hadara-color-border);
}
.hadara-a11y-panel-minimal .hadara-a11y-panel__title { color: var(--hadara-color-text) !important; }
.hadara-a11y-panel-minimal .hadara-a11y-close {
	background: var(--hadara-color-surface-alt) !important;
	color: var(--hadara-color-text) !important;
}

/* Preset: glass — زجاجي
   radius: lg | shadow: lg | border: thin شفاف | blur: lg | glass-opacity: light */
.hadara-a11y-panel-glass .hadara-a11y-panel {
	border-radius: var(--hadara-radius-lg);
	box-shadow: var(--hadara-shadow-lg);
	border: var(--hadara-border-thin) solid rgba(255, 255, 255, .35);
	backdrop-filter: blur(var(--hadara-blur-lg));
	-webkit-backdrop-filter: blur(var(--hadara-blur-lg));
}
.hadara-a11y-panel-glass .hadara-a11y-panel__body,
.hadara-a11y-panel-glass .hadara-a11y-panel {
	background: color-mix(in srgb, var(--hadara-color-surface) 82%, transparent);
}

/* Preset: dark — داكن
   radius: lg | shadow: xl | border: thin | ألوان مقلوبة داخل النافذة فقط */
.hadara-a11y-panel-dark .hadara-a11y-panel {
	--hadara-color-surface: #161a20;
	--hadara-color-surface-alt: #1e242c;
	--hadara-color-border: #2c343f;
	--hadara-color-text: #e9edf2;
	--hadara-color-text-muted: #a8b4c0;
	border-radius: var(--hadara-radius-lg);
	box-shadow: var(--hadara-shadow-xl);
	border: var(--hadara-border-thin) solid var(--hadara-color-border);
	background: var(--hadara-color-surface);
	color: var(--hadara-color-text);
}

/* Preset: compact — مضغوط
   radius: md | shadow: md | border: thin | spacing: sm */
.hadara-a11y-panel-compact .hadara-a11y-panel {
	border-radius: var(--hadara-radius-md);
	box-shadow: var(--hadara-shadow-md);
	border: var(--hadara-border-thin) solid var(--hadara-color-border);
}
.hadara-a11y-panel-compact .hadara-a11y-panel__body { padding: var(--hadara-space-md); }
.hadara-a11y-panel-compact .hadara-a11y-tile { min-height: 74px; padding: var(--hadara-space-sm) var(--hadara-space-xs) !important; }
.hadara-a11y-panel-compact .hadara-a11y-section + .hadara-a11y-section { margin-block-start: var(--hadara-space-lg); }

/* ═══════════ تصاميم نوافذ جديدة — أزرار ونوافذ مختلفة كليًا ═══════════ */

/* Preset: ribbon — شريطي
   الأزرار صفوف أفقية كاملة العرض (أيقونة + نص جنبًا إلى جنب) بدل شبكة مربّعات،
   وكل صف يحمل شريطًا لونيًا على حافّته يوضّح حالة التفعيل. */
.hadara-a11y-panel-ribbon .hadara-a11y-panel {
	border-radius: var(--hadara-radius-md);
	box-shadow: var(--hadara-shadow-xl);
	border: var(--hadara-border-thin) solid var(--hadara-color-border);
}

.hadara-a11y-panel-ribbon .hadara-a11y-grid { grid-template-columns: minmax(0, 1fr); gap: var(--hadara-space-xs); }

.hadara-a11y-panel-ribbon .hadara-a11y-tile {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: var(--hadara-space-md);
	min-height: 46px;
	padding: var(--hadara-space-sm) var(--hadara-space-md) !important;
	text-align: start;
	border-radius: var(--hadara-radius-sm) !important;
	border-inline-start: var(--hadara-border-double) solid var(--hadara-color-border) !important;
}

.hadara-a11y-panel-ribbon .hadara-a11y-tile__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.hadara-a11y-panel-ribbon .hadara-a11y-tile__label { flex: 1 1 auto; text-align: start; }
.hadara-a11y-panel-ribbon .hadara-a11y-tile__levels { margin-block-start: 0; margin-inline-start: auto; }
.hadara-a11y-panel-ribbon .hadara-a11y-tile:hover { transform: none; box-shadow: var(--hadara-shadow-sm); }
.hadara-a11y-panel-ribbon .hadara-a11y-tile[aria-pressed="true"] { border-inline-start-color: var(--hadara-color-accent) !important; }

/* Preset: aurora — شفقي متدرّج
   رأس بتدرّج لوني، وأزرار دائرية الحواف بخلفية شفّافة وتوهّج عند التفعيل. */
.hadara-a11y-panel-aurora .hadara-a11y-panel {
	border-radius: var(--hadara-radius-xl);
	box-shadow: var(--hadara-shadow-xl);
	border: var(--hadara-border-none);
	overflow: hidden;
}

.hadara-a11y-panel-aurora .hadara-a11y-panel__header {
	background-image: linear-gradient(120deg, var(--hadara-color-brand), var(--hadara-color-accent));
}

.hadara-a11y-panel-aurora .hadara-a11y-tile {
	border-radius: var(--hadara-radius-lg) !important;
	background: color-mix(in srgb, var(--hadara-color-accent) 8%, var(--hadara-color-surface)) !important;
	border-color: color-mix(in srgb, var(--hadara-color-accent) 28%, transparent) !important;
}

.hadara-a11y-panel-aurora .hadara-a11y-tile[aria-pressed="true"] {
	background-image: linear-gradient(140deg, var(--hadara-color-brand), var(--hadara-color-accent)) !important;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--hadara-color-accent) 45%, transparent);
}

.hadara-a11y-panel-aurora .hadara-a11y-tile[aria-pressed="true"] .hadara-a11y-tile__icon { color: #ffffff; }

/* Preset: paper — ورقي أكاديمي
   خلفية عاجية، إطار مزدوج، عناوين أقسام بخطّ فاصل، وأزرار بحدّ سفلي بارز. */
.hadara-a11y-panel-paper .hadara-a11y-panel {
	--hadara-color-surface: #fffdf8;
	--hadara-color-surface-alt: #f8f2e4;
	--hadara-color-border: #d9cba8;
	border-radius: var(--hadara-radius-sm);
	box-shadow: var(--hadara-shadow-lg), 0 0 0 var(--hadara-border-thin) #c9a227 inset;
	border: var(--hadara-border-medium) solid #c9a227;
	background: var(--hadara-color-surface);
}

.hadara-a11y-panel-paper .hadara-a11y-section__title {
	padding-block-end: var(--hadara-space-xs) !important;
	border-block-end: var(--hadara-border-thin) solid #c9a227;
	color: #0b3d5c !important;
	letter-spacing: .04em !important;
}

.hadara-a11y-panel-paper .hadara-a11y-tile {
	border-radius: var(--hadara-radius-sm) !important;
	border-color: #d9cba8 !important;
	box-shadow: 0 var(--hadara-border-medium) 0 rgba(201, 162, 39, .35);
}

.hadara-a11y-panel-paper .hadara-a11y-tile[aria-pressed="true"] {
	background: #0b3d5c !important;
	border-color: #c9a227 !important;
	box-shadow: 0 var(--hadara-border-medium) 0 #c9a227;
}

.hadara-a11y-panel-paper .hadara-a11y-tile[aria-pressed="true"] .hadara-a11y-tile__icon { color: #c9a227; }

/* Preset: console — لوحة تحكّم داكنة
   واجهة داكنة دائمًا بخطّ عرض ثابت للعناوين وأزرار مربّعة الزوايا بحدّ متوهّج. */
.hadara-a11y-panel-console .hadara-a11y-panel {
	--hadara-color-surface: #10141b;
	--hadara-color-surface-alt: #171d26;
	--hadara-color-border: #293241;
	--hadara-color-text: #dfe7f1;
	--hadara-color-text-muted: #8ea0b6;
	border-radius: var(--hadara-radius-sm);
	box-shadow: var(--hadara-shadow-xl);
	border: var(--hadara-border-thin) solid #293241;
	background: var(--hadara-color-surface);
	color: var(--hadara-color-text);
}

.hadara-a11y-panel-console .hadara-a11y-panel__header {
	background: #0a0e14;
	border-block-end: var(--hadara-border-thin) solid var(--hadara-color-accent);
}

.hadara-a11y-panel-console .hadara-a11y-section__title {
	font-family: "Consolas", "Courier New", monospace !important;
	text-transform: uppercase;
	letter-spacing: .08em !important;
	color: var(--hadara-color-accent) !important;
}

.hadara-a11y-panel-console .hadara-a11y-tile {
	border-radius: var(--hadara-radius-none) !important;
	border-color: #293241 !important;
}

.hadara-a11y-panel-console .hadara-a11y-tile[aria-pressed="true"] {
	background: #0a0e14 !important;
	color: var(--hadara-color-accent) !important;
	border-color: var(--hadara-color-accent) !important;
	box-shadow: 0 0 0 var(--hadara-border-thin) var(--hadara-color-accent), 0 0 14px rgba(0, 178, 169, .35);
}

.hadara-a11y-panel-console .hadara-a11y-tile[aria-pressed="true"] .hadara-a11y-tile__icon { color: var(--hadara-color-accent); }

/* Preset: pill — أزرار كبسولية
   عمودان من الكبسولات الطويلة، أقرب لقوائم تطبيقات الهاتف. */
.hadara-a11y-panel-pill .hadara-a11y-panel {
	border-radius: var(--hadara-radius-xl);
	box-shadow: var(--hadara-shadow-lg);
	border: var(--hadara-border-thin) solid var(--hadara-color-border);
}

.hadara-a11y-panel-pill .hadara-a11y-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hadara-a11y-panel-pill .hadara-a11y-tile {
	flex-direction: row;
	align-items: center;
	gap: var(--hadara-space-sm);
	min-height: 44px;
	padding: var(--hadara-space-xs) var(--hadara-space-md) !important;
	border-radius: var(--hadara-radius-full) !important;
	text-align: start;
}

.hadara-a11y-panel-pill .hadara-a11y-tile__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.hadara-a11y-panel-pill .hadara-a11y-tile__label { flex: 1 1 auto; text-align: start; font-size: 11px !important; }
.hadara-a11y-panel-pill .hadara-a11y-tile__levels { margin: 0 0 0 auto; }

/* Preset: sheet — لوح سفلي عريض
   يمتدّ عرضًا كورقة سفلية، ورأسه يحمل مقبض سحب، وأزراره منخفضة الارتفاع. */
.hadara-a11y-panel-sheet .hadara-a11y-panel {
	border-radius: var(--hadara-radius-xl) var(--hadara-radius-xl) var(--hadara-radius-sm) var(--hadara-radius-sm);
	box-shadow: var(--hadara-shadow-xl);
	border: var(--hadara-border-none);
	width: min(calc(var(--hadara-a11y-panel-width, 360px) * 1.35), calc(100vw - var(--hadara-space-xl)));
}

.hadara-a11y-panel-sheet .hadara-a11y-panel__header {
	flex-direction: column;
	align-items: stretch;
	gap: var(--hadara-space-sm);
	padding-block-start: var(--hadara-space-sm);
	position: relative;
}

.hadara-a11y-panel-sheet .hadara-a11y-panel__header::before {
	content: "";
	width: 44px;
	height: 4px;
	margin: 0 auto;
	border-radius: var(--hadara-radius-full);
	background: rgba(255, 255, 255, .45);
}

.hadara-a11y-panel-sheet .hadara-a11y-close { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; }
.hadara-a11y-panel-sheet .hadara-a11y-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hadara-a11y-panel-sheet .hadara-a11y-tile { min-height: 76px; border-radius: var(--hadara-radius-lg) !important; }

@media (max-width: 782px) {
	.hadara-a11y-panel-sheet .hadara-a11y-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}