/* CONDITIONAL MARGINS - Only for pages with sidebar */
/* Apply margins only to main content, NOT to header */

/* DESKTOP VIEW MARGIN - Only for large desktop screens with sidebar */
@media screen and (min-width: 1201px) {
    /* Target only the main content area, not header */
    body.has-sidebar [data-mantine-component="AppShellMain"] > div,
    body.has-sidebar #page-content,
    body.has-sidebar #page-container-wrapper,
    body.has-sidebar .main-content {
        margin-left: 25px !important; /* 48px sidebar + 7px gap */
        margin-right: 16px !important; /* Right margin to edge */
        padding-left: 0 !important;
        box-sizing: border-box !important;
        transition: margin-left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
}

/* SMALL TABLET VIEW - No margins, use mobile-style navigation */
@media screen and (min-width: 770px) and (max-width: 900px) {
    body.has-sidebar [data-mantine-component="AppShellMain"],
    body.has-sidebar #page-content,
    body.has-sidebar #page-container-wrapper {
        margin-left: 0 !important; /* No margin for small tablets */
        margin-right: 0 !important; /* Full width like mobile */
        padding-left: 0 !important;
    }
}

/* Pages without sidebar (homepage) get no margin */
body:not(.has-sidebar) [data-mantine-component="AppShellMain"] {
    margin-left: 0 !important;
}

/* MOBILE STYLES - RESET MARGINS */
@media screen and (max-width: 769px) {
    html body div[data-mantine-component="AppShell"] div[data-mantine-component="AppShellMain"],
    html body [data-mantine-component="AppShell"] [data-mantine-component="AppShellMain"],
    body [data-mantine-component="AppShell"] [data-mantine-component="AppShellMain"],
    [data-mantine-component="AppShell"] [data-mantine-component="AppShellMain"],
    [data-mantine-component="AppShellMain"],
    html body div#page-content,
    html body #page-content,
    #page-content,
    html body div#page-container-wrapper,
    html body #page-container-wrapper,
    #page-container-wrapper {
        margin-left: 0 !important; /* No sidebar on mobile */
        width: 100% !important;
        transition: none !important; /* Instant on mobile */
    }
}

/* Large Desktop styles only - above 1200px */
/* Large Desktop styles only - above 1200px */
@media screen and (min-width: 1201px) {
    /* Hide mobile menu trigger on large desktop - highest specificity */
    .mobile-menu-trigger,
    .mobile-burger-btn,
    #mobile-menu-button,
    #mobile-menu-button.mobile-burger-btn,
    .mantine-ActionIcon-root.mobile-burger-btn {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Show desktop-only sections */
    .desktop-only-section {
        display: flex !important;
    }
    
    .desktop-nav-section {
        display: flex !important;
    }
    
    /* Ensure sidebar is visible on desktop */
    .sidebar-container {
        display: block !important;
    }
    
    /* Desktop logo larger sizing */
    .header-logo {
        height: 32px !important;
    }
    
    /* Desktop navigation buttons */
    .desktop-nav-btn {
        display: inline-flex !important;
    }
    
    /* Even larger logo on big screens */
    .header-logo {
        height: 36px !important;
    }
}

/* Header isolation - ensure header stays full width */
[data-mantine-component="AppShellHeader"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}