/* --- تصميم قائمة الهامبرغر للهواتف --- */
@media (max-width: 768px) {
    body {
        flex-direction: column !important;
        overflow-x: hidden !important;
    }

    /* 1. تصميم زر الهامبرغر العائم */
    #hamburger-btn {
        display: block !important;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 10000;
        background-color: var(--primary, #3498db);
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px 15px;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    html[dir="rtl"] #hamburger-btn { left: auto; right: 15px; } /* دعم اللغة العربية */

    /* 2. إخفاء القائمة الجانبية خارج الشاشة */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: -260px !important; /* مخفية في اليسار */
        width: 250px !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background-color: var(--sidebar-bg, #2c3e50) !important;
        transition: 0.3s ease-in-out !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }
    html[dir="rtl"] .sidebar { left: auto !important; right: -260px !important; }

    /* 3. حالة ظهور القائمة عند الضغط على الزر */
    .sidebar.active { left: 0 !important; }
    html[dir="rtl"] .sidebar.active { right: 0 !important; }

    /* 4. ترتيب الروابط داخل القائمة لتكون عمودية */
    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        padding: 60px 10px 20px 10px !important; /* مساحة علوية للزر */
    }
    .nav-links li { width: 100% !important; margin: 5px 0 !important; }
    .nav-links li a { display: block !important; width: 100% !important; }

    /* 5. إزاحة المحتوى الأساسي للأسفل قليلاً لكي لا يغطيه الزر */
    .main-content, main, .content, .container {
        width: 100% !important;
        padding: 60px 15px 15px 15px !important; 
    }

    /* منع التداخل في باقي الصفحة */
    .row, .cards-container, .dashboard-cards, .grid { display: flex !important; flex-direction: column !important; gap: 15px !important; }
    .stat-card, .card, .box { width: 100% !important; margin: 0 !important; }
    table, .table-wrapper, .table-responsive { display: block !important; width: 100% !important; overflow-x: auto !important; }
}