/* =========================================
   3. DASHBOARD RESPONSIVE (RTL/LTR FIXED)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Sidebar (RTL - Arabic) */
    .sidebar {
        position: fixed;
        right: -260px; /* مخفي خارج الشاشة */
        top: 0;
        bottom: 0;
        width: 260px;
        z-index: 1050;
        transition: right 0.3s ease;
        background: #fff;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    }

    .sidebar.active {
        right: 0; /* يظهر */
    }

    /* LTR (English) - Sidebar on left */
    html[lang="en"] .sidebar {
        right: auto;
        left: -260px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
    }

    html[lang="en"] .sidebar.active {
        left: 0;
        right: auto;
    }

    /* 2. Main Content */
    .main-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100%;
        padding: 15px;
    }

    /* 3. Tables fix */
    .table-responsive-mobile {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 700px; /* يمنع الجدول يضغط نفسه */
    }

    /* 4. KPI / Stat Cards */
    .kpi-card,
    .stat-card {
        margin-bottom: 15px;
    }

    /* 5. Header */
    .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .top-header .d-flex {
        width: 100%;
        justify-content: space-between;
    }
}