/* ======================================================== */
/* 📱 ملف التجاوب المخفف والمخصص للموبايل فقط 📱 */
/* ======================================================== */

@media (max-width: 768px) {
    /* 2. تعديل الشريط العلوي للقائمة ليتوافق مع اللغة العربية (RTL) */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        direction: rtl !important;
        overflow: hidden !important;
        border-left: none !important;
        border-bottom: 1px solid rgba(255, 77, 121, 0.15) !important;
        z-index: 1000 !important;
    }
    
    .sidebar-menu {
        display: flex !important;
        flex-direction: row !important;
        direction: rtl !important; /* 🚀 السر هنا: إجبار العناصر على البدء من اليمين */
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 5px 10px !important;
        width: 100% !important;
    }
    
    .menu-item { 
        padding: 10px 15px !important; 
        border-right: none !important; 
        flex-shrink: 0 !important; /* لضمان عدم انكماش الأزرار */
    }
    
    .sidebar-footer, .btn-logout { 
        display: none !important; 
    }
}

    /* 3. حاوية العمل الأساسية وحل مشكلة الشاشة السوداء */
    .main-wrapper {
        width: 100% !important;
        flex: none !important; /* إلغاء التقييد ليأخذ راحته بالنزول */
        display: block !important;
        height: auto !important; 
        overflow: visible !important; /* السماح للمحتوى بالخروج للأسفل ليتمكن الـ body من سحبه */
    }
    
    /* السماح لمنطقة المحتوى بالتمرير الحر (إلغاء الانكماش) */
    .content-area {
        height: auto !important;
        overflow: visible !important; 
        padding: 10px !important;
    }

    /* 4. حماية الجداول والنوافذ من التشوه */
    .data-panel, .card {
        overflow-x: auto !important;
    }
    table { min-width: 750px !important; }
    .btn-action { width: 100% !important; margin-left: 0 !important; margin-bottom: 8px !important; }
    
    .modal-overlay { padding: 10px !important; overflow-y: auto !important; align-items: flex-start !important; }
    .modal-content-light { width: 95% !important; max-height: 90vh !important; margin: 15px auto !important; }

/* ======================================================== */
/* 🚀 المطرقة السحرية: إجبار التمرير الطبيعي وإلغاء التجميد 🚀 */
/* ======================================================== */
@media (max-width: 768px) {
    html, body {
        position: relative !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        -webkit-overflow-scrolling: touch !important; /* لدعم هواتف الآيفون */
        overscroll-behavior-y: auto !important;
    }
    
    * {
        /* إجبار كل العناصر على قبول حركة الإصبع */
        touch-action: pan-y !important; 
    }

    /* فك أي تجميد قد يسببه الغلاف الأساسي للموقع */
    .main-wrapper, 
    .content-area, 
    .wrapper, 
    #wrapper {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }
}