/* Modernize Bootstrap (_sidebar.scss): الشريط لوحة بيضاء مسطّحة ثابتة
            الارتفاع تلتصق بحافة الشاشة (inset-inline-start:0) ممتدةً من أقصى
            الطرف إلى أسفلها — بلا هامش/فجوة حولها، خلفيتها واحدة موحّدة من
            الحافة مباشرةً، يفصلها عن المحتوى حدّ 1px فقط على الجهة المقابلة
            (border-inline-end في RTL = يسار الشريط). ليست بطاقة عائمة. */
        .sidebar {
            background: var(--surface-solid);
            border: none;
            /* بلا حدّ فاصل: السايدبار يندمج مع المضيف الأبيض الموحَّد (الخلفية +
               الشريط = حاضنة واحدة) فلا يبدو بطاقة منفصلة. */
            border-inline-end: none;
            border-radius: 0;
            box-shadow: none;
            padding: 0 24px; /* $sidebar-spacing-x: 0 24px */
            display: flex;
            flex-direction: column;
            gap: 14px;
            z-index: var(--z-sidebar);
            width: 270px;
            transition: width .25s ease, box-shadow .25s ease;
            flex: none;
            position: fixed;
            inset-inline-start: 0;
            top: 0;
            height: 100vh;
        }
        .sidebar-nav::-webkit-scrollbar { width: 4px; }
        .sidebar-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 25%, transparent); border-radius: 4px; }

        /* Modernize: الشريط ثابت من الحافة (position: fixed) والمحتوى ينزاح
            بمقدار عرضه — لا فجوة/هامش حول الشريط، فالخلفية ممتدة من أقصى الطرف.
            طول #dashboard = مجموع محتواه (بدون min-height: 100vh) كي لا تُجبر
            الصفحات القصيرة على شغل طول الشاشة. الصفحة الرئيسية وحدها تملأ
            الشاشة (أدناه). */
        #dashboard {
            width: 100%;
            min-height: 0;
            padding: 0;
            gap: 0;
            align-items: flex-start;
            box-sizing: border-box;
        }
        /* الصفحة الرئيسية (الإحصائيات) وحدها تملأ الشاشة للحفاظ على baseline
           بصري للوحة Meadows. باقي الصفحات تنكمش على محتواها فعلاً. */
        #homePage {
            min-height: calc(100vh - 36px);
            box-sizing: border-box;
        }
        @media (max-width: 900px) {
            #dashboard { padding: 0; }
        }

        /* Modernize: رأس البراند — min-height 70px (=$header-height) يفصله عن
            القائمة حدّ سفلي ناعم، تماماً كما يفصل brand-logo عن scroll-sidebar.
            مربع الشعار الأساسي يحمل هوية المتجر. */
        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 70px; /* $header-height */
            padding: 0;
            border-bottom: 1px solid var(--border-main);
            margin-bottom: 4px;
            flex: none;
        }
        .brand-mark {
            width: 42px; height: 42px;
            border-radius: var(--control-radius);
            background: var(--primary);
            display: grid; place-items: center;
            flex: none;
            overflow: hidden;
            box-shadow: none;
        }
        .brand-mark img.tenant-logo {
            width: 26px; height: 26px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }
        .brand-text { display: flex; flex-direction: column; line-height: 1; gap: 5px; min-width: 0; }
        .brand-name {
            font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
            color: var(--text-title);
        }
        .brand-tag {
            font-size: 10px; font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        /* قائمة التبويبات — Modernize sidebar-nav: عناصر مسطّحة، نشط = أساسي
            صلب. التقسيم لمجموعات (العمليات / المخزون / النمو) يفرض إيقاع قراءة
           احترافي ويقلّل الحمل الذهني: فاصل عمودي + عنوان مجموعة صغير
           بحروف علوية بدلاً من جردّ صف طويل من 9 عناصر. */
        .sidebar-nav {
            display: flex; flex-direction: column;
            gap: 0;
            flex: 1 1 auto;
            /* التمرير هنا (لا على <aside>) كي لا يقصّ <aside> زر التثبيت الجاني
               الذي يبرز خارج حافته، وكي تبقى الهوية/الرسمة/التذييل ثابتة أثناء
               تمرير القائمة الطويلة. min-height:0 يسمح لـ flex بالانكماش والتمرير. */
            overflow: hidden auto;
            overflow-x: hidden;
            min-height: 0;
        }
        .nav-group {
            display: flex; flex-direction: column;
            gap: 2px;
            padding: 8px 0;
        }
        /* Modernize لا يفصل المجموعات بحدّ عريض — يعتمد على margin-top لعنوان
           القسم (nav-small-cap) لإحداث الإيقاع. نبقي خطاً شبه شفاف جداً للتماسك
           مع نظام Meadows دون منافسة الفواصل المرجعية. */
        .nav-group + .nav-group {
            border-top: 1px solid color-mix(in srgb, var(--border-main) 45%, transparent);
            margin-top: 0;
            padding-top: 0;
        }
        /* عنوان القسم (nav-small-cap في Modernize _sidebar.scss): 12px / وزن 700 /
           أحرف علوية / لون العنوان الداكن (#2A3547)، padding 3px 12px،
           line-height 26px. الأيقونة المرافقة (nav-small-cap-icon) مخفية في
           الثيم الموسّع — عنوان نصي صِرف. */
        .nav-group-title {
            margin: 24px 0 6px;
            padding: 3px 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.4px;
            line-height: 26px;
            color: var(--text-title);
            text-transform: uppercase;
            user-select: none;
        }
        /* استثناء: الصفحة الرئيسية لا تحتاج عنوان مجموعة — تجعل الـheader
           أنظف وتُبرزها كـ"نقطة الدخول". */
        .nav-group > .nav-item--primary { margin-top: 0; }

        /* === مجموعات قابلة للطي (منطق القائمة الجانبية من ثيم Modernize) ===
           .nav-group-title.has-arrow هو زر يفتح/يغلق قائمته الفرعية
           (.nav-collapse / .in) بسلوك accordion (فتح مجموعة يُغلق الباقي) —
           مطابق لـ sidebarmenu.js في الثيم. */
        .nav-group-title.has-arrow {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px;
            width: 100%;
            margin: 24px 0 6px;
            padding: 3px 14px 3px 16px;
            line-height: 26px;
            background: transparent;
            border: none;
            cursor: pointer;
            text-align: start;
        }
        .nav-group-title.has-arrow:hover { color: var(--primary); }
        .nav-group-title.has-arrow:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
            border-radius: 6px;
        }
        /* سهم قابل للطي على نمط Modernize has-arrow::after: مثلث border 7px
           يدور (مطوي = chevron لأسفل / مفتوح = لأعلى). نخفي SVG المرافق ونجعل
           العنصر نفسه هو المثلث، مطابقاً للمصدر بصرياً (سهم مستقل عن الاتجاه). */
        .nav-group-title.has-arrow .nav-arrow {
            display: block;
            width: 7px;
            height: 7px;
            border-right: 1px solid var(--text-muted);
            border-bottom: 1px solid var(--text-muted);
            flex: none;
            transform: rotate(45deg);
            transform-origin: center;
            transition: transform .3s ease-out, border-color .18s ease;
        }
        .nav-group-title.has-arrow .nav-arrow-svg { display: none; }
        .nav-group.is-open .nav-group-title.has-arrow .nav-arrow {
            transform: rotate(-135deg);
        }
        .nav-group-title.has-arrow:hover .nav-arrow {
            border-color: var(--primary);
        }
        /* الحاوية الفرعية القابلة للطي: تنفتح/تنغلق بارتفاع ناعم (.in). */
        .nav-collapse {
            display: flex; flex-direction: column; gap: 2px;
            overflow: hidden;
            max-height: 0;
            transition: max-height .28s ease;
        }
        .nav-collapse.in { max-height: 420px; }
        /* عرض موحّد: قائمة واحدة مسطّحة بلا عناوين تصنيفات في كل الأوضاع —
           كل العناصر متتالية تظهر أسماؤها عند التمدّد وتختفي عند الطيّ
           (أيقونات فقط). !important لضمان الطغيان على قواعد hover/pinned/collapsed. */
        .sidebar-nav .nav-group-title { display: none !important; }
        .sidebar-nav .nav-collapse { max-height: none !important; }
        @media (prefers-reduced-motion: reduce) {
            .nav-collapse { transition: none; }
        }

        .nav-item {
            display: flex; align-items: center; gap: 15px;
            padding: 10px;
            margin: 0 0 2px; /* $sidebar-link: padding 10px, margin 0 0 2px */
            border-radius: 7px;
            color: var(--nav-text);
            font-weight: 400; font-size: 14px;
            line-height: 1.2;
            text-decoration: none;
            background: transparent;
            border: none;
            transition: background-color .18s ease, color .18s ease;
            position: relative;
            cursor: pointer;
        }
        /* فتحة الأيقونة: مربع 24px بمحاذاة بصرية موحّدة، يدعم أيقونات
           SVG وPNG دون تحجيم فردي. المسافة بين الأيقونة والنص = 12px
           لتنفّس طبيعيّ. */
        .nav-item .nav-icon {
            width: 24px; height: 24px;
            display: grid; place-items: center;
            color: currentColor;
            opacity: 0.7;
            flex: none;
            transition: opacity .18s ease, transform .18s ease;
        }
        .nav-item .nav-icon img.nav-icon-img {
            width: 22px; height: 22px;
            object-fit: contain;
            filter: grayscale(0.2) opacity(0.8);
            transition: filter .18s ease, opacity .18s ease;
        }
        /* أيقونات SVG (نفس دي إن إيه نشاط الطلبات: مخطّطية stroke، currentColor).
           الحجم 21px مطابق لـ .ti في Modernize _sidebar.scss. */
        .nav-item .nav-icon svg.nav-icon-svg {
            width: 21px; height: 21px;
            flex: none;
            stroke-width: 2;
            transition: opacity .18s ease;
        }
        .nav-item .nav-label {
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            letter-spacing: -0.005em;
        }
        /* Hover: Modernize _sidebar.scss — الخلفية subtle (bs-primary-bg-subtle =
            --light-primary) والنص والأيقونة يتحوّلان للأزرق الأساسي (bs-primary).
            بلا إزاحة (Modernize لا يُزيح العناصر). */
        .nav-item:hover {
            background: var(--nav-bg-hover);
            color: var(--primary);
        }
        body[dir="rtl"] .nav-item:hover { transform: none; }
        .nav-item:hover .nav-icon,
        .nav-item:hover .nav-icon img.nav-icon-img { opacity: 1; filter: none; }

        /* نشط — المستوى الأعلى (Modernize sidebar-link.active مباشرةً تحت
            #sidebarnav): خلفية أساسية صلبة + نص/أيقونة بيضاء. التعبئة الصلبة هي
            الإشارة الوحيدة (بلا شريط جانبي أو نقطة متوهّجة). */
        .nav-item.active {
            background: var(--primary);
            color: #ffffff;
            font-weight: 700;
            box-shadow: none;
        }
        .nav-item.active .nav-icon,
        .nav-item.active .nav-icon img.nav-icon-img {
            opacity: 1;
            filter: none;
        }
        .nav-item.active::after {
            content: none;
        }

        /* ذيل الشريط — بطاقة ترويجية على نمط Modernize .unlimited-access:
            لوحة صغيرة بخلفية --light-primary ناعمة وزوايا 7px، تحوي الإعدادات
            وتسجيل الخروج. تحافظ على الوظيفة مع لمسة هوية أساسية. */
        .sidebar-foot {
            margin-top: auto;
            padding: 14px 14px 18px;
            background: var(--light-primary);
            border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
            border-radius: 7px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .sidebar-logout {
            display: flex; align-items: center; gap: 12px;
            padding: 9px 12px 9px 14px;
            margin: 0;
            border-radius: 7px;
            color: var(--text-secondary);
            font-weight: 600; font-size: 13px;
            text-decoration: none;
            background: transparent;
            transition: background-color .18s ease, color .18s ease;
        }
        .sidebar-logout:hover {
            background: rgba(255, 255, 255, 0.6);
            color: var(--primary);
        }
        .sidebar-logout[href="/logout"]:hover {
            background: color-mix(in srgb, var(--danger) 12%, transparent);
            color: var(--danger);
        }
        .sidebar-logout:hover .nav-icon img.nav-icon-img { filter: none; opacity: 1; }
        .sidebar-logout .nav-icon img { width: 22px; height: 22px; object-fit: contain; filter: grayscale(0.15) opacity(0.85); }

        /* رسمة هوية أسفل القائمة (فوق الإعدادات): تملأ الفراغ البصري بين نهاية
            روابط التنقّل وبطاقة الذيل. صورة مربّعة متمركزة، حواف ناعمة، تعتمد
            توكنز Meadows فتتكيّف مع الوضع الليلي تلقائياً. */
        .sidebar-art {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 6px 0 2px;
            margin-top: auto;
        }
        /* الرسمة تستحوذ على الفراغ السفلي (margin-top:auto) فتدفع الذيل للأسفل
            معها بدل أن يقسّما المساحة — نُلغي هامش الذيل التلقائي هنا فقط. */
        .sidebar-foot { margin-top: 0; }
        .sidebar-art-img {
            width: 100%;
            max-width: 188px;
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            border-radius: 14px;
            opacity: 0.96;
            user-select: none;
            -webkit-user-drag: none;
            pointer-events: none;
        }
        @media (max-width: 900px) {
            .sidebar-art-img { max-width: 168px; }
        }

        /* إخفاء/إظهار حسب صلاحيات RBAC (يطبَّق من applyNavPermissions) */
        .nav-item[style*="display: none"] { display: none !important; }

        /* ===== السايدبار على الديسكتوب: شريط أيقونات يتمدّد بالـ hover =====
           افتراضياً (>900px) السايدبار مطويّ كشريط أيقونات (76px) والمحتوى ملاصق له
           عند 76px (بلا فراغ). عند المرور يتمدّد إلى 270px كطيارة عائمة فوق المحتوى
           (المحتوى لا يتحرّك ولا يُعيد التخطيط) فيبقى التمرير سلساً حتى في الصفحات
           الثقيلة (جداول/قوائم طويلة كالعملاء والطلبات والمخزون). مغادرة المؤشر →
           يعود مطوياً. الجوال لا يتأثر (له قواعد ≤900px خاصة بالـ drawer). نستخدم
           المحدّد الشقيق (.sidebar ~ .main-content) لرفع الخاصية فوق قاعدة
           margin-inline-start:270px الأساسية (المعرّفة لاحقاً في الملف). */
        @media (min-width: 901px) {
            .sidebar { width: 76px; padding-inline: 8px; }
            .sidebar:hover { width: 270px; box-shadow: var(--shadow-lg); }
            .sidebar ~ .main-content { margin-inline-start: 76px; }

            /* الوضع المُثبَّت (pinned): الشريط ممدود دائماً 270px والمحتوى ينزاح
               270px. يُفعَّل بـ html.sidebar-pinned (يضبطه سكربت _head.html من
               localStorage، ويُبدّله زر التثبيت) — يلغي سلوك الطيّ/الـ hover
               ويُبقي النصوص/الرسمة ظاهرة دائماً. */
            html.sidebar-pinned .sidebar { width: 270px; padding-inline: 24px; }
            html.sidebar-pinned .sidebar:hover { box-shadow: none; }
            html.sidebar-pinned .sidebar ~ .main-content { margin-inline-start: 270px; }

            /* الوضع المُثبَّت المطوي (collapsed): شريط أيقونات 76px ثابت لا
               يتمدّد بالـ hover — للتنقّل بين الصفحات بالأيقونات فقط دون تمدّد
               مزعج. يلغي قاعدة تمدّد الـ hover ويُبقي النصوص/الرسمة مخفية دائماً. */
            html.sidebar-collapsed .sidebar:hover { width: 76px; box-shadow: none; }
            html.sidebar-collapsed .sidebar .sidebar-brand { justify-content: center; gap: 0; }
            html.sidebar-collapsed .sidebar .brand-text,
            html.sidebar-collapsed .sidebar .nav-label,
            html.sidebar-collapsed .sidebar .sidebar-logout .nav-label,
            html.sidebar-collapsed .sidebar .nav-group-caption,
            html.sidebar-collapsed .sidebar .nav-arrow,
            html.sidebar-collapsed .sidebar .reports-lock-icon,
            html.sidebar-collapsed .sidebar .sidebar-art { display: none; }
            html.sidebar-collapsed .sidebar .nav-group-title { display: none; }
            html.sidebar-collapsed .sidebar .nav-collapse { max-height: none !important; }
            html.sidebar-collapsed .sidebar .nav-group { padding: 4px 0; }
            html.sidebar-collapsed .sidebar .nav-item,
            html.sidebar-collapsed .sidebar .sidebar-logout {
                justify-content: center;
                padding-inline: 0;
                gap: 0;
            }
            html.sidebar-collapsed .sidebar .sidebar-foot { padding: 10px 6px; }

            /* الوضع المطوي (دون مرور): أخفِ النصوص/الرسمة/عناوين المجموعات،
               وسّط الأيقونات، وكشف كل العناصر بغضّ النظر عن الأكورديون. */
            html:not(.sidebar-pinned) .sidebar:not(:hover) .sidebar-brand { justify-content: center; gap: 0; }
            html:not(.sidebar-pinned) .sidebar:not(:hover) .brand-text,
            html:not(.sidebar-pinned) .sidebar:not(:hover) .nav-label,
            html:not(.sidebar-pinned) .sidebar:not(:hover) .sidebar-logout .nav-label,
            html:not(.sidebar-pinned) .sidebar:not(:hover) .nav-group-caption,
            html:not(.sidebar-pinned) .sidebar:not(:hover) .nav-arrow,
            html:not(.sidebar-pinned) .sidebar:not(:hover) .reports-lock-icon,
            html:not(.sidebar-pinned) .sidebar:not(:hover) .sidebar-art { display: none; }
            html:not(.sidebar-pinned) .sidebar:not(:hover) .nav-group-title { display: none; }
            html:not(.sidebar-pinned) .sidebar:not(:hover) .nav-collapse { max-height: none !important; }
            html:not(.sidebar-pinned) .sidebar:not(:hover) .nav-group { padding: 4px 0; }
            html:not(.sidebar-pinned) .sidebar:not(:hover) .nav-item,
            html:not(.sidebar-pinned) .sidebar:not(:hover) .sidebar-logout {
                justify-content: center;
                padding-inline: 0;
                gap: 0;
            }
            html:not(.sidebar-pinned) .sidebar:not(:hover) .sidebar-foot { padding: 10px 6px; }
        }

        /* الجوال: الشريط ينسحب تدريجياً (transition) خارج الشاشة مع حركة ناعمة
           (مطابق للثيم: عند تصغير الشاشة تختفي القائمة بحركة ويظهر مكانها زر
           القائمة ☰). drawer ثابت من الحافة، خلفية بيضاء موحّدة كالديسكتوب. */
        @media (max-width: 900px) {
            .sidebar {
                position: fixed;
                top: 0; bottom: 0; right: 0;
                width: 280px;
                height: 100vh;
                padding: 22px 14px 18px;
                background: var(--surface-solid);
                border-inline-end: none;
                border-radius: 0;
                max-height: 100vh;
                transform: translateX(100%);
                transition: transform .3s ease;
                box-shadow: var(--shadow-lg);
                /* احتواء سكرول القائمة داخلها: عند بلوغ طرفها لا ينتقل السكرول
                   (scroll chaining) إلى محتوى الصفحة في الخلف. القائمة تسكرل
                   محتواها فقط (overflow-y:auto) إن لم تكن مرئية بالكامل. */
                overscroll-behavior: contain;
            }
            /* الشريط مخفي على الجوال فلا ينزاح المحتوى بمقدار عرضه بعد الآن. */
            .main-content { margin-inline-start: 0; }
            body.sidebar-open .sidebar { transform: translateX(0); }
            body.sidebar-open::after {
                content: "";
                position: fixed; inset: 0;
                background: rgba(15, 23, 42, 0.45);
                backdrop-filter: blur(2px);
                z-index: var(--z-sidebar-scrim);
                /* منع سحب الـbackdrop من تحريك الصفحة خلفه عبر اللمس (iOS). */
                touch-action: none;
            }
            /* قفل سكرول الصفحة الخلفية أثناء فتح القائمة — نفس نمط
               body.modal-open المعتمد للنوافذ المنبثقة. مقصور على ≤900px لأن
               زر القائمة (.topbar-menu) لا يظهر إلا عند هذا الحجم. */
            body.sidebar-open {
                overflow: hidden;
            }
        }

        /* ===== زر الشريط الجانبي (تثبيت/طيّ/فتح) =====
            زر دائري على حافة الشريط (الجهة المقابلة للمحتوى = inset-inline-end
            في RTL) يدور بين ثلاث حالات على الديسكتوب: تلقائي (مطوي 76px يتمدّد
            بالـ hover) ← موسّع ثابت (270px) ← مطوي ثابت (76px، تنقّل بالأيقونات
            فقط بلا تمدّد). أيقونته/عنوانه يتبدّلان حسب الحالة (انظر sidebarmenu.js
            cycleSidebarPin). يظهر على الديسكتوب فقط؛ الجوال يفتح الشريط عبر زر
            القائمة ☰ (drawer). الحالة تُطبَّق قبل أول paint عبر html.sidebar-pinned
            / html.sidebar-collapsed (يضبطها سكربت _head.html من localStorage) فلا
            يحدث وميض عند الـ refresh. */
        .sidebar-pin {
            position: absolute;
            inset-inline-end: -13px;       /* يبرز نصفه خارج الحافة نحو المحتوى (يسار RTL) */
            top: 22px;
            z-index: calc(var(--z-sidebar) + 1);
            width: 26px;
            height: 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 50%;
            background: var(--surface-solid);
            border: 1px solid var(--border-main);
            color: var(--text-secondary);
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: background-color .18s ease, color .18s ease,
                        border-color .18s ease, box-shadow .18s ease, transform .12s ease;
        }
        .sidebar-pin:hover {
            color: var(--primary);
            border-color: color-mix(in srgb, var(--primary) 35%, transparent);
            box-shadow: var(--shadow-md);
        }
        .sidebar-pin:active { transform: scale(.9); }
        .sidebar-pin:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        .sidebar-pin svg { display: block; }
        /* الحالة المُثبَّتة (موسّع أو مطوي): الزر مفعّل بصرياً (أساسي صلب + أيقونة بيضاء). */
        html.sidebar-pinned .sidebar-pin,
        html.sidebar-collapsed .sidebar-pin {
            background: var(--primary);
            border-color: var(--primary);
            color: #ffffff;
        }
        /* إخفاء الزر على الجوال — الشريط drawer قابل للسحب فقط ولا يُثبَّت. */
        @media (max-width: 900px) {
            .sidebar-pin { display: none !important; }
        }

        .logo {
            display: none;
        }

        .logo img {
            width: 70px;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }

        .nav-item span:not(.nav-icon):not(.nav-label):not(.reports-lock-icon) {
            display: none; /* لا بقايا من أيقونات/تلميحات قديمة */
        }

        .nav-icon-img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            transition: filter .2s ease;
        }

        .nav-item:hover .nav-icon-img {
            filter: none;
        }

        /* لا نُطبّق brightness(0) invert(1) في الحالة النشطة — الخلفية بنفسجية فاتحة
           والأيقونة تبقى بلون النص الأساسي لراحة العين */

        .main-content {
            /* Modernize: حاوية شفافة — المحتوى بطاقات بيضاء تطفو على الأرضية
               الرمادية مباشرةً، لا لوحة بيضاء واحدة. كل صفحة = AppBar (topbar)
               + بطاقات KPI/جداول/رسوم منفصلة. الشريط ثابت من الحافة فينزاح
               المحتوى بمقدار عرضه (margin-inline-start) بدل فجوة حوله. */
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex: 1 1 auto;
            margin-inline-start: 270px;
            transition: margin-inline-start .25s ease;
            min-width: 0;
            position: relative;
            overflow: visible;
        }
        .main-content::before,
        .main-content::after {
            content: none;
        }
        .main-content > * { position: relative; z-index: 1; }

        /* على الديسكتوب الشريط ثابت من الحافة فيحتاج المحتوى هامشاً داخلياً
           (gutter) بدل هامش #dashboard الذي أُزيل (الخلفية ممتدة من الحافة
           والشريط بلا فجوة). على الجوال تتكفّل قواعد ≤900px بالمسافات. */
        @media (min-width: 901px) {
            .main-content { padding: 20px; }
        }

        /* الصفحة الواحدة = flex عمودي بنفس الفجوة بين الأقسام داخل البطاقة البيضاء
           الصفحات غير النشطة تُخفى عبر position:absolute بعيداً عن الـflex flow
           + visibility/opacity بدلاً من display:none — هكذا تبقى جميع العناصر
           في render tree ولا تُعاد بناء الكروت/الشبكات من الصفر عند التبديل. */
        .page {
            display: flex;
            flex-direction: column;
            gap: 18px;
            /* توحيد شكل الصفحة: كل صفحة = بطاقة كبيرة بلون الأرضية (--bg-main رمادي)
               بحدّ وظلّ خفيف وزاوية، تطفو داخل المضيف الأبيض الموحَّد وتحتوي
               بطاقاتها الداخلية البيضاء (تباين). ينطبق على كل الصفحات دفعةً واحدة. */
            background: var(--bg-main);
            border: 1px solid var(--border-main);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-sm);
            padding: 16px;
            /* السماح للصفحة النشطة باستعادة ارتفاعها الطبيعي بعد إزالة
               .page-hidden (التي تفرض height:0/max-height:0 للقصّ). */
            height: auto;
            min-height: 0;
            /* لا transition على مستوى الصفحة نفسها — الـ entrance الوحيد
               المعتمد هو الظهور المتتابع (Stagger) على الأبناء المباشرين في
               motion.css. منعاً لأي تلاشٍ مزدوج قد يُقرأ كـ«زوم». */
        }
        .page.page-hidden {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 100%;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            display: flex !important;
            /* تصغير الصندوق إلى 0×0 وقصّ محتواه: من دون هذا، الصفحات المخفية
               (خاصة orders/reports بطول 20k+px) كانت تتمدّد خارج .main-content
               (overflow:visible) وتضيف سكرول فارغاً هائلاً للصفحة. الـ height:0
               + overflow:hidden يضمن أن امتداد الصفحة المخفية لا يُحتسب في
               document.scrollHeight — مع إبقاء الصفحات في render tree كي لا
               تُعاد بناء البطاقات/الشبكات عند التبديل (الهدف الأصلي من
               page-hidden). الخصائص المؤثرة على الـ layout تنطبق فوراً
               (لا transition) كي تنسحب الصفحة من الـ flow في نفس الإطار
               الذي تتغيّر فيه الـ class — وإلا ظلّت الصفحة السابقة تُساهم
               في ارتفاع الـ body طوال الـ fade ثم تنهار فجأة في نهايته،
               فتُقرأ على هيئة «زوم»/«قفزة» مزعجة عند مغادرة الصفحات الطويلة.
               الـ fade-out (opacity) أُلغي عمداً — الـ cross-fade بين الصفحة
               القديمة fade-out والجديدة fade-in عبر الـ stagger يخلق شعوراً
               مزدوجاً بالتغيير يُشبه «الزوم». الصفحة القديمة تُخفى فوراً
               والـ Stagger وحده يتولّى إيقاع الدخول. */
            height: 0;
            min-height: 0;
            max-height: 0;
            overflow: hidden;
            transition: none;
        }

        /* ترويسة الصفحة (.topbar) مدموجة في البطاقة: تنسحب إلى حوافها (هوامش سالبة
           تساوي padding البطاقة) لتكون ترويسةً متّصلة لا بطاقة منفصلة، مع تدوير
           زواياها العلوية لمطابقة زوايا البطاقة. تُطبَّق على الابن المباشر فقط.
           غير مشروطة بأي media query: الدمج بنيةٌ لا حركة. */
        .page > .topbar {
            margin: -16px -16px 0;
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        }
        /* على الجوال: padding الـ.page يصبح 12px فيلزم سحب الترويسة بالمقدار
            نفسه كي تلتصق بحواف الشاشة. الزوايا العلوية مُصفَّرة (border-radius:0)
            لأنّ البطاقة الكبيرة تملأ الشاشة بلا زوايا مدوّرة — لا حافّة بطاقة
            تطفو بعد الآن. (القاعدة الأساسية .page > .topbar تبقى خارج أي
            @media كما يحرسها touch-targets.test.js.) */
        @media (max-width: 700px) {
            .page > .topbar {
                margin: -12px -12px 0;
                border-radius: 0;
            }
        }

        /* احترام تفضيل تقليل الحركة. */
        @media (prefers-reduced-motion: reduce) {
            .page,
            .page.page-hidden {
                transition: none;
            }
        }

        /* محتوى الصفحة لا يحتاج padding خارجي — البطاقة البيضاء تحتويه */
        .page > .header {
            margin-bottom: 0;
        }

        /* البطاقات الداخلية داخل البطاقة البيضاء الموحدة تحصل على ظل لطيف
           تماماً كما في meadows-dashboard.html (سطر 283) — لا حاجة لتسطيحها. */

        /* التابلت المتوسط (701–900px): هامش (gutter) حول اللوحة البيضاء كي لا
           تلتصق بحواف الشاشة وتصبح مزدحمة. عند 900px يصبح الشريط drawer ويصبح
           #dashboard padding يساوي 0، فاللوحة كانت تلتصق بالحواف مباشرة؛ نُضيف
           هنا margin يحاكي gutter الديسكتوب (18px) بدون أن يصل لازدحام الجوال. */
        @media (max-width: 900px) and (min-width: 701px) {
            .main-content {
                margin: 16px;
            }
        }

        /* الجوال: لا هامش أبيض حول البطاقة — تملأ الشاشة من الحافة للحافة. */
        @media (max-width: 700px) {
            .main-content {
                margin: 0;
                padding: 0;
                border-radius: 0;
            }
        }

        /* === الجوال: بطاقة واحدة كبيرة تملأ الشاشة ===
           على الجوال (≤700px) تختفي «الخلفية الأساسية» — هامش وبطانة المضيف
           الأبيض حول الصفحة — فلا تظهر فجوة من لون الجسم حول البطاقة. عوضاً
           عن بطاقة رمادية تطفو داخل إطار أبيض، تصبح الصفحة نفسها بطاقةً واحدة
           كبيرة تملأ الشاشة عرضاً وارتفاعاً (min-height:100vh) وتحوي بطاقات
           المعلومات البيضاء داخلها: مساحة أكبر ومحتوى أوضح على 5".
           التنفيذ:
           - .main-content margin/padding: 0 (لا هامش أبيض حول البطاقة).
           - .page: border:none + box-shadow:none + border-radius:0 (تلتصق بحواف
             الشاشة) مع إبقاء background:var(--bg-main) كسطح البطاقة،
             و min-height:100vh كي تملأ ارتفاع الشاشة. الكثافة الداخلية
             (padding 12px / gap 12px) محفوظة لتنفّس المحتوى داخل البطاقة.
           - #homePage كان يحسب min-height من calc(100vh - 36px) (هامش الديسكتوب)
             فيُعاد ضبطه إلى 100vh هنا.
           الديسكتوب/التابلت (>700px) يبقيان مبدأ «البطاقة الموحّدة الطافية»
           بحدّ وظلّ وزوايا كما هو — التغيير مقصور على الجوال فقط.
           على الشاشات الصغيرة جدّاً (≤420px) تتقلّص الكثافة فقط:
           padding 12→10px، gap 12→10px، وهامش الترويسة يطابقها (-10px). */
        @media (max-width: 700px) {
            .page {
                padding: 12px;
                gap: 12px;
                /* بطاقة واحدة تملأ الشاشة: لا حدّ ولا ظلّ ولا زوايا — تلتصق
                   بحواف الشاشة، وخلفيتها --bg-main تملأ المساحة كلها. */
                border-radius: 0;
                border: none;
                box-shadow: none;
                min-height: 100vh;
            }
            .main-content {
                margin: 0;
                padding: 0;
            }
            .header {
                padding: 4px 0 10px;
                gap: 10px 14px;
            }
            .greeting { font-size: 19px; }
            .subtitle { font-size: 12px; }
            #homePage { min-height: 100vh; }
        }
        @media (max-width: 420px) {
            .main-content { margin: 0; padding: 0; }
            .page { padding: 10px; gap: 10px; }
            /* هامش الترويسة يطابق padding الصفحة الجديد (10px) كي تلتصق بحوافها. */
            .page > .topbar { margin: -10px -10px 0; }
        }

        /* Meadows: رأس الصفحة جزء من البطاقة البيضاء الموحدة — لا ظل/حدود/منحنى خاصّ به.
           يبقى مرناً ليحتضن الشعار + العنوان + شارات + أزرار في صفّ أنيق. */
        .header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 14px 18px;
            margin-bottom: 0;
            padding: 6px 4px 14px;
            background: transparent;
            border: none;
            box-shadow: none;
            border-bottom: 1px solid var(--border-main);
            border-radius: 0;
        }
        .header > * { min-width: 0; }

        .greeting {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-title);
            margin-bottom: 4px;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        .subtitle {
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
        }