/* ===== Modernize الهادئ — الهوية الافتراضية =====
   قشرة Modernize (adminmart) على بنية rofofi القابلة للتخصيص، بمقياس أهدأ
   وأنسب تناغماً: أزرق أساسي مكتوم #4870D6 + سماوي ناعم #54B6E6 على أرضية
   رمادية محايدة باردة #f6f8fb، بطاقات بيضاء بظلال جدًا ناعمة منخفضة التباين،
   وزوايا 7px للعناصر التفاعلية و12px للبطاقات. التهدئة: خُفِض تشبّع الأساسي من
   ~100% إلى ~63% وعُمِّق قليلاً ليحلّ منسجماً مع المحايدات الباردة ويرفع تباين
   النص الأبيض على الأزرار (3.3→4.5:1). أسماء المتغيّرات ثابتة (خاصيّة تخصيص
   الهوية لكل مستأجر تعتمد عليها)؛ القيم وحدها هي التي رُتّبت لتحمل الهوية الهادئة. */

:root {
    /* === Base palette (Modernize identity — مهدّأ) ===
       لوحة Modernize بمقياس أهدأ ومنسجم: primary #4870D6، accent #54B6E6،
       mint #1FCBB0، danger #EC7D63، warning #EBA02E. رُمّمت على أسماء
       rofofi كي يستمر _fullTheme() والثيمات الـ16 في اشتقاق كل شيء منها. */
    --primary: #4870D6;
    --primary-hover: #3960C4;
    --primary-soft: #93ABE5;
    --primary-deep: #1E2A45;
    /* ألوان الهوية تتبع الأساسي (لا منتقيات مستقلة): المميّز مزيج الأساسي مع
       السماوي الأصلي، والثانوي الدافئ يميل للأساسي — كلاهما يتحرّك مع تخصيص
       الأساسي ويحتفظ بطابعه (بارد/دافئ). */
    --accent: color-mix(in srgb, var(--primary) 60%, #54B6E6);
    --accent-hover: color-mix(in srgb, var(--primary-hover) 60%, #3298CC);
    --secondary: color-mix(in srgb, var(--primary) 30%, #EBA02E);
    --secondary-hover: color-mix(in srgb, var(--primary-hover) 30%, #D18E1F);
    --danger: #EC7D63;
    --danger-hover: #D9664C;
    --pink: #EC7D63;
    --orange: #EBA02E;
    --mint: #1FCBB0;
    /* Modernize light tints (من _variables.scss) — تُستخدم لخلفيات hover الناعمة
       وأيقونات البطاقات وأشرطة الحالة. */
    /* مشتقّة من الأساسي (لا ثابتة): بطاقة ذيل الشريط الجانبي وhover التنقّل
       وشرائح الدعم/الدردشة تتبع لون الهوية عند تخصيصه بدل بقاء زرقاء ثابتة.
       10% أساسي على أبيض ≈ اللون القديم #ECF2FF مع الأساسي الافتراضي. */
    --light-primary: color-mix(in srgb, var(--primary) 10%, #ffffff);
    --light-secondary: #E8F7FF;
    --light-info: #EBF3FE;
    --light-success: #E6FFFA;
    --light-warning: #FEF5E5;
    --light-danger: #FBF2EF;
    --sales-bar-bg: color-mix(in srgb, var(--primary) 62%, transparent);
    --sales-bar-border: var(--primary);

    /* === Shadows — نظام Modernize الأصلي (من _variables.scss) ===
       ظل البطاقة هو توقيع Modernize البصري: شعرة رفيعة (0px 0px 2px) + إسقاط
       ناعم (12px 24px -4px) بلون rgb(145 158 171). مأخوذ حرفياً من $card-box-shadow. */
    /* ظلال أهدأ: خُفِضت عتامات الإسقاط درجة واحدة كي تفترش البطاقات الأرضية بهدوء
       بدل أن تبدو طافية بحدة (مبدأ quieter: بطاقات أمسطح، تشبّع بصري أقل).
       الحلقة الشعرة تبقى (0 0 2px) كتعريف رقيق للحواف. */
    --shadow-sm: rgb(145 158 171 / 18%) 0px 0px 2px 0px, rgb(145 158 171 / 6%) 0px 6px 13px -4px;
    --shadow-md: rgb(145 158 171 / 18%) 0px 0px 2px 0px, rgb(145 158 171 / 10%) 0px 12px 24px -4px;
    --shadow-lg: rgb(145 158 171 / 18%) 0px 0px 2px 0px, rgb(145 158 171 / 13%) 0px 16px 32px -4px;
    --shadow-primary: rgb(145 158 171 / 18%) 0px 0px 2px 0px, color-mix(in srgb, var(--primary) 20%, transparent) 0px 12px 24px -4px;
    --shadow-accent: rgb(145 158 171 / 18%) 0px 0px 2px 0px, color-mix(in srgb, var(--accent) 20%, transparent) 0px 12px 24px -4px;
    --radius-xl: 16px;

    --app-font-family: 'Vazirmatn', 'Plus Jakarta Sans', 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    /* خط الأرقام/البيانات: **موحَّد مع خط البرنامج** — يتبع --app-font-family
       (الخط المختار من الإعدادات) تلقائياً عند الإقلاع وعند تغييره، فلا يبقى
       رقم في البرنامج (شارات العدّ · المعرّفات · أرقام التتبّع · حقول الإدخال
       الرقمية · أرقام التقارير) بخط مختلف عن هوية المتجر. يُحتفظ بالتوكن
       كاسم دلالي (كل المستهلكين يغيّرون معه دفعة واحدة) مع وراثة قيمته من
       خط التطبيق. `tabular-nums` في مواضع المحاذاة يغني عن monospace. */
    --app-mono-family: var(--app-font-family);

    /* === سُلّم z-index العام (طبقات المستند) ===
       القيم ثابتة عبر الثيم الفاتح/الداكن لأن التكديس مستقلّ عن اللون. تُستخدم
       هذه التوكنات للأسطح على مستوى المستند فقط؛ التكديس المحلي داخل مكوّن
       (1–5 مثلاً) يبقى حرفياً لأنه سياق تكديس معزول لا جزءًا من السُلّم العام.
       الترتيب: bg < sidebar-scrim < sidebar < sticky=overlay(100) < dropdown < modal
       < mobile-sheet < popover < popover-top < tool-fab < tool-panel. --z-sticky
       و--z-overlay متساويتان قيمةً (100) اليوم لكنهما منفصلتان دلالياً (ترويسة
       لاصقة مقابل سطح حاجب كامل) كي تتشعّبان لاحقاً دون أن تجرّ إحداهما الأخرى.
       --z-tool-fab فوق كل النوافذ/الأوراق كي يبقى الزر العائم م reachable على أي
       صفحة/مودال، و--z-tool-panel أعلى كل شيء عند فتح لوحة الأداة. */
    --z-bg: -1;             /* خلفية body::before (الصورة/الضباب) خلف كل شيء */
    --z-sidebar-scrim: 49;  /* غشّاء الشريط الجانبي على الجوال (خلف الشريط) */
    --z-sidebar: 60;        /* الشريط الجانبي */
    --z-sticky: 100;        /* الترويسات اللاصقة داخل الصفحة (فوق المحتوى، تحت القوائم) */
    --z-overlay: 100;       /* الأسطح الحاجبة الكاملة الشاشة (طبقة فتح التقارير) — منفصلة عن --z-sticky */
    --z-dropdown: 1000;     /* القوائم المنسدلة: إشعارات/مدن/عملاء */
    --z-modal: 1001;        /* النوافذ المنبثقة والطبقات الشريرة */
    --z-mobile-sheet: 2000; /* أوراق الجوال الكاملة: قائمة الإشعارات، خلفيات modal ثقيلة */
    --z-popover: 9000;      /* عائلة القوائم العائمة: غشّاء قائمة الحالة، popovers */
    --z-popover-top: 9001;  /* القائمة العائمة فوق باقي popovers: .oc-status-menu */
    --z-tool-fab: 3000;     /* زر الأداة العامة العائم (التخصيص الحي) — فوق كل النوافذ/الأوراق، تحت القوائم السياقية */
    --z-tool-panel: 9100;   /* لوحة الأداة العامة عند فتحها — أعلى طبقة (تركيز كامل) */

    /* === ألوان الحالات الأساسية (لوحة Modernize) ===
       القيم الدلالية للـ pills تُثبَّت عالمياً في settings-theme.js
       (UNIVERSAL_STATUS_COLORS)؛ هذه مجرّد مراجع لونية أساسية. */
    --success: #1FCBB0;
    --info: #5B86D8;
    --warning: #EBA02E;

    /* === Surfaces + text ===
       أرضية Modernize الأصلية #f6f8fb (من _layouts.scss: body background-color).
       أسطح بيضاء صلبة، حدود #ebf1f6 ($border-color)، نصوص رمادية مزرقّة. */
    --bg-main: #f6f8fb;
    --surface-solid: #ffffff;
    --surface-main: #ffffff;
    /* مدمجة مع تمرير القائمة الجانبية: تتبع --nav-bg-hover (← --light-primary
       المشتقّ من الأساسي) فكل عناصر التمرير في الواجهة بلون الهوية نفسه. */
    --surface-hover: var(--nav-bg-hover);
    --border-main: #ebf1f6;
    /* حدود التخصيص بلون واحد: --border-light مرجع مباشر لـ--border-main
       (قيمتاهما الافتراضيتان متطابقتان تقريباً: #ebf1f6 مقابل #EAEFF4). */
    --border-light: var(--border-main);
    /* --text-title و --text-main يتصادفان في النهاري ويفترقان في الليلي عمداً
       (dark.css: العناوين #E7EEF7 أفتح، النصّ #C7D2DE أخفت). لا تُوحَّدا. */
    --text-title: #2A3547;
    --text-main: #2A3547;
    /* --ink-2 مرادف تامّ لـ --text-main في الوضعين — مُبقى كاسم مستعار فقط
       حتى لا تنكسر ٥ استدعاءات قائمة. لا تُستعمل في كود جديد. */
    --ink-2: var(--text-main);
    --text-secondary: #5A6A85;
    --text-light: #ffffff;
    /* مشتقّة من الأساسي: النص الباهت/الإيضاحي يتبع لون الهوية (مزيج 35٪ أساسي
       على الرمادي القديم #7C8FAC) بدل ثابت لا يتغيّر مع تخصيص الثيم. */
    --text-muted: color-mix(in srgb, var(--primary) 35%, #7C8FAC);
    --placeholder: #A8B3C5;
    --muted-2: #7C8FAC;
    --white: #ffffff;
    --shadow-card: var(--shadow-md);

    /* === أشرطة التمرير (مصدر واحد لكل الأسطح) ===
       مقاس واحد + إبهام محايد مشتقّ من --text-secondary فيتبع الثيم والوضع
       الليلي تلقائياً (dark.css يعيد تعريف --text-secondary فقط). الإبهام يُرسم
       بحدّ شفاف + background-clip: padding-box فيبدو أرفع من مساحة الالتقاط:
       سهل الإمساك بالفأرة، خفيف بصرياً. الجهة (يسار في RTL) يحسمها المتصفّح من
       dir="rtl" — لا خاصية CSS تتحكّم بها. */
    --scrollbar-size: 11px;
    --scrollbar-pad: 3px;
    --scrollbar-thumb: color-mix(in srgb, var(--text-secondary) 30%, transparent);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--text-secondary) 55%, transparent);
    /* للأسطح الضيّقة (قوائم منسدلة/شريط جانبي/لوحات) — أرفع بلا حشو */
    --scrollbar-size-sm: 6px;

    /* === Status pills === */
    --new-bg: #E0F4FF;
    --new-text: #0078A8;
    --ready-bg: #D8F5E8;
    --ready-text: #0F8C5A;
    --delivering-bg: #FFEED1;
    --delivering-text: #B66B0E;
    --pending-bg: #EFE5FF;
    --pending-text: #5B3FBF;
    --completed-bg: #E8E5F5;
    --completed-text: #4A4570;
    --collected-bg: #D8F5E8;
    --collected-text: #0F8C5A;
    --review-bg: #FFEED1;
    --review-text: #B66B0E;
    --cancelled-bg: #FBE3E8;
    --cancelled-text: #B3304A;

    /* === Sidebar / header ===
       محايد Modernize: الترويسة والشريط الجانبي بسطح أبيض وحدود #E5EAEF،
       نص التنقّل رمادي ثانوي (#5A6A85) يتحوّل إلى الأساسي عند النشاط. لا
       صبغة بنفسجية ثابتة — الأساسي يظهر فقط كإشارة (عنصر نشط/حدّ علوي). */
    --header-bg: #ffffff;
    --header-border: #E5EAEF;
    --header-border-top: var(--primary);
    --header-text: #2A3547;
    --nav-text: #5A6A85;
    --nav-text-hover: #2A3547;
    --nav-text-active: var(--primary);
    --nav-bg-hover: var(--light-primary);
    --nav-bg-active: color-mix(in srgb, var(--primary) 12%, transparent);
    --nav-icon-color: #7C8FAC;
    --nav-icon-active: var(--primary);
    --nav-border: #E5EAEF;
    --stat-tab-text: var(--primary);
    --stat-tab-active-bg: #ffffff;
    --stat-tab-active-border: var(--primary);
    --header-actions-bg: #F6F9FC;
    --header-actions-border: #E5EAEF;

    /* === Cards + tables ===
       Modernize (من _variables.scss): بطاقات بلا حدود (border-width 0) وزاوية
       7px وظل التوقيع. الجداول فاتحة: رأس بنص داكن عريض (بلا خلفية داكنة)،
       صفوف مخطّطة #EAEFF4، hover #F6F9FC، حدود #ebf1f6. */
    --card-bg: #ffffff;
    --table-wrapper-bg: #ffffff;
    --table-wrapper-solid: #ffffff;
    --table-border: #ebf1f6;
    --table-header-bg: #ffffff;
    --table-header-text: #2A3547;
    --table-header-border: #ebf1f6;
    --table-row-bg: #ffffff;
    --table-row-solid: #ffffff;
    --table-row-alt-bg: #EAEFF4;
    --table-row-hover-bg: #F6F9FC;
    --table-row-border: #ebf1f6;
    --table-row-text: #2A3547;
    --table-cell-padding: 13px 14px;
    --table-header-padding: 12px 14px;
    --table-font-size: 13px;
    --table-border-radius: var(--pane-radius);
    --table-shadow: var(--shadow-sm);

    /* === Inputs === Modernize ($input-border-color): #DFE5EF، bg شفاف */
    --input-bg: #ffffff;
    --input-border: #DFE5EF;
    --input-border-focus: var(--primary);
    --input-text: #2A3547;
    --input-placeholder: #7C8FAC;
    --input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);

    /* === Buttons ===
       Modernize: أزرار بلا ظل (box-shadow: none)، زاوية 7px، capitalize.
       الثانوي سطح فاتح جدًا (#F6F9FC) بحدّ #E5EAEF. */
    --btn-primary-bg: var(--primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--primary-hover);
    --btn-secondary-bg: #F6F9FC;
    --btn-secondary-text: #2A3547;
    --btn-secondary-border: #E5EAEF;
    --btn-secondary-hover: #ECF2FF;
    --btn-danger-bg: var(--danger);
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #F3704D;

    /* === Notifications === */
    --notification-bg: #ffffff;
    --notification-border: #E5EAEF;
    --notification-header-bg: #F2F6FA;
    --notification-header-text: #2A3547;
    --notification-item-bg: #ffffff;
    /* مدمجة مع خلفية تمرير القائمة الجانبية (--nav-bg-hover → --light-primary
       المشتقّ من الأساسي): تمرير عنصر الإشعار يتبع هوية الثيم تلقائياً. */
    --notification-item-hover-bg: var(--nav-bg-hover);
    --notification-warning-bg: #FDEDE8;
    --notification-warning-border: var(--danger);
    --notification-warning-text: #C2553A;

    /* === Notes === */
    --notes-bg: #ECF2FF;
    --notes-text: #2A3547;
    --notes-border: var(--primary);
    --pinned-note-color: #FFA85C;
    --tag-orders-bg: #E0F4FF;
    --tag-customers-bg: #FBE3E8;
    --tag-products-bg: #D8F5E8;
    --tag-delivery-bg: #FFEED1;
    --tag-marketing-bg: #EFE5FF;
    --tag-inventory-bg: #ECF2FF;
    --tag-freespace-bg: #E8E5F5;
    /* الشرائط اللونية الحيوية لعمود التصنيف في جدول الملاحظات (مرآة oc-band/cc-band).
       مشبعة كي تبرز كعلامة فئوية واضحة، وتعمل على الوضعين الفاتح والداكن. */
    --tag-orders-band: #0EA5E9;
    --tag-customers-band: #EC4899;
    --tag-products-band: #10B981;
    --tag-delivery-band: #F59E0B;
    --tag-marketing-band: #8B5CF6;
    --tag-inventory-band: #6366F1;
    --tag-freespace-band: #A78BFA;

    /* === Inventory === */
    --simple-product-bg: #E0F4FF;
    --simple-product-text: #0078A8;
    --simple-product-border: var(--accent);
    --multi-product-bg: #D8F5E8;
    --multi-product-text: #0F8C5A;
    --multi-product-border: #5BD0B5;
    --package-movement-highlight: #FFA85C;

    /* === Production costs === */
    --profitable-product-bg: #D8F5E8;
    --profitable-product-text: #0F8C5A;
    --losing-product-bg: #FBE3E8;
    --losing-product-text: #B3304A;
    --break-even-product-bg: #EFE5FF;
    --break-even-product-text: #5B3FBF;

    /* === Login + intro === */
    --login-gradient-start: #4870D6;
    --login-gradient-end: #54B6E6;
    --login-form-bg: #ffffff;
    --login-input-bg: #F6F9FC;
    --login-input-border: #E5EAEF;
    --login-input-focus: #4870D6;
    --login-button-bg: #4870D6;
    --login-button-hover: #3960C4;
    --login-text: #2A3547;
    --login-text-secondary: #5A6A85;
    --login-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.31), 0 24px 60px -8px rgba(0, 0, 0, 0.25);

    /* === Modals === */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(42, 53, 71, 0.45);
    --modal-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.31), 0 30px 80px -8px rgba(0, 0, 0, 0.30);
    --modal-border: #E5EAEF;

    /* === Reports === */
    --report-table-bg: #ffffff;
    --report-table-odd-bg: #F9F8FC;
    --report-table-even-bg: #ffffff;
    --report-footer-bg: #F2EFF8;
    --report-footer-text: var(--text-secondary);

    /* ============================================================
       متغيّرات استُسقطت أثناء تقطيع main.css → يجب أن تبقى في :root
       لأن CSS/JS ما زالت تستخدم أسماءها القديمة مباشرةً. القيم متوافقة
       مع هوية Meadows وتُعنون الأسماء الجديدة حيث يتوفّر نظير مباشر.
       ============================================================ */

    /* زوايا Modernize الأصلية (من _variables.scss): $border-radius 7px،
        $card-border-radius 7px، $border-radius-xl 12px. البطاقات والأزرار
        والحقول كلها 7px (اتساق Modernize المميز). */
    --pane-radius: 7px;
    --control-radius: 7px;

    /* === Spacing — إيقاع Modernize الأنيق ===
        $card-spacer-x/y = 30px، $grid-gutter-width = 24px. نستخدم 24px
        للبطاقات كتوفيق عملي مع كثافة الجداول، و30px للبطاقات الواسعة. */
    --card-padding: 24px;
    --card-padding-lg: 30px;
    --card-gap: 24px;
    /* ظل الرفع عند التحويم (hover lift) — نفس عائلة Modernize بإسقاط أعمق قليلاً. */
    --shadow-hover: rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 14%) 0px 18px 38px -6px;

    /* أسماء الحالات القديمة "الحية": يعرضها مخصّص الثيم للتحرير ويقرؤها
       الرسم البياني وشارات الطلبات؛ نربطها بنظيراتها الجديدة في Meadows. */
    --info-bg: var(--new-bg);
    --info-text: var(--new-text);
    --success-bg: var(--ready-bg);
    --success-text: var(--ready-text);

    /* شفافية البطاقات + خلفية الصفحة: تضبطها settings-background.js
       وقت التشغيل (تُعيد حساب --surface-main كـ rgba)، وهذه قيم البداية. */
    --card-opacity: 1;
    --bg-image-url: none;
    --bg-image-opacity: 0.2;
    --bg-image-blur: 0px;

    /* أرضية بطاقات المودالات: طبقة سفلى مُعتِمة مضمونة.
       المودال يطفو فوق المحتوى لا فوق خلفية الصفحة، فلا يجوز أن يُرى من
       خلاله مهما فعل الثيم أو إعداد شفافية البطاقات. هذا الرمز جديد ولا
       يوجد في أي ثيم محفوظ، فلا يمكن لقيمة قديمة تالفة أن تُفسده. */
    --modal-base: #ffffff;

    /* ---- ألوان علامات خارجية ----
       هذه ليست انحرافاً عن الهوية: هي ألوان مملوكة لجهات أخرى، لا تتبع ثيم
       المتجر ولا تنقلب في الوضع الليلي — علامة واتساب خضراء عند الجميع.
       مجموعة هنا كي تُراجَع في مكان واحد بدل أن تُكتب hex في كل ملف. */
    --wa-primary: #25D366;
    --wa-hover: #1DA851;
    --brand-instagram: #E1306C;
    --brand-facebook: #1877F2;
    --brand-website: #3B82F6;
    --copy-button-bg: var(--info);
    --customer-notes-bg: var(--new-bg);
    --customer-notes-text: var(--new-text);

    /* عدّادات وشارات تتبع اللون الأساسي أو رأس الجدول تلقائياً */
    --orders-count-bg: var(--table-header-bg);
    --orders-count-text: var(--text-light);
    --delivery-cities-count-bg: var(--primary);
    --delivery-cities-count-text: var(--text-light);
    --delivery-cities-badge-bg: var(--primary);
    --delivery-cities-badge-text: var(--text-light);
    --delivery-cities-badge-border: var(--primary);

    /* أرضيّات منصّات الحملات الإعلانية */
    --platform-facebook-bg: #E0F4FF;
    --platform-instagram-bg: #FBE3E8;
    --platform-website-bg: #D8F5E8;
    --platform-tiktok-bg: #E8E5F5;
    --platform-other-bg: #ECF2FF;

    /* ألوان فئات العملاء (customer tiers) — ذهبي VIP مع تدرّجاته؛ العميل الخامل
       يتبع النص الثانوي. كانت هذه القيم مكرّرةً hardcoded عبر customers.css. */
    --tier-vip: #D4AF37;
    --tier-vip-soft: #F1C75B;        /* نسخة الوضع الداكن */
    --tier-vip-bg: #FFF6D6;          /* خلفية ذهبية خفيفة */
    --tier-inactive: var(--text-secondary);

    /* مقاييس الجداول — معرّفة أعلاه ضمن كتلة Cards + tables */

    /* ألوان صفحة التقارير (النصوص والرأس والملخّص) */
    --reports-cost-text: var(--danger);
    --reports-profit-text: var(--collected-text);
    --reports-sales-current: var(--collected-text);
    --reports-sales-previous: var(--text-muted);
    --reports-sales-growth: var(--primary);
    --report-header-bg: var(--surface-solid);
    --report-header-border: var(--primary);
    --report-header-title: var(--primary);
    --report-summary-bg: color-mix(in srgb, var(--primary) 12%, #ffffff);
    --report-summary-text: var(--new-text);
    --report-table-header-bg: color-mix(in srgb, var(--primary) 12%, #ffffff);
    --report-table-header-text: var(--new-text);
    --report-table-row-border: var(--border-main);

    /* ألوان سجلّ النشاط (دلالية: أخضر=نجاح/دخول، أحمر=فشل/حذف، إلخ) */
    --activity-success-bg: var(--collected-bg);
    --activity-success-text: var(--collected-text);
    --activity-failed-bg: var(--cancelled-bg);
    --activity-failed-text: var(--cancelled-text);
    --activity-create-bg: var(--new-bg);
    --activity-create-text: var(--new-text);
    --activity-update-bg: var(--delivering-bg);
    --activity-update-text: var(--delivering-text);
    --activity-delete-bg: var(--cancelled-bg);
    --activity-delete-text: var(--cancelled-text);
    --activity-login-bg: var(--collected-bg);
    --activity-login-text: var(--collected-text);
    --activity-logout-bg: var(--surface-hover);
    --activity-logout-text: var(--text-secondary);
    --activity-password-bg: var(--pending-bg);
    --activity-password-text: var(--pending-text);
    --activity-status-change-bg: var(--new-bg);
    --activity-status-change-text: var(--new-text);
    --activity-other-bg: var(--surface-hover);
    --activity-other-text: var(--text-secondary);
}

/* === كثافة الجوال (≤768px) — تقليص توكنات الإيقاع العام ===
   الشكوى المتكررة: «حواف البرنامج في التلفون مبالغ فيها». الحلّ الأقل
   تدخلاً والأكثر اتساقاً: تقليص التوكنات الموحّدة (--card-padding/-lg) على
   الجوال فقط، فتأخذ كلّ البطاقات (.ds-card · .skpi · .oc-card · .kpi06__tile ·
   .chart-card · .theme-group-body · .setting-section ...) القيمة الجديدة تلقائياً
   دون لمس كلّ ملف على حدة. القاعدة:
   - --card-padding:    24px → 16px  (كثافة مضغوطة، تربح ~32% من ارتفاع البطاقة)
   - --card-padding-lg: 30px → 20px
   - --card-gap:        24px → 14px  (فجوات الشبكة تتقلّص بالتناسب)
   - --pane-radius:     7px → 5px    (الزوايا المدوّرة أخفّ بصرياً على شاشة 5")
   الزوايا الكبيرة (16px للوحات ds-card--lg و --radius-xl) تبقى كما هي على
   الجوال لأنّها هوية Modernize ولا تتنافس مع الكثافة. الزوايا الـpill
   (999px على الـchips/الـbadges) لا تتغيّر أيضاً — هي توقيع chips لا حواف. */
@media (max-width: 768px) {
    :root {
        --card-padding: 16px;
        --card-padding-lg: 20px;
        --card-gap: 14px;
        --pane-radius: 5px;
    }
}
/* شاشات صغيرة جدّاً (≤420px) — تقليص إضافي لتجنّب القصّ في البطاقات
   العمودية الطويلة (4 بطاقات KPI مكدّسة + هيدر + محتوى). */
@media (max-width: 420px) {
    :root {
        --card-padding: 14px;
        --card-gap: 12px;
    }
}

/* === Modernize reboot (_reboot.scss): الروابط hover تتحوّل للأساسي === */
a:hover {
    color: var(--primary);
}
/* مساحة شريط التمرير محجوزة دائماً — الصفحة القصيرة والطويلة بنفس العرض تماماً،
   فلا «قفزة» أفقية بمقدار عرض الشريط عند التنقّل بين الصفحات أو عند نموّ القائمة
   بالتمرير اللامتناهي. مطبَّقة على `html` وحده (حاوية تمرير الصفحة).

   ⚠️ لا تستبدلها بـ `html { overflow-y: scroll }` رغم أنّه يحجز المساحة أيضاً:
   قفل التمرير خلف المودالات (`body.modal-open { overflow: hidden }`) يعمل عبر
   **انتشار** overflow من body إلى الـviewport، وهذا الانتشار مشروط ببقاء overflow
   على `html` = visible. تثبيت overflow على html يُلغي الانتشار فتبقى الصفحة
   تتمرّر خلف المودال. `scrollbar-gutter` يحجز المساحة دون المساس بدلالة overflow.

   الدعم: Chrome 94+ · Firefox 97+ · Safari 18.2+. الأقدم يتصرّف كما اليوم بلا
   عطل، وأشرطة iOS/macOS عائمة أصلاً فلا إزاحة فيها. */
html {
    scrollbar-gutter: stable;
}

/* المحور الأفقي مقفل: الصفحة لا تنزلق يميناً/شمالاً مهما تجاوز عنصرٌ عرض الشاشة.

   لماذا يلزم أصلاً: المتصفّح **لا يمرّر فائض جهة البداية** — يقصّه ولا يُنشئ له
   مساحة تمرير. في RTL جهة البداية هي اليمين، فأي تجاوز نحو اليمين تبتلعه العربية
   بصمت؛ وفي LTR اليمين هو جهة النهاية فالتجاوز نفسه يصير سحباً أفقياً. النتيجة
   أنّ العنصر الواحد يعطي صفحة ثابتة بالعربية ومتأرجحة بالإنجليزية على الجوال.
   القفل هنا يجعل الاتجاهين متطابقين بدل أن يعتمد الثبات على صدفة الاتجاه.

   على `body` لا `html`: قفل التمرير خلف المودالات يعمل بانتشار overflow من body
   إلى الـviewport، وهو مشروط ببقاء overflow على html = visible (التفصيل أعلاه).
   أي قفل على html يُبطل الانتشار فتتمرّر الصفحة خلف المودال.

   `clip` لا `hidden`: كلاهما يمنع السحب، لكن `hidden` يجعل body حاوية تمرير لو
   انقطع الانتشار يوماً — فتنكسر الترويسات اللاصقة ويبقى الفائض قابلاً للوصول
   بالسكربت وحده (تركيز عنصر خارج الشاشة يزيح الصفحة كلها). `clip` لا يُنشئ
   حاوية تمرير أبداً. الجداول والأشرطة العريضة لا تتأثر: لكلٍّ منها
   `overflow-x: auto` في حاويته. */
body {
    overflow-x: clip;
}

/* ⚠️ لا تنقل هذا القفل إلى `html`: أي overflow غير مرئي على الجذر يُسقط
   انتشار تمرير body إلى viewport فيموت السكرول الرأسي كلياً (جرّبناه
   فعلاً: scrollTo الرأسي توقّف). قفل body يكفي، وما تفشل فيه محرّكات
   الجوال القديمة يسدّه قفل scrollX البرمجي في i18n-core.js. */

html, body {
    margin: 0;
    padding: 0;
    /* iOS يُضخّم خطوط الكتل تلقائياً (text autosizing) فتبدو الصفحة وكأنها تكبر
       وتصغر بلا سبب، والكتل اللاتينية تلتقط عتبته بترتيب مختلف عن العربية فيظهر
       الأثر بالإنجليزية أوّلاً. `100%` يوقف التضخيم التلقائي وحده ولا يمسّ تكبير
       المستخدم — زوم الأصابع يبقى متاحاً كما تشترط ضوابط الجودة في DESIGN.md. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* المضيف أبيض موحَّد (سطح صلب) كحاضنة للبطاقات: السايدبار والخلفية لونٌ واحد،
       وبطاقة الصفحة (.page) تأخذ --bg-main (الرمادي) لتظهر بتباين داخل المضيف.
       يتكيّف تلقائياً في الوضع الداكن عبر قلب التوكنات. */
    background-color: var(--surface-solid);
    color: var(--text-main);
    min-height: 100vh;
    font-family: var(--app-font-family);
}

/* box-sizing شامل لكل العناصر + إرث الخط من body.
   بدون box-sizing أي width:100% + padding يسبب تجاوز الحاوية. */
*, *::before, *::after {
    box-sizing: border-box;
    font-family: inherit;
}

/* === Animations === */
/* fadeInScale حُذف لصالح نظام Stagger الموحّد في motion.css. */

#introScreen.fade-out {
    opacity: 0 !important;
    transition: opacity 1s ease-out;
}

#introScreen {
    /* === صفحة الانترو — رفوفي ===
       كانت قديماً div بسيط + img واحد. صارت تركيباً ثلاثيّ الوحدات
       (لوغو المتجر · اسم المنصّة · لوغو رفوفي) + مؤشّر تحميل من ثلاث
       رفوف. الإطار يستهلك توكنز الثيم كي يلائم ثيم كلّ مستأجر دون
       إعادة كتابة. */
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background:
        radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--primary) 14%, var(--bg-main)) 0%, var(--bg-main) 72%);
    opacity: 1;
    overflow: hidden;
    /* على الشاشات الصغيرة نمنع أي overflow من التشويش البصري */
    padding: 24px;
    gap: clamp(28px, 5vh, 56px);
}

/* المسرح: ثلاث أعمدة في المنتصف.
   grid-template-columns يتكيّف مع حجم الشاشة — على الجوال تصطفّ عمودياً. */
.intro-screen .intro-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 64px);
    flex-wrap: wrap;
    animation: introStageIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
    max-width: min(880px, 92vw);
}

/* الإطار الزمني: يبدأ من اليمين (المتجر) لأنّ المستخدم يقرأ RTL،
   ثمّ المنصّة، ثم لوغو رفوفي يساراً. */
@keyframes introStageIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* جانبي المسرح: حاوية كل لوغو. حدّ أقصى للحجم يمنع تضخّم الصورة. */
.intro-screen .intro-side {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* === صفحة الانترو + تسجيل الدخول — رفوفي (Morph Variant) ===
   لقطة واحدة سلسة: اللوغو + اسم المتجر في البداية، ثم بعد الجاهزية
   (يُفعّلها applyMorph() من app-core-init.js بإضافة class .open على
   #morphShell) الـ shell يتحوّل: الفجوة تفتح، اللوغو يصغر، جملة
   الترحيب تتلاشى، الـ form ينزلق من الأسفل. footer-badge ثابت
   «مدعوم من رفوفي» أسفل الشاشة. */

/* الـ shell — البطاقة الزجاجية التي تحتوي اللوغو + الترحيب + الـ form.
   في البداية: gap=0, padding صغير، max-height صغير (بس اللوغو ظاهر).
   بعد .open: gap=22px, max-height يكبر، الـ form ينزلق. */
.intro-screen .intro-shell {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 30px 28px;
    overflow: hidden;
    max-height: 580px;
    /* 88% لا 70%: شبه الشفافية الزائدة تجعل البطاقة «شبحية» يخترقها
       خلفية الصفحة فيبدو المحتوى باهتاً بلا مرتكز بصري. */
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--surface-solid) 90%, transparent);
    border-radius: clamp(24px, 3vw, 36px);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--surface-solid) 85%, transparent) inset,
        0 22px 50px -22px color-mix(in srgb, var(--primary-deep) 32%, transparent),
        0 8px 22px -10px color-mix(in srgb, var(--primary) 24%, transparent);
    transition:
        gap .8s cubic-bezier(.65,0,.35,1),
        max-height .8s cubic-bezier(.65,0,.35,1),
        padding .8s cubic-bezier(.65,0,.35,1);
}

/* متصفحات جوال بلا backdrop-filter: بدون هذا تبقى الخلفية شبه شفافة
   فوق خلفية مجرّدة فيظهر النصّ «مطارداً» خلف البطاقة. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .intro-screen .intro-shell {
        background: var(--surface-solid);
    }
}
.intro-screen .intro-shell.open {
    gap: 22px;
    padding-top: 24px;
    padding-bottom: 28px;
    max-height: 720px;
}

/* بعد .open: الترحيب ينتقل بجانب اللوغو ويبقى ظاهراً، والخطّ الزخرفي
   ودعوة الدخول والنموذج تدخل تحته — كلها معلّقة بفتح الـ shell لا بزمن
   تحميل الصفحة، فيعمل تخطّي الانترو بالنقر فوراً، والزائر العائد
   (انتهت جلسته) يرى النموذج خلال أقل من ثانية. */
.intro-screen .intro-shell.open .intro-divider {
    animation: introDividerIn .55s cubic-bezier(.22,1,.36,1) 60ms forwards;
}
.intro-screen .intro-shell.open .intro-login-invite {
    animation: introInviteIn .5s ease-out 160ms forwards;
}
.intro-screen .intro-shell.open .intro-login-form {
    visibility: visible;
    animation: introFormIn .6s cubic-bezier(.22,1,.36,1) 120ms forwards;
}

/* رأس الانترو: اللوغو + الترحيب — تنسيق واحد دائم: صفّ مركّز
   (اللوغو بدايةً والترحيب بجانبه، وفيه اسم المتجر). فتح النموذج يوسّع الصفحة
   تحته دون أي إعادة تشكيل للرأس — لا قلب عمودي/أفقي ولا إعادة محاذاة. */
.intro-screen .intro-head {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(18px, 4vw, 32px);
    width: 100%;
}

/* لوغو المتجر (البطل) — يبقى بحجمه بعد الفتح؛ الترحيب ينتقل بجانبه
   بدل تصغيره. */
.intro-screen .intro-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* لوغو المتجر (البطل) — كبير، محمي بـ border-radius. */
.intro-screen .intro-logo--tenant {
    width: clamp(96px, 14vw, 120px);
    height: clamp(96px, 14vw, 120px);
    object-fit: contain;
    border-radius: 22px;
    background: var(--surface-solid);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--primary) 6%, transparent),
        0 14px 36px -12px color-mix(in srgb, var(--primary-deep) 28%, transparent);
    padding: 12px;
    animation: introTenantIn .9s cubic-bezier(.22,1,.36,1) 100ms both;
}

/* بادئة الحرف الأول — بديل الشعار قبل رفعه (نفس عقد معالج الإعداد:
   الحرف الأول من اسم المتجر، وبلا اسم حرف المنصّة «ر»). تشارك
   .intro-logo--tenant مقاسها وظلّها، و[hidden] يحسم إظهار أحد الوسطين. */
.intro-screen .intro-logo-letter {
    display: grid;
    place-items: center;
    font-size: clamp(44px, 7vw, 56px);
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
    user-select: none;
}
.intro-screen #tenantIntro[hidden],
.intro-screen #tenantIntroLetter[hidden] {
    display: none;
}

/* جملة الترحيب — بجانب اللوغو دائماً (تنسيق واحد)، تظهر بسرعة عند التحميل
   وتبقى ظاهرة بعد الفتح. */
.intro-screen .intro-greeting {
    margin: 0;
    text-align: start;
    color: color-mix(in srgb, var(--ink) 78%, transparent);
    font-size: 15px;
    line-height: 1.7;
    max-width: 360px;
    opacity: 0;
    animation: introGreetingIn .4s cubic-bezier(.22,1,.36,1) 300ms forwards;
}
.intro-screen .intro-greeting strong {
    color: var(--ink);
    font-weight: 700;
}

/* خطّ زخرفي رفيع — يكتمل مع فتح الـ shell (.open). */
.intro-screen .intro-divider {
    display: block;
    width: 0;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
}

/* دعوة الدخول — سطر قصير مركّز تحت الخطّ الزخرفي فوق النموذج مباشرة. */
.intro-screen .intro-login-invite {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    color: color-mix(in srgb, var(--ink) 62%, transparent);
    opacity: 0;
}

/* الـ Form — يدخل انزلاقاً مع فتح الـ shell (.open).
   visibility:hidden قبل الفتح كي لا يصل إليه Tab وهو ما زال مطوياً.
   overflow:hidden + max-height:0 كي ينزلق بسلاسة. */
.intro-screen .intro-login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(28px);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* رسائل خطأ تسجيل الدخول — نستخدم #loginError (نفس الـ ID القديم)
   كي يتحكّم به setupLoginHandler() بـ style.display = 'block'/'none' */
.intro-screen #loginError {
    /* نخفيه افتراضياً بـ inline style، أظهره عند style.display='block' */
    background: color-mix(in srgb, #e53935 12%, transparent);
    border: 1px solid color-mix(in srgb, #e53935 30%, transparent);
    color: #c62828;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* الحقول بلغة إضافة طلب جديد (.ao-field في order-add.css) — لا نعيد اختراع
   شيئ هنا سوى ما يخصّ الانترو وحده: إلغاء الهامش السفلي (فجوة الـ form gap
   تتولّى الإيقاع)، وحالات الانترو الخاصة (بريد LTR، إظهار كلمة المرور،
   تنبيه Caps Lock، وحدّ الخطأ على الغلاف عبر :has لأن JS يوسم الـ input). */
.intro-screen .ao-field {
    margin-bottom: 0;
}
.intro-screen .ao-field-wrap .form-input {
    font-size: 14.5px;
}

/* حقل البريد — محتوى LTR (بريد/نقاط) في نموذج RTL: بدون هذا يعيد الـbidi
   ترتيب placeholder البريد فتقفز اللاحقة والنقطة؛ نثبّت الاتجاه LTR والكتابة
   تبدأ من الشمال (text-align:left) كبوابة التاجر. */
.intro-screen .ao-field-wrap .form-input[type='email'] {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* حقل كلمة المرور (#password) — نفس معالجة البريد: الاتجاه LTR والكتابة
   من الشمال. نستهدف الـ ID لا [type='password'] لأن زرّ العين يقلب النوع
   إلى text عند الإظهار فتسقط قاعدة النوع وتقفز الكتابة إلى اليمين. */
.intro-screen .ao-field-wrap .form-input#password {
    direction: ltr;
    text-align: left;
}

/* الغلاف سياق تموضع لزرّ الإظهار وتنبيه Caps Lock — بلا inline style في HTML */
.intro-screen .ao-field-wrap {
    position: relative;
}

/* حقل فارغ أُبرِز بعد محاولة دخول — يتميّز عن «بيانات خاطئة» بحدّ أحمر
   يُزال مع أول كتابة (app-core-auth.js يوسم الـinput، والغلاف يتبعه). */
.intro-screen .ao-field-wrap:has(.form-input.is-invalid) {
    border-color: #e53935;
}

/* تنبيه Caps Lock — يظهر تحت حقل كلمة المرين لحظياً دون إزاحة التخطيط:
   موقعه المطلق داخل الـ 14px فجوة النموذج + هامش الزر. */
.intro-screen .intro-caps-hint {
    position: absolute;
    right: 8px;
    top: 100%;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: #92400e;
    white-space: nowrap;
}

/* الأيقونات (بريد/قفل) على الشمال، والعين وحدها على اليمين: order سالب
   يرفعها إلى طرفة الأيمن للـ flex بينما تظلّ الأيقونات آخر العناصر شمالاً. */
.intro-screen .ao-field-wrap .ao-field-ico { order: 2; }
.intro-screen .ao-field-wrap .intro-pw-toggle { order: -1; }

/* أيقونات البداية (بريد/قفل) داخل غلاف الحقل — حقول الانترو بلا JS يوسم
   is-focused (ذاك نظام مودال إضافة الطلب)، فنربط التلوين بـ :focus-within
   نفسه الذي يلوّن حدّ الغلاف. */
.intro-screen .ao-field-wrap:focus-within .ao-field-ico {
    color: var(--primary);
}

/* زرّ إظهار كلمة المرور — عنصر flex داخل غلاف .ao-field-wrap بجوار أيقونة
   القفل (يمين الحقل في RTL)، حبّة دائرية بأيقونة عين مطابقة لزرّ بوابة
   التاجر: بهتانة تسكن، وتيقظ بلون الثيم مع هالة خفيفة عند الـ hover. */
.intro-screen .intro-pw-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -2px;
    border-radius: 50%;
    border: 0;
    background: none;
    cursor: pointer;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    transition: color 0.15s, background 0.15s;
}
.intro-screen .intro-pw-toggle:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.intro-screen .intro-pw-toggle .ico-eye-off { display: none; }
.intro-screen .intro-pw-toggle.showing .ico-eye { display: none; }
.intro-screen .intro-pw-toggle.showing .ico-eye-off { display: block; }

/* زرّ تسجيل الدخول — مطابق لأزرار المنصّة في control-plane (landing.css):
   حبّة دائرية 999px، min-height 52px (= btn-lg)، خلفية صلبة بلون الثيم
   لا تدرّج، ظلّ ملون يشتدّ مع الـ hover، ورفع -2px. الفارق الوحيد:
   التوكنز من ثيم المتجر (var(--primary)) لا ألوان المنصّة الثابتة. */
.intro-screen .intro-btn-primary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    margin-top: 4px;
    box-shadow: 0 12px 28px -15px color-mix(in srgb, var(--primary) 90%, transparent);
    transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.intro-screen .intro-btn-primary:hover {
    transform: translateY(-2px);
    background: var(--primary-deep);
    box-shadow: 0 17px 32px -16px color-mix(in srgb, var(--primary) 90%, transparent);
}
.intro-screen .intro-btn-primary:active {
    transform: translateY(0);
    filter: brightness(.97);
}

/* حالة الإرسال — زرّ مشغول: spinner + نصّ الحالة ويُقفل ضد النقر المزدوج
   (يديرها setLoginBusy في app-core-auth.js). */
.intro-screen .intro-btn-primary:disabled {
    cursor: progress;
    transform: none;
    opacity: .6;
}
.intro-screen .intro-btn-primary.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.intro-screen .intro-btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, #fff 30%, transparent);
    border-top-color: #fff;
    animation: introSpin .7s linear infinite;
}
.intro-screen .intro-btn-primary.is-loading .intro-btn-spinner {
    display: inline-block;
}

/* توقيع «مدعوم من رفوفي» — ثبت في أسفل شاشة الانترو كـ footer.
   badge واضح بلون primary: لوغو رفوفي + كلمة بخطّ رفيع أنيق.
   بدون انميشن — يظهر ثابتاً مع شاشة الانترو ويختفي معها. */
.intro-screen .intro-powered-by {
    position: absolute;
    bottom: clamp(22px, 4vh, 38px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-solid) 75%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--surface-solid) 85%, transparent) inset,
        0 8px 22px -14px color-mix(in srgb, var(--primary-deep) 35%, transparent);
    color: var(--primary-deep);
    font-family: var(--app-font-family), 'Cairo', system-ui, sans-serif;
    font-size: clamp(0.82rem, 1.25vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    /* لا انميشن — ثابت فور ظهور شاشة الانترو. */
    animation: none;
}

/* نصّ «مدعوم من» — بوزن أخف قليلاً لتمييزه عن اسم المنصّة. */
.intro-screen .intro-powered-label {
    font-weight: 500;
    opacity: 0.7;
}

/* لوغو رفوفي داخل الـ badge — حجم واضح لكن متوازن. */
.intro-screen .intro-logo--platform {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
    opacity: 1;
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--primary) 25%, transparent));
    animation: none;
}

/* اسم «رفوفي» — بنمط قوي داخل الـ badge. */
.intro-screen .intro-powered-name {
    font-weight: 800;
}

/* العلامة ™ — صغيرة وباهتة أكثر. */
.intro-screen .intro-powered-mark {
    font-size: 0.6em;
    margin-right: 2px;
    opacity: 0.55;
    vertical-align: super;
}

/* === keyframes للـ Morph Variant === */

/* دخول اللوغو — تكبر سلوكان مع blur */
@keyframes introTenantIn {
    from { opacity: 0; transform: scale(.85); filter: blur(8px); }
    to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* دخول جملة الترحيب — fade in (يتبعه fade out) */
@keyframes introGreetingIn { to { opacity: 1; } }

/* دخول دعوة الدخول تحت الخطّ الزخرفي */
@keyframes introInviteIn { to { opacity: 1; } }

/* دخول الخطّ الزخرفي */
@keyframes introDividerIn { to { width: 80px; opacity: .75; } }

/* دخول الـ form — ينزلق من الأسفل ويفتح ارتفاعه */
@keyframes introFormIn {
    from { opacity: 0; transform: translateY(28px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 380px; }
}

/* دوران مؤشّر الانتظار في زرّ الدخول */
@keyframes introSpin {
    to { transform: rotate(360deg); }
}

/* دخول الفوتر — fade in متأخّر ليظهر بعد استقرار الـ form */
@keyframes introPoweredIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* RTL/LTR: الترتيب نفسه، فلا حاجة لعكس — المرن يحترم `dir`. */

/* تجاوب الجوال */
/* تجاوب الجوال — يشمل الشاشات القصيرة أيضاً (جوال أفقي/نافذة مقسومة):
   النموذج المفتوح أعلى منها فيُطبَّق الإصلاح نفسه. */
@media (max-width: 520px), (max-height: 640px) {
    /* 84px للوغو المتجر (البطل) فقط — لوغو رفوفي داخل الـ badge له
       حجمه الخاص أدناه كي لا تتضخّم الحبّة وتبقى متناسبة مع نصّها. */
    .intro-screen .intro-logo--tenant {
        width: 84px;
        height: 84px;
    }
    .intro-screen .intro-shell {
        padding: 24px 20px;
    }
    /* صفّ «اللوغو + الترحيب» ضيق على الشاشات الصغيرة — عمود مركّز. */
    .intro-screen .intro-head {
        flex-direction: column;
    }
    .intro-screen .intro-greeting {
        text-align: center;
    }
    /* المفتاح الجوّي: كان التمركز قسرياً مع overflow:hidden فيُقصّ أعلى
       البطاقة وأسفلها عند فتح النموذج. نسمح بالتمرير، والبطاقة تتوسّط
       بهامش auto: يتمركز عند وفرة المساحة ويتوقف التمركز وحده عند الضيق. */
    .intro-screen {
        justify-content: flex-start;
        overflow-y: auto;
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .intro-screen .intro-shell {
        margin-block: auto;
    }
    /* التوقيع كان مثبتاً absolute فوق المحتوى فيطغى على زرّ الدخول عند
       ضيق الشاشة — يصبح داخل التدفق أسفل البطاقة مباشرة. */
    .intro-screen .intro-powered-by {
        position: static;
        transform: none;
        flex-shrink: 0;
        margin: 14px auto 0;
    }
    /* الجوال: الحدّ الأدنى من clamp (~0.82rem) أصغر من المريح للقراءة —
       نرفع خطّ الـ badge ولوغوه لنبرز التوقيع دون منافسة البطل. */
    .intro-screen .intro-powered-by {
        font-size: 0.95rem;
        padding: 10px 22px;
        gap: 9px;
    }
    .intro-screen .intro-logo--platform {
        width: 28px;
        height: 28px;
    }
}

/* احترام تفضيل «تقليل الحركة» — نوقف الانميشنات، يظهر كل شي فوراً. */
@media (prefers-reduced-motion: reduce) {
    .intro-screen .intro-shell,
    .intro-screen .intro-brand,
    .intro-screen .intro-greeting,
    .intro-screen .intro-divider,
    .intro-screen .intro-login-invite,
    .intro-screen .intro-login-form,
    .intro-screen .intro-powered-by {
        animation: none !important;
        transition: none !important;
    }
    /* ضمان ظهور الـ form فوراً عند تفضيل تقليل الحركة (بلا انتظار .open). */
    .intro-screen .intro-login-form {
        opacity: 1;
        transform: none;
        max-height: 380px;
        visibility: visible;
    }
    .intro-screen .intro-greeting {
        opacity: 1;
    }
    /* الخطّ الزخرفي يبقى مطوياً (width من خصائص التخطيط المحظورة هنا
        وهو تزييني aria-hidden — لا فقدان معلومات). */
    .intro-screen .intro-login-invite {
        opacity: 1;
    }
}

/* === /صفحة الانترو === */

/* ============================================================
   Meadows legacy restoration — 3 light-mode rules
   restored from HEAD main.css. Translated to Meadows tokens.
   ============================================================ */

body.modal-open {
overflow: hidden;
}

/* ============================================================
   أشرطة التمرير — طبقة موحّدة لكل الأسطح
   ------------------------------------------------------------
   كانت مبعثرة في ٦ ملفات بمقاسات (4/5/6px) وألوان مختلفة (accent، primary
   بـ18%، primary بـ25%، border-main) بينما شريط الصفحة نفسه بلا تنسيق أصلاً
   (شريط النظام الخام). هنا المصدر الواحد؛ القواعد المكوّنية تستهلك نفس التوكنز.

   محرّكان لا ثالث لهما:
     1) المعياري (Firefox + Chrome 121+): scrollbar-width/scrollbar-color.
     2) WebKit/Blink: عائلة ::-webkit-scrollbar (تتجاهل الأولى عند دعمها).
   نُعرّف الاثنين معاً — المتصفّح يأخذ ما يفهمه.

   ⚠️ الجهة ليست خاصية CSS: شريط الصفحة يظهر يميناً أو يساراً حسب `direction`
   لحاوية التمرير. المستند هنا `<html dir="rtl">` فالمتصفّح يضعه يساراً من نفسه.
   لا تُحاول فرض الجهة بحيلة العكس المزدوج (حاوية overflow داخلية): التمرير
   اللامتناهي (cache-utils.js) والترويسة الزجاجية (app-core-topbar-scroll.js)
   يستمعان لتمرير `window` فينكسران.
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: var(--scrollbar-pad) solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}
/* أزرار الأسهم (WebKit قديم/بعض المنصّات) — تُلغى كي يبقى الشريط خطاً نظيفاً. */
::-webkit-scrollbar-button {
    display: none;
}

/* الأسطح الضيّقة: قوائم منسدلة/لوحات/شريط جانبي — نفس اللون بمقاس أرفع بلا حشو. */
.dropdown-list,
.status-select-dropdown,
.customer-suggestions,
.sidebar-nav,
.notification-items,
.meadow-activity-list,
.ap-list,
.cp-body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
.dropdown-list::-webkit-scrollbar,
.status-select-dropdown::-webkit-scrollbar,
.customer-suggestions::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.notification-items::-webkit-scrollbar,
.meadow-activity-list::-webkit-scrollbar,
.ap-list::-webkit-scrollbar,
.cp-body::-webkit-scrollbar {
    width: var(--scrollbar-size-sm);
    height: var(--scrollbar-size-sm);
}
.dropdown-list::-webkit-scrollbar-thumb,
.status-select-dropdown::-webkit-scrollbar-thumb,
.customer-suggestions::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.notification-items::-webkit-scrollbar-thumb,
.meadow-activity-list::-webkit-scrollbar-thumb,
.ap-list::-webkit-scrollbar-thumb,
.cp-body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 0;
    border-radius: 999px;
}
.dropdown-list::-webkit-scrollbar-thumb:hover,
.status-select-dropdown::-webkit-scrollbar-thumb:hover,
.customer-suggestions::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.notification-items::-webkit-scrollbar-thumb:hover,
.meadow-activity-list::-webkit-scrollbar-thumb:hover,
.ap-list::-webkit-scrollbar-thumb:hover,
.cp-body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ============================================================
   أدوات الوصول — موضعها هنا لأنّها عامّة لكل الأسطح
   ============================================================ */

/* نصّ لقارئ الشاشة فقط (كان مُعرَّفاً في dashboard.css رغم عموميّته). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* رابط التخطّي: مُزاح خارج الشاشة حتى يُركَّز عليه، ثم ينزلق إلى مكانه.
   يبدأ من حافة البداية (RTL) عبر خاصية منطقية. */
.skip-link {
    position: fixed;
    top: 10px;
    inset-inline-start: 10px;
    z-index: var(--z-popover-top);
    padding: 10px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-primary, 0 8px 20px rgba(0, 0, 0, 0.18));
    transform: translateY(-160%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

/* حلقة تركيز موحّدة لصفوف القوائم التي صارت قابلة للتركيز (a11y-shell.js).
   نفس لغة .btn:focus-visible — لا نيون، درجة أساسية شفّافة. */
[data-a11y-row='1']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent);
}

body::before {
content: '';
    position: fixed;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    z-index: var(--z-bg);
    background-image: var(--bg-image-url, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(var(--bg-image-blur, 0px));
    opacity: var(--bg-image-opacity, 0.2);
    pointer-events: none;
}