/* MOBILE HEADER FIX */
/* Force header to stay fixed on mobile devices */

@media (max-width: 768px) {
    /* Force AppShell Header to stay fixed on mobile */
    [data-mantine-component="AppShellHeader"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        transition: none !important;
        z-index: 1000 !important;
        background: white !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    /* Prevent any scroll-based transforms on mobile */
    [data-mantine-component="AppShellHeader"] * {
        transform: none !important;
        transition: transform 0s !important;
    }
    
    /* Ensure header content stays in place */
    .header-container {
        transform: none !important;
        position: relative !important;
    }
    
    /* Override iOS scroll behavior that might interfere */
    body {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Prevent header from being affected by body scroll on mobile */
    html, body {
        overflow-x: hidden !important;
    }
    
    /* Ensure AppShell main content accounts for fixed header - only on mobile */
    [data-mantine-component="AppShellMain"] {
        padding-top: 40px !important;
    }
    
    /* BUT ensure sidebar margin is still removed on mobile */
    body.has-sidebar [data-mantine-component="AppShellMain"] #page-content {
        margin-left: 0 !important;
    }
}

/* Custom Header Visibility based on 1600px breakpoint */
@media (max-width: 1600px) {
    .desktop-header-element {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile - ensure header stays put */
    [data-mantine-component="AppShellHeader"] {
        position: fixed !important;
        transform: translateY(0) !important;
    }
}