/* Mobile Responsive Fixes for WebStack-Guns */

/* Fix logo size on mobile devices */
@media (max-width: 767px) {
    /* Make logo smaller on mobile */
    .sidebar-menu .logo-env .logo .logo-expanded img {
        max-width: 150px !important;
        width: 150px !important;
        height: auto !important;
    }
    
    /* Fix header background color and height on mobile */
    html body .sidebar-menu .logo-env,
    body .sidebar-menu .logo-env,
    .page-container .sidebar-menu .logo-env,
    .sidebar-menu .logo-env {
        padding: 20px 15px !important; /* Increase padding for better height */
        text-align: center;
        background: #2c2e2f !important; /* Same as desktop */
        background-image: none !important; /* Kill any gradients */
        background-gradient: none !important; /* Kill any gradients */
        border-bottom: 1px solid #313437 !important; /* Same as desktop */
    }
    
    /* Fix overall sidebar background on mobile */
    html body .sidebar-menu,
    body .sidebar-menu,
    .page-container .sidebar-menu,
    .sidebar-menu {
        width: 280px !important;
        background: #2c2e2f !important; /* Same as desktop */
        background-image: none !important; /* Kill any gradients */
        background-gradient: none !important; /* Kill any gradients */
    }
    
    /* Adjust main content margin when sidebar is visible on mobile */
    .page-container .main-content {
        margin-left: 0 !important;
    }
}

/* ⚠️ CRITICAL: 专门覆盖 app.css 中的 mobile-is-visible 类系统 */
@media only screen and (max-width: 768px) {
    /* 超高优先级选择器 - 直接对抗 app.css 的规则 */
    html body .page-container .sidebar-menu .sidebar-menu-inner .main-menu.mobile-is-visible,
    html body .page-container .sidebar-menu .sidebar-menu-inner .main-menu.mobile-is-visible.both-menus-visible,
    html body .sidebar-user-info.mobile-is-visible,
    html body .page-container .sidebar-menu,
    html body .sidebar-menu,
    .main-menu.mobile-is-visible,
    .main-menu.mobile-is-visible.both-menus-visible,
    .sidebar-user-info.mobile-is-visible {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        /* 多重保险措施 */
        width: 0px !important;
        height: 0px !important;
        position: absolute !important;
        left: -99999px !important;
        z-index: -9999 !important;
    }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
    /* Even smaller logo for very small screens */
    .sidebar-menu .logo-env .logo .logo-expanded img {
        max-width: 120px !important;
        width: 120px !important;
    }
    
    /* Maintain proper header height on small screens */
    html body .sidebar-menu .logo-env,
    body .sidebar-menu .logo-env,
    .page-container .sidebar-menu .logo-env,
    .sidebar-menu .logo-env {
        padding: 18px 15px !important; /* Slightly smaller but still adequate */
        background: #2c2e2f !important; /* Same as desktop */
        background-image: none !important; /* Kill any gradients */
        background-gradient: none !important; /* Kill any gradients */
        border-bottom: 1px solid #313437 !important; /* Same as desktop */
    }
    
    /* Make sidebar full width on very small screens */
    html body .page-container .sidebar-menu,
    html body .sidebar-menu,
    body .page-container .sidebar-menu,
    body .sidebar-menu,
    .page-container .sidebar-menu,
    .sidebar-menu {
        width: 100vw !important; /* Full viewport width for better usability */
        max-width: 100vw !important;
        min-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        position: fixed !important; /* Changed to fixed for stronger positioning */
        z-index: 9999 !important;
        background: #2c2e2f !important; /* Same as desktop */
        background-image: none !important; /* Kill any gradients */
        background-gradient: none !important; /* Kill any gradients */
        height: auto !important; /* Allow natural height */
    }
    
    /* Add top padding to main content to avoid overlap with fixed sidebar */
    .page-container .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 140px !important; /* Add space for fixed header */
    }
    
    /* Also push down the page content container */
    body .page-container,
    .page-container {
        padding-top: 0 !important;
    }
    
    /* Ensure content container doesn't get hidden */
    .main-content .content-container,
    .main-content .container-fluid,
    .main-content > div {
        padding-top: 20px !important;
    }
}