.dropdown-list > div {
            transition: background-color .18s ease, color .18s ease;
            padding: 12px 18px;
            cursor: pointer;
            font-weight: 500;
        }

        .dropdown-list > div:hover {
            background: color-mix(in srgb, var(--accent) 10%, var(--surface-main));
            color: var(--text-title);
        }

        /* ===== قائمة اقتراحات العميل (customer-suggestions) ===== */
        .customer-suggestions {
            border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border-main)) !important;
            border-top: none !important;
            border-radius: 0 0 14px 14px;
            box-shadow: var(--shadow-md);
            background: var(--surface-solid) !important;
            margin-top: -1px;
            overflow: hidden;
            max-height: 250px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }
        .customer-suggestions::-webkit-scrollbar {
            width: 6px;
        }
        .customer-suggestions::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 3px;
        }
        .customer-suggestions > div {
            transition: background-color .18s ease;
        }

        /* الوضع الليلي: عناصر القوائم المنسدلة واقتراحات العميل */
        body.dark-mode .dropdown-list > div,
        body.dark-mode .customer-suggestions > div {
            border-bottom-color: var(--border-main) !important;
            color: var(--text-main) !important;
        }
        body.dark-mode .dropdown-list > div:hover,
        body.dark-mode .customer-suggestions > div:hover {
            background: var(--table-row-hover-bg) !important;
        }
        /* رؤوس المجموعات (أسماء الأقاليم) في القائمة المنسدلة للمدن */
        body.dark-mode .dropdown-list > div[style*="font-weight: bold"],
        body.dark-mode .dropdown-list > div[style*="font-weight:bold"] {
            background: var(--bg-main) !important;
            border-bottom-color: var(--border-main) !important;
            color: var(--text-secondary) !important;
        }
        /* رسالة "لا توجد مدن" في الوضع الليلي */
        body.dark-mode .dropdown-list > div[style*="color: #999"],
        body.dark-mode .customer-suggestions > div[style*="color: #999"] {
            color: var(--text-secondary) !important;
        }

        .login-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: var(--bg-main);
            background-image:
                linear-gradient(var(--bg-main), var(--bg-main)),
                var(--bg-image-url, none);
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .login-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--bg-image-url, none);
            background-size: cover;
            background-position: center;
            opacity: var(--bg-image-opacity, 0.2);
            filter: blur(var(--bg-image-blur, 0px));
            pointer-events: none;
        }

        .login-box {
            position: relative;
            background: var(--surface-solid);
            padding: 44px 40px;
            border-radius: var(--control-radius);
            border: none;
            box-shadow: var(--shadow-lg);
            width: 100%;
            max-width: 420px;
            text-align: center;
        }

        .login-title {
            font-size: 24px;
            font-weight: 800;
            margin-top: 0;
            margin-bottom: 6px;
            color: var(--text-title);
            letter-spacing: -0.01em;
        }

        .login-subtitle {
            color: var(--text-secondary);
            margin-bottom: 30px;
            font-size: 13px;
        }

        .error-message {
            background: color-mix(in srgb, var(--danger) 12%, transparent);
            color: var(--danger);
            padding: 10px 14px;
            border-radius: var(--control-radius);
            border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
            margin-bottom: 16px;
            font-size: 13px;
            font-weight: 500;
        }

        @media (max-width: 992px) {
            .charts-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* Tablet and smaller screens (before mobile) */
        @media (max-width: 1024px) and (min-width: 481px) {
            .header-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .search-box {
                flex: 1 1 auto;
                width: 100%;
            }

            .header-actions .btn {
                padding: 8px 12px;
                font-size: 11px;
                white-space: nowrap;
                flex: 1 1 auto;
                min-width: 100px;
                width: 100%;
            }

            #notesPage .header-actions {
                flex-direction: column;
                align-items: stretch;
            }

            #notesPage .header-actions .btn {
                padding: 8px 12px;
                font-size: 11px;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .recent-orders-header {
                align-items: center !important;
            }
            /* الإعدادات على الجوال متاحة من القائمة الجانبية فقط */
            #themeSettingsBtn { display: none !important; }

            /* تحسين تصميم حقول الإدخال للأجهزة المحمولة */
            .form-input {
                padding: 18px 20px;
                font-size: 16px; /* منع التكبير التلقائي في iOS */
                border-radius: var(--control-radius);
            }
            /* (أُسقطت نسخة .searchable-input: كانت تكرّر الحشوة نفسها وتخالف
               في نصف القطر فقط — 12px بدل --control-radius.) */

            .form-label {
                font-size: 15px;
                margin-bottom: 14px;
            }

            .form-group {
                margin-bottom: 28px;
            }

            .modal-content {
                padding: 24px;
                border-radius: 12px;
                width: 95%;
            }

            /* تحسين القوائم المنسدلة للأجهزة المحمولة */
            .dropdown-list {
                border-radius: 0 0 12px 12px;
            }

            .dropdown-list > div {
                padding: 16px 20px;
                font-size: 15px;
            }
            /* (تمّت إزالة قاعدة الشريط السفلي القديمة — الشريط أصبح drawer على الجوال) */

            .header {
                flex-direction: column;
                gap: 16px;
                align-items: flex-start;
                padding: 20px;
            }

            .header-actions {
                width: 100%;
                flex-wrap: wrap;
                gap: 10px; /* Add a gap between wrapped items */
            }

            .search-box {
                flex: 1 1 180px; /* Allow shrinking and growing, with a base size */
            }

            #notesPage .header-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }

            #notesPage .header-actions > * {
                flex-grow: 1;
                min-width: 120px;
            }

            .orders-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .greeting {
                font-size: 23px;
            }

            .charts-grid {
                grid-template-columns: 1fr !important;
            }

            /* بطاقات الإحصائيات: متجاوبة بجانب بعض على الجوال */
            .dashboard-stats {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px !important;
            }

            .dashboard-stats .stat-card {
                padding: 14px !important;
                border-radius: 12px !important;
            }

            .dashboard-stats .stat-card-header {
                margin-bottom: 10px !important;
                gap: 6px;
            }

            .dashboard-stats .stat-card-icon {
                width: 34px !important;
                height: 34px !important;
                border-radius: 9px !important;
            }

            .dashboard-stats .stat-card-icon img {
                width: 18px !important;
                height: 18px !important;
            }

            .dashboard-stats .stat-card-title {
                font-size: 11px !important;
                letter-spacing: 0.3px !important;
            color: var(--ink-2);
            text-shadow:
                0 1px 0 rgba(255, 255, 255, 0.55),
                0 -1px 0 rgba(42, 53, 71, 0.10);
        }

            .dashboard-stats .stat-card-value {
                font-size: 22px !important;
                margin-bottom: 4px !important;
            }

            .dashboard-stats .stat-card-footer {
                font-size: 10px !important;
                gap: 4px !important;
            }

            .modal-content {
                width: 95%;
                padding: 20px;
            }
            
            /* Mobile notification dropdown styles */
            .notification-dropdown {
                position: fixed !important;
                top: 70px !important;
                left: 5px !important;
                right: 5px !important;
                width: auto !important;
                max-width: calc(100vw - 10px) !important;
                max-height: 70vh !important;
                overflow: hidden !important;
                z-index: var(--z-mobile-sheet) !important;
                border-radius: 14px !important;
                box-shadow: 0 8px 30px rgba(42, 53, 71, 0.22) !important;
                backdrop-filter: blur(10px) !important;
                min-width: min(300px, calc(100vw - 10px)) !important;
                background: var(--surface-solid) !important;
                border: 1px solid var(--border-main) !important;
            }

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

            .notification-badge {
                width: 16px !important;
                height: 16px !important;
                min-width: 16px !important;
                font-size: 9px !important;
                top: -4px !important;
                right: -4px !important;
                padding: 0 3px !important;
            }

            .notification-dropdown-header {
                padding: 6px 6px 10px !important;
                background: transparent !important;
                border-bottom: none !important;
            }
            .notification-dropdown-icon {
                width: 40px !important; height: 40px !important;
                border-radius: 11px !important;
            }
            .notification-dropdown-title { font-size: 13px !important; }
            .notification-dropdown-sub { font-size: 11px !important; }

            .notification-items { padding: 8px !important; }
            .notification-item { padding: 9px !important; gap: 10px !important; }
            .notification-item-thumb {
                width: 36px !important; height: 36px !important;
                border-radius: 10px !important;
            }
            .notification-item-name { font-size: 12.5px !important; }
            .notification-item-meta { margin-top: 3px !important; }
            .notification-item-count {
                min-width: 30px !important; height: 26px !important;
                padding: 0 7px !important; font-size: 12px !important;
            }

            .notification-dropdown-footer {
                padding: 0 !important;
                background: transparent !important;
                border-top: none !important;
            }
            .notification-dropdown-link { font-size: 13px !important; padding: 9px 10px !important; }

            /* Mobile table styles */
            .customers-table {
                font-size: 10px;
                min-width: 550px;
            }

            .customers-table thead th {
                padding: 10px 6px;
                font-size: 9px;
            }

            .customers-table td {
                padding: 8px 5px;
                font-size: 10px;
            }

            .customer-address,
            .customer-address-details {
                max-width: 80px;
            }

            .customer-date {
                max-width: 70px;
                font-size: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        /* Extra small devices (less than 480px) — الشريط drawer، لا قواعد قديمة */
        @media (max-width: 480px) {
            /* الجوال: البطاقة الكبيرة تملأ الشاشة فلا هامش سفلي أبيض — تنفّس
               المحتوى داخل padding الصفحة نفسها. */
            .main-content {
                padding-bottom: 0;
            }

            /* تحسينات إضافية للأجهزة الصغيرة جداً */
            .form-input {
                padding: 20px 18px;
                border-radius: var(--control-radius);
            }
            /* (نفس السبب: نسخة .searchable-input كانت تكراراً بنصف قطر مخالف.) */

            .form-label {
                font-size: 14px;
            }

            .modal-content {
                padding: 20px;
                border-radius: 12px;
            }

            /* تقليل التأثيرات الحركية للأجهزة الضعيفة: نُبطل التحويل فقط، ونترك
               ألوان التركيز الكنسية (أساسي للحقول، سماوي لمبحث المدينة) سارية. */
            .form-input:focus,
            .searchable-dropdown .searchable-input:focus {
                transform: none;
            }

            /* Extra small device table styles */
            .customers-table {
                font-size: 9px;
                min-width: 520px;
            }

            .customers-table thead th {
                padding: 8px 4px;
                font-size: 9px;
            }

            .customers-table td {
                padding: 6px 4px;
                font-size: 9px;
            }

            .row-number {
                width: 30px;
            }

            .customer-address,
            .customer-address-details {
                max-width: 60px;
                font-size: 9px;
            }

            .orders-badge {
                padding: 4px 8px;
                font-size: 10px;
            }

            .customer-date {
                max-width: 60px;
                font-size: 9px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-secondary);
        }

        .empty-icon {
            font-size: 47px;
            margin-bottom: 16px;
        }

        /* Customers Table Styles */
        .customers-table-wrapper {
            background: var(--table-wrapper-bg);
            border-radius: var(--table-border-radius);
            overflow-x: auto;
            overflow-y: hidden;
            border: 1px solid var(--table-border);
            box-shadow: var(--table-shadow);
            margin-bottom: 32px;
            -webkit-overflow-scrolling: touch;
        }

        .customers-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--table-font-size);
            min-width: 600px;
        }

        .customers-table thead {
            background: var(--table-header-bg);
            color: var(--table-header-text);
        }

        .customers-table thead th {
            padding: var(--table-header-padding);
            text-align: right;
            font-weight: 800;
            font-size: 11.5px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            border: none;
            white-space: nowrap;
            color: var(--table-header-text);
        }

        .sortable-header {
            cursor: pointer;
            user-select: none;
            transition: background-color .15s ease, color .15s ease;
            position: relative;
            padding-right: 28px;
        }

        /* كان أبيضَ على --table-header-bg الأبيض — تباين 1.0:1، أي أن اسم
           العمود يختفي تحت المؤشّر عند الفرز. بقيّةٌ من ترويسة داكنة متقاعدة
           (DESIGN.md: الترويسة بيضاء بحبر #2A3547). التمييز الآن باللون
           الأساسي على أرضيّته الخفيفة. */
        .sortable-header:hover {
            background: color-mix(in srgb, var(--primary) 8%, transparent);
            color: var(--primary);
        }

        .sort-icon {
            font-size: 11px;
            opacity: 0.85;
            transition: opacity 0.2s ease;
            position: absolute;
            inset-inline-start: 8px;
        }

        .sortable-header:hover .sort-icon {
            opacity: 1;
        }

        .customers-table tbody tr {
            border-bottom: 1px solid var(--table-row-border);
            transition: background-color .15s ease;
            background-color: var(--table-row-bg);
        }
        .customers-table tbody tr:nth-child(even) { background: var(--table-row-alt-bg, transparent); }

        .clickable-row {
            cursor: pointer;
        }

        .customers-table tbody tr:hover {
            background: var(--table-row-hover-bg);
        }

        .clickable-row:hover {
            background: var(--table-row-hover-bg) !important;
            box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
        }

        .customers-table tbody tr:last-child {
            border-bottom: none;
        }

        .customers-table td {
            padding: var(--table-cell-padding);
            text-align: right;
            color: var(--table-row-text, var(--text-main));
        }

        .row-number {
            font-weight: 600;
            color: var(--text-main);
            background-color: var(--bg-main);
            width: 40px;
            text-align: center;
        }

        .customer-name {
            font-weight: 600;
            color: var(--text-title);
        }

        .customer-phone {
            direction: ltr;
            text-align: left;
        }

        .customer-address {
            color: var(--text-secondary);
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .customer-address-details {
            color: var(--text-secondary);
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .orders-badge {
            display: inline-block;
            background: var(--orders-count-bg);
            color: var(--orders-count-text);
            padding: 6px 12px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 12px;
        }

        .customer-date {
            color: var(--text-secondary);
            font-size: 12px;
            white-space: nowrap;
        }

        /* Dashboard Stats Cards */
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 32px;
        }

        .stat-card {
            background: var(--surface-main);
            border-radius: var(--pane-radius);
            padding: 24px;
            border: 1px solid var(--border-main);
            box-shadow: var(--shadow-sm);
            transition: box-shadow .25s ease, transform .15s ease, border-color .2s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: none;
        }

        .stat-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .stat-card:hover::before {
            opacity: 0;
        }

        .stat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 18px;
        }

        .stat-card-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: none;
            letter-spacing: 0.2px;
            text-shadow:
                0 1px 0 rgba(255, 255, 255, 0.5),
                0 -1px 0 rgba(42, 53, 71, 0.08);
        }

        .stat-card-icon {
            font-size: 26px;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--primary) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
        }

        .stat-card-value {
            font-size: 34px;
            font-weight: 800;
            color: var(--text-title);
            margin-bottom: 6px;
            letter-spacing: -0.02em;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }

        .stat-card-footer {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* بطاقات المؤشرات (KPI) — Modernize: بطاقات بيضاء، القيمة هي التي
           تحمل لون الفئة (إشارة واحدة)، لا تدرّج ولا زخرفة دائرية. كل variant
           يُعرّف --stat-accent فقط. */
        .stat-card-primary,
        .stat-card-success,
        .stat-card-warning,
        .stat-card-info {
            /* ترث البطاقة البيضاء الأساسية (.stat-card) — لا تغيير. */
        }
        .stat-card-primary::after,
        .stat-card-success::after,
        .stat-card-warning::after,
        .stat-card-info::after {
            content: none;
        }

        .stat-card-primary {
            --stat-accent: var(--primary);
        }
        .stat-card-success {
            --stat-accent: var(--mint);
        }
        .stat-card-warning {
            --stat-accent: var(--secondary);
        }
        .stat-card-info {
            --stat-accent: var(--accent);
        }

        .stat-card-primary .stat-card-title,
        .stat-card-success .stat-card-title,
        .stat-card-warning .stat-card-title,
        .stat-card-info .stat-card-title { color: var(--text-secondary); }

        .stat-card-primary .stat-card-value,
        .stat-card-success .stat-card-value,
        .stat-card-warning .stat-card-value,
        .stat-card-info .stat-card-value { color: var(--stat-accent, var(--text-title)); }

        .stat-card-primary .stat-card-footer,
        .stat-card-success .stat-card-footer,
        .stat-card-warning .stat-card-footer,
        .stat-card-info .stat-card-footer,
        .stat-card-primary .stat-card-footer *,
        .stat-card-success .stat-card-footer *,
        .stat-card-warning .stat-card-footer *,
        .stat-card-info .stat-card-footer * { color: rgba(255, 255, 255, 0.88); }

        .stat-card-primary .stat-card-icon,
        .stat-card-success .stat-card-icon,
        .stat-card-warning .stat-card-icon,
        .stat-card-info .stat-card-icon {
            background: rgba(255, 255, 255, 0.20);
            border: 1px solid rgba(255, 255, 255, 0.28);
        }
        .stat-card-primary .stat-card-icon img,
        .stat-card-success .stat-card-icon img,
        .stat-card-warning .stat-card-icon img,
        .stat-card-info .stat-card-icon img,
        .stat-card-primary .stat-card-icon svg,
        .stat-card-success .stat-card-icon svg,
        .stat-card-warning .stat-card-icon svg,
        .stat-card-info .stat-card-icon svg {
            filter: brightness(0) invert(1);
        }

        /* ============================================================
           Meadows — Topbar
           شريط عنوان علوي: زر قائمة (جوال) + مسار DASHBOARD / القسم + أفعال.
           يطابق meadows-dashboard.html:590-594.
           ============================================================ */
          .topbar {
              /* Modernize AppBar: بطاقة ترويسة بيضاء عائمة بظل ناعم وزاوية 12px،
                 تطفو على الأرضية الرمادية كبطاقة مستقلة (لا حدّ سفلي مدمج).
                 min-height 70px + position sticky (المصدر _header.scss: AppBar
                 min-height 70px) — تلتصق أعلى الشاشة أثناء التمرير كـAppBar. */
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              gap: 16px;
              padding: 14px 20px;
              min-height: 70px;
              box-sizing: border-box;
              /* مدموج في بطاقة الصفحة: خلفية مطابقة للبطاقة (رمادي) بلا ظل/زاوية،
                 وفاصل سفلي ناعم يحدّد منطقة الترويسة. النزيف إلى حواف البطاقة
                 (هوامش سالبة) وزوايا علوية مدوّرة تُضبط في sidebar.css (.page > .topbar). */
              background: var(--bg-main);
              border: none;
              border-bottom: 1px solid var(--border-main);
              border-radius: 0;
              box-shadow: none;
              /* سياق تكديس يعلو محتوى الصفحة (بطاقات/جداول) حتى تظهر القوائم
                 المنبثقة المثبّتة داخله (إشعارات النفاد) فوق البطاقات. القيمة 100
                 آمنة: الترويسة داخل الصفحة z-index:1 فيُحجز تأثيرها داخل الصفحة
                 فقط، فلا تطغى على الـ sidebar (z:60) ولا الخلفية (z:49) ولا
                 النوافذ المنبثقة (z:2000). */
              position: sticky;
              top: 0;
              z-index: var(--z-sticky);
              /* انتقال ناعم إلى الحالة الزجاجية عند السكرول. نُحرّك الخلفية
                 والـ backdrop معاً (webkit + مواصفة) والظل، فيتبدّل الملمس
                 بسلاسة بدل قفزة. ألغيناه في كتلة prefers-reduced-motion أدناه
                 لمن طلب تقليل الحركة. */
              transition:
                  background-color .25s ease,
                  backdrop-filter .25s ease,
                  -webkit-backdrop-filter .25s ease,
                  box-shadow .25s ease;
          }
         /* ===== ترويسة زجاجية عند التمرير (frosted-glass on scroll) =====
            Modernize AppBar: عند تجاوز السكرول عتبة 8px (يضبطها السكربت
            app-core-topbar-scroll.js) تكتسب الترويسة ملمساً زجاجياً عبر
            ضبابية + تشبّع لوني (نمط iOS/macOS) فيُظهر المحتوى المتحرّك
            تحتها بدل أن تحجبه طبقة معتمة. الـ saturate يُعزّز ألوان ما
            يظهر خلف الترويسة (نمط Material You) فيبقى مظهر المحتوى حيّاً
            تحت الضبابية. الخلط مع --bg-main يجعل اللون يتكيّف تلقائياً
            مع الوضع الليلي (نفس المتغيّر يصبح #161F2C) — لا قواعد
            مكرّرة في dark.css. النسبة 72% أتت من المعاينة: أقلّ من 60%
            يُضعف التباين بين الترويسة والنصّ؛ أكثر من 80% يخفي الإحساس
            بالزجاج. */
         .topbar.is-scrolled {
             background: color-mix(in srgb, var(--bg-main) 72%, transparent);
             -webkit-backdrop-filter: blur(14px) saturate(140%);
             backdrop-filter: blur(14px) saturate(140%);
             /* ظل خفيف يُعزّز إحساس «الطفو» الزجاجي ويفصل الترويسة بصرياً
                عن المحتوى الذي يسكرول تحتها. ألطف من --shadow-sm كي لا
                يطغى على ظل البطاقة الأصلي (.page). */
             box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
         }
         /* احترام تفضيل تقليل الحركة: ألغِ الـ transition على الترويسة
            لكن أبقِ الحالة البصرية (.is-scrolled) سارية المفعول. المستخدم
            يحصل على التبدّل فورياً بلا رسوم متحرّكة. */
         @media (prefers-reduced-motion: reduce) {
             .topbar { transition: none; }
         }
         /* ===== الترويسة على الجوال (≤700px) =====
            الترويسة تندمج في البطاقة الكبيرة التي تملأ الشاشة (انظر sidebar.css)
            فتأخذ خلفية --bg-main نفسها بلا فاصل. الـtokens موحّدة مع الديسكتوب
            (--bg-main + --border-light) مع نمط الزجاج عند التمرير. الكثافة تتقلّص
            (56px بدل 70px + padding أخفّ) لتوفير ارتفاع الشاشة على 5". */
         @media (max-width: 700px) {
             .topbar {
                 background: var(--bg-main);
                 border-bottom: 1px solid var(--border-light);
                 min-height: 56px;
                 padding: 10px 14px;
                 gap: 10px;
             }
             .topbar.is-scrolled {
                 background: color-mix(in srgb, var(--bg-main) 78%, transparent);
                 -webkit-backdrop-filter: blur(12px) saturate(140%);
                 backdrop-filter: blur(12px) saturate(140%);
                 box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
             }
             /* اسم الصفحة (فتات التنقّل .topbar-crumbs) يبقى ملاصقاً لزرّ القائمة
                على جهة اليمين (بداية السطر في RTL). المشكلة: حين تلتفّ أزرار
                الترويسة (فلتر التاريخ «اسبوع/شهر» + الجرس + الإعدادات) إلى سطرٍ
                ثانٍ على الشاشة الضيّقة، كان justify-content:space-between يقفز
                اسم الصفحة إلى جهة اليسار. الهامش المنطقي inline-end:auto يبتلع
                الفراغ من جهة النهاية (اليسار) فيُثبّت اسم الصفحة عند البداية
                (اليمين) ملاصقاً للزرّ، وتذهب الأزرار لليسار أو لسطرٍ ثانٍ. */
             .topbar-crumbs { margin-inline-end: auto; }
         }
         /* Modernize: tab-content (المخزون وغيره) بطاقة بيضاء عائمة تحوي الجداول */
         .tab-content {
             background: var(--surface-solid);
             border: none;
             border-radius: var(--pane-radius);
             box-shadow: var(--shadow-sm);
             padding: 20px;
         }
         /* زر القائمة — ظاهر على الجوال فقط (الديسكتوب: السايدبار شريط أيقونات
            يتمدّد بالـ hover، انظر sidebar.css) */
         .topbar-menu {
            display: none;
            width: 40px; height: 40px;
            border-radius: 12px;
            /* كان #fff مثبّتاً بينما الحدّ واللون يتبعان الثيم — فيبقى الزرّ
               أبيض ناصعاً في الوضع الليلي. --surface-solid ينقلب إلى #1E2838. */
            background: var(--surface-solid);
            border: 1px solid var(--border-main);
            color: var(--text-title);
            cursor: pointer;
            align-items: center; justify-content: center;
            transition: border-color .18s ease, background-color .18s ease;
        }
        .topbar-menu:hover {
            border-color: color-mix(in srgb, var(--text-title) 30%, var(--border-main));
            background: color-mix(in srgb, var(--text-title) 5%, transparent);
        }
        @media (max-width: 900px) {
            .topbar-menu { display: inline-flex; }
        }

        /* ===== زر القائمة (hamburger) — تحوّل لـ X =====
           تقليد لمكوّن React icons-menu (framer-motion) بـ CSS خالص:
           الخطّان العلوي والسفلي يدوران ويلتقيان في المنتصف، والخط الأوسط يختفي.
           يُفعَّل عند فتح القائمة (body.sidebar-open) وعند المرور بالزر (محاكاة
           animateOnHover). الـ transition نابض (cubic-bezier) ليحاكي spring
           stiffness:200 / damping:20. */
        .topbar-menu .burger {
            position: relative;
            display: inline-block;
            width: 18px; height: 14px;
        }
        .topbar-menu .burger > span {
            position: absolute;
            left: 0; right: 0;
            height: 2.2px;
            border-radius: 2px;
            background: currentColor;
            transform-origin: center;
            /* تخفيف أُسّي بدل cubic-bezier(.5, 1.55, …) الارتدادي — DESIGN.md
               § Motion يمنعه نصّاً، والمدّة دخلت نطاق 180–260ms. */
            transition:
                transform .22s cubic-bezier(.22, 1, .36, 1),
                opacity .2s ease-in-out;
        }
        .topbar-menu .burger > span:nth-child(1) { top: 0; }
        .topbar-menu .burger > span:nth-child(2) { top: calc(50% - 1.1px); }
        .topbar-menu .burger > span:nth-child(3) { bottom: 0; }
        /* الحالة المفعّلة: قائمة مفتوحة أو مؤشر فوق الزر */
        body.sidebar-open .topbar-menu .burger > span:nth-child(1),
        .topbar-menu:hover .burger > span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }
        body.sidebar-open .topbar-menu .burger > span:nth-child(2),
        .topbar-menu:hover .burger > span:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        body.sidebar-open .topbar-menu .burger > span:nth-child(3),
        .topbar-menu:hover .burger > span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

        /* Meadows: مسار DASHBOARD / <القسم> — علامة كحلي + فاصل + قسم جاري */
        .topbar-crumbs {
            display: flex; align-items: center; flex-wrap: wrap;
            gap: 10px;
            font-weight: 700; letter-spacing: 0.4px;
            min-width: 0;
        }
        .crumbs-current {
            position: relative;
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--ink-2);
            font-weight: 800; font-size: 16px;
        }
        /* نقطة سماوية أمام القسم الحالي = "أنت هنا" */
        .crumbs-current::before {
            content: "";
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
        }

        /* ── Breadcrumb "outline pill" — منفذ من shadcn breadcrumb-01 ──
           كبسولة مستديرة بحدود: [أيقونة الرئيسية] ‹ [القسم الحالي].
           RTL: الفاصل يشير لليسار. تُفعّل بإضافة .crumbs-pill على .topbar-crumbs.
           توكنز Meadows تتكيّف مع الوضع الليلي تلقائياً. */
        .topbar-crumbs.crumbs-pill {
            /* أُزيلت البطاقة (خلفية/حدود/حشو/ارتفاع) خلف اسم الصفحة في التوب بار */
            background: transparent;
            border: 0;
            padding: 0;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0;
        }
        .topbar-crumbs.crumbs-pill .crumb-home {
            display: inline-flex;
            align-items: center;
            color: var(--text-muted);
            line-height: 0;
            transition: color 0.15s ease;
        }
        .topbar-crumbs.crumbs-pill .crumb-home:hover { color: var(--ink-2); }
        .topbar-crumbs.crumbs-pill .crumb-home-icon { width: 16px; height: 16px; }
        .topbar-crumbs.crumbs-pill .crumb-sep {
            display: inline-flex;
            align-items: center;
            color: var(--text-muted);
            line-height: 0;
        }
        .topbar-crumbs.crumbs-pill .crumb-sep svg { width: 14px; height: 14px; }
        /* داخل الكبسولة نُخفي نقطة "أنت هنا" (الأيقونة تكفي) ونوحّد وزن القسم الحالي */
        .topbar-crumbs.crumbs-pill .crumbs-current::before { display: none; }
        .topbar-crumbs.crumbs-pill .crumbs-current {
            color: var(--ink-2);
            font-weight: 700;
            font-size: 14px;
        }

        .topbar-actions {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            margin-right: auto;
        }
        @media (min-width: 901px) {
            .topbar-actions { margin-right: 0; }
        }

        /* ===== منتقي نطاق التاريخ (Date Range Picker) — التصميم ٣ =====
           زرّ واحد (.date-pill) يعرض الفترة الحالية، يفتح نافذة عائمة (.range-pop)
           فيها اختصارات جاهزة (.range-preset) + تقويم (.cal) لاختيار نطاق مخصّص.
           (حلّ محلّ شريط التجزئة «اسبوع/شهر» القديم ليغطّي كل الإصدارات.) يستعمل
           توكنز Modernize فيتكيّف مع الوضع الليلي تلقائياً. المنطق في
           home-date-range.js. */
        .date-range { position: relative; display: inline-flex; }

        .date-pill {
            display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; padding: 0;
            background: var(--surface-solid, var(--surface-main));
            border: 1px solid var(--border-main);
            border-radius: 50%;
            color: var(--text-title);
            font: inherit; font-size: 13px; font-weight: 600;
            cursor: pointer;
            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
        }
        .date-pill:hover {
            border-color: color-mix(in srgb, var(--text-title) 30%, var(--border-main));
        }
        .date-pill.is-open {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
        }
        .date-pill__icon { color: var(--text-secondary); flex: none; }
        /* النص والسهم مخفيّان: الزر دائري يعرض الأيقونة فقط (يُبقى العنصر في DOM للـ JS) */
        .date-pill__text, .date-pill__caret { display: none; }

        .range-pop {
            position: absolute;
            top: calc(100% + 8px);
            inset-inline-end: 0;
            width: 320px;
            max-width: calc(100vw - 24px);
            background: var(--surface-solid);
            border: 1px solid var(--border-main);
            border-radius: 16px;
            padding: 16px;
            box-shadow: var(--shadow-lg);
            z-index: var(--z-popover);
            animation: fadeIn .18s ease;
        }
        .range-pop[hidden] { display: none; }

        .range-presets {
            display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
            margin-bottom: 14px;
        }
        .range-preset {
            padding: 8px;
            border: 1px solid var(--border-main);
            background: var(--surface-solid);
            border-radius: 8px;
            color: var(--text-main);
            font: inherit; font-size: 12px; font-weight: 600;
            cursor: pointer;
            min-height: 36px;
            transition: background-color .15s ease, color .15s ease, border-color .15s ease;
        }
        .range-preset:hover { background: var(--surface-hover); }
        .range-preset.active {
            background: color-mix(in srgb, var(--primary) 12%, transparent);
            color: var(--primary);
            border-color: color-mix(in srgb, var(--primary) 40%, transparent);
        }

        .cal-head-bar {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; margin-bottom: 8px;
            font-weight: 700; font-size: 13px; color: var(--text-title);
        }
        .cal-nav {
            width: 30px; height: 30px; min-width: 30px;
            display: grid; place-items: center;
            border: 1px solid var(--border-main);
            background: var(--surface-solid);
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background-color .15s ease, color .15s ease;
        }
        .cal-nav:hover { background: var(--surface-hover); color: var(--text-title); }
        .cal-month-label { font-size: 13px; }

        .cal {
            display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
            text-align: center;
        }
        .cal-head {
            color: var(--text-secondary); font-size: 11px; font-weight: 600;
            padding: 6px 0;
        }
        .cal-day {
            padding: 0; height: 34px; width: 100%;
            border: none; background: transparent;
            border-radius: 8px;
            font: inherit; font-size: 12px; color: var(--text-main);
            cursor: pointer;
            display: grid; place-items: center;
            transition: background-color .12s ease;
        }
        .cal-day--empty { cursor: default; }
        .cal-day:hover:not(:disabled):not(.cal-day--empty) { background: var(--surface-hover); }
        .cal-day:disabled {
            color: var(--text-muted, var(--text-secondary));
            opacity: .4; cursor: not-allowed; background: transparent;
        }
        .cal-day.is-today { font-weight: 800; color: var(--primary); }
        .cal-day.in-range {
            background: color-mix(in srgb, var(--primary) 12%, transparent);
            border-radius: 0;
        }
        /* بداية النطاق على جهة البداية (اليمين في RTL) ونهايته على جهة النهاية —
           زوايا منطقية تتكيّف مع الاتجاه تلقائياً. */
        .cal-day.is-start {
            background: var(--primary); color: #fff;
            border-start-start-radius: 8px; border-end-start-radius: 8px;
        }
        .cal-day.is-end {
            background: var(--primary); color: #fff;
            border-start-end-radius: 8px; border-end-end-radius: 8px;
        }
        /* نطاق من يوم واحد: نفس اليوم بدايةً ونهايةً فيأخذ زوايا كاملة. */
        .cal-day.is-start.is-end { border-radius: 8px; }
        .cal-day.is-pending { box-shadow: inset 0 0 0 2px var(--primary); }

        /* على الجوال: الزر أصغر، والنافذة العائمة تثبَّت على إطار العرض
           (position: fixed) لتمتد بين الحافتَين فلا تخرج عن الشاشة — الزرّ
           صغير (40px) فالارتكاز عليه (absolute) كان يُخرجها للجانب. نفس نهج
           لوحة الإشعارات. */
        @media (max-width: 700px) {
            .date-pill { width: 36px; height: 36px; }
            .range-pop {
                position: fixed;
                top: 70px;
                inset-inline-start: 8px;
                inset-inline-end: 8px;
                width: auto;
                max-width: none;
            }
        }

        /* أيقونات دائرية في الأعلى — Meadows: 38px، حدود لافندر ناعمة */
        .topbar-icon {
            width: 38px; height: 38px;
            border-radius: 50%;
            /* نفس العطل: أيقونات الشريط العلوي ظاهرة في كل صفحة، وكانت تبقى
               بيضاء في الوضع الليلي بينما حدّها ولونها ينقلبان. */
            background: var(--surface-solid);
            border: 1px solid var(--line, var(--border-main));
            display: grid; place-items: center;
            cursor: pointer;
            position: relative;
            transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
            color: var(--text-title);
            text-decoration: none;
        }
        .topbar-icon:hover {
            border-color: color-mix(in srgb, var(--text-title) 30%, var(--border-main));
            background: color-mix(in srgb, var(--text-title) 5%, transparent);
        }
        .topbar-icon img.bell-icon {
            width: 16px; height: 16px; object-fit: contain;
            transition: transform .25s ease;
        }
        .topbar-icon:hover .bell-icon { transform: scale(1.06); }
        /* Modernize: نقطة الإشعار مصمتة أساسية 8×8 (المصدر .notification
           bg-primary rounded-circle) — بلا وهج/هالة. تتفوّق على قاعدة عدّاد
           الـ16px العامة بـ !important لتُطبَّق فقط داخل أيقونة الترويسة. */
        .topbar-icon .notification-badge {
            position: absolute !important;
            top: 9px !important;
            inset-inline-end: 9px !important;
            width: 8px !important;
            height: 8px !important;
            min-width: 0 !important;
            padding: 0 !important;
            border-radius: 50% !important;
            background: var(--primary) !important;
            border: 2px solid var(--surface-solid);
            box-shadow: none !important;
            font-size: 0 !important;
            line-height: 0 !important;
        }