/* ===== 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: #54B6E6;
    --accent-hover: #3298CC;
    --secondary: #EBA02E;
    --secondary-hover: #D18E1F;
    --danger: #EC7D63;
    --danger-hover: #D9664C;
    --pink: #EC7D63;
    --orange: #EBA02E;
    --mint: #1FCBB0;
    /* Modernize light tints (من _variables.scss) — تُستخدم لخلفيات hover الناعمة
       وأيقونات البطاقات وأشرطة الحالة. */
    --light-primary: #ECF2FF;
    --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: 'Plus Jakarta Sans', 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    /* خط الأرقام/البيانات: عائلة monospace نظيفة لمحاذاة الأعمدة الرقمية في
       الداشبورد وبطاقات العملاء. تُستخدم للقِيَم الرقمية والتتبّع لا كزينة؛
       المشروع لا يحمّل خطاً ثابت العرض على الويب فيقع المتصفح على أنسب خط
       نظام متاح. كانت dashboard.css/customers.css تشير إلى --app-mono-family
       و--font-mono دون تعريف فتسقط بصمت على الخط العادي. */
    --app-mono-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* === سُلّم 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;
    --surface-hover: #F6F9FC;
    --border-main: #ebf1f6;
    --border-light: #EAEFF4;
    /* --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;
    --text-muted: #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;
    --notification-item-hover-bg: #F6F9FC;
    --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;
}

html, body {
    margin: 0;
    padding: 0;
    /* المضيف أبيض موحَّد (سطح صلب) كحاضنة للبطاقات: السايدبار والخلفية لونٌ واحد،
       وبطاقة الصفحة (.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 {
    /* ملء الشاشة */
    /* تنسيق الانتقال بين الانترو والداشبورد */
}

#loginScreen {
    /* Modernize auth: أرضية رمادية محايدة (--bg-main) بدل التدرّج الثقيل —
       بطاقة بيضاء مركزية نظيفة بظل التوقيع، على نمط authentication-login. */
    background: var(--bg-main);
    min-height: 100vh;
}

#loginScreen .login-container,
#loginScreen .login-form,
#loginScreen .form-input,
#loginScreen .btn,
#loginScreen .tenant-logo {
    /* موروثة من الأنماط العامة — تُحدّد هنا لأن شاشة الدخول تعتمد على :root مباشرة */
}/* ============================================================
   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;
}