/* ============================================
   COMPLETE MOBILE RESPONSIVE SOLUTION
   Edumentor Pro - All Sidebars & Navbars
   ============================================ */

/* CRITICAL: Base mobile overflow fix */
@media (max-width: 991px) {
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    .container-scroller {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }
}

/* ============================================
   NAVBAR - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    /* Navbar container */
    .navbar.default-layout-navbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Brand wrapper - compact */
    .navbar .navbar-brand-wrapper {
        width: 55px !important;
        min-width: 55px !important;
        max-width: 55px !important;
        flex-shrink: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Menu wrapper - flexible */
    .navbar .navbar-menu-wrapper {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-left: 5px !important;
        padding-right: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
    }
    
    /* Hide text elements on mobile */
    .navbar .nav-profile-text {
        display: none !important;
    }
    
    .navbar .cache-clear span {
        display: none !important;
    }
    
    /* Compact buttons */
    .navbar .cache-clear {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }
    
    .navbar .cache-clear .btn {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Navbar nav items */
    .navbar .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 3px !important;
    }
    
    .navbar .navbar-nav .nav-item {
        padding: 0 !important;
    }
    
    .navbar .navbar-nav .nav-link {
        padding: 0.5rem !important;
    }
    
    /* Mobile toggler button */
    .navbar .navbar-toggler {
        padding: 0.5rem !important;
        border: none !important;
    }
}

@media (max-width: 768px) {
    .navbar .navbar-brand-wrapper {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
}

@media (max-width: 576px) {
    /* Ultra compact navbar */
    .navbar {
        height: 60px !important;
    }
    
    .navbar .navbar-brand-wrapper {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }
    
    /* Hide cache clear buttons on smallest screens */
    .navbar .cache-clear {
        display: none !important;
    }
    
    .navbar .navbar-nav .nav-link {
        padding: 0.25rem !important;
    }
    
    .navbar .navbar-nav .nav-link i {
        font-size: 1.1rem !important;
    }
}

/* ============================================
   SIDEBAR - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    /* Sidebar - off-canvas behavior */
    .sidebar.sidebar-offcanvas {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 260px !important;
        max-width: 260px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-270px) !important;
        transition: transform 0.3s ease-in-out !important;
        z-index: 999 !important;
        background: #fff !important;
        box-shadow: 0 0 20px rgba(0,0,0,0.1) !important;
    }
    
    /* RTL - Sidebar on right side for Arabic */
    [dir="rtl"] .sidebar.sidebar-offcanvas {
        left: auto !important;
        right: 0 !important;
        transform: translateX(270px) !important;
    }
    
    /* Sidebar active (open) state */
    .sidebar.sidebar-offcanvas.active {
        transform: translateX(0) !important;
    }
    
    /* RTL active state */
    [dir="rtl"] .sidebar.sidebar-offcanvas.active {
        transform: translateX(0) !important;
    }
    
    /* Overlay when sidebar is open */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }
    
    body.sidebar-open::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    /* Sidebar content styling - consistent across all languages */
    .sidebar.sidebar-offcanvas .nav {
        padding-bottom: 2rem !important;
        background: #fff !important;
    }
    
    .sidebar.sidebar-offcanvas .nav .nav-item {
        width: 100% !important;
        background: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Sidebar menu items - white background for all */
    .sidebar.sidebar-offcanvas .nav .nav-item .nav-link {
        background-color: #fff !important;
        color: #333 !important;
        border: none !important;
        opacity: 1 !important;
    }
    
    /* Active menu item - blue background */
    .sidebar.sidebar-offcanvas .nav .nav-item.active > .nav-link,
    .sidebar.sidebar-offcanvas .nav .nav-item .nav-link.active {
        background-color: rgba(0, 123, 255, 0.1) !important;
        color: #007bff !important;
    }
    
    /* Expanded parent menu items */
    .sidebar.sidebar-offcanvas .nav .nav-item > .nav-link[aria-expanded="true"] {
        background-color: rgba(0, 123, 255, 0.05) !important;
    }
    
    /* Sub-menu items */
    .sidebar.sidebar-offcanvas .nav .nav-item .collapse.show {
        background-color: #f8f9fa !important;
        display: block !important;
    }
    
    .sidebar.sidebar-offcanvas .nav .nav-item .collapse .nav-link {
        background-color: #f8f9fa !important;
        color: #555 !important;
        padding-left: 3rem !important;
    }
    
    .sidebar.sidebar-offcanvas .nav .nav-item .collapse .nav-link.active {
        background-color: rgba(0, 123, 255, 0.1) !important;
        color: #007bff !important;
    }
    
    /* Hover states */
    .sidebar.sidebar-offcanvas .nav .nav-item .nav-link:hover {
        background-color: rgba(0, 123, 255, 0.05) !important;
    }
    
    /* Force visibility for all sidebar items */
    .sidebar.sidebar-offcanvas .nav .nav-item,
    .sidebar.sidebar-offcanvas .nav .nav-item .nav-link,
    .sidebar.sidebar-offcanvas .nav .nav-item .collapse {
        pointer-events: auto !important;
    }
}

/* ============================================
   MAIN PANEL - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    /* Main panel takes full width */
    .main-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        transition: none !important;
        overflow-x: hidden !important;
    }
    
    /* Page body wrapper */
    .page-body-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Content wrapper */
    .content-wrapper {
        padding: 1.5rem 1rem !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: 1.25rem 0.875rem !important;
    }
}

@media (max-width: 576px) {
    .main-panel {
        padding-top: 60px !important;
    }
    
    .content-wrapper {
        padding: 1rem 0.75rem !important;
    }
}

/* ============================================
   CARDS & CONTENT - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .card {
        margin-bottom: 1rem !important;
        overflow-x: auto !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .stretch-card {
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 576px) {
    .card-body {
        padding: 0.875rem !important;
    }
}

/* ============================================
   TABLES - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table {
        min-width: 600px !important;
    }
    
    .bootstrap-table .fixed-table-container {
        overflow-x: auto !important;
    }
}

@media (max-width: 576px) {
    table {
        font-size: 0.8rem !important;
    }
    
    table th,
    table td {
        padding: 0.5rem !important;
    }
}

/* ============================================
   FORMS - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-control {
        font-size: 0.9rem !important;
    }
    
    .btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    .form-control {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   MODALS - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 576px) {
    .modal {
        padding: 0 !important;
    }
    
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .modal-content {
        height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    .modal-footer {
        padding: 1rem !important;
        flex-direction: column !important;
    }
    
    .modal-footer .btn {
        width: 100% !important;
        margin: 0.25rem 0 !important;
    }
}

/* ============================================
   GRID SYSTEM - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    .row > * {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================
   DROPDOWN MENUS - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .navbar .dropdown-menu {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        transform: none !important;
    }
}

/* ============================================
   PAGE HEADER - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .page-header {
        margin-bottom: 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .page-header h3 {
        font-size: 1.5rem !important;
    }
    
    .page-header .breadcrumb {
        font-size: 0.875rem !important;
        padding: 0.5rem 0 !important;
    }
}

@media (max-width: 576px) {
    .page-header h3 {
        font-size: 1.25rem !important;
    }
    
    .breadcrumb {
        flex-wrap: wrap !important;
    }
    
    .breadcrumb-item {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   UTILITY CLASSES - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .d-lg-block {
        display: none !important;
    }
    
    .d-lg-none {
        display: block !important;
    }
}

/* ============================================
   TOUCH TARGETS - MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 768px) {
    /* Minimum touch target size */
    .btn,
    .nav-link,
    .dropdown-toggle {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Icon sizes */
    .btn i {
        font-size: 1.1rem !important;
    }
    
    /* Checkbox and radio sizes */
    .form-check-input {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL - FINAL FIX
   ============================================ */
@media (max-width: 991px) {
    * {
        max-width: 100vw !important;
    }
    
    html,
    body,
    .container-scroller,
    .page-body-wrapper,
    .main-panel,
    .content-wrapper,
    .navbar {
        overflow-x: hidden !important;
    }
}