[v-cloak] {
            display: none;
        }

        /* ======================== منع تحديد/نسخ النص فكامل التطبيق ========================
           هاد القاعدة كتمنع ظهور "التحديد الأزرق" للنص عند الضغط المطول أو التمرير السريع
           بالإصبع فوق الصور والنصوص (فشاشات اللمس)، وكذلك عند السحب بالفأرة فالحاسوب.
           تبقى مفعّلة فكل التطبيق (موبايل + حاسوب) ما عدا حقول الإدخال (input/textarea)
           باش يبقى ممكن الكتابة والنسخ فيها بشكل طبيعي. */
        html, body, * {
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-touch-callout: none !important; /* يمنع قائمة "نسخ/حفظ الصورة" عند الضغط المطول فـ iOS/Android */
            -webkit-tap-highlight-color: transparent !important; /* يمنع التوهج الأزرق عند اللمس */
        }

        /* السماح بالتحديد والنسخ فقط داخل حقول الإدخال والنصوص القابلة للتعديل */
        input, textarea, [contenteditable="true"], [contenteditable=""] {
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            user-select: text !important;
            -webkit-touch-callout: default !important;
        }

        /* منع سحب الصور (drag) لي كيبان بحال تحديد عند التمرير السريع */
        img {
            -webkit-user-drag: none !important;
            user-drag: none !important;
            pointer-events: auto;
        }

        /* ======================== نظام الألوان الديناميكي ======================== */
        /* ===== FIX: كان اللون الافتراضي هنا أصفر (#EAB308)، فكانت الأيقونات فصفحة تسجيل الدخول
        تبان صفراء لمدة وجيزة (قبل ما توصل إعدادات التطبيق الحقيقية من السيرفر)، خاصة مع انترنت بطيئة.
        دابا بدلناه بالأزرق باش يبقى منسجم مع لوگو Win Systems ===== */
        :root {
            --primary-color: #3B82F6;
            --primary-color-rgb: 59, 130, 246;
            --primary-hover: #2563eb;
            --primary-light: rgba(59, 130, 246, 0.15);
            --primary-dark: #1d4ed8;
            --primary-bg: var(--primary-color);
        }

        /* Classes مخصصة للألوان الديناميكية */
        .text-primary {
            color: var(--primary-color) !important;
        }
        .bg-primary {
            background: var(--primary-bg) !important;
        }
        .border-primary {
            border-color: var(--primary-color) !important;
        }
        .hover\:bg-primary:hover {
            background: var(--primary-bg) !important;
        }
        .hover\:text-primary:hover {
            color: var(--primary-color) !important;
        }
        .hover\:border-primary:hover {
            border-color: var(--primary-color) !important;
        }
        .focus\:border-primary:focus {
            border-color: var(--primary-color) !important;
        }
        .from-primary {
            --tw-gradient-from: var(--primary-color);
        }

        /* Shadow بالألوان الديناميكية */
        .shadow-primary {
            box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
        }
        .shadow-primary-lg {
            box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4);
        }
        .shadow-primary-sm {
            box-shadow: 0 2px 6px rgba(var(--primary-color-rgb), 0.25);
        }

        /* Backgrounds مع opacity */
        .bg-primary-10 {
            background-color: rgba(var(--primary-color-rgb), 0.1);
        }
        .bg-primary-20 {
            background-color: rgba(var(--primary-color-rgb), 0.2);
        }
        .bg-primary-5 {
            background-color: rgba(var(--primary-color-rgb), 0.05);
        }

        .ring-primary {
            --tw-ring-color: var(--primary-color);
        }

        /* ======================== عناوين الأقسام الاحترافية (Page Header Pro) ======================== */
        .page-header-pro {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .page-header-icon-badge {
            width: 46px;
            height: 46px;
            min-width: 46px;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            box-shadow: 0 6px 16px -4px rgba(var(--primary-color-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
        }
        .page-header-icon-badge i {
            font-size: 19px;
            color: #14110a;
        }
        .page-header-texts {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .page-header-title {
            font-size: 21px;
            font-weight: 800;
            color: #fff;
            line-height: 1.25;
            letter-spacing: 0.2px;
            margin: 0;
        }
        .page-header-subtitle {
            font-size: 11.5px;
            font-weight: 600;
            color: var(--primary-color);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            opacity: 0.85;
        }
        .light-mode .page-header-title { color: #111827; }

        
        
        
       
        
  /* ============================================================
   🌟 تحسينات الهواتف المحمولة (Mobile First) - احترافية عالية
   ============================================================ */

/* ===== 1. نقاط التوقف الرئيسية ===== */
@media (max-width: 768px) {
    /* ---- إصلاح الـ Sidebar (المشكلة الرئيسية) ---- */
    .sidebar-transition {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 80vw !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    /* ---- إظهار الـ Sidebar عند فتحه ---- */
    .sidebar-transition:not(.translate-x-0) {
        transform: translateX(-100%) !important;
    }
    
    .sidebar-transition.translate-x-0 {
        transform: translateX(0) !important;
    }
    
    /* ---- إخفاء الـ Sidebar في وضع التصغير (collapsed) ---- */
    .sidebar-transition.sidebar-collapsed {
        width: 0px !important;
        transform: translateX(-100%) !important;
        max-width: 0px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* ---- نص الـ Sidebar يظهر دائماً في الهواتف ---- */
    .sidebar-transition .sidebar-text {
        display: inline !important;
    }
    
    .sidebar-transition .sidebar-title {
        display: block !important;
    }
    
    /* ---- تحسين أزرار الـ Sidebar ---- */
    .sidebar-transition nav button {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        margin-bottom: 4px !important;
        min-height: 48px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .sidebar-transition nav button i {
        font-size: 18px !important;
        width: 30px !important;
        text-align: center;
        margin-right: 12px !important;
    }
    
    /* ---- تحسين رأس الـ Sidebar ---- */
    .sidebar-transition .p-4.border-b {
        padding: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .sidebar-transition .p-4.border-b h1 {
        font-size: 18px !important;
    }
    
    /* ---- زر إغلاق الـ Sidebar (يضاف ديناميكياً) ---- */
    .sidebar-close-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        color: #fff !important;
        font-size: 18px !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }
    
    .sidebar-close-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    /* ---- Overlay خلف الـ Sidebar ---- */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.65) !important;
        z-index: 999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        /* ===== PERF FIX: transition محدود لـ opacity/visibility فقط (بدل all) لتفادي إعادة حساب كل الخصائص أثناء فتح/إغلاق القائمة ===== */
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
        /* ===== PERF FIX: تمت إزالة backdrop-filter (blur) على الهاتف - كان يسبب تهنيج (lag) واضح عند فتح/إغلاق القائمة الجانبية لأن الـ blur الكامل للشاشة مكلف جداً على معالجات الهواتف. اللون الداكن أعلاه (0.65) يعوّض التأثير البصري بدون أي تكلفة أداء ===== */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* ---- المحتوى الرئيسي يأخذ العرض الكامل ---- */
    .flex-1.overflow-y-auto {
        width: 100% !important;
        padding: 12px !important;
        padding-top: 8px !important;
        margin-left: 0 !important;
        min-height: 100vh !important;
    }
    
    /* ---- زر فتح الـ Sidebar (الهامبرغر) ---- */
    .sidebar-toggle-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        font-size: 20px !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        flex-shrink: 0 !important;
    }
    
    .sidebar-toggle-btn:active {
        transform: scale(0.92) !important;
    }
    
    /* ---- إصلاح عام للجسم ---- */
    body {
        font-size: 15px;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        position: relative !important;
    }
    
    /* ---- منع التمرير عند فتح الـ Sidebar ---- */
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* ---- تحسين الأزرار العامة ---- */
    button, .btn, .table-card, .pos-product-card, .pos-category-card {
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        user-select: none !important;
    }
    
    /* ---- تحسين بطاقات المنتجات والفئات ---- */
    .pos-category-card {
        min-height: 100px !important;
        border-radius: 14px !important;
    }
    
    .pos-category-card .category-image-container {
        padding-top: 65% !important;
    }
    
    .pos-category-card .p-4 {
        padding: 8px 4px !important;
    }
    
    .pos-category-card h4 {
        font-size: 13px !important;
    }
    
    .pos-product-card {
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    
    .pos-product-card .aspect-square {
        aspect-ratio: 1/0.9 !important;
    }
    
    .pos-product-card .p-4 {
        padding: 10px 8px !important;
    }
    
    .pos-product-card h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    
    .pos-product-card .text-primary {
        font-size: 16px !important;
    }
    
    /* ---- تحسين السلة (Cart) ---- */
    .pos-cart-item {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .pos-cart-item button {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 6px 12px !important;
    }
    
    /* ---- تحسين الحاوية الرئيسية للـ POS ---- */
    /* ===== FIX: هاد القاعدة كانت كتفرض overflow:visible و height:auto على حاوية
       "La Caisse" (pos-main-layout)، وعندها أولوية أقوى من القاعدة الأخرى. هاد الشي
       كان السبب الحقيقي فمشكل "ما نقدرش نسكرول لتحت" فصفحة La Caisse فالهاتف.
       ===== FIX (تحديث): pos-main-layout ماعادش هو اللي كيسكرول - لأن السلة
       (pos-cart-panel، بحال position:fixed) كانت فداخلو، وهاد الشي كان كيخلق bug
       معروف فمتصفحات الهاتف: العنصر fixed كيبدل مرجعو للحاوية القابلة للسكرول
       بلاصة الشاشة، فكانت البوطونات كيتزحفو للأسفل منين تكبر لائحة السلة. دابا
       pos-main-layout محدود الارتفاع بلا ما يسكرول بروحو (السكرول غادي يوقع
       فصندوق الفئات/المنتجات وحدو، شوف القاعدة تحت) ===== */
    .flex.flex-1.gap-4.overflow-hidden {
        flex-direction: column !important;
        gap: 8px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    /* ===== FIX 2: الصندوق (الخلفية البيضة + الإطار) كان كيتوقف عند حجم الشاشة المرئية فقط
       (بسبب flex-basis:0% ديال كلاس flex-1 ديال Tailwind)، بلا ما يتمدد لحجم المحتوى الكامل.
       ===== FIX (تحديث): دابا الصندوق كياخذ بالضبط المساحة المتاحة (بحال الشاشة) ويسكرول
       بحال بحال بداخل نفسو (min-height:0 + overflow-y:auto)، فالخلفية البيضة كتبقى وراء
       كل المحتوى المرئي فأي لحظة، وpos-main-layout (والسلة اللي فيه) ماعادش كيسكرول ===== */
    .flex.flex-1.gap-4.overflow-hidden .flex-1.overflow-y-auto {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
    }
    
    /* ---- تحسين السلة (تصبح في الأسفل) ---- */
    .w-\\[400px\\].flex.flex-col.bg-\\[\\#121212\\].rounded-xl {
        width: 100% !important;
        max-height: 48vh !important;
        height: auto !important;
        min-height: 220px !important;
        flex-shrink: 0 !important;
        margin-top: 8px !important;
        border-radius: 14px !important;
    }
    
    /* ---- تحسين أزرار السلة السفلية ---- */
    .w-\\[400px\\] .grid.grid-cols-2.gap-3 button {
        padding: 12px 6px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        min-height: 48px !important;
    }
    
    /* ---- تحسين الـ Modal الخاص بالطاولات ---- */
    .table-modal-body {
        flex-direction: column !important;
        padding: 8px !important;
        gap: 8px !important;
        overflow-y: auto !important;
        max-height: 85vh !important;
    }
    
    /* ===== FIX: نفس إصلاح السكرول المضاعف، لكن لصفحة "Table Order" ===== */
    .table-modal-body .flex-1.overflow-y-auto {
        max-height: none !important;
        overflow-y: visible !important;
    }
    /* ===== FIX: السكرول المضاعف فـ La Caisse Table (شبكة الطاولات) -
       كانت <main> نفسها تسكرول، وفي نفس الوقت صندوق الطاولات بداخلها يسكرول بحال بحال - سكرول مضاعف.
       دابا <main> توقف تسكرول بروحها فهاذوك الصفحتين، وغير الصندوق الداخلي هو اللي يسكرول ===== */
    main.pos-fullscreen-main {
        overflow: hidden !important;
        padding: 0.5rem !important;
    }
    
    .table-modal-body .w-\\[450px\\] {
        width: 100% !important;
        max-height: 45vh !important;
        flex-shrink: 0 !important;
    }
    
    .table-modal-body .grid.gap-4 {
        gap: 6px !important;
    }
    
    /* ---- تحسين شاشة الطاولات (Grid) ---- */
    .grid.grid-cols-3.sm\\:grid-cols-4.md\\:grid-cols-5.lg\\:grid-cols-6.xl\\:grid-cols-8 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .table-card {
        padding: 8px 4px !important;
        min-height: 85px !important;
        border-radius: 12px !important;
    }
    
    .table-card .text-2xl {
        font-size: 18px !important;
    }
    
    .table-card .text-xs {
        font-size: 9px !important;
    }
    
    .table-card [style*="height:60px"] {
        height: 40px !important;
    }
    
    /* ---- تحسين الجداول ---- */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch !important;
    }
    
    table {
        font-size: 13px !important;
        min-width: 500px !important;
    }
    
    table th, table td {
        padding: 10px 8px !important;
        white-space: nowrap !important;
    }
    
    table button {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        border-radius: 8px !important;
    }
    
    /* ---- تحسين شريط البحث والفلاتر ---- */
    .grid.grid-cols-1.md\\:grid-cols-3.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .grid.grid-cols-1.md\\:grid-cols-3.gap-4 input,
    .grid.grid-cols-1.md\\:grid-cols-3.gap-4 select {
        padding: 14px 12px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }
    
    /* ---- تحسين الـ Modals العامة ---- */
    .article-modal {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 92vh !important;
        border-radius: 16px !important;
        margin: 8px !important;
    }
    
    .article-modal .grid.grid-cols-1.md\\:grid-cols-3.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    /* ---- تحسين الإدخالات ---- */
    input, select, textarea {
        font-size: 16px !important;
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }
    
    /* ---- تحسين أزرار الإجراءات الرئيسية ---- */
    .bg-primary, .bg-green-600, .bg-red-600, .bg-blue-600 {
        padding: 14px 18px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        min-height: 50px !important;
    }
    
    /* ---- تحسين أزرار التبديل (Toggle) ---- */
    .relative.inline-flex.items-center.cursor-pointer {
        transform: scale(0.9) !important;
    }
    
    /* ---- تحسين مسافات العناوين ---- */
    .text-3xl {
        font-size: 22px !important;
    }
    
    .text-2xl {
        font-size: 20px !important;
    }
    
    .text-xl {
        font-size: 18px !important;
    }
    
    /* ---- تحسين الـ Virtual Keyboard ---- */
    [style*="position: fixed; bottom: 0;"] {
        padding: 10px !important;
    }
    
    [style*="position: fixed; bottom: 0;"] .keyboard-btn-char,
    [style*="position: fixed; bottom: 0;"] button {
        font-size: 20px !important;
        padding: 14px 4px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
    }
    
    /* ---- تحسين شاشة تسجيل الدخول ---- */
    .min-h-screen.flex.items-center.justify-center {
        padding: 16px !important;
        background-attachment: scroll !important;
    }
    
    .min-h-screen .max-w-md {
        padding: 0 8px !important;
    }
    
    .min-h-screen .rounded-2xl {
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }
    
    .min-h-screen .grid.grid-cols-3.gap-3 button {
        padding: 18px 4px !important;
        font-size: 20px !important;
        min-height: 56px !important;
        border-radius: 12px !important;
    }
    
    /* ---- تحسين أزرار الـ Dashboard ---- */
    .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4.gap-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }
    
    .stat-card .text-2xl {
        font-size: 17px !important;
    }
    
    /* ---- تحسين التقارير ---- */
    .grid.grid-cols-1.lg\\:grid-cols-2.gap-6 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .report-filter-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        min-height: 44px !important;
    }
    
    /* ---- تحسين بطاقات النفقات والإضافات ---- */
    .charge-card, .charge-bon, .supplement-item {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .charge-card .text-xl, .charge-bon .text-xl {
        font-size: 16px !important;
    }
    
    /* ---- تحسين الـ Footer Message ---- */
    textarea[rows="3"] {
        min-height: 80px !important;
    }
    
    /* ---- تحسين معاينة التذكرة ---- */
    .max-w-\\[320px\\] {
        max-width: 100% !important;
    }
    
    /* ---- تحسين أزرار الرجوع (Back Arrow) ---- */
    /* الزر يبقى ظاهراً دائماً (sticky) حتى عند النزول لأسفل في قائمة المنتجات، وتكبير حجمه قليلاً - هاتف فقط */
    .back-arrow-btn {
        position: sticky !important;
        top: 8px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-bottom: -52px !important;
        width: 52px !important;
        height: 52px !important;
        z-index: 30 !important;
    }
    
    .back-arrow-btn svg {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* ---- تحسين رؤوس الصفحات ---- */
    .flex.justify-between.items-center.mb-6,
    .flex.justify-between.items-center.mb-5,
    .flex.justify-between.items-center.mb-8 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .flex.justify-between.items-center.mb-6 .flex.items-center.gap-4,
    .flex.justify-between.items-center.mb-5 .flex.items-center.gap-4 {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ============================================================
   📱 تحسينات إضافية للشاشات الصغيرة جداً (تحت 480px)
   ============================================================ */
@media (max-width: 480px) {
    /* ---- تحسين Grid المنتجات ---- */
    .grid.gap-4:not(.grid-cols-1) {
        gap: 6px !important;
    }
    
    /* ---- تحسين شاشة الطاولات ---- */
    .grid.grid-cols-3.sm\\:grid-cols-4.md\\:grid-cols-5.lg\\:grid-cols-6.xl\\:grid-cols-8 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    
    /* ---- تصغير حجم الأزرار في السلة ---- */
    .w-\\[400px\\] .grid.grid-cols-2.gap-3 button {
        padding: 10px 6px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }
    
    /* ---- تصغير حجم الخط في العناوين ---- */
    .text-3xl {
        font-size: 20px !important;
    }
    
    .text-2xl {
        font-size: 18px !important;
    }
    
    .text-xl {
        font-size: 16px !important;
    }
    
    /* ---- تحسين أزرار الـ Dashboard ---- */
    .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4.gap-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    
    .stat-card .text-2xl {
        font-size: 15px !important;
    }
    
    .stat-card .text-xs {
        font-size: 9px !important;
    }
    
    /* ---- تحسين شاشة تسجيل الدخول ---- */
    .min-h-screen .grid.grid-cols-3.gap-3 button {
        padding: 14px 4px !important;
        font-size: 18px !important;
        min-height: 48px !important;
    }
    
    /* ---- تحسين الـ Modal الخاص بالطاولات ---- */
    .table-modal-body .grid.gap-4 {
        gap: 6px !important;
    }
    
    /* ---- تحسين الـ Sidebar ---- */
    .sidebar-transition {
        width: 260px !important;
        max-width: 85vw !important;
    }
}

/* ============================================================
   🖱️ تحسينات لشاشات اللمس (كل الشاشات)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* إزالة تأثير hover على الهواتف */
    *:hover {
        transform: none !important;
    }
    
    /* إضافة تأثيرات لمسية */
    button:active,
    .sidebar-transition nav button:active {
        transform: scale(0.96) !important;
        transition: transform 0.1s ease !important;
    }

    /* ===== FIX: تأثير "الانكماش" (scale) على بطاقات الفئات/المنتجات/الطاولات كان
       كيبقى "عالق" أحيانا (خصوصا إذا الإصبع بقا فوق البطاقة وانت كتسكرول)، وهاد الشي
       كان كيبين خلفية الحاوية البيضة حوالين البطاقة (كأنها "بطاقة فالخلفية" ما كتوصلش
       للأسفل وما كتختفيش). دابا التأثير كيبقى بصري (تغيير الإضاءة) بلا ما يصغر حجم
       البطاقة، فماغاديش تبان الخلفية حتى لو التأثير بقا عالق ===== */
    .table-card:active, .pos-product-card:active, .pos-category-card:active {
        transform: none !important;
        filter: brightness(0.9) !important;
        transition: filter 0.1s ease !important;
    }
    
    /* تكبير مناطق النقر */
    button, .table-card, .pos-product-card, .pos-category-card,
    .sidebar-transition nav button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* ============================================================
   📐 تحسينات لشاشات الحاسوب (Desktop) - لا تتأثر
   ============================================================ */
@media (min-width: 769px) {
    /* إعادة تعيين أي شيء قد يتأثر */
    body {
        font-size: inherit;
    }
    
    /* الـ Sidebar في الحاسوب: ارتفاع ثابت بكامل الشاشة + تمرير داخلي للقائمة */
    .sidebar-transition {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !important;
        max-width: none !important;
        z-index: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .sidebar-transition:not(.translate-x-0) {
        transform: none !important;
    }
    
    .sidebar-transition.sidebar-collapsed {
        width: 64px !important;
        transform: none !important;
        max-width: none !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .sidebar-transition.sidebar-collapsed .sidebar-text {
        display: none !important;
    }
    
    .sidebar-transition.sidebar-collapsed .sidebar-title {
        display: none !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
    
    .sidebar-close-btn {
        display: none !important;
    }
    
    .sidebar-toggle-btn {
        display: none !important;
    }
    
    .w-\\[400px\\] {
        width: 400px !important;
    }
    
    .table-modal-body .w-\\[450px\\] {
        width: 450px !important;
    }
    
    .table-modal-body {
        flex-direction: row !important;
    }
    
    .flex.flex-1.gap-4.overflow-hidden {
        flex-direction: row !important;
    }
    
    .grid.grid-cols-3.sm\\:grid-cols-4.md\\:grid-cols-5.lg\\:grid-cols-6.xl\\:grid-cols-8 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4.gap-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .grid.grid-cols-1.lg\\:grid-cols-2.gap-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .flex-1.overflow-y-auto {
        padding: 32px !important;
    }
}

/* ============================================================
   🔧 Fix: Scrollbar للهواتف
   ============================================================ */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--primary-color) !important;
        border-radius: 4px !important;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .overflow-hidden {
        overflow: hidden !important;
    }
    
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================================
   🎨 تحسينات جمالية إضافية للهواتف
   ============================================================ */
@media (max-width: 768px) {
    .bg-\\[\\#121212\\] {
        background-color: #0d0d0d !important;
    }
    
    .shadow-lg, .shadow-2xl, .shadow-xl {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    
    .border, .border-2 {
        border-width: 1px !important;
    }
    
    .space-y-3 > * + * {
        margin-top: 8px !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 10px !important;
    }
    
    .image-upload-zone {
        min-height: 100px !important;
        padding: 12px !important;
    }
    
    .text-red-400, .text-red-500 {
        padding: 8px !important;
    }

    /* ===== NEW: نافذة اختيار "كاميرا / معرض" — خاصة بالهاتف فقط ===== */
    .image-source-sheet-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 3500;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .image-source-sheet {
        position: relative;
        width: 100%;
        max-width: 480px;
        background: #1e1e1e;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        padding: 10px 16px 28px 16px;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    }

    .image-source-sheet-handle {
        width: 40px;
        height: 4px;
        background: #555;
        border-radius: 2px;
        margin: 6px auto 14px auto;
    }

    .image-source-sheet-close {
        position: absolute;
        top: 12px;
        right: 12px;
        color: #999;
        background: transparent;
        border: none;
        font-size: 18px;
        padding: 6px;
    }

    .image-source-sheet-options {
        display: flex;
        gap: 12px;
        justify-content: center;
        padding-top: 4px;
    }

    .image-source-option {
        flex: 1;
        max-width: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        background: #2a2a2a;
        border: 1px solid #3a3a3a;
        border-radius: 12px;
        padding: 16px 10px;
        color: #eee;
        font-size: 13px;
        font-weight: 600;
    }

    .image-source-option:active {
        background: #333;
    }

    .image-source-option-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--primary, #22c55e);
    }

    /* ===== FIX (mobile only): إصلاح ظهور نافذة عرض الفاتورة بشكل ضخم جداً على الهاتف - الحاسوب لا يتأثر إطلاقاً ===== */
    .mobile-ticket-popup {
        width: 92% !important;
        max-width: 92vw !important;
        box-sizing: border-box !important;
    }

    .mobile-ticket-popup .swal2-title {
        font-size: 18px !important;
        word-break: break-word !important;
        padding: 0 8px !important;
    }

    .mobile-ticket-popup .swal2-html-container {
        overflow-x: hidden !important;
        padding: 0 6px !important;
    }

    .mobile-ticket-popup .customer-ticket {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px !important;
        overflow-x: hidden !important;
    }

    .mobile-ticket-popup .customer-ticket .logo {
        max-width: 60px !important;
    }

    /* ===== FIX (mobile only): جدول المنتوجات كان يتجاوز عرض الشاشة ويحتاج تمرير لليمين - نجبره الآن على البقاء داخل عرض النافذة بدون أي تمرير أفقي، مع عرض ثابت لكل عمود ===== */
    .mobile-ticket-popup .customer-ticket table {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-ticket-popup .customer-ticket th,
    .mobile-ticket-popup .customer-ticket td {
        font-size: 9px !important;
        padding: 3px 1px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .mobile-ticket-popup .customer-ticket th:nth-child(1),
    .mobile-ticket-popup .customer-ticket td:nth-child(1) {
        width: 34% !important;
    }

    .mobile-ticket-popup .customer-ticket th:nth-child(2),
    .mobile-ticket-popup .customer-ticket td:nth-child(2),
    .mobile-ticket-popup .customer-ticket th:nth-child(3),
    .mobile-ticket-popup .customer-ticket td:nth-child(3),
    .mobile-ticket-popup .customer-ticket th:nth-child(4),
    .mobile-ticket-popup .customer-ticket td:nth-child(4) {
        width: 22% !important;
    }

    /* ===== FIX (mobile only): نافذة "Régler un crédit" - زر "Confirmer le paiement" كان يختفي تحت حافة الشاشة على الهاتف بسبب max-h-[85vh] + لوحة الأرقام الكبيرة. الحاسوب لا يتأثر إطلاقاً (هذه القواعد داخل media query خاصة بالشاشات الصغيرة فقط) ===== */
    .pay-debt-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .pay-debt-box {
        max-height: none !important;
    }

    /* ===== FIX (mobile only): تقريب زر "Confirmer le paiement" من زر "Payer tout" — تقليل المسافات الداخلية للنافذة حتى يظهر جزء من الأزرار السفلية مباشرة تحت "Payer tout" فيلاحظها المستخدم ويعرف أن عليه النزول قليلاً. الحاسوب غير متأثر (نفس القاعدة القديمة max-h-[85vh] تبقى كما هي) ===== */
    .pay-debt-header {
        padding: 12px 16px !important;
    }

    .pay-debt-content {
        padding: 12px 16px !important;
    }

    .pay-debt-content.space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 10px !important;
    }

    .pay-debt-amount-input {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .pay-debt-keypad {
        gap: 6px !important;
    }

    .pay-debt-keypad button {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .pay-debt-full-btn {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin-bottom: 0 !important;
    }

    .pay-debt-footer {
        padding: 8px 16px 16px !important;
    }

    .pay-debt-footer button {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* ============================================================
   🏆 تحسينات نهائية للهواتف (شاشات صغيرة جداً)
   ============================================================ */
@media (max-width: 360px) {
    .grid.gap-4:not(.grid-cols-1) {
        gap: 4px !important;
    }
    
    .pos-product-card .text-primary {
        font-size: 14px !important;
    }
    
    .pos-product-card h3 {
        font-size: 12px !important;
    }
    
    .text-3xl {
        font-size: 18px !important;
    }
    
    .text-2xl {
        font-size: 16px !important;
    }
    
    .text-xl {
        font-size: 14px !important;
    }
    
    .w-\\[400px\\] .grid.grid-cols-2.gap-3 button {
        padding: 8px 4px !important;
        font-size: 12px !important;
        min-height: 38px !important;
    }
}
        
        
        
        
        
   
        
/* ============================================================
   👆 تفعيل السحب من اليسار لإظهار الـ    هدا التاني الخاص بالتلفون  Sidebar
   ============================================================ */

/* ---- منطقة السحب (Touch Area) ---- */
.swipe-area {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 20px !important;
    z-index: 50 !important;
    cursor: pointer !important;
    background: transparent !important;
    /* خلفية شفافة تماماً */
}

/* ---- إظهار مؤشر عند تمرير الماوس ---- */
.swipe-area:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ---- زر الهامبرغر (للأمان) ---- */
.hamburger-btn {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 60 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 20px !important;
    display: none !important;
    /* مخفي افتراضياً */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.hamburger-btn:active {
    transform: scale(0.92) !important;
}

.hamburger-btn i {
    font-size: 22px !important;
}

/* ---- إظهار زر الهامبرغر في الهواتف فقط ---- */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex !important;
    }
    
    /* تحريك زر الهامبرغر عند فتح الـ Sidebar */
    .hamburger-btn.sidebar-open {
        left: 270px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ---- تحسين الـ Sidebar للهواتف (تعديل) ---- */
@media (max-width: 768px) {
    .sidebar-transition {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 80vw !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        background: #121212 !important;
    }
    
    .sidebar-transition.translate-x-0 {
        transform: translateX(0) !important;
    }
}        
        
        
        
        
        
   /* ============================================================
   🖥️ تحسينات شاشة الحاسوب (Desktop) - زر الهامبرغر
   ============================================================ */

/* ---- إظهار زر الهامبرغر في الحاسوب فقط ---- */
@media (min-width: 769px) {
    .hamburger-btn {
        display: none !important;
    }
    
    .swipe-area {
        display: none !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
    
    /* زر الهامبرغر في الـ Header يظهر فقط في الحاسوب */
    .sidebar-toggle-desktop {
        display: flex !important;
    }
}

/* ---- إخفاء زر الهامبرغر في الهواتف (لأننا نستخدم زر آخر) ---- */
@media (max-width: 768px) {
    .sidebar-toggle-desktop {
        display: none !important;
    }
}

/* ---- الـ Sidebar في الحاسوب يأخذ وضعه الطبيعي ---- */
@media (min-width: 769px) {
    .sidebar-transition {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        height: auto !important;
        width: auto !important;
        max-width: none !important;
        z-index: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        overflow: visible !important;
        transition: width 0.3s ease !important;
    }
    
    .sidebar-transition:not(.translate-x-0) {
        transform: none !important;
    }
    
    .sidebar-transition.sidebar-collapsed {
        width: 64px !important;
        transform: none !important;
        max-width: none !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .sidebar-transition.sidebar-collapsed .sidebar-text {
        display: none !important;
    }
    
    .sidebar-transition.sidebar-collapsed .sidebar-title {
        display: none !important;
    }
    
    /* في الحاسوب، الـ Sidebar يكون بجانب المحتوى */
    .flex.h-screen.overflow-hidden {
        flex-direction: row !important;
    }
}     

/* ============================================================
   📱 تحسينات الهاتف لصفحتي "La Caisse" و "La Caisse Table" فقط
   ملاحظة: كل هذا الكود محصور بـ @media (max-width:768px)
   ولا يؤثر أبداً على مقاس الحاسوب
   ============================================================ */
@media (max-width: 768px) {

    /* ---- رأس الصفحة (La Caisse / La Caisse Table): سماح بالالتفاف وتصغير الحجم ---- */
    .page-header-pro {
        gap: 0.5rem !important;
    }
    .page-header-icon-badge {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        transition: transform 0.15s ease !important;
    }
    .page-header-icon-badge:active {
        transform: scale(0.9) !important;
    }
    .page-header-icon-badge i, .page-header-icon-badge svg {
        font-size: 13px !important;
        width: 13px !important;
        height: 13px !important;
    }
    .page-header-title {
        font-size: 0.85rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }
    .page-header-subtitle {
        font-size: 0.6rem !important;
    }

    /* ===== أسطر رأس صفحتي La Caisse و La Caisse Table: الكل فسطر واحد
       (العنوان + الأيقونة على اليسار، الساعة/الوضع الليلي/ملء الشاشة على اليمين) ===== */
    #app .h-full.flex.flex-col > .flex.justify-between.items-center {
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
    }
    #app .h-full.flex.flex-col > .flex.justify-between.items-center > .flex.items-center.gap-4,
    #app .h-full.flex.flex-col > .flex.justify-between.items-center > .flex.items-center.gap-3 {
        gap: 0.3rem !important;
        flex-shrink: 0 !important;
    }
    .page-header-pro {
        gap: 0.35rem !important;
    }

    /* الساعة: مصغرة أكثر لتترك مكان لعنوان الصفحة على نفس السطر */
    .pos-clock-badge {
        padding: 0.3rem 0.45rem !important;
        gap: 0.25rem !important;
    }
    .pos-clock-badge i.fa-clock {
        font-size: 0.75rem !important;
    }
    .pos-clock-badge span.font-mono {
        font-size: 0.7rem !important;
    }
    .pos-clock-morocco {
        display: none !important;
    }

    /* زري تبديل الوضع وملء الشاشة: أصغر لتترك مكان أكثر */
    .h-full.flex.flex-col button.w-12.h-12 {
        width: 32px !important;
        height: 32px !important;
    }
    .h-full.flex.flex-col button.w-12.h-12 i {
        font-size: 0.8rem !important;
    }
    .pos-fullscreen-btn {
        padding: 0.4rem 0.5rem !important;
    }
    .pos-fullscreen-btn i {
        font-size: 0.8rem !important;
    }

    /* ===== FIX: رأس نافذة الطاولة (Table X - SALLE / Occupée / Fermer / NOUVEAU / الساعة)
       كان يفيض برا الشاشة فالهاتف (البوطونات كتنقطع). دابا كيتنظم فسطرين بلا ما يتقطع شي حاجة ===== */
    .table-modal-header {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0.6rem !important;
    }
    .table-modal-header-left {
        gap: 0.4rem !important;
        flex-wrap: wrap !important;
    }
    .table-modal-header-right {
        gap: 0.3rem !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }
    .table-badge-close {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.72rem !important;
        border-radius: 7px !important;
    }
    .table-badge-close svg {
        width: 13px !important;
        margin-right: 4px !important;
    }
    .table-status-text {
        font-size: 0.62rem !important;
    }
    .table-note-btn, .table-modal-close, .table-nouveau-btn {
        padding: 0.4rem 0.55rem !important;
        font-size: 0.66rem !important;
        border-radius: 7px !important;
    }
    .table-note-btn i, .table-modal-close i, .table-nouveau-btn i {
        margin-right: 3px !important;
        font-size: 0.62rem !important;
    }
    /* ===== FIX: مودال "Ajouter des suppléments" - زر Enregistrer فالأسفل ماكانش كيبان/كيوصلولو فالهاتف
       لأن المودال كان مركز عمودياً بلا إمكانية سكرول للطبقة الخارجية. دابا الطبقة كاملة قابلة للسكرول ===== */
    .supplement-modal-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding: 1rem 0.75rem 2rem 0.75rem !important;
    }
    .supplement-modal-box {
        max-height: none !important;
        margin: 0.5rem auto !important;
    }
    .table-modal-header .pos-clock-badge {
        display: none !important;
    }
    /* المسافة الفارغة (spacer) خاصة بترتيب الحاسوب فقط - لا حاجة لها فالهاتف بعد التفاف الصف */
    .table-nouveau-spacer {
        display: none !important;
    }

    /* ---- La Caisse Table: شبكة الطاولات أصغر وأوضح على الهاتف ---- */
    .table-card {
        min-height: 100px !important;
        padding: 0.5rem !important;
        border-radius: 10px !important;
    }
    .table-card > div:first-child {
        height: 42px !important;
    }
    .table-card svg {
        width: 32px !important;
        height: 32px !important;
    }
    .table-card .text-2xl {
        font-size: 1.15rem !important;
    }
    .table-card .text-xs {
        font-size: 0.65rem !important;
    }
    .zone-title {
        font-size: 1rem !important;
    }

    /* ===== FIX: آخر صف من الطاولات ما كان يبان فـ "La Caisse Table" فالهاتف -
       السبب: الصندوق اللي فيه الطاولات (.flex-1.overflow-y-auto) ما كان عندو
       min-height:0 داخل الحاوية الأب (h-full flex flex-col)، فهاد شي كيخلي
       آخر صف "يطيح" برا حدود الشاشة بلا ما يقدر السكرول يوصل ليه.
       هاد الإصلاح محصور غير بـ @media(max-width:768px) ولا يأثر على الحاسوب ===== */
    #app .h-full.flex.flex-col {
        min-height: 0 !important;
    }
    #app .h-full.flex.flex-col > .flex-1.overflow-y-auto.space-y-8 {
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 90px !important;
    }

    /* ---- La Caisse / Table Order: تكديس المنتجات والسلة عمودياً بدل جنب لجنب ----
       هذا هو الإصلاح الأساسي لمشكلة "الشكل المبعتر" على الهاتف:
       عمود السلة كان بعرض ثابت (400px/450px) وهذا يكسر التصميم كليا على شاشة هاتف أصغر منه */
    /* ملاحظة: pos-main-layout ماعادش يسكرول بروحو (overflow فعلي كيتحدد فالقاعدة
       .flex.flex-1.gap-4.overflow-hidden فوق، اللي عندها أولوية أقوى) - السكرول
       كيوقع دابا فصندوق الفئات/المنتجات وحدو باش السلة (position:fixed) تخدم مزيان */
    .table-modal-body {
        flex-direction: column !important;
        overflow: visible !important;
        overflow-y: auto !important;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }
    .pos-main-layout {
        flex-direction: column !important;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }

    /* السلة تصبح "درج" (drawer) ينزلق من الأسفل عند الضغط على الشريط العائم */
    .pos-cart-panel {
        width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
        z-index: 960 !important;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.5) !important;
        /* ===== FIX: بدون overflow:hidden هنا، البوطونات (Régler/DIVER/Ouvrir Tiroir...)
           كانت تطيح برا الشاشة عند وجود عدة منتجات فالسلة =====*/
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    /* رأس السلة وأسفلها (البوطونات) يبقاو بحجمهم الطبيعي بلا ما يتقلصو */
    .pos-cart-panel > div:first-child,
    .pos-cart-panel > div:last-child {
        flex-shrink: 0 !important;
    }
    /* فقط قائمة المنتجات فالوسط كتخذ الباقي وتسكرول بوحدها */
    .pos-cart-panel > div:not(:first-child):not(:last-child) {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    .pos-cart-panel.mobile-cart-open {
        transform: translateY(0) !important;
    }

    /* زر إغلاق السلة (سهم للأسفل) يظهر فقط على الهاتف */
    .mobile-cart-close-btn {
        display: flex !important;
    }

    /* منتجات/فئات الصفحة: مساحة كافية في الأسفل حتى لا يخفيها الشريط العائم */
    .pos-main-layout > div:first-child,
    .table-modal-body > div:first-child {
        padding-bottom: 70px !important;
    }

    /* ===== FIX: السكرول ما كان خادم فصفحة "La Caisse" (قائمة الفئات/المنتجات) فالهاتف -
       نفس سبب مشكل الطاولات: العناصر flex-1 المتداخلة بعضها فبعض ما كان
       عندهم min-height:0، فكانت الصفحة "تطيح" برا حدود الشاشة بلا ما يقدر
       السكرول يوصل للمحتوى تحت. هاد الإصلاح محصور غير بـ @media(max-width:768px)
       ولا يأثر على الحاسوب ===== */
    .pos-main-layout {
        min-height: 0 !important;
    }
    .pos-main-layout > div:first-child {
        min-height: 0 !important;
    }
    .pos-main-layout > div:first-child > .flex-1.overflow-y-auto {
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* زر إغلاق السلة مخفي في الحاسوب دائماً */
@media (min-width: 769px) {
    .mobile-cart-close-btn {
        display: none !important;
    }
}

/* ===== NEW: تعطيل زري Régler و Ouvrir Tiroir على الهاتف فقط (≤768px) - بلا ما نمسو التصميم فالحاسوب =====
   ما كنمسحوش البوطون (display:none) باش التخطيط (grid-cols-2) يبقى متزن، غير كنعطلوه بصرياً ووظيفياً =====*/
@media (max-width: 768px) {
    .mobile-disable-pos-btn {
        pointer-events: none !important;
        opacity: 0.35 !important;
        filter: grayscale(60%);
        cursor: not-allowed !important;
    }
}

/* ---- الشريط العائم للسلة: يظهر فقط على الهاتف ---- */
.mobile-cart-trigger {
    display: none;
}
@media (max-width: 768px) {
    .mobile-cart-trigger {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        z-index: 950;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: #0d0d0d;
        padding: 0.85rem 1.1rem;
        border-radius: 14px;
        font-weight: 700;
        box-shadow: 0 8px 24px rgba(0,0,0,0.45);
        cursor: pointer;
        gap: 0.5rem;
    }
    .mobile-cart-trigger-count {
        font-size: 0.85rem;
        white-space: nowrap;
    }
    .mobile-cart-trigger-total {
        font-size: 1.05rem;
        white-space: nowrap;
    }
    .mobile-cart-trigger-chevron {
        font-size: 0.85rem;
    }
}
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* ======================== Light Mode Styles (PROFESSIONAL) ======================== */
        .light-mode {
            /* === 5 درجات بياض هرمية — لا تستخدم لون واحد لكل شيء === */
            --bg-primary:    #F4F5F7;
            --bg-secondary:  #FAFAFA;
            --bg-tertiary:   #EFF1F4;
            --bg-card:       #FFFFFF;
            --bg-input:      #FFFFFF;

            /* === الكتابة — يجب أن تكون واضحة 100% === */
            --text-primary:   #0D1117;
            --text-secondary: #4B5563;
            --text-tertiary:  #9CA3AF;

            /* === الحدود === */
            --border-color:   #E2E5EA;
            --border-hover:   #C9CDD4;

            /* === الظلال — فقط للعناصر العائمة === */
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
            --shadow-xl: 0 16px 40px rgba(0,0,0,0.13), 0 6px 12px rgba(0,0,0,0.07);

            /* === حالات التفاعل === */
            --hover-bg:        rgba(0,0,0,0.035);
            --card-border:     #E2E5EA;
            --table-header:    #F4F5F7;
            --table-row-hover: rgba(0,0,0,0.025);
            --modal-overlay:   rgba(15, 23, 42, 0.55);

            /* === الشريط الجانبي === */
            --sidebar-bg:         #FFFFFF;
            --sidebar-border:     #E2E5EA;
            --sidebar-item-hover: #F4F5F7;

            /* === الشارات === */
            --badge-bg:   #F4F5F7;
            --badge-text: #4B5563;
        }

        .light-mode body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }

        
        /* ===== FIX: Chart.js Legend في Light Mode ===== */
.light-mode .chart-container canvas,
.light-mode #statusChart,
.light-mode #revenueChart {
    filter: none !important;
}

/* إصلاح نصوص الـ legend */
.light-mode .chartjs-legend li span {
    color: #0D1117 !important;
}

/* ===== FIX: Toggle Switches في Light Mode ===== */
.light-mode .peer:not(:checked) ~ div {
    background-color: #CBD5E1 !important;
}
.light-mode .peer:checked ~ div {
    background-color: #16a34a !important;
}
.light-mode label .w-11,
.light-mode label .w-14,
.light-mode label .w-9 {
    border: 1px solid #94A3B8 !important;
}
        
        
        
        
        /* ---- Background overrides ---- */
        .light-mode .bg-\[\#0d0d0d\] {
            background-color: var(--bg-primary) !important;
        }
        .light-mode .bg-\[\#121212\] {
            background-color: var(--bg-secondary) !important;
            box-shadow: var(--shadow-sm);
        }
        .light-mode .bg-\[\#1a1a1a\] {
            background-color: var(--bg-tertiary) !important;
        }
        .light-mode .bg-\[\#252525\] {
            background-color: var(--hover-bg) !important;
        }

        /* ---- Text overrides ---- */
        .light-mode .text-white {
            color: var(--text-primary) !important;
        }
        .light-mode .text-gray-400 {
            color: var(--text-secondary) !important;
        }
        .light-mode .text-gray-500 {
            color: var(--text-tertiary) !important;
        }
        .light-mode .text-gray-300 {
            color: var(--text-secondary) !important;
        }
        /* ===== FIX: labels "Nom d'utilisateur" / "Mot de passe" فصفحة تسجيل الدخول كانوا كيتخبيو
        فـ Light Mode بسبب قاعدة .light-mode .text-gray-300 اللي كتبدل لونهم. الكارد ديال اللوگين كتبقى
        ديما فوق خلفية غامقة، فخاص هاد النصوص تبقى بيضة ديما بغض النظر على الوضع ===== */
        .login-field-label {
            color: #d1d5db !important;
        }
        /* ===== FIX: placeholder "Entrer le mot de passe..." كان كيورث نفس الخط font-mono/tracking-widest
        ديال النقط ديال الباسوورد، وهادشي كان كيخليه يبان بحال آلة كاتبة قبيحة. دابا عطيناه خط عادي وأنيق ===== */
        .login-password-field::placeholder {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            font-weight: 400;
            letter-spacing: normal;
            opacity: 0.5;
        }
        /* ===== FIX: خانة "DETTE" فبطاقة العميل - تباين ضعيف فـ Light Mode (نص أحمر فاتح على خلفية حمراء غامقة شبه شفافة) ===== */
        .light-mode .client-debt-badge {
            background-color: #fee2e2 !important;
            border-color: #fca5a5 !important;
        }
        .light-mode .client-debt-label {
            color: #b91c1c !important;
        }
        .light-mode .client-debt-amount {
            color: #dc2626 !important;
        }
        .light-mode .client-debt-pill {
            background-color: #fee2e2 !important;
            color: #b91c1c !important;
            border-color: #fca5a5 !important;
        }
        /* ===== FIX: خانة "Cash/TPE" فقائمة Gestion de Livraison - تباين ضعيف فـ Light Mode ===== */
        .light-mode .payment-type-pill {
            background-color: #ffedd5 !important;
            color: #c2410c !important;
        }
        .light-mode .text-gray-200 {
            color: var(--text-secondary) !important;
        }
        .light-mode .text-gray-600 {
            color: var(--text-tertiary) !important;
        }
        .light-mode .text-gray-700 {
            color: var(--text-secondary) !important;
        }
        .light-mode .text-gray-800 {
            color: var(--text-primary) !important;
        }
        .light-mode .text-gray-900 {
            color: var(--text-primary) !important;
        }

        /* ---- Borders ---- */
        .light-mode .border-gray-800 {
            border-color: var(--border-color) !important;
        }
        .light-mode .border-gray-700 {
            border-color: var(--border-hover) !important;
        }
        .light-mode .border-gray-600 {
            border-color: var(--border-hover) !important;
        }
        .light-mode .divide-gray-800>* {
            border-color: var(--border-color) !important;
        }
        .light-mode .border-gray-300 {
            border-color: var(--border-hover) !important;
        }
        .light-mode .border-gray-200 {
            border-color: var(--border-color) !important;
        }
        .light-mode .border-gray-900 {
            border-color: var(--border-color) !important;
        }

        /* ---- Hover effects ---- */
        .light-mode .hover\:bg-\[\#1a1a1a\]:hover {
            background-color: var(--hover-bg) !important;
        }
        .light-mode .hover\:bg-\[\#252525\]:hover {
            background-color: var(--hover-bg) !important;
        }
        .light-mode .hover\:bg-\[\#121212\]:hover {
            background-color: var(--hover-bg) !important;
        }

        /* ---- Sidebar ---- */
        .light-mode .bg-\[\#121212\] {
            background-color: var(--sidebar-bg) !important;
            border-right: 1px solid var(--sidebar-border);
        }
        .light-mode .sidebar-transition {
            background-color: var(--sidebar-bg) !important;
        }
        .light-mode .border-b.border-gray-800 {
            border-bottom-color: var(--sidebar-border) !important;
        }
        .light-mode .hover\:bg-\[\#1a1a1a\]:hover {
            background-color: var(--sidebar-item-hover) !important;
        }
        .light-mode nav button {
            color: var(--text-secondary) !important;
        }
        .light-mode nav button:hover {
            color: var(--text-primary) !important;
        }
        .light-mode nav button.bg-primary {
            background: var(--primary-bg) !important;
            color: #000 !important;
            border-left: 3px solid var(--primary-color);
        }

        /* ---- Cards & Components ---- */
        .light-mode .bg-\[\#121212\].rounded-xl {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--card-border);
            box-shadow: var(--shadow-sm);
        }
        .light-mode .bg-\[\#121212\].rounded-xl:hover {
            box-shadow: var(--shadow-md);
        }

        .light-mode .stat-card {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--card-border);
            box-shadow: var(--shadow-sm);
        }
        .light-mode .stat-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-4px);
        }

        .light-mode .table-card {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--card-border);
            box-shadow: var(--shadow-sm);
        }
        .light-mode .table-card:hover {
            box-shadow: var(--shadow-md);
        }

        /* ---- Tables ---- */
        .light-mode table thead {
            background-color: var(--table-header) !important;
            color: var(--text-secondary) !important;
        }
        .light-mode table thead th {
            font-size: 11px !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
        }
        .light-mode table tbody tr {
            border-bottom: 1px solid var(--border-color);
        }
        .light-mode table tbody tr:hover {
            background-color: var(--table-row-hover) !important;
        }
        .light-mode table td {
            color: var(--text-primary) !important;
        }

        /* ---- Inputs & Forms ---- */
        .light-mode input, .light-mode select, .light-mode textarea {
            background-color: var(--bg-tertiary) !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border-color) !important;
        }
        .light-mode input::placeholder, .light-mode select::placeholder, .light-mode textarea::placeholder {
            color: var(--text-tertiary) !important;
        }
        .light-mode input:focus, .light-mode select:focus, .light-mode textarea:focus {
            background-color: var(--bg-card) !important;
            border-color: var(--primary-color) !important;
            box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15) !important;
        }
        .light-mode .bg-\[\#1a1a1a\].px-4 {
            background-color: var(--bg-tertiary) !important;
        }
        .light-mode .bg-\[\#0d0d0d\].px-4 {
            background-color: var(--bg-tertiary) !important;
        }

      
      /* ---- Buttons ---- */
.light-mode .bg-gray-700 {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}
.light-mode .bg-gray-700:hover {
background-color: var(--hover-bg) !important;
}
.light-mode .bg-gray-800 {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}

  /* ==== إصلاح أزرار الإضافة في الوضع النهاري (نسخة أقوى) ==== */
.light-mode button[class*="bg-green-600"],
.light-mode button[class*="bg-blue-600"],
.light-mode button[class*="bg-primary"] {
  color: #000 !important;
}

.light-mode button[class*="bg-green-600"]:hover,
.light-mode button[class*="bg-blue-600"]:hover,
.light-mode button[class*="bg-primary"]:hover {
  color: #000 !important;
}

        /* ---- Modals ---- */
        .light-mode .article-modal {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--card-border);
            box-shadow: var(--shadow-xl);
        }
        .light-mode .article-modal-header {
background: #ffffff !important;
border-bottom: 2px solid var(--primary-color);
}
        .light-mode .article-modal-body {
            background-color: var(--bg-card);
        }
        .light-mode .article-modal-footer {
            background-color: var(--bg-tertiary);
            border-top: 1px solid var(--border-color);
        }
         
        
        .light-mode .article-modal-header .text-primary {
color: var(--text-primary) !important;
}
/* ===== FIX: Category Modal Title in Light Mode ===== */
.light-mode .article-modal-header h3 {
  color: var(--text-primary) !important;
}
.light-mode .article-modal-header h3 i {
  color: var(--primary-color) !important;
}
        
        .light-mode .table-modal-overlay {
            background: var(--modal-overlay);
            /* ===== PERF FIX: إزالة blur الكامل للشاشة على الهاتف لتفادي التهنيج عند فتح المودال ===== */
            backdrop-filter: none;
        }
        .light-mode .table-modal-header {
            background-color: var(--bg-card) !important;
            border-bottom: 2px solid var(--primary-color);
        }
        .light-mode .table-modal-body {
            background-color: var(--bg-primary);
        }
        .light-mode .table-modal-content {
            background-color: var(--bg-primary);
        }

        .light-mode .stock-modal {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--card-border);
            box-shadow: var(--shadow-xl);
        }
        .light-mode .stock-modal-header {
            background-color: var(--bg-tertiary) !important;
            border-bottom: 2px solid #10B981;
        }
        .light-mode .stock-modal-body {
            background-color: var(--bg-card);
        }

        .light-mode .bg-\[\#121212\].rounded-2xl {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--card-border);
            box-shadow: var(--shadow-xl);
        }

        .light-mode .article-modal-overlay {
            background: var(--modal-overlay);
            /* ===== PERF FIX: إزالة blur الكامل للشاشة على الهاتف لتفادي التهنيج عند فتح المودال ===== */
            backdrop-filter: none;
        }

        /* ---- Virtual Keyboard ---- */
        .light-mode #app > div[style*="position: fixed; bottom: 0;"] {
            background-color: var(--bg-card) !important;
            border-top: 2px solid var(--primary-color) !important;
            box-shadow: var(--shadow-xl);
        }
        .light-mode .keyboard-btn-char {
            background-color: #F1F5F9 !important;
            color: #0D1117 !important;
            border: 1px solid #CBD5E1 !important;
            box-shadow: 0 2px 0 #94A3B8 !important;
        }
        .light-mode .keyboard-btn-char:hover {
            background-color: #E2E8F0 !important;
        }
        .light-mode .keyboard-btn-delete {
            background: #FEE2E2 !important;
            color: #DC2626 !important;
            border: 1px solid #FECACA !important;
        }
        .light-mode .keyboard-btn-space {
            background: #E2E8F0 !important;
            color: #374151 !important;
        }
        .light-mode [style*="background: var(--primary-color); color: #000;"] {
            background: var(--primary-color) !important;
            color: #000 !important;
        }

        /* ---- Color Picker ---- */
        .light-mode .color-option {
            border-color: var(--border-color);
        }
        .light-mode .color-option.selected {
            border-color: var(--text-primary);
            box-shadow: 0 0 0 3px var(--primary-color);
        }
        .light-mode .color-option:hover {
            transform: scale(1.08);
        }

        /* ---- Badges & Labels ---- */
        .light-mode .bg-green-900\/50 {
            background-color: rgba(16, 185, 129, 0.12) !important;
            color: #065F46 !important;
            border-color: rgba(16, 185, 129, 0.3) !important;
        }
        .light-mode .bg-red-900\/50 {
            background-color: rgba(239, 68, 68, 0.10) !important;
            color: #991B1B !important;
            border-color: rgba(239, 68, 68, 0.25) !important;
        }
        .light-mode .bg-yellow-900\/50 {
            background-color: rgba(245, 158, 11, 0.12) !important;
            color: #78350F !important;
            border-color: rgba(245, 158, 11, 0.3) !important;
        }
        .light-mode .bg-primary-20 {
            background-color: rgba(var(--primary-color-rgb), 0.12) !important;
        }

        /* ---- Shadows for cards in light mode ---- */
        .light-mode .shadow-\[\#0_10px_15px_-3px_rgba\(0\,0\,0\,0\.7\)\] {
            box-shadow: var(--shadow-md) !important;
        }
        .light-mode .shadow-\[0_10px_15px_-3px_rgba\(0\,0\,0\,0\.7\)\] {
            box-shadow: var(--shadow-md) !important;
        }

        /* ---- Chart text colors ---- */
        .light-mode .chart-container canvas {
            filter: brightness(1);
        }

        /* ---- Additional refinements ---- */
        .light-mode .back-arrow-btn {
            background-color: var(--bg-card) !important;
            border-color: var(--border-color) !important;
            box-shadow: var(--shadow-sm);
        }
        .light-mode .back-arrow-btn:hover {
            background-color: var(--hover-bg) !important;
            border-color: var(--primary-color) !important;
        }

        .light-mode .report-filter-btn:not(.active) {
            background-color: var(--bg-tertiary) !important;
            color: var(--text-secondary) !important;
        }
        .light-mode .report-filter-btn:not(.active):hover {
            background-color: var(--hover-bg) !important;
        }
        .light-mode .report-filter-btn.active {
            background: var(--primary-bg) !important;
            color: #000 !important;
        }

        .light-mode .tab-btn:not(.active) {
            background-color: var(--bg-tertiary) !important;
            color: var(--text-secondary) !important;
        }
        .light-mode .tab-btn:not(.active):hover {
            background-color: var(--hover-bg) !important;
            color: var(--text-primary) !important;
        }
        .light-mode .tab-btn.active {
            background: var(--primary-bg) !important;
            color: #000 !important;
        }

        /* ---- Scrollbar for light mode ---- */
        .light-mode ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .light-mode ::-webkit-scrollbar-track {
            background: var(--bg-tertiary);
            border-radius: 4px;
        }
        .light-mode ::-webkit-scrollbar-thumb {
            background: var(--border-hover);
            border-radius: 4px;
        }
        .light-mode ::-webkit-scrollbar-thumb:hover {
            background: var(--text-tertiary);
        }

        /* ---- Override for specific elements ---- */
        .light-mode .bg-\[\#121212\].p-6.rounded-xl {
            background-color: var(--bg-card) !important;
        }
        .light-mode .bg-\[\#121212\].p-4.rounded-xl {
            background-color: var(--bg-card) !important;
        }
        .light-mode .bg-\[\#121212\].p-4 {
            background-color: var(--bg-card) !important;
        }
        .light-mode .bg-\[\#121212\].p-4.border-b {
            background-color: var(--bg-card) !important;
        }
        .light-mode .bg-\[\#1a1a1a\].p-4 {
            background-color: var(--bg-tertiary) !important;
        }
        .light-mode .bg-\[\#1a1a1a\].p-3 {
            background-color: var(--bg-tertiary) !important;
        }
        .light-mode .bg-\[\#0d0d0d\].p-4 {
            background-color: var(--bg-primary) !important;
        }
        .light-mode .bg-\[\#1a1a1a\].rounded-lg {
            background-color: var(--bg-tertiary) !important;
        }
        .light-mode .text-primary-400 {
            color: var(--primary-color) !important;
        }

        /* ---- Primary color for borders in light mode ---- */
        .light-mode .border-primary {
            border-color: var(--primary-color) !important;
        }
        .light-mode .border-primary\/30 {
            border-color: rgba(var(--primary-color-rgb), 0.3) !important;
        }
        .light-mode .border-primary\/50 {
            border-color: rgba(var(--primary-color-rgb), 0.5) !important;
        }

        /* ---- SweetAlert2 in light mode ---- */
        .light-mode .swal2-popup {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }
        .light-mode .swal2-title {
            color: var(--text-primary) !important;
        }
        .light-mode .swal2-html-container {
            color: var(--text-secondary) !important;
        }
        .light-mode .swal2-confirm {
            background: var(--primary-bg) !important;
            color: #000 !important;
        }

        /* ===== إصلاح: جعل إشعارات SweetAlert2 تظهر دائماً فوق أي نافذة منبثقة (مثل بطاقة إضافة منتوج) بدل الظهور خلفها ===== */
        .swal2-container {
            z-index: 99999 !important;
        }

        /* ============================================================
           ===== NEW: إصلاح شكل علامة النجاح (✓) فنوافذ SweetAlert2
           لمستعملي الهاتف فقط. الخطين الافتراضيين كانوا كيبانو متداخلين/
           مشوهين على الشاشات الصغيرة، فبدلناهم بعلامة صح واحدة نظيفة
           مرسومة بـ CSS بسيطة. الحاسوب يبقى بالتصميم الافتراضي الأصلي
           بلا أي تغيير (محصور بـ @media max-width:768px فقط).
           ============================================================ */
        @media (max-width: 768px) {
            .swal2-icon.swal2-success [class^="swal2-success-line"] {
                display: none !important;
            }
            .swal2-icon.swal2-success::after {
                content: '';
                position: absolute;
                left: 29%;
                top: 45%;
                width: 26%;
                height: 13%;
                border-left: 5px solid #34d399;
                border-bottom: 5px solid #34d399;
                border-radius: 2px;
                transform: rotate(-45deg);
                transform-origin: left bottom;
            }
        }

        /* ---- Table status cards (keep gradients) ---- */
        .light-mode .table-free {
            box-shadow: var(--shadow-sm);
        }
        .light-mode .table-occupied {
            box-shadow: var(--shadow-sm);
        }
        .light-mode .table-reserved {
            box-shadow: var(--shadow-sm);
        }
        .light-mode .table-paid {
            box-shadow: var(--shadow-sm);
        }

        /* ---- POS product cards ---- */
        .light-mode .pos-product-card {
            background-color: var(--bg-card) !important;
            border-color: var(--border-color) !important;
        }
        .light-mode .pos-product-card:hover {
            border-color: var(--primary-color) !important;
        }
        .light-mode .pos-product-card .bg-\[\#1a1a1a\] {
            background-color: var(--bg-card) !important;
        }
        .light-mode .pos-product-card .text-white {
            color: var(--text-primary) !important;
        }

        .light-mode .pos-category-card {
            background-color: var(--bg-card) !important;
            border-color: var(--border-color) !important;
        }
        .light-mode .pos-category-card .bg-\[\#1a1a1a\] {
            background-color: var(--bg-card) !important;
        }
        .light-mode .pos-category-card .text-white {
            color: var(--text-primary) !important;
        }

        /* ---- Cart items ---- */
        .light-mode .pos-cart-item {
            background-color: var(--bg-card) !important;
            border-color: var(--border-color) !important;
        }
        .light-mode .pos-cart-item .text-white {
            color: var(--text-primary) !important;
        }
        .light-mode .pos-cart-item .bg-\[\#1a1a1a\] {
            background-color: var(--bg-tertiary) !important;
        }
        .light-mode .pos-cart-item .bg-\[\#0d0d0d\] {
            background-color: var(--bg-tertiary) !important;
        }

        /* ---- Charge cards ---- */
        .light-mode .charge-card {
            background-color: var(--bg-card) !important;
            border-color: var(--border-color) !important;
        }
        .light-mode .charge-card .bg-\[\#1a1a1a\] {
            background-color: var(--bg-card) !important;
        }
        .light-mode .charge-card .text-white {
            color: var(--text-primary) !important;
        }
        .light-mode .charge-bon {
            background-color: var(--bg-card) !important;
            border-color: var(--border-color) !important;
        }
        .light-mode .charge-bon .bg-\[\#1a1a1a\] {
            background-color: var(--bg-card) !important;
        }
        .light-mode .charge-bon .text-white {
            color: var(--text-primary) !important;
        }
        .light-mode .charge-add-form {
            background-color: var(--bg-card) !important;
            border-color: #10B981 !important;
        }

        /* ---- Supplement items ---- */
        .light-mode .supplement-item {
            background-color: var(--bg-card) !important;
        }
        .light-mode .supplement-item:hover {
            background-color: var(--hover-bg) !important;
        }

        /* ---- General text fixes ---- */
        .light-mode h1:not(.text-primary), .light-mode h2:not(.text-primary), .light-mode h3:not(.zone-title):not(.text-primary), .light-mode h4:not(.text-primary), .light-mode h5:not(.text-primary), .light-mode h6:not(.text-primary) {
            color: var(--text-primary) !important;
        }
        .light-mode .text-3xl.font-bold {
            color: var(--text-primary) !important;
        }

        /* ---- Background for main content ---- */
        .light-mode main.bg-\[\#0d0d0d\] {
            background-color: var(--bg-primary) !important;
        }

        /* ---- Category cards in POS ---- */
        .light-mode .pos-category-card .category-overlay {
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
        }

        /* ======================== Color Picker Styles ======================== */
        .color-option {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid transparent;
            transition: all 0.2s ease;
            position: relative;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .color-option:hover {
            transform: scale(1.12);
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
        }
        .color-option.selected {
            border-color: white;
            box-shadow: 0 0 0 3px var(--primary-color), 0 4px 16px rgba(0,0,0,0.3);
        }
        .color-option.selected::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 22px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
        }

        /* ======================== باقي الـ styles ======================== */
        .sidebar-transition {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .stat-card {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .chart-container {
            position: relative;
            height: 300px;
            max-width: 400px;
            margin: 0 auto;
        }
        .pos-product-card {
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .pos-product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3);
            border-color: var(--primary-color);
        }
        .pos-product-card:active {
            transform: scale(0.97);
        }
        .pos-category-card {
            transition: all 0.25s ease;
            cursor: pointer;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .pos-category-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 35px rgba(var(--primary-color-rgb), 0.35);
            border-color: var(--primary-color);
        }
        .pos-category-card:active {
            transform: scale(0.97);
        }
        .category-image-container {
            position: relative;
            width: 100%;
            padding-top: 75%;
            background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
        }
        .category-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .category-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
            padding: 1.5rem;
        }
        .pos-cart-item {
            animation: slideIn 0.3s ease;
        }
        
        
        @keyframes rotateSun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* تأثير نبضة عند التبديل */
@keyframes themePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

button[title*="Mode"] {
    animation: themePulse 0.3s ease;
}
        
        
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .report-filter-btn {
            transition: all 0.2s;
        }
        .report-filter-btn.active {
            background: var(--primary-bg);
            color: #000;
            font-weight: bold;
        }
        .animate-fade-in {
            animation: fadeIn 0.3s ease-in;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .table-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border-radius: 1rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .table-card:hover {
            transform: translateY(-6px) scale(1.01);
            box-shadow: 0 12px 35px rgba(0,0,0,0.35);
        }
        .table-free {
            background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        }
        .table-occupied {
            background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
        }
        .table-reserved {
            background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
        }
         .table-paid {
            background: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%);
        }
        .sidebar-collapsed {
            width: 4rem !important;
        }
        .sidebar-collapsed .sidebar-text {
            display: none;
        }
        .sidebar-collapsed .sidebar-title {
            display: none;
        }
        .sidebar-collapsed nav button {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
        }
        .sidebar-collapsed nav button i {
            margin: 0;
        }
        .table-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            /* ===== PERF FIX: إزالة blur الكامل للشاشة على الهاتف (الخلفية الداكنة 0.85 كافية بصرياً بدون تكلفة الأداء) ===== */
            backdrop-filter: none;
            z-index: 1000;
            overflow: hidden;
        }
        .table-modal-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: #0d0d0d;
        }
        .table-modal-header {
            background: #121212;
            border-bottom: 2px solid var(--primary-color);
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        .table-modal-body {
            flex: 1;
            overflow: hidden;
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: #0d0d0d;
        }
        .table-modal-close {
            background: #EF4444;
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
        }
        .table-modal-close:hover {
            background: #DC2626;
            transform: scale(1.05);
        }

        /* ================= VIRTUAL KEYBOARD - PRO DESIGN ================= */
        .vkbd-overlay {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
            border-top: 1px solid rgba(255,255,255,0.06);
            box-shadow: 0 -12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
            z-index: 10000;
            padding: 16px 18px 20px;
            border-radius: 18px 18px 0 0;
        }
        .vkbd-topbar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }
        .vkbd-back-btn {
            flex-shrink: 0;
            background: #1f2226;
            color: #d1d5db;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            width: 52px;
            height: 52px;
            font-size: 18px;
            cursor: pointer;
            transition: all .15s ease;
        }
        .vkbd-back-btn:hover { background: #2a2d33; color: #fff; }
        .vkbd-back-btn:active { transform: scale(0.93); }
        .vkbd-display {
            flex: 1;
            background: #101113;
            border: 1px solid var(--primary-color);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 14px rgba(0,0,0,0.35);
            border-radius: 12px;
            padding: 14px 18px;
            color: #f5f5f5;
            font-size: 19px;
            font-weight: 500;
            min-height: 52px;
            max-height: 90px;
            overflow-y: auto;
            word-wrap: break-word;
            text-align: center;
            letter-spacing: 0.2px;
        }
        .vkbd-display:empty::before {
            content: attr(data-placeholder);
            color: #55585e;
            font-weight: 400;
        }
        .vkbd-lang-toggle {
            display: flex;
            flex-shrink: 0;
            background: #1a1a1a;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            overflow: hidden;
        }
        .vkbd-lang-btn {
            padding: 15px 18px;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.5px;
            border: none;
            cursor: pointer;
            background: transparent;
            color: #9ca3af;
            transition: all .15s ease;
        }
        .vkbd-lang-btn.active {
            background: var(--primary-bg);
            color: #000;
        }
        .vkbd-rows {
            display: grid;
            gap: 7px;
            margin-bottom: 10px;
        }
        .vkbd-row {
            display: grid;
            gap: 7px;
        }
        .vkbd-key {
            position: relative;
            min-height: 56px;
            background: linear-gradient(180deg, #24262b 0%, #1c1e22 100%);
            color: #f0f0f0;
            border: 1px solid rgba(255,255,255,0.06);
            border-bottom: 2px solid rgba(0,0,0,0.5);
            border-radius: 10px;
            font-size: 21px;
            font-weight: 600;
            cursor: pointer;
            transition: background .1s ease, transform .08s ease, border-color .1s ease;
            font-family: inherit;
        }
        .vkbd-key:hover {
            background: linear-gradient(180deg, #2c2f35 0%, #22252a 100%);
            border-color: rgba(255,255,255,0.12);
        }
        .vkbd-key:active {
            background: var(--primary-bg);
            color: #000;
            transform: scale(0.94);
            border-bottom: 1px solid rgba(0,0,0,0.3);
        }
        .vkbd-key.vkbd-number {
            color: var(--primary-color);
            font-size: 19px;
            opacity: 0.9;
        }
        .vkbd-bottom-row {
            display: grid;
            grid-template-columns: 1.1fr 3fr 1.1fr 1.6fr;
            gap: 8px;
        }
        .vkbd-space-key {
            min-height: 58px;
            background: linear-gradient(180deg, #24262b 0%, #1c1e22 100%);
            border: 1px solid rgba(255,255,255,0.06);
            border-bottom: 2px solid rgba(0,0,0,0.5);
            border-radius: 10px;
            color: #d1d5db;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 3px;
            transition: background .1s ease, transform .08s ease;
        }
        .vkbd-space-key:hover { background: linear-gradient(180deg, #2c2f35 0%, #22252a 100%); }
        .vkbd-space-key:active { transform: scale(0.97); background: #2c2f35; }
        .vkbd-delete-key {
            min-height: 58px;
            background: linear-gradient(180deg, #3a1a1a 0%, #2a1212 100%);
            border: 1px solid rgba(239,68,68,0.25);
            border-bottom: 2px solid rgba(0,0,0,0.5);
            border-radius: 10px;
            color: #f87171;
            font-size: 20px;
            cursor: pointer;
            transition: background .1s ease, transform .08s ease;
        }
        .vkbd-delete-key:hover { background: linear-gradient(180deg, #4a1f1f 0%, #341616 100%); color: #fca5a5; }
        .vkbd-delete-key:active { transform: scale(0.94); }
        .vkbd-save-key {
            min-height: 58px;
            background: var(--primary-bg);
            filter: brightness(1);
            border: none;
            border-radius: 10px;
            color: #000;
            font-size: 17px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0,0,0,0.35);
            transition: filter .1s ease, transform .08s ease;
        }
        .vkbd-save-key:hover { filter: brightness(1.08); }
        .vkbd-save-key:active { transform: scale(0.96); }
        .tab-btn {
            transition: all 0.3s;
        }
        .tab-btn.active {
            background: var(--primary-bg);
            color: #000;
            font-weight: bold;
        }
        .tab-btn:not(.active) {
            background: #1a1a1a;
            color: #9ca3af;
        }
        .tab-btn:not(.active):hover {
            background: #252525;
            color: #fff;
        }
        .timer-badge {
            background: rgba(0, 0, 0, 0.3);
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: bold;
            font-family: monospace;
        }
        .table-icon {
            width: 80px;
            height: 80px;
            object-fit: contain;
            opacity: 0.95;
        }
        .table-image-container {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem;
        }
        .table-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .status-image-preview {
            width: 120px;
            height: 120px;
            border-radius: 0.5rem;
            overflow: hidden;
            border: 2px solid #374151;
        }
        .status-image-preview img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .back-arrow-btn {
            background: rgba(26, 26, 26, 0.95);
            border: 2px solid rgba(101, 183, 40, 0.4);
            border-radius: 0.75rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            /* ===== FIX: الزر absolute بالنسبة للـ container اللي ما فيهش scroll (والي دايرين ليه position:relative)
               هكذا يبقى ثابت 100% فبلاصتو حتى ان كان 100 منتوج ونزلنا لأسفل - خدام على الحاسوب زيادة على الهاتف ===== */
            position: absolute;
            top: 16px;
            right: 16px;
            width: 80px;
            height: 80px;
            z-index: 30;
        }
        .back-arrow-btn:hover {
            background: rgba(37, 37, 37, 0.98);
            border-color: rgba(101, 183, 40, 0.8);
            transform: scale(1.08);
            box-shadow: 0 6px 16px rgba(101, 183, 40, 0.3);
        }
        .back-arrow-btn:active {
            transform: scale(0.95);
        }
        .back-arrow-btn svg {
            width: 72px;
            height: 72px;
        }
        .back-arrow-btn:hover svg {
            filter: brightness(1.3);
        }
        .article-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            /* ===== PERF FIX: إزالة blur الكامل للشاشة على الهاتف ===== */
            backdrop-filter: none;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-in;
        }
        .article-modal {
            background: #121212;
            border: 1px solid var(--primary-color);
            border-radius: 1rem;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
        }
        .article-modal-header {
            background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
            border-bottom: 2px solid var(--primary-color);
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .article-modal-body {
            padding: 1.5rem;
            background: #121212;
        }
        .article-modal-footer {
            background: #1a1a1a;
            border-top: 1px solid #374151;
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            position: sticky;
            bottom: 0;
        }
        .image-upload-zone {
            border: 2px dashed #4B5563;
            border-radius: 0.75rem;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: #1a1a1a;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .image-upload-zone:hover {
            border-color: var(--primary-color);
            background: #252525;
        }
        .image-upload-zone.has-image {
            border-style: solid;
            border-color: #10B981;
            padding: 0.5rem;
        }
        .image-preview {
            max-width: 100%;
            max-height: 200px;
            border-radius: 0.5rem;
            object-fit: contain;
        }
        .stock-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            /* ===== PERF FIX: إزالة blur الكامل للشاشة على الهاتف ===== */
            backdrop-filter: none;
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-in;
        }
        .stock-modal {
            background: #121212;
            border: 2px solid #10B981;
            border-radius: 1rem;
            width: 90%;
            max-width: 900px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
        }
        .stock-modal-header {
            background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
            border-bottom: 2px solid #10B981;
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .stock-modal-body {
            padding: 1.5rem;
            background: #121212;
        }
        .stock-stat-card {
            transition: all 0.2s;
        }
        .stock-stat-card:hover {
            transform: translateY(-2px);
        }
        .add-stock-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.2s;
        }
        .add-stock-btn:hover {
            transform: scale(1.1);
        }
        .charge-card {
            transition: all 0.2s;
        }
        .charge-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        .charge-bon {
            transition: all 0.2s;
        }
        .charge-bon:hover {
            border-color: var(--primary-color);
        }
        .charge-add-form {
            background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
            border: 2px solid #10B981;
        }
        .supplement-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            background: rgba(var(--primary-color-rgb), 0.15);
            color: var(--primary-color);
            border: 1px solid rgba(var(--primary-color-rgb), 0.3);
        }
        .supplement-message-btn {
            transition: all 0.2s;
        }
        .supplement-message-btn:hover {
            background: rgba(var(--primary-color-rgb), 0.2) !important;
            color: var(--primary-color) !important;
        }
        .supplement-item {
            transition: all 0.2s;
        }
        .supplement-item:hover {
            background: rgba(var(--primary-color-rgb), 0.1);
        }
        /* Virtual Keyboard */
        .keyboard-btn {
            padding: 8px 4px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            transition: all 0.15s ease;
        }
        .keyboard-btn:active {
            transform: scale(0.92);
        }
        .keyboard-btn-delete {
            background: #ef4444;
            color: white;
        }
        .keyboard-btn-delete:hover {
            background: #dc2626;
        }
        .keyboard-btn-space {
            background: #666;
            color: white;
        }
        .keyboard-btn-space:hover {
            background: #777;
        }
        .keyboard-btn-char {
            background: var(--primary-bg);
            color: #000;
        }
        .keyboard-btn-char:hover {
            background: var(--primary-hover);
        }

        /* ---- Scrollbar for dark mode (default) ---- */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #1a1a1a;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: #374151;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #4b5563;
        }

        /* ======================== Sidebar احترافي - Professional Redesign ======================== */
        .sidebar-transition {
            display: flex;
            flex-direction: column;
            background: linear-gradient(180deg, #141414 0%, #0d0d0d 100%);
        }
        .light-mode .sidebar-transition {
            background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
        }

        .sidebar-logo-icon {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: #0d0d0d;
            font-size: 14px;
            box-shadow: 0 4px 14px rgba(var(--primary-color-rgb), 0.4);
            flex-shrink: 0;
        }
        .sidebar-collapse-btn {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: #9ca3af;
            cursor: pointer;
        }
        .sidebar-collapse-btn:hover {
            background: rgba(var(--primary-color-rgb), 0.15);
            border-color: rgba(var(--primary-color-rgb), 0.5);
            color: var(--primary-color);
            transform: scale(1.08);
        }
        .sidebar-collapse-btn:active { transform: scale(0.95); }
        .sidebar-collapse-btn i { font-size: 13px; transition: transform 0.3s ease; }
        .sidebar-collapse-btn:hover i { transform: translateX(-2px); }
        .sidebar-collapsed .sidebar-collapse-btn:hover i { transform: translateX(2px); }

        /* ---- بطاقة البروفايل الاحترافية ---- */
        .sidebar-profile-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            margin: 10px 10px 6px 10px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        .light-mode .sidebar-profile-card {
            background: rgba(0,0,0,0.03);
            border-color: rgba(0,0,0,0.06);
        }
        .sidebar-collapsed .sidebar-profile-card {
            justify-content: center;
            padding: 10px 4px;
            gap: 0;
        }
        .sidebar-profile-avatar {
            position: relative;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.35);
            border: 2px solid rgba(255,255,255,0.12);
        }
        .sidebar-profile-status {
            position: absolute;
            bottom: -1px;
            right: -1px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #22c55e;
            border: 2px solid #0d0d0d;
        }
        .light-mode .sidebar-profile-status { border-color: #ffffff; }
        .sidebar-profile-info {
            min-width: 0;
            overflow: hidden;
        }
        .sidebar-profile-name {
            font-weight: 700;
            font-size: 13.5px;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .light-mode .sidebar-profile-name { color: #1a1a1a; }
        .sidebar-profile-role {
            display: flex;
            align-items: center;
            font-size: 10.5px;
            font-weight: 700;
            margin-top: 3px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        /* ---- منطقة عناصر التنقل القابلة للتمرير ---- */
        .sidebar-nav-scroll {
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.15) transparent;
        }
        .sidebar-nav-scroll::-webkit-scrollbar { width: 5px; }
        .sidebar-nav-scroll::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.12);
            border-radius: 10px;
        }
        .sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.22);
        }

        .sidebar-nav-btn {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 9px 10px;
            border-radius: 12px;
            margin-bottom: 3px;
            color: #9ca3af;
            border-left: 3px solid transparent;
            transition: all 0.2s ease;
            background: transparent;
            cursor: pointer;
        }
        .sidebar-nav-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            transform: translateX(3px);
        }
        .light-mode .sidebar-nav-btn { color: #4b5563; }
        .light-mode .sidebar-nav-btn:hover {
            background: rgba(0,0,0,0.04);
            color: #111827;
        }
        .sidebar-nav-btn.active {
            color: #fff;
            font-weight: 700;
        }
        .light-mode .sidebar-nav-btn.active { color: #111827; }

        .sidebar-icon-badge {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-nav-btn .sidebar-text {
            flex: 1 1 auto;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }
        .sidebar-nav-btn:hover .sidebar-icon-badge {
            transform: scale(1.1) rotate(-4deg);
        }

        /* ---- تذييل تسجيل الخروج (ثابت دائماً في الأسفل) ---- */
        .sidebar-footer {
            flex-shrink: 0;
        }
        .sidebar-logout-btn {
            cursor: pointer;
            background: transparent;
        }
        .sidebar-logout-btn:hover {
            background: rgba(239, 68, 68, 0.1) !important;
        }
        .sidebar-logout-btn:hover .sidebar-icon-badge {
            transform: scale(1.1);
        }

        /* ---- وضع الطي (Collapsed) ---- */
        .sidebar-collapsed .sidebar-nav-btn {
            justify-content: center;
            border-left: none;
            padding: 9px 0;
        }
        .sidebar-collapsed .sidebar-profile-info {
            display: none;
        }

        /* ============================================================
           ===== NEW: تحسين احترافي لواجهة "Aperçu du tableau de bord"
           فمستعملي الهاتف فقط. كل هاد الكود محصور بـ
           @media (max-width:768px) و .dashboard-view، ولا يأثر إطلاقاً
           لا على الحاسوب ولا على باقي أقسام التطبيق (نفس مبدأ الإصلاحات
           السابقة لـ La Caisse و La Caisse Table)
           ============================================================ */
        @media (max-width: 768px) {

            /* ---- رأس الصفحة: بطاقة زجاجية (Glass) ---- */
            .dashboard-view .page-header-pro {
                padding: 1rem 1.1rem !important;
                margin-bottom: 1.1rem !important;
                gap: 0.75rem !important;
                border-radius: 20px !important;
                /* ===== PERF FIX: تمت إزالة backdrop-filter blur(14px) الذي كان يسبب أكبر جزء من التهنيج (lag) على الهاتف، خصوصاً أنه يُحسب مع كل سكرول للصفحة. عوضنا بخلفية أغمق قليلاً (0.08/0.03) للحفاظ على نفس الشكل تقريباً بدون أي تكلفة أداء ===== */
                background: linear-gradient(150deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
                border: 1px solid rgba(255,255,255,0.09) !important;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            .dashboard-view .page-header-pro > .flex.items-center.gap-4 {
                gap: 0.65rem !important;
            }
            .dashboard-view .page-header-icon-badge {
                width: 42px !important;
                height: 42px !important;
                min-width: 42px !important;
                font-size: 15px !important;
                border-radius: 13px !important;
                box-shadow: 0 6px 16px -4px rgba(99,102,241,0.5);
            }
            .dashboard-view .page-header-title {
                font-size: 1.05rem !important;
                line-height: 1.25 !important;
                letter-spacing: -0.01em;
            }
            .dashboard-view .page-header-subtitle {
                font-size: 0.68rem !important;
                opacity: 0.7;
            }

            /* ---- شريط: زر الوضع الليلي + أزرار الفلترة ---- */
            .dashboard-view .page-header-pro {
                position: relative !important;
                padding-top: 1rem !important;
            }
            .dashboard-view .page-header-pro > .flex.flex-wrap.items-end.gap-3 {
                width: 100%;
                flex-wrap: nowrap !important;
                gap: 0.5rem !important;
            }
            /* ===== NEW: نقل زر الوضع الليلي/النهاري لأعلى يمين البطاقة (بجانب العنوان) بدل الصف السفلي ===== */
            .dashboard-view .page-header-pro button[title] {
                position: absolute !important;
                top: 1rem !important;
                right: 1.1rem !important;
                width: 38px !important;
                height: 38px !important;
                min-width: 38px !important;
                flex-shrink: 0;
                font-size: 12px !important;
                z-index: 5;
                box-shadow: 0 6px 14px -4px rgba(0,0,0,0.5);
            }
            .dashboard-view .page-header-pro .flex.flex-wrap.items-end.gap-2 {
                flex: 1 1 auto;
                min-width: 0;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 2px;
            }
            .dashboard-view .page-header-pro .flex.flex-wrap.items-end.gap-2::-webkit-scrollbar {
                display: none;
            }
            .dashboard-view .page-header-pro .flex.flex-wrap.gap-2 {
                flex-wrap: nowrap !important;
            }
            .dashboard-view .report-filter-btn {
                white-space: nowrap !important;
                padding: 0.5rem 0.85rem !important;
                font-size: 0.72rem !important;
                border-radius: 10px !important;
            }
            .dashboard-view input[type="date"] {
                padding: 0.5rem 0.6rem !important;
                font-size: 0.72rem !important;
                min-width: 0;
                border-radius: 10px !important;
            }

            /* ============================================================
               ---- بطاقات KPI: تصميم "Bento Grid" زجاجي مع توهج بلون كل بطاقة ----
               ============================================================ */
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                grid-auto-rows: auto !important;
                gap: 0.7rem !important;
                margin-bottom: 1.3rem !important;
            }
            .dashboard-view .stat-card {
                padding: 1rem !important;
                border-radius: 20px !important;
                border-left: none !important;
                /* ===== PERF FIX: هذه البطاقات تظهر عدة مرات في نفس الوقت (4-8 بطاقة)، وكل واحدة كانت تطبق blur(10px) بشكل متزامن = أكبر سبب للتهنيج (lag) في صفحة Dashboard على الهاتف. تمت إزالة الـ blur نهائياً مع تعويض بسيط في التعتيم (opacity) للحفاظ على المظهر ===== */
                background: linear-gradient(155deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03)) !important;
                border: 1px solid rgba(255,255,255,0.08) !important;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                position: relative;
                min-width: 0;
                transition: transform 0.2s ease;
            }
            .dashboard-view .stat-card:active {
                transform: scale(0.97);
            }
            /* توهج ملون حسب فئة كل بطاقة (نفس ألوان الحدود الأصلية) */
            .dashboard-view .stat-card.border-amber-500  { box-shadow: 0 14px 30px -12px rgba(245,158,11,0.5) !important; }
            .dashboard-view .stat-card.border-primary    { box-shadow: 0 14px 30px -12px rgba(99,102,241,0.5) !important; }
            .dashboard-view .stat-card.border-blue-500   { box-shadow: 0 14px 30px -12px rgba(59,130,246,0.5) !important; }
            .dashboard-view .stat-card.border-green-500  { box-shadow: 0 14px 30px -12px rgba(34,197,94,0.5) !important; }
            .dashboard-view .stat-card.border-orange-500 { box-shadow: 0 14px 30px -12px rgba(249,115,22,0.5) !important; }

            .dashboard-view .stat-card .rounded-full {
                padding: 0.6rem !important;
                flex-shrink: 0;
            }
            .dashboard-view .stat-card .rounded-full i {
                font-size: 1.05rem !important;
            }
            .dashboard-view .stat-card p.text-xs {
                font-size: 0.62rem !important;
                line-height: 1.2 !important;
                letter-spacing: 0.02em !important;
                opacity: 0.75;
            }
            .dashboard-view .stat-card .text-2xl {
                font-size: 1.15rem !important;
                margin-top: 0.2rem !important;
                letter-spacing: -0.01em;
            }
            .dashboard-view .stat-card .text-xl {
                font-size: 1rem !important;
            }
            .dashboard-view .stat-card p.text-xs.text-gray-500 {
                font-size: 0.62rem !important;
                margin-top: 0.1rem !important;
            }
            .dashboard-view .stat-card p {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* البطاقة 1: La Caisse - تمتد بعرض الصف كاملاً (Hero) */
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(1) {
                grid-column: 1 / -1 !important;
            }
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(1) .flex.flex-col.items-center {
                flex-direction: row !important;
                align-items: center !important;
                text-align: left !important;
                justify-content: flex-start !important;
                gap: 1rem !important;
            }
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(1) .text-2xl {
                font-size: 1.55rem !important;
            }
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(1) .rounded-full {
                padding: 0.85rem !important;
            }
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(1) .rounded-full i {
                font-size: 1.4rem !important;
            }

            /* البطاقتان 2 و 3: Total Articles / Total Commandes - مربعات مضغوطة */
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(2),
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(3) {
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                min-height: 108px;
            }

            /* البطاقة 4: Meilleur Serveur - تمتد بعرض الصف لاحتوائها على معلومات أكثر */
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(4) {
                grid-column: 1 / -1 !important;
            }

            /* البطاقتان 5 و 6: TPE / Livraison - مربعات مضغوطة بنفس حجم 2 و 3 */
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(5),
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(6) {
                min-height: 108px;
            }
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(5) .flex.items-center.justify-between,
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.gap-4.mb-8 > .stat-card:nth-child(6) .flex.items-center.justify-between {
                flex-direction: column-reverse !important;
                align-items: flex-start !important;
                gap: 0.6rem !important;
            }

            /* ============================================================
               ---- شبكات الأقسام الفرعية (Client / TPE / Livraison Overview) - نفس أسلوب Bento
               ============================================================ */
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4.mb-6,
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.65rem !important;
                margin-bottom: 1.3rem !important;
            }
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .stat-card:nth-child(3) {
                grid-column: 1 / -1 !important;
            }
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4.gap-4.mb-6 > .stat-card .text-2xl,
            .dashboard-view .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mb-6 > .stat-card .text-2xl {
                font-size: 1.05rem !important;
            }

            /* ---- الرسوم البيانية: بطاقات زجاجية أصغر و أوضح ---- */
            .dashboard-view .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 {
                grid-template-columns: 1fr !important;
                gap: 0.85rem !important;
                margin-bottom: 1.3rem !important;
            }
            /* ===== NEW: على الهاتف فقط، Revenu par produit يبان فوق Tendance des ventes (الحاسوب يبقى بترتيبه الأصلي) ===== */
            .dashboard-view .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 > div:nth-child(1) {
                order: 2 !important;
            }
            .dashboard-view .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 > div:nth-child(2) {
                order: 1 !important;
            }
            .dashboard-view .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 > div {
                padding: 1rem !important;
                min-height: 260px !important;
                border-radius: 20px !important;
                background: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
                border: 1px solid rgba(255,255,255,0.08) !important;
            }
            .dashboard-view .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 h3 {
                font-size: 0.85rem !important;
                margin-bottom: 0.85rem !important;
            }
            .dashboard-view .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 div[style*="height:320px"] {
                height: 230px !important;
            }

            /* ---- NEW: ملخص المجموع + الاتجاه فوق مبيان Tendance des ventes (هاتف فقط) ---- */
            .dashboard-view .mobile-trend-summary {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin: -0.5rem 0 0.6rem 0;
            }
            .dashboard-view .mobile-trend-label {
                font-size: 0.7rem;
                color: #9ca3af;
                font-weight: 600;
                margin-right: 4px;
            }
            .dashboard-view .mobile-trend-value {
                font-size: 1.35rem;
                font-weight: 800;
                color: #fbbf24;
                letter-spacing: -0.02em;
            }
            .dashboard-view .mobile-trend-badge {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 0.72rem;
                font-weight: 700;
                padding: 0.3rem 0.6rem;
                border-radius: 999px;
            }
            .dashboard-view .mobile-trend-badge.is-up {
                color: #34d399;
                background: rgba(52,211,153,0.12);
            }
            .dashboard-view .mobile-trend-badge.is-down {
                color: #f87171;
                background: rgba(248,113,113,0.12);
            }

            /* ---- NEW: قائمة ترتيب Revenu par produit (هاتف فقط) بدل الرسم البياني ---- */
            .dashboard-view .mobile-revenue-ranking {
                display: flex;
                flex-direction: column;
                gap: 0.7rem;
                padding-top: 0.1rem;
            }
            .dashboard-view .mobile-rank-row {
                display: flex;
                align-items: center;
                gap: 0.65rem;
            }
            .dashboard-view .mobile-rank-badge {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.68rem;
                font-weight: 800;
                color: #fff;
                background: #374151;
            }
            .dashboard-view .mobile-rank-badge.rank-1 { background: linear-gradient(135deg,#fbbf24,#d97706); }
            .dashboard-view .mobile-rank-badge.rank-2 { background: linear-gradient(135deg,#60a5fa,#2563eb); }
            .dashboard-view .mobile-rank-badge.rank-3 { background: linear-gradient(135deg,#f87171,#dc2626); }
            .dashboard-view .mobile-rank-badge.rank-4 { background: linear-gradient(135deg,#34d399,#059669); }
            .dashboard-view .mobile-rank-badge.rank-5 { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
            .dashboard-view .mobile-rank-badge.rank-6 { background: linear-gradient(135deg,#f472b6,#db2777); }
            .dashboard-view .mobile-rank-info {
                flex: 1 1 auto;
                min-width: 0;
            }
            .dashboard-view .mobile-rank-top {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                gap: 0.5rem;
                margin-bottom: 0.3rem;
            }
            .dashboard-view .mobile-rank-name {
                font-size: 0.74rem;
                font-weight: 600;
                color: #e5e7eb;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .dashboard-view .mobile-rank-amount {
                font-size: 0.74rem;
                font-weight: 700;
                color: #9ca3af;
                flex-shrink: 0;
            }
            .dashboard-view .mobile-rank-bar-track {
                width: 100%;
                height: 6px;
                border-radius: 999px;
                background: rgba(255,255,255,0.07);
                overflow: hidden;
            }
            .dashboard-view .mobile-rank-bar-fill {
                height: 100%;
                border-radius: 999px;
                transition: width 0.5s ease;
            }
            .dashboard-view .mobile-rank-bar-fill.rank-1 { background: linear-gradient(90deg,#fbbf24,#d97706); }
            .dashboard-view .mobile-rank-bar-fill.rank-2 { background: linear-gradient(90deg,#60a5fa,#2563eb); }
            .dashboard-view .mobile-rank-bar-fill.rank-3 { background: linear-gradient(90deg,#f87171,#dc2626); }
            .dashboard-view .mobile-rank-bar-fill.rank-4 { background: linear-gradient(90deg,#34d399,#059669); }
            .dashboard-view .mobile-rank-bar-fill.rank-5 { background: linear-gradient(90deg,#a78bfa,#7c3aed); }
            .dashboard-view .mobile-rank-bar-fill.rank-6 { background: linear-gradient(90deg,#f472b6,#db2777); }
            .dashboard-view .mobile-rank-empty {
                text-align: center;
                font-size: 0.75rem;
                color: #6b7280;
                padding: 1rem 0;
            }
            .light-mode .dashboard-view .mobile-rank-name { color: #1f2937; }
            .light-mode .dashboard-view .mobile-rank-amount { color: #6b7280; }
            .light-mode .dashboard-view .mobile-rank-bar-track { background: rgba(0,0,0,0.06); }
            .light-mode .dashboard-view .mobile-trend-label { color: #6b7280; }

            /* ---- عناوين الأقسام (Client / TPE / Livraison Overview) ---- */
            .dashboard-view .h-8.w-1 {
                height: 20px !important;
                width: 5px !important;
                border-radius: 4px !important;
            }
            .dashboard-view h3.text-2xl {
                font-size: 0.98rem !important;
            }
            .dashboard-view h3.text-2xl i {
                font-size: 0.88rem !important;
                margin-right: 0.5rem !important;
            }

            /* ---- الجداول: بطاقات زجاجية مضغوطة و قابلة للتمرير الأفقي ---- */
            .dashboard-view .bg-\[\#121212\].p-6.rounded-xl {
                padding: 0.9rem !important;
                border-radius: 20px !important;
                background: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
                border: 1px solid rgba(255,255,255,0.08) !important;
            }
            .dashboard-view .bg-\[\#121212\].p-6.rounded-xl h3.text-xl {
                font-size: 0.85rem !important;
            }
            .dashboard-view table {
                font-size: 0.7rem !important;
                min-width: 480px;
            }
            .dashboard-view table th,
            .dashboard-view table td {
                padding: 0.5rem 0.55rem !important;
                white-space: nowrap;
            }
            .dashboard-view .overflow-x-auto {
                border-radius: 12px;
                -webkit-overflow-scrolling: touch;
            }

            /* ---- توافق الوضع النهاري (Light mode) مع البطاقات الزجاجية ---- */
            .light-mode .dashboard-view .page-header-pro,
            .light-mode .dashboard-view .stat-card,
            .light-mode .dashboard-view .grid.grid-cols-1.lg\:grid-cols-2.gap-6.mb-8 > div,
            .light-mode .dashboard-view .bg-\[\#121212\].p-6.rounded-xl {
                background: linear-gradient(155deg, rgba(0,0,0,0.035), rgba(0,0,0,0.01)) !important;
                border: 1px solid rgba(0,0,0,0.08) !important;
            }
        }

        /* ============================================================
           ===== NEW: تثبيت واجهة LOGIN في وسط الشاشة على الهاتف فقط
           بدون أي حركة عند الضغط، + إظهار رسالة الخطأ فوق خانة كلمة
           المرور مباشرة بدل ما تدفع البطاقة للأسفل. كل هاد الكود
           محصور بـ @media (max-width:768px) فقط، ولا يأثر إطلاقاً
           على واجهة الحاسوب (نفس مبدأ الإصلاحات السابقة)
           ============================================================ */
        @media (max-width: 768px) {

            /* ---- الحاوية الكبرى: تصبح ثابتة تغطي الشاشة بأكملها،
                     ولا تتحرك أبداً بسبب اختفاء/ظهور شريط المتصفح ---- */
            .login-screen-container {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                height: 100dvh !important;
                min-height: 100dvh !important;
                max-height: 100dvh !important;
                overflow: hidden !important;
            }

            /* ---- بطاقة اللوجين: تتمركز بدقة في وسط الشاشة عبر
                     position:absolute + transform، فلا تتأثر بتغيّر
                     ارتفاع المحتوى الداخلي (رسالة الخطأ...الخ) ---- */
            .login-content-wrapper {
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                right: auto !important;
                bottom: auto !important;
                transform: translate(-50%, -50%) !important;
                margin: 0 !important;
                max-height: 92dvh;
                overflow-y: auto;
            }

            /* ---- قسم كلمة المرور: مرجع للتموضع الداخلي لرسالة الخطأ ---- */
            .password-section {
                position: relative;
            }

            /* ---- رسالة الخطأ: تظهر بالضبط فوق خانة إدخال كلمة المرور
                     (نفس مكان وارتفاع الخانة تماماً) عوض أن تدفع
                     الواجهة للأسفل أو الأعلى ---- */
            .mobile-login-error {
                position: absolute !important;
                top: 1.75rem !important;
                left: 0 !important;
                right: 0 !important;
                height: 4.25rem !important;
                margin: 0 !important;
                padding: 0 !important;
                border-radius: 0.75rem;
                background: rgba(17,17,17,0.92);
                border: 2px solid #ef4444;
                z-index: 20;
            }
        }

        /* ============================================================
           ===== NEW: تثبيت زر "Déconnexion" دائماً أسفل القائمة الجانبية
           في الهاتف، بغض النظر عن عدد العناصر (المشكل كان: الزر لا
           يظهر إلا إذا كانت القائمة تملأ الشاشة بالكامل). الحل: جعل
           الزر absolute بالنسبة للحاوية الثابتة (fixed) للـ sidebar،
           فيبقى ملتصقاً بأسفل الشاشة دائماً. محصور بـ
           @media (max-width:768px) فقط، لا يأثر على الحاسوب
           ============================================================ */
        @media (max-width: 768px) {
            .sidebar-transition .sidebar-footer {
                position: absolute !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                z-index: 10 !important;
                background: linear-gradient(180deg, #141414 0%, #0d0d0d 100%) !important;
                box-shadow: 0 -6px 16px -6px rgba(0,0,0,0.4);
            }
            .light-mode .sidebar-transition .sidebar-footer {
                background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%) !important;
            }
            /* هامش سفلي بقدر ارتفاع الزر، حتى لا يختفي آخر عنصر بالقائمة خلفه */
            .sidebar-transition .sidebar-nav-scroll {
                padding-bottom: 78px !important;
            }
        }

        /* ============================================================
           ===== NEW: تحسينات أداء عامة خاصة بالهاتف فقط لتفادي التهنيج
           (lag) والحركة الثقيلة. محصور بـ @media (max-width:768px) فقط
           ولا يأثر إطلاقاً على تجربة الحاسوب.
           ============================================================ */
        @media (max-width: 768px) {
            /* ---- PERF FIX: تضييق transition-all لخصائص خفيفة فقط (transform/opacity/background/border/color)
               بدل "all" التي تجبر المتصفح على مراقبة كل خاصية CSS (بما فيها box-shadow والأبعاد)
               عند كل تغيير حالة، وهذا يقلل بشكل واضح من التهنيج أثناء الضغط والتنقل السريع بين الأزرار والبطاقات ---- */
            .transition-all {
                transition-property: transform, opacity, background-color, border-color, color !important;
            }

            /* ---- PERF FIX: إزالة وميض التظليل الافتراضي عند اللمس على الهاتف (خفيف لكنه يعطي إحساس ثقل بصري) ---- */
            * {
                -webkit-tap-highlight-color: transparent !important;
            }

            /* ---- PERF FIX: تسريع التمرير في كل الحاويات القابلة للسكرول ---- */
            .overflow-auto, .overflow-x-auto {
                -webkit-overflow-scrolling: touch !important;
            }
        }