/**
 * Shihab Admin — مرجعية تصميم موحّدة (مدار + مجرّة)
 * يُحمَّل قبل admin-madar-shell.css أو admin-shell-fallback.css.
 * هوية كحلية-احترافية: تباين أوضح، ظلال طبقيّة، حدود دقيقة.
 * الألوان الأساسية: --aa-primary / --aa-secondary (يُحدَّثان من PHP عند الحاجة).
 * لتخصيص شامل: أضف قواعد تستهدف `.aa-ui-root { --aa-...: ... }` من إضافة مخصّصة أو سمة فرعية.
 * `.Shihab-madar-wrap` / `.Shihab-majarra-wrap` = معرّفات منصة (JS)؛ `.aa-ui-root` = نطاق CSS الموحّد.
 *
 * نقاط انكسار الجوال المعتمدة (لا تُضِف غيرها في وحدات المنظومة):
 *   782px  حدّ ووردبريس — تحوّل الواجهة إلى وضع اللمس
 *   640px  لوح صغير / هاتف عرضي — انهيار الأعمدة
 *   480px  هاتف — نمط الورقة (ملء العرض بلا زوايا)
 *
 * @author Shihab App
 */

@import url("fonts/almarai.css");


/**
 * مسار لوحة التحكم العام — القائمة الجانبية والشريط (قبل غلاف Shihab-madar-wrap).
 * يُكمّلها مقبض admin-admin-menus-unified؛ --aa-primary / --aa-secondary يُحدَّثان من PHP عند الحاجة.
 */
body.wp-admin {
	--aa-primary: #1a3354;
	--aa-secondary: #0b1f36;
	--aa-accent: #5ea3df;
	--aa-font-sans: "Almarai", sans-serif;
	--aa-font-ar: "Almarai", sans-serif;
	--aa-font-display-ltr: "Almarai", sans-serif;
	--aa-font-display-rtl: "Almarai", sans-serif;
	--aa-font-heading-ltr: var(--aa-font-display-ltr);
	--aa-font-heading-rtl: var(--aa-font-display-rtl);
	--aa-base-font-size: 13px;
	--aa-leading: 1.55;
	/* سُلَّم ارتفاع التحكّم — ثلاث درجات فقط */
	--aa-control-h-sm: 30px;
	--aa-control-h: 36px;
	--aa-control-h-lg: 44px;
	/* سُلَّم نص — أعداد صحيحة بـ rem (تستجيب لتكبير المتصفّح) */
	--aa-text-2xs: 0.6875rem; /* 11px */
	--aa-text-xs: 0.75rem;    /* 12px */
	--aa-text-sm: 0.8125rem;  /* 13px */
	--aa-text-md: 0.875rem;   /* 14px */
	--aa-text-lg: 1rem;       /* 16px */
	--aa-text-xl: 1.25rem;    /* 20px */
	--aa-text-2xl: 1.625rem;  /* 26px */
	--aa-text: #1a2838;
	--aa-muted: #4f5d6e;
	--aa-surface: #fbfcfe;
	--aa-border: color-mix(in srgb, var(--aa-primary) 9%, #c9d5e6);
	--aa-bg: #e4eaf4;
	--aa-text-on-brand: #ffffff;
	--aa-radius-md: 13px;
	--aa-radius-sm: 8px;
	--aa-radius-lg: 17px;
	--aa-radius-control: 10px;
	--aa-radius-xs: 5px;
	--aa-radius-pill: var(--aa-radius-control);
	--aa-radius-switch: 999px;
	--aa-font-mono: "Almarai", sans-serif;
	--aa-input-bg: #ffffff;
	--aa-input-border-width: 1px;
	--aa-input-padding-y: var(--aa-space-2);
	--aa-input-padding-x: var(--aa-space-3);
	--aa-input-font-size: 12px;
	--aa-form-field-gap: 16px;
	--aa-toolbar-field-stack-gap: 6px;
	--aa-focus-ring:
		0 0 0 2px var(--aa-surface),
		0 0 0 5px color-mix(in srgb, var(--aa-accent) 42%, transparent);
	--aa-success: #0f6b52;
	--aa-text-on-brand: #ffffff;
	/* aliases مبكرة للشاشات بلا غلاف (wp_die، رفض وصول، …) */
	--aa-color-success: var(--aa-success);
	--aa-border-subtle: var(--aa-border);
	--aa-fg: var(--aa-text);
	--aa-heading: var(--aa-text);
	--aa-text-muted: var(--aa-muted);
	--aa-success-mix: var(--aa-success);
	--aa-warning-mix: #8a4f0a;
	--aa-danger-mix: #b4232c;
	--aa-duration: 0.28s;
	--aa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	/* سُلَّم z — فوق شريط WP (~99999)؛ الترتيب أهم من الرقم */
	--aa-z-base: 1;
	--aa-z-sticky: 20;
	--aa-z-dropdown: 100040;
	--aa-z-float: 100050;
	--aa-z-float-menu: 100060;
	--aa-z-float-chrome: 100070;
	--aa-z-overlay: 100100;
	--aa-z-modal: 100110;
	--aa-z-toast: 100200;
	--aa-shadow-sm:
		0 1px 2px color-mix(in srgb, var(--aa-primary) 5%, transparent),
		0 4px 14px color-mix(in srgb, var(--aa-primary) 4%, transparent);
	--aa-shadow-md:
		0 2px 8px color-mix(in srgb, var(--aa-primary) 5%, transparent),
		0 12px 40px color-mix(in srgb, var(--aa-primary) 7%, transparent);

	/* منبثقات: طبقة خفيفة + blur قوي */
	--aa-modal-overlay-bg: color-mix(in srgb, var(--aa-primary) 10%, rgba(8, 14, 28, 0.28));
	--aa-modal-overlay-blur: 22px;
	--aa-modal-backdrop-saturate: 1.08;
	--aa-modal-backdrop-filter: blur(var(--aa-modal-overlay-blur)) saturate(var(--aa-modal-backdrop-saturate));
	--aa-modal-duration: 0.34s;
	--aa-modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--aa-modal-panel-max-w: min(100vw - 32px, 540px);
	--aa-modal-panel-max-h: min(92dvh, 880px);
	--aa-modal-panel-radius: var(--aa-radius-md);

	/* مقياس المسافات — على نطاق body كي يصل إلى شريط الإدارة والقائمة الجانبية */
	--aa-space-1: 4px;
	--aa-space-2: 8px;
	--aa-space-3: 12px;
	--aa-space-4: 16px;
	--aa-space-5: 24px;
	--aa-space-6: 32px;
	--aa-space-1x: 6px;
	--aa-space-2x: 10px;
	--aa-space-3x: 14px;
	--aa-space-4x: 20px;
	--aa-space-5x: 28px;

	/* Glass canvas — سديم اللوحة (يورث لخلفية body عند شاشات Shihab) */
	--aa-canvas-bg: #dfe7f4;
	--aa-canvas-mesh: color-mix(in srgb, var(--aa-primary) 9%, transparent);
	--aa-canvas-spot-a: color-mix(in srgb, var(--aa-accent) 40%, transparent);
	--aa-canvas-spot-b: color-mix(in srgb, var(--aa-primary) 26%, transparent);
	--aa-canvas-gradient:
		radial-gradient(ellipse 68% 46% at 100% -12%, var(--aa-canvas-spot-a), transparent 58%),
		radial-gradient(ellipse 58% 42% at -6% 108%, var(--aa-canvas-spot-b), transparent 56%),
		radial-gradient(ellipse 52% 40% at 12% 4%, color-mix(in srgb, color-mix(in srgb, var(--aa-primary) 46%, var(--aa-accent)) 24%, transparent), transparent 58%),
		radial-gradient(ellipse 90% 60% at 50% 46%, color-mix(in srgb, #fff 46%, transparent), transparent 74%);
}

.Shihab-majarra-wrap {
	color-scheme: light;
}

.aa-ui-root,
.Shihab-madar-wrap,
.Shihab-majarra-wrap {
	/* العلامة — تُحدَّث من الإعدادات */
	--aa-primary: #1a3354;
	--aa-secondary: #0b1f36;
	--aa-blue: var(--aa-primary);
	/* لمسة مميّزة داخل التدرجات */
	--aa-accent: #5ea3df;
	--aa-accent-soft: color-mix(in srgb, var(--aa-accent) 18%, var(--aa-primary));

	/* خطوط */
	--aa-font-sans: "Almarai", sans-serif;
	--aa-font-ar: "Almarai", sans-serif;
	--aa-font-display-ltr: "Almarai", sans-serif;
	--aa-font-display-rtl: "Almarai", sans-serif;
	/* عناوين الواجهة — يُستوردها admin-ui-unified */
	--aa-font-heading-ltr: var(--aa-font-display-ltr);
	--aa-font-heading-rtl: var(--aa-font-display-rtl);
	--aa-font-mono: "Almarai", sans-serif;
	--aa-leading: 1.55;
	--aa-leading-tight: 1.34;
	/* حجم النص الأساسي داخل الغلاف (يورث للخيارات والنماذج) */
	--aa-base-font-size: 13px;

	/* سُلَّم ارتفاع التحكّم — مصدر واحد (لا تُعاد الأرقام في طبقات لاحقة) */
	--aa-control-h-sm: 30px;
	--aa-control-h: 36px;
	--aa-control-h-lg: 44px;

	/* سُلَّم نص */
	--aa-text-2xs: 0.6875rem;
	--aa-text-xs: 0.75rem;
	--aa-text-sm: 0.8125rem;
	--aa-text-md: 0.875rem;
	--aa-text-lg: 1rem;
	--aa-text-xl: 1.25rem;
	--aa-text-2xl: 1.625rem;

	/* أسطح */
	--aa-bg: #e4eaf4;
	--aa-surface: #fbfcfe;
	--aa-surface-muted: color-mix(in srgb, var(--aa-bg) 64%, var(--aa-surface));
	--aa-border: color-mix(in srgb, var(--aa-primary) 9%, #c9d5e6);
	--aa-text: #1a2838;
	--aa-muted: #4f5d6e;
	--aa-text-on-brand: #ffffff;

	/* زوايا — الخارجية أوضح؛ الداخلية أقل استدارة */
	--aa-radius-xs: 5px;
	--aa-radius-sm: 8px;
	--aa-radius-md: 13px;
	--aa-radius-lg: 17px;
	--aa-radius-xl: 21px;
	/* غلاف الصفحة — يطابق القص الخارجي للرأس + الصدفة */
	--aa-radius-wrap: var(--aa-radius-lg);
	/* لم يعد كبسولة دائرية — يطابق زوايا الحقول والأزرار */
	--aa-radius-pill: var(--aa-radius-control);
	/* مسار المفتاح فقط يبقى مستديراً */
	--aa-radius-switch: 999px;
	/* مدخلات، أزرار، تبويبات جانبية */
	--aa-radius-control: 10px;
	/* مرجعية افتراضية للوحدات والقوالب القديمة — تساوي اللوحة المتوسطة */
	--aa-radius: var(--aa-radius-md);

	/* حركة */
	--aa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--aa-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--aa-duration: 0.28s;

	/* سُلَّم z — فوق شريط WP (~99999)؛ الترتيب أهم من الرقم */
	--aa-z-base: 1;
	--aa-z-sticky: 20;
	--aa-z-dropdown: 100040;
	--aa-z-float: 100050;
	--aa-z-float-menu: 100060;
	--aa-z-float-chrome: 100070;
	--aa-z-overlay: 100100;
	--aa-z-modal: 100110;
	--aa-z-toast: 100200;

	/* ظلال — طبقة قريبة + عمق */
	--aa-shadow-sm:
		0 1px 2px color-mix(in srgb, var(--aa-primary) 5%, transparent),
		0 4px 14px color-mix(in srgb, var(--aa-primary) 4%, transparent);
	--aa-shadow-md:
		0 2px 8px color-mix(in srgb, var(--aa-primary) 5%, transparent),
		0 12px 40px color-mix(in srgb, var(--aa-primary) 7%, transparent);
	--aa-shadow-lg:
		0 8px 24px color-mix(in srgb, #000 5%, transparent),
		0 24px 64px color-mix(in srgb, var(--aa-primary) 11%, transparent);
	--aa-elevate-panel:
		0 1px 2px color-mix(in srgb, var(--aa-primary) 4%, transparent),
		0 8px 32px color-mix(in srgb, var(--aa-primary) 6%, transparent);
	--aa-elevate-shell:
		0 1px 0 color-mix(in srgb, #fff 70%, transparent),
		0 6px 36px color-mix(in srgb, var(--aa-primary) 8%, transparent),
		0 16px 48px color-mix(in srgb, var(--aa-primary) 5%, transparent);
	--aa-hairline: color-mix(in srgb, var(--aa-primary) 6%, var(--aa-border));

	/* رأس الصدفة — تدرج كحلي عميق مع لمعان جانبي */
	--aa-header-gradient: linear-gradient(
		122deg,
		color-mix(in srgb, var(--aa-primary) 98%, #000) 0%,
		var(--aa-secondary) 38%,
		color-mix(in srgb, var(--aa-primary) 70%, var(--aa-accent)) 74%,
		color-mix(in srgb, var(--aa-secondary) 52%, var(--aa-accent-soft)) 100%
	);
	--aa-header-edge-glow: linear-gradient(
		105deg,
		transparent 8%,
		color-mix(in srgb, var(--aa-accent) 38%, transparent) 52%,
		color-mix(in srgb, #fff 42%, transparent) 100%
	);

	/* تركيز وإتاحة */
	--aa-focus-ring:
		0 0 0 2px var(--aa-surface),
		0 0 0 5px color-mix(in srgb, var(--aa-accent) 42%, transparent);

	/* إطار الصدفة وبطاقات الإحصاء */
	/* بلا إطار محيط — الفصل بالظل والسطح لا بالخط. أعِد اللون هنا لاسترجاعه. */
	--aa-shell-outline: 1px solid transparent;
	--aa-shell-inner-highlight: inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent);
	--aa-bento-card-border: color-mix(in srgb, var(--aa-primary) 5%, var(--aa-border));
	--aa-bento-card-bg: linear-gradient(
		168deg,
		var(--aa-surface) 0%,
		color-mix(in srgb, var(--aa-bg) 22%, var(--aa-surface)) 100%
	);

	/* هيكل */
	--aa-shell-nav-width: 224px;
	/* استدارة التقاء عمود التنقل مع جسم الصدفة — متوسطة لتجنب مظهر «منتفخ» */
	--aa-shell-seam-radius: var(--aa-radius-md);
	/* أوسع قليلاً من pad-surface-loose حتى لا تلتصق اللوحات العريضة (جداول/مراقبة) بالحافة */
	--aa-shell-body-pad-x: clamp(var(--aa-space-5), 3.5vw, 40px);
	--aa-shell-body-pad-y-top: var(--aa-pad-surface-loose);
	--aa-shell-body-pad-y-bottom: var(--aa-pad-surface-loose);

	/* جداول */
	--aa-table-outer: transparent;
	--aa-table-header-rule: color-mix(in srgb, var(--aa-primary) 9%, var(--aa-border));
	--aa-table-cell-py: 14px;
	--aa-table-cell-px: 18px;
	--aa-table-row-hover: color-mix(in srgb, var(--aa-primary) 5%, var(--aa-surface));
	--aa-table-zebra: color-mix(in srgb, var(--aa-bg) 42%, var(--aa-surface));

	/* لوحات */
	--aa-ui-section-gap: 1.5rem;
	--aa-ui-border: color-mix(in srgb, var(--aa-border) 65%, transparent);
	--aa-ui-toolbar-pad-x: var(--aa-space-4);
	--aa-ui-toolbar-pad-y: var(--aa-space-3);
	/* شريط أعلى اللوحات/البطاقات — ملغى بالكامل */
	--aa-ui-accent-bar: none;

	/* حالات — متناغمة مع الكحلي */
	--aa-success: #0f6b52;
	--aa-success-bg: color-mix(in srgb, #10b981 11%, var(--aa-surface));
	--aa-warning: #8a4f0a;
	--aa-warning-bg: color-mix(in srgb, #f59e0b 12%, var(--aa-surface));
	--aa-danger: #b4232c;
	--aa-danger-bg: color-mix(in srgb, #ef4444 10%, var(--aa-surface));
	--aa-info: #1e4a8c;
	--aa-info-bg: color-mix(in srgb, #3b82f6 10%, var(--aa-surface));

	/**
	 * أسماء بديلة / تراثية — وحدات ومكوّنات قديمة تستخدم هذه الأسماء.
	 * تُشير إلى التوكين الرسمي كي لا تسقط على ألوان ووردبريس أو Tailwind.
	 */
	--aa-color-success: var(--aa-success);
	--aa-border-subtle: var(--aa-border);
	--aa-fg: var(--aa-text);
	--aa-heading: var(--aa-text);
	--aa-text-muted: var(--aa-muted);
	--aa-success-mix: var(--aa-success);
	--aa-warning-mix: var(--aa-warning);
	--aa-danger-mix: var(--aa-danger);
	--aa-shell-alert-brand-bg: linear-gradient(
		180deg,
		color-mix(in srgb, var(--aa-primary) 10%, var(--aa-surface)) 0%,
		color-mix(in srgb, var(--aa-primary) 6%, var(--aa-surface)) 100%
	);
	/* يُضبط من PHP للجداول العريضة؛ 6 افتراضي آمن */
	--aa-col-count: 6;

	/* ——— مقياس مسافات (صفحات الوحدات + لوحات) ——— */
	--aa-space-1: 4px;
	--aa-space-2: 8px;
	--aa-space-3: 12px;
	--aa-space-4: 16px;
	--aa-space-5: 24px;
	--aa-space-6: 32px;
	/* أنصاف درجات — تُعبّر عن إيقاع عناصر التحكّم القائم بلا أرقام حرّة */
	--aa-space-1x: 6px;
	--aa-space-2x: 10px;
	--aa-space-3x: 14px;
	--aa-space-4x: 20px;
	--aa-space-5x: 28px;

	/**
	 * ——— حشو الأسطح: مصدر واحد لكل الكتل ———
	 *
	 * قبل هذه الكتلة كان في المشروع 319 تصريح `padding` بـ150 قيمة مختلفة،
	 * و`.aa-ui-panel--padded` نفسها لها تعريفان متضاربان في ملفين. النتيجة:
	 * هوامش داخلية غير منتظمة بين الكتل.
	 *
	 * القاعدة: لا يُكتب رقم حشو مباشرةً في أي ملف — يُشتقّ من هنا، وكل قيمة
	 * مبنية على `--aa-space-*` لا على أرقام حرّة. لتغيير كثافة الواجهة كلها
	 * يكفي تعديل هذه الأسطر.
	 */
	--aa-pad-surface: clamp(var(--aa-space-4), 2.2vw, var(--aa-space-5));
	--aa-pad-surface-tight: clamp(var(--aa-space-3), 1.6vw, var(--aa-space-4));
	--aa-pad-surface-loose: clamp(var(--aa-space-5), 3vw, var(--aa-space-6));

	/* صفوف داخل سطح: رأس، شريط أدوات، تذييل — رأسي أقل، أفقي مطابق للسطح */
	--aa-pad-head: var(--aa-space-4) var(--aa-pad-surface);
	--aa-pad-toolbar: var(--aa-space-3) var(--aa-space-4);
	--aa-pad-footer: var(--aa-space-4) var(--aa-pad-surface);

	/* بطاقات إحصاء وبلاطات */
	--aa-pad-card: var(--aa-pad-surface-tight);

	/*
	 * حافة أمان للإطارات: overflow:hidden على اللوحات/التبويبات يقصّ الحدود
	 * المستديرة وحلقة التركيز فتظهر كأقواس مقطوعة. هذه القيم تُبعد المحتوى
	 * عن خط القصّ دون إعادة تعريف الحشو في كل شاشة.
	 */
	--aa-frame-inset: 12px;
	--aa-frame-clip-margin: 8px;
	--aa-nav-tabs-pad-y: 8px;
	--aa-nav-tabs-pad-x: 6px;

	/* ——— غلاف الإدارة ——— */
	--aa-wrap-max-inner: 1320px;
	--aa-wrap-margin-top: 12px;
	--aa-wrap-margin-bottom: 32px;
	/* عمود المحتوى داخل الصدفة — أقل من الغلاف قليلاً لهوامش مريحة على الشاشات العريضة */
	--aa-page-max: 1180px;
	/* الصدفة تلاحق محتواها: 48vh كانت تفرض فراغاً كبيراً أسفل الصفحات القصيرة */
	--aa-shell-min-height: auto;

	/* ——— رأس الصدفة (أبعاد + لمسات) ——— */
	--aa-header-padding-y: var(--aa-space-5x);
	--aa-header-padding-x: var(--aa-space-6);
	--aa-header-margin-bottom: 20px;
	--aa-header-inner-gap: 16px;
	--aa-header-title-letter-spacing: -0.025em;
	--aa-header-title-text-shadow:
		0 1px 0 color-mix(in srgb, #000 22%, transparent),
		0 2px 24px color-mix(in srgb, #000 28%, transparent);
	--aa-header-glow-opacity: 0.48;
	--aa-header-glow-accent-pct: 35%;

	/* ——— عمود التنقل ——— */
	--aa-shell-nav-padding-y: var(--aa-space-3);
	--aa-shell-nav-padding-x: var(--aa-space-2x);
	--aa-shell-nav-stack-gap: 6px;
	/* شريط أقسام أفقي (سطح المكتب) */
	--aa-shell-nav-rail-pad-y: var(--aa-space-2x);
	--aa-shell-nav-rail-pad-x: clamp(var(--aa-space-3), 1.8vw, var(--aa-space-4));
	--aa-shell-nav-rail-gap-y: 8px;
	--aa-shell-nav-rail-gap-x: 4px;
	--aa-shell-nav-rail-bg: linear-gradient(
		180deg,
		color-mix(in srgb, var(--aa-bg) 97%, var(--aa-primary)) 0%,
		var(--aa-surface) 100%
	);
	--aa-shell-nav-bg: linear-gradient(
		180deg,
		var(--aa-bg) 0%,
		color-mix(in srgb, var(--aa-bg) 92%, var(--aa-primary)) 100%
	);
	--aa-nav-pill-padding-y: 0;
	--aa-nav-pill-padding-x: var(--aa-space-3);
	--aa-nav-pill-gap: 0;
	--aa-nav-pill-font-size: 12.5px;
	--aa-nav-pill-font-weight: 800;
	--aa-nav-tab-min-height: 42px;
	--aa-nav-icon-size: 20px;
	--aa-nav-icon-font-size: 20px;
	--aa-nav-muted-fallback: #64748b;
	--aa-nav-hover-tint-pct: 8%;
	--aa-nav-hover-nudge: 2px;
	--aa-nav-active-gradient-angle: 135deg;
	--aa-nav-active-secondary-mix-pct: 88%;
	--aa-nav-active-shadow:
		0 1px 0 color-mix(in srgb, #fff 22%, transparent),
		0 3px 10px color-mix(in srgb, #000 10%, transparent),
		0 10px 32px color-mix(in srgb, var(--aa-primary) 26%, transparent);

	/* ——— بنتو ——— */
	--aa-bento-min-col: 200px;
	--aa-bento-grid-gap: 16px;
	--aa-bento-grid-margin-bottom: 20px;
	--aa-bento-card-padding: var(--aa-pad-card);
	--aa-bento-card-hover-lift: 2px;
	--aa-bento-title-font-size: 11px;
	--aa-bento-title-tracking: 0.06em;
	--aa-bento-value-font-size: 28px;
	--aa-bento-value-font-weight: 800;

	/* ——— شريط أدوات ورأس لوحة ——— */
	--aa-toolbar-bg: color-mix(in srgb, var(--aa-bg) 70%, var(--aa-surface));
	--aa-toolbar-gap: 12px;
	--aa-toolbar-group-gap: 10px;
	--aa-toolbar-actions-gap: 10px;
	--aa-toolbar-form-row-gap: 14px;
	--aa-tab-panel-head-gap: 14px;
	--aa-tab-panel-head-margin-bottom: 4px;
	--aa-tab-panel-title-size: 16px;
	--aa-tab-panel-title-weight: 800;
	--aa-tab-panel-lead-size: 12px;
	/* تبويبات فرعية داخل الصدفة */
	--aa-subtab-bar-gap: 8px;
	--aa-subtab-bar-pad: var(--aa-space-1);
	--aa-subtab-bar-radius: var(--aa-radius-md);
	--aa-subtab-pad-y: var(--aa-space-2x);
	--aa-subtab-pad-x: var(--aa-space-4);
	--aa-subtab-font-size: var(--aa-text-sm, 13px);
	--aa-subtab-active-shadow: 0 5px 16px color-mix(in srgb, var(--aa-primary) 26%, transparent);
	--aa-filter-shell-gap-y: 14px;
	--aa-filter-shell-gap-x: 20px;
	--aa-filter-shell-margin-bottom: 16px;
	--aa-filter-shell-padding-y: var(--aa-space-3);
	--aa-filter-shell-padding-x: var(--aa-space-4);
	--aa-filter-shell-bg: linear-gradient(
		145deg,
		color-mix(in srgb, var(--aa-primary) 8%, var(--aa-surface)) 0%,
		var(--aa-surface) 55%,
		color-mix(in srgb, var(--aa-bg) 45%, var(--aa-surface)) 100%
	);
	--aa-toolbar-filters-gap-y: 14px;
	--aa-toolbar-filters-gap-x: 22px;
	--aa-toolbar-field-stack-gap: 6px;
	--aa-form-field-gap: var(--aa-space-4);
	--aa-card-body-pad: var(--aa-space-5);
	--aa-card-body-pad-bottom: var(--aa-space-6);
	--aa-control-check-size: 1rem;
	--aa-toolbar-field-label-size: 12px;
	--aa-toolbar-range-font-size: 12px;

	/* ——— مدخلات النماذج ——— */
	--aa-input-padding-y: var(--aa-space-2);
	--aa-input-padding-x: var(--aa-space-3);
	--aa-input-font-size: 12px;
	--aa-input-bg: #ffffff;
	--aa-input-border-width: 1px;

	/* ——— أزرار .btn-aa ——— */
	--aa-btn-padding-y: var(--aa-space-2);
	--aa-btn-padding-x: var(--aa-space-4);
	--aa-btn-font-size: 12px;
	--aa-btn-font-weight: 700;
	--aa-btn-border-width: 1px;
	--aa-btn-hover-lift: 2px;
	--aa-btn-outline-width: 2px;
	--aa-btn-outline-offset: 2px;
	--aa-btn-primary-hover-shadow: 0 4px 14px color-mix(in srgb, var(--aa-primary) 22%, transparent),
		0 12px 32px color-mix(in srgb, var(--aa-primary) 26%, transparent);
	--aa-btn-outline-hover-bg-mix-pct: 6%;
	--aa-btn-outline-hover-shadow: 0 6px 20px color-mix(in srgb, var(--aa-primary) 14%, transparent);
	--aa-btn-semantic-shadow-blur: 24px;
	--aa-btn-semantic-glow-pct: 38%;
	--aa-action-success: #10b981;
	--aa-action-warning: #f59e0b;
	--aa-action-danger: #ef4444;
	--aa-btn-compact-padding-y: var(--aa-space-2);
	--aa-btn-compact-padding-x: var(--aa-space-3x);
	--aa-btn-compact-font-size: 12px;
	/* تدرجات الأزرار ذات الأولوية (أساسي / حفظ) — تُستمد من الهوية + لمسة accent */
	--aa-btn-primary-gradient: linear-gradient(
		148deg,
		color-mix(in srgb, var(--aa-accent) 14%, var(--aa-primary)) 0%,
		var(--aa-primary) 40%,
		color-mix(in srgb, var(--aa-secondary) 90%, var(--aa-primary)) 100%
	);
	--aa-btn-primary-gradient-hover: linear-gradient(
		152deg,
		color-mix(in srgb, var(--aa-accent) 10%, var(--aa-secondary)) 0%,
		var(--aa-secondary) 48%,
		color-mix(in srgb, var(--aa-primary) 32%, #000) 100%
	);
	--aa-btn-primary-shine: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
	--aa-btn-primary-ambient: 0 1px 2px color-mix(in srgb, #000 14%, transparent);
	--aa-btn-primary-glow-hover: 0 6px 22px color-mix(in srgb, var(--aa-primary) 30%, transparent),
		0 2px 12px color-mix(in srgb, var(--aa-accent) 22%, transparent);
	--aa-btn-save-ring: 0 0 0 1px color-mix(in srgb, var(--aa-accent) 45%, transparent);

	/* تلميحات بصرية عند التمرير الأفقي للجداول */
	--aa-table-scroll-fade-size: 13px;
	--aa-table-scroll-fade-mix: 20%;
	--aa-table-scrollbar-thumb: color-mix(in srgb, var(--aa-primary) 35%, var(--aa-border));
	--aa-table-scrollbar-track: color-mix(in srgb, var(--aa-bg) 55%, var(--aa-surface));
	--aa-dual-scroll-rail-max: 15px;

	/* ——— ترقيم صفحات ——— */
	--aa-pager-padding-y: var(--aa-space-1x);
	--aa-pager-padding-x: var(--aa-space-2x);
	--aa-pager-item-margin: 2px;
	--aa-pager-item-radius: var(--aa-radius-xs);
	--aa-pager-item-min-width: 2rem;
	--aa-pager-border-mix-pct: 22%;
	--aa-pager-hover-bg-mix-pct: 10%;
	--aa-pager-current-shadow: 0 2px 10px color-mix(in srgb, var(--aa-primary) 32%, transparent);
	--aa-pager-current-gradient-angle: 135deg;

	/* ——— جداول .aa-table ——— */
	--aa-table-thead-bg: linear-gradient(
		180deg,
		color-mix(in srgb, var(--aa-bg) 40%, var(--aa-surface)) 0%,
		color-mix(in srgb, var(--aa-bg) 58%, var(--aa-surface)) 100%
	);
	--aa-table-thead-bg-scroll: linear-gradient(
		180deg,
		color-mix(in srgb, var(--aa-bg) 52%, var(--aa-surface)) 0%,
		color-mix(in srgb, var(--aa-primary) 8%, var(--aa-surface)) 100%
	);
	--aa-table-thead-font-weight: 800;
	--aa-table-thead-font-weight-scroll: 700;
	--aa-table-thead-font-size: 12px;
	--aa-table-thead-letter-spacing: 0.02em;
	--aa-table-thead-line-height: 1.45;
	--aa-table-thead-border-mix-pct: 35%;
	--aa-table-thead-border-mix-scroll-pct: 22%;
	--aa-table-body-font-size: 12px;
	--aa-table-body-line-height: 1.52;
	--aa-table-body-line-height-rtl: 1.58;
	--aa-table-row-num-font-size: 12px;
	--aa-table-row-num-font-weight: 700;
	--aa-table-wrapper-margin-bottom: 1.25rem;
	--aa-table-line-col-width: 3.25rem;
	--aa-table-line-col-max-width: 4rem;

	/* ——— شارات (خيار 1: مسطح) ——— */
	--aa-badge-padding-y: 0;
	--aa-badge-padding-x: 0;
	--aa-badge-font-size: 12px;
	--aa-badge-font-weight: 700;
	--aa-badge-letter-spacing: 0.02em;

	/* ——— تنبيهات داخل الصدفة ——— */
	--aa-shell-alert-padding-y: var(--aa-space-3x);
	--aa-shell-alert-padding-x: var(--aa-space-4);
	--aa-shell-alert-margin-bottom: 18px;
	--aa-shell-alert-font-size: 12px;
	--aa-shell-alert-line-height: 1.55;
	--aa-shell-alert-font-weight: 700;
	--aa-alert-success-surface: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
	--aa-alert-success-text: #065f46;
	--aa-alert-success-border: #6ee7b7;
	--aa-alert-error-surface: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
	--aa-alert-error-text: #991b1b;
	--aa-alert-error-border: #fca5a5;
	--aa-alert-warning-surface: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	--aa-alert-warning-text: #92400e;
	--aa-alert-warning-border: #fcd34d;
	--aa-alert-info-surface: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
	--aa-alert-info-text: #1e40af;
	--aa-alert-info-border: #93c5fd;

	/* ——— لوحات الواجهة (admin-ui-system) ——— */
	--aa-ui-accent-bar-height: 0;
	--aa-ui-page-title-size: 1.0625rem;
	--aa-ui-page-title-weight: 800;
	--aa-ui-module-name-size: 14px;
	--aa-ui-module-desc-size: 12px;
	--aa-ui-meta-size: 11px;
	--aa-ui-block-title-size: 13px;
	--aa-ui-form-th-size: 12px;
	--aa-ui-form-desc-size: 11px;
	--aa-ui-btn-stack-pad-y: var(--aa-space-1x);
	--aa-ui-btn-stack-pad-x: var(--aa-space-3x);
	--aa-ui-btn-stack-font-size: 11px;
	--aa-ui-logo-dash-mix-pct: 55%;

	/* ——— تدرج جسم الصدفة ——— */
	--aa-shell-body-bg: linear-gradient(
		185deg,
		color-mix(in srgb, var(--aa-surface) 92%, transparent) 0%,
		color-mix(in srgb, var(--aa-bg) 18%, var(--aa-surface)) 55%,
		color-mix(in srgb, var(--aa-primary) 3%, var(--aa-surface)) 100%
	);

	/* ——— Glass UI v3 — سديم كحلي + زجاج طبقي (الكحلي الأساسي ثابت) ——— */

	/* شدّة الضباب حسب الطبقة */
	--aa-glass-blur-xs: 6px;
	--aa-glass-blur-sm: 10px;
	--aa-glass-blur: 18px;
	--aa-glass-blur-strong: 28px;
	--aa-glass-saturate: 1.5;

	/* حدود زجاجية — أوضح من v2 لرفع التباين على السديم */
	--aa-glass-border: color-mix(in srgb, #fff 62%, var(--aa-primary) 14%);
	--aa-glass-border-soft: color-mix(in srgb, #fff 74%, var(--aa-primary) 9%);
	--aa-glass-border-hover: color-mix(in srgb, var(--aa-accent) 46%, #fff 34%);
	--aa-glass-border-strong: color-mix(in srgb, var(--aa-primary) 22%, #fff 60%);

	/* أسطح — زجاج حقيقي: شبه شفاف كي يظهر السديم خلفه */
	--aa-glass-surface: linear-gradient(
		168deg,
		color-mix(in srgb, #fff 84%, transparent) 0%,
		color-mix(in srgb, var(--aa-surface) 70%, transparent) 46%,
		color-mix(in srgb, var(--aa-bg) 42%, transparent) 100%
	);
	--aa-glass-surface-strong: linear-gradient(
		168deg,
		color-mix(in srgb, #fff 94%, transparent) 0%,
		color-mix(in srgb, var(--aa-surface) 88%, transparent) 100%
	);
	--aa-glass-surface-muted: linear-gradient(
		168deg,
		color-mix(in srgb, var(--aa-bg) 52%, transparent) 0%,
		color-mix(in srgb, var(--aa-surface) 62%, transparent) 100%
	);
	--aa-glass-surface-sunken: linear-gradient(
		180deg,
		color-mix(in srgb, var(--aa-primary) 6%, transparent) 0%,
		color-mix(in srgb, #fff 34%, transparent) 100%
	);

	/* حافة ضوئية علوية — تعطي حسّ حافة الزجاج */
	--aa-glass-rim: inset 0 1px 0 color-mix(in srgb, #fff 92%, transparent);
	--aa-glass-rim-inner: inset 0 0 0 1px color-mix(in srgb, #fff 46%, transparent);

	/* سُلّم الظلال الزجاجية — قريب + متوسط + عمق ملوّن بالكحلي */
	--aa-glass-shadow-xs:
		0 1px 2px color-mix(in srgb, var(--aa-primary) 8%, transparent),
		var(--aa-glass-rim);
	--aa-glass-shadow:
		0 2px 6px -2px color-mix(in srgb, var(--aa-primary) 16%, transparent),
		0 12px 28px -18px color-mix(in srgb, var(--aa-primary) 44%, transparent),
		0 32px 64px -44px color-mix(in srgb, var(--aa-secondary) 52%, transparent),
		var(--aa-glass-rim);
	--aa-glass-shadow-hover:
		0 4px 10px -3px color-mix(in srgb, var(--aa-primary) 18%, transparent),
		0 20px 40px -20px color-mix(in srgb, var(--aa-primary) 46%, transparent),
		0 44px 80px -48px color-mix(in srgb, var(--aa-accent) 44%, transparent),
		inset 0 1px 0 #fff;
	--aa-glass-shadow-float:
		0 8px 18px -6px color-mix(in srgb, var(--aa-primary) 22%, transparent),
		0 36px 72px -28px color-mix(in srgb, var(--aa-secondary) 46%, transparent),
		inset 0 1px 0 #fff;

	--aa-glass-sheen: linear-gradient(
		115deg,
		transparent 0%,
		transparent 40%,
		color-mix(in srgb, #fff 55%, transparent) 50%,
		transparent 60%,
		transparent 100%
	);

	/* ——— سديم اللوحة (nebula) — درجات مشتقة من الكحلي ——— */
	--aa-canvas-bg: #dfe7f4;
	--aa-canvas-mesh: color-mix(in srgb, var(--aa-primary) 9%, transparent);

	/**
	 * بؤر السديم — ضوء محيطي فقط، لا تُستعمل كألوان واجهة.
	 *
	 * كلّها مشتقّة من الكحلي الأساسي ومن لمسته الزرقاء (--aa-accent)، فتبقى
	 * العائلة اللونية واحدة ويتبعها السديم تلقائياً إن تغيّر لون العلامة.
	 * لا لون دافئ هنا: البؤرة الكهرمانية السابقة كانت خارج العائلة وأُزيلت.
	 */
	/* أزرق سماوي — ألمع البؤر */
	--aa-neb-a: color-mix(in srgb, var(--aa-accent) 74%, transparent);
	/* أزرق بنفسجي — كحلي مشوب بلمسة زرقاء */
	--aa-neb-b: color-mix(in srgb, color-mix(in srgb, var(--aa-primary) 46%, var(--aa-accent)) 66%, transparent);
	/* أزرق فولاذي فاتح — يفتح اللوحة دون خروج عن العائلة */
	--aa-neb-c: color-mix(in srgb, color-mix(in srgb, var(--aa-accent) 74%, #ffffff) 52%, transparent);
	/* كحلي عميق — يصنع الظل */
	--aa-neb-d: color-mix(in srgb, var(--aa-primary) 44%, transparent);
	/* كحلي مزرقّ خافت — بديل البؤرة الدافئة المحذوفة */
	--aa-neb-e: color-mix(in srgb, color-mix(in srgb, var(--aa-secondary) 60%, var(--aa-accent)) 30%, transparent);

	--aa-neb-blur: 68px;
	--aa-neb-blur-lg: 88px;
	--aa-neb-opacity: 1;
	--aa-neb-speed: 1;

	/* تدرّج ثابت خلف السديم — يضمن عمقاً حتى بلا حركة */
	--aa-canvas-spot-a: color-mix(in srgb, var(--aa-accent) 40%, transparent);
	--aa-canvas-spot-b: color-mix(in srgb, var(--aa-primary) 26%, transparent);
	--aa-canvas-gradient:
		radial-gradient(ellipse 68% 46% at 100% -12%, var(--aa-canvas-spot-a), transparent 58%),
		radial-gradient(ellipse 58% 42% at -6% 108%, var(--aa-canvas-spot-b), transparent 56%),
		radial-gradient(ellipse 52% 40% at 12% 4%, color-mix(in srgb, color-mix(in srgb, var(--aa-primary) 46%, var(--aa-accent)) 24%, transparent), transparent 58%),
		radial-gradient(ellipse 90% 60% at 50% 46%, color-mix(in srgb, #fff 46%, transparent), transparent 74%);

	/* تمرير المسارات على الأسطح الزجاجية */
	--aa-scrollbar-thumb: color-mix(in srgb, var(--aa-primary) 26%, transparent);
	--aa-scrollbar-thumb-hover: color-mix(in srgb, var(--aa-primary) 44%, transparent);
	--aa-scrollbar-track: color-mix(in srgb, var(--aa-primary) 5%, transparent);

	--aa-bento-card-bg: var(--aa-glass-surface);
	--aa-bento-card-border: var(--aa-glass-border);
	--aa-elevate-panel: var(--aa-glass-shadow);
	--aa-elevate-shell: var(--aa-glass-shadow-float);
	--aa-shell-nav-rail-bg: var(--aa-glass-surface-muted);
	--aa-filter-shell-bg: var(--aa-glass-surface-sunken);
	--aa-toolbar-bg: color-mix(in srgb, #fff 58%, transparent);
}

.Shihab-madar-wrap::selection,
.Shihab-madar-wrap *::selection {
	background: color-mix(in srgb, var(--aa-primary) 22%, transparent);
	color: var(--aa-text);
}

/* شاشات اللمس: سُلَّم ارتفاع صريح + خط حقول 16px لمنع تكبير iOS (M-02–M-04)
   + حشو أوضح ومساحات bento (M-07 · M-08)
   + أداء التمرير: بلا blur زجاجي مستمر وبلا سديم متحرك (M-perf) */
@media (max-width: 782px) {
	body.wp-admin:has(.Shihab-madar-wrap),
	body.wp-admin:has(.Shihab-majarra-wrap),
	.aa-ui-root,
	.Shihab-madar-wrap,
	.Shihab-majarra-wrap {
		--aa-control-h-sm: 36px;
		--aa-control-h: 44px;
		--aa-control-h-lg: 52px;
		--aa-input-font-size: 16px;
		--aa-pad-surface: var(--aa-space-3);
		--aa-shell-body-pad-x: var(--aa-pad-surface);
		--aa-shell-body-pad-y-top: var(--aa-pad-surface);
		--aa-shell-body-pad-y-bottom: var(--aa-pad-surface);
		--aa-bento-value-font-size: 22px;
		--aa-bento-grid-gap: var(--aa-space-2x);

		/* أقصر انتقالات — يكفي للإحساس دون إعادة رسم مستمرة أثناء السحب */
		--aa-duration: 0.12s;
		--aa-modal-duration: 0.18s;

		/* blur أثناء التمرير أغلى طبقة رسم على الجوال */
		--aa-glass-blur-xs: 0px;
		--aa-glass-blur-sm: 0px;
		--aa-glass-blur: 0px;
		--aa-glass-blur-strong: 0px;
		--aa-modal-overlay-blur: 0px;
		--aa-modal-backdrop-filter: none;
		--aa-neb-speed: 0;
	}
}