/**
 * Porto Admin Mobile Menu Fixes
 * Ensures the mobile sidebar displays correctly with full width and proper menu visibility
 */

/* Global fixes - ensure content is always clickable when sidebar is closed */
html:not(.sidebar-left-opened) .content-body,
html:not(.sidebar-left-opened) .content-body *,
html:not(.sidebar-left-opened) .content-body a {
    pointer-events: auto !important;
}

/* Mobile-specific fixes */
@media (max-width: 767px) {
    /* Fix overall layout */
    .body.admin-layout {
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    /* Ensure mobile toggle button is clickable and properly positioned */
    .toggle-sidebar-left {
        cursor: pointer;
        z-index: 1070 !important;
        position: relative;
        display: inline-block !important;
        padding: 8px 12px;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        pointer-events: auto !important;
        margin-left: auto;
    }
    
    .toggle-sidebar-left i {
        pointer-events: none;
        font-size: 1.2rem;
        color: #333;
    }
    
    /* Fix header layout */
    .header {
        background: #fff !important;
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .logo-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: #fff !important;
        padding: 0 15px !important;
        z-index: 1061 !important;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .logo-container .logo {
        display: flex;
        align-items: center;
        height: 100%;
    }
    
    /* Fix header-right section */
    .header-right {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #fff !important;
        padding: 0 15px 10px 15px !important; /* Remove top padding, keep others */
        margin-top: 0 !important; /* Remove margin */
        border-bottom: 1px solid #e5e5e5;
        z-index: 1050 !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end !important; /* Right-align content */
        height: auto !important;
        min-height: 60px;
    }
    
    /* Fix search form on mobile */
    .header-right .search {
        flex: 1;
        margin-right: 10px;
    }
    
    .header-right .search .input-group {
        width: 100%;
    }
    
    .header-right .search input {
        font-size: 14px;
    }
    
    /* Fix separator on mobile */
    .header-right .separator {
        display: none; /* Hide separator on mobile to save space */
    }
    
    /* Fix userbox dropdown on mobile */
    .userbox {
        position: relative !important;
        flex-shrink: 0; /* Prevent shrinking */
        margin-left: auto; /* Push to right side */
    }
    
    .userbox > a {
        display: flex;
        align-items: center;
        padding: 5px 8px;
        min-width: 44px; /* Minimum touch target */
    }
    
    .userbox .profile-info {
        display: block !important; /* Show on mobile - user wants to see username */
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .userbox .profile-picture {
        display: inline-block !important; /* Show icon */
    }
    
    /* Override Porto theme's left positioning for mobile - force right alignment */
    .userbox .dropdown-menu {
        position: fixed !important; /* Use fixed so it stays in viewport when scrolling */
        right: 15px !important; /* Position from right edge of viewport */
        left: auto !important; /* Override Porto's left: -11px */
        top: auto !important; /* Will be set by JavaScript */
        bottom: auto !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        min-width: 200px !important;
        max-width: calc(100vw - 30px) !important; /* Prevent overflow */
        width: auto !important; /* Override Porto's width: 100% */
        padding: 10px !important; /* Override Porto's padding */
        z-index: 1100 !important; /* Above everything including overlay */
        display: none !important; /* Hidden by default */
        transform: none !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
        border-radius: 4px !important;
        background: #fff !important; /* Ensure background is visible */
    }
    
    /* Calculate proper top position when opened */
    .userbox.show .dropdown-menu,
    .userbox .dropdown-menu.show {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Ensure dropdown menu links are clickable and navigate properly */
    .userbox .dropdown-menu a,
    .userbox .dropdown-menu li a {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1101 !important;
        position: relative;
        display: block !important;
        text-decoration: none !important;
    }
    
    .userbox .dropdown-menu a[role="menuitem"] {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Ensure dropdown menu itself is clickable */
    .userbox.show .dropdown-menu,
    .userbox .dropdown-menu.show {
        pointer-events: auto !important;
    }
    
    /* For very small screens, ensure dropdown fits */
    @media (max-width: 480px) {
        .userbox .dropdown-menu {
            right: 10px !important;
            max-width: calc(100vw - 20px) !important;
            min-width: 180px !important;
        }
    }
    
    /* Fix content area spacing */
    .inner-wrapper {
        padding-top: 120px !important; /* Header height + header-right height */
        margin-top: 0 !important;
    }
    
    .content-body {
        padding: 15px !important;
        margin-top: 0 !important;
    }
    
    .page-header {
        margin: 0 -15px 20px -15px !important;
        padding: 15px !important;
        background: #2c3e50 !important; /* Dark background like desktop */
        border-bottom: 1px solid #1a252f;
        color: #fff !important;
    }
    
    .page-header h2 {
        font-size: 1.5rem;
        margin: 0;
        color: #fff !important; /* White text */
    }
    
    .page-header .breadcrumbs {
        color: #C3C3C3 !important;
    }
    
    .page-header .breadcrumbs a,
    .page-header .breadcrumbs span {
        color: #C3C3C3 !important;
    }
    
    /* Backdrop overlay when sidebar is open - lighter and properly positioned */
    /* Only show overlay when sidebar is actually open */
    html.sidebar-left-opened::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3); /* Lighter overlay */
        z-index: 1040;
        pointer-events: all;
        /* No blur - user doesn't want blur */
    }
    
    /* Ensure overlay is NOT present when sidebar is closed */
    html:not(.sidebar-left-opened)::after {
        display: none !important;
        content: none !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Ensure no overlay interferes with content when sidebar is closed */
    html:not(.sidebar-left-opened)::before {
        display: none !important;
        content: none !important;
        pointer-events: none !important;
    }
    
    /* Ensure overlay doesn't interfere with header or dropdowns */
    html.sidebar-left-opened .header,
    html.sidebar-left-opened .header-right,
    html.sidebar-left-opened .userbox {
        position: relative;
        z-index: 1051 !important; /* Above overlay */
    }
    
    html.sidebar-left-opened .userbox .dropdown-menu {
        z-index: 1100 !important; /* Above everything including overlay */
        pointer-events: auto !important; /* Ensure clickable even when sidebar is open */
    }
    
    /* Ensure dropdown links are always clickable */
    .userbox .dropdown-menu ul li a,
    .userbox .dropdown-menu a[role="menuitem"] {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative;
        z-index: 1101 !important;
    }
    
    /* Prevent body scroll when menu is open */
    html.sidebar-left-opened body {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Ensure body is scrollable when menu is closed */
    html:not(.sidebar-left-opened) body {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Ensure content area is fully interactive when sidebar is closed */
    html:not(.sidebar-left-opened) .content-body {
        pointer-events: auto !important;
        position: relative;
        z-index: 1;
    }
    
    html:not(.sidebar-left-opened) .inner-wrapper {
        pointer-events: auto !important;
        position: relative;
        z-index: 1;
    }
    
    /* Ensure the header stays on top when sidebar is open */
    html.sidebar-left-opened .header {
        z-index: 1060 !important;
        position: relative;
    }
    
    html.sidebar-left-opened .logo-container {
        z-index: 1071 !important;
    }
    
    html.sidebar-left-opened .header-right {
        z-index: 1060 !important;
    }
    
    /* Make sure sidebar is properly positioned and visible - NO BLUR */
    html.sidebar-left-opened .sidebar-left {
        z-index: 1050 !important;
        left: 0 !important;
        margin-left: 0 !important;
        transform: translateX(0) !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 320px !important;
        filter: none !important; /* No blur */
        -webkit-filter: none !important;
    }
    
    /* Fix sidebar styling - ensure it's not blurred and has proper colors */
    .sidebar-left {
        background: #2c3e50 !important; /* Dark background like desktop */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
        filter: none !important; /* No blur */
        -webkit-filter: none !important;
        color: #fff !important;
    }
    
    /* Fix sidebar menu links - make them visible and clickable */
    .sidebar-left .nav-main .nav-link {
        color: #fff !important;
        background: transparent !important;
    }
    
    .sidebar-left .nav-main .nav-link:hover,
    .sidebar-left .nav-main .nav-link.active {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
    
    .sidebar-left .nav-main .nav-link i {
        color: #fff !important;
    }
    
    .sidebar-left .nav-main .nav-link span {
        color: #fff !important;
    }
    
    /* Fix sidebar submenu (nav-children) - ensure they're visible */
    .sidebar-left .nav-main .nav-children {
        background: rgba(0, 0, 0, 0.2) !important;
        /* Don't force display block - let jQuery handle it */
    }
    
    .sidebar-left .nav-main .nav-parent.nav-expanded > .nav-children {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar-left .nav-main .nav-children .nav-link {
        color: #e0e0e0 !important;
        padding-left: 40px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sidebar-left .nav-main .nav-children .nav-link:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
    
    /* Fix sidebar header */
    .sidebar-left .sidebar-header,
    .sidebar-left .sidebar-title {
        color: #fff !important;
    }
    
    /* Ensure nav-parent links are clickable for expanding submenus */
    .sidebar-left .nav-main .nav-parent > .nav-link {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1052 !important;
        position: relative;
    }
    
    /* Ensure content is clickable when sidebar is closed */
    html:not(.sidebar-left-opened) .content-body,
    html:not(.sidebar-left-opened) .content-body *,
    html:not(.sidebar-left-opened) .content-body a,
    html:not(.sidebar-left-opened) .content-body .card,
    html:not(.sidebar-left-opened) .content-body .card *,
    html:not(.sidebar-left-opened) .content-body .card a {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative;
        z-index: 1;
    }
    
    /* Ensure links are clickable - both when sidebar is open and closed */
    a {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative;
        z-index: 1;
    }
    
    /* Specifically ensure content-body links work */
    .content-body a[href],
    .content-body a[href]:visited,
    .content-body a[href]:hover {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10 !important;
        position: relative;
    }
    
    /* Ensure sidebar menu links are clickable */
    html.sidebar-left-opened .sidebar-left a,
    html.sidebar-left-opened .sidebar-left .nav-link {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1051 !important;
        position: relative;
    }
    
    /* Ensure sidebar itself is clickable */
    html.sidebar-left-opened .sidebar-left {
        pointer-events: auto !important;
    }
    
    .sidebar-left .sidebar-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
        z-index: 1051;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    .sidebar-left .nano {
        margin-top: 60px;
        height: calc(100vh - 60px) !important;
    }
    
    /* Fix navigation menu items */
    .sidebar-left .nav-main {
        padding: 10px 0;
    }
    
    .sidebar-left .nav-main .nav-link {
        padding: 12px 20px !important;
        font-size: 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .sidebar-left .nav-main .nav-link i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    
    /* Fix breadcrumbs on mobile */
    .breadcrumbs {
        flex-wrap: wrap;
        font-size: 12px;
    }
    
    .breadcrumbs li {
        margin: 2px 0;
    }
    
    .right-wrapper {
        width: 100%;
        margin-top: 10px;
    }
    
    .right-wrapper .breadcrumbs {
        justify-content: flex-start;
    }
}

/* Desktop fixes for user menu */
@media (min-width: 768px) {
    /* Fix user menu dropdown width on desktop */
    .userbox .dropdown-menu {
        width: auto !important;
        min-width: 200px !important;
        max-width: 300px !important;
    }
    
    /* Ensure page header is visible on desktop */
    .page-header {
        background: #2c3e50 !important;
        color: #fff !important;
    }
    
    .page-header h2 {
        color: #fff !important;
    }
}