/* Desktop View on Mobile Devices */
/* Only applies to screens smaller than 992px to not affect desktop users */

@media (max-width: 991.98px) {
    /* Force minimum width to ensure desktop layout is preserved */
    body {
        min-width: 1200px !important;
        overflow-x: auto !important;
    }

    .layout-navbar,
    .layout-page,
    .layout-container,
    .container-xxl,
    .container-fluid {
        min-width: 1200px !important;
    }
    
    /* Allow sidebar to be toggled on mobile */
    .layout-menu {
        position: fixed !important;
        z-index: 1100;
        height: 100%;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    
    /* Show menu when toggled */
    .layout-menu-expanded .layout-menu {
        transform: translateX(0) !important;
    }
    
    /* Ensure menu toggle button is visible and functional */
    .layout-menu-toggle {
        display: flex !important;
        cursor: pointer;
        z-index: 1200;
    }
    
    /* Add overlay ONLY when menu is open - more specific selector */
    body.layout-menu-expanded::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1099;
        pointer-events: auto;
    }
    
    /* Ensure overlay is not blocking when menu is closed */
    body:not(.layout-menu-expanded)::before {
        display: none !important;
        pointer-events: none !important;
    }
    
    /* Hide status badges on mobile */
    #queue-status-badge,
    #storage-status-badge,
    #redis-status-badge,
    .eudr-status-badge {
        display: none !important;
    }
    
    /* Keep desktop table layout */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent column stacking on small screens */
    .row > [class*='col-'] {
        width: auto !important;
        max-width: none !important;
        flex: initial !important;
    }
    
    /* Keep desktop navigation layout */
    .navbar-collapse {
        display: flex !important;
    }
    
    .navbar-toggler {
        display: none !important;
    }
    
    /* Ensure DataTables stays in desktop mode */
    .dataTables_wrapper {
        min-width: 100% !important;
    }
    
    table.dataTable {
        width: 100% !important;
    }
    
    /* Prevent text wrapping in navigation */
    .menu-link {
        white-space: nowrap !important;
    }
    
    /* Fix any potential overlay issues on mobile */
    .layout-overlay,
    .modal-backdrop:not(.show) {
        display: none !important;
    }
    
    /* Ensure content is interactive when menu is closed */
    body:not(.layout-menu-expanded) .layout-page {
        position: relative;
        z-index: auto;
        pointer-events: auto !important;
    }
    
    /* Prevent any unintended overlays */
    body:not(.layout-menu-expanded) * {
        pointer-events: auto !important;
    }
}

/* Keep cards and forms flexible for all screen sizes */
.card,
.card-body {
    min-width: auto !important;
}