/* ===========================================
   Layout and Structure Styles
   Extracted from simple.blade.php inline styles
   =========================================== */

/* CSS Variables für konsistentes Design */
:root {
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-secondary: #10B981;
    --color-danger: #EF4444;
    --transition-base: 200ms ease;
}

/* Body and Main Layout */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-height: calc(100vh - 400px); /* Subtract approximate header + footer height */
    position: relative;
}

/* Main content container responsive width */
.main-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    transition: all 0.3s ease;
}

/* Large displays - keep centered */
@media (min-width: 1600px) {
    .main-container {
        max-width: 1100px;
        margin: 0 auto;
    }
}

/* When screen is exactly wide enough for content + sidebar */
@media (min-width: 1480px) and (max-width: 1599px) {
    /* Start considering cart sidebar */
    .page-localmenu .main-container {
        max-width: 1100px;
        margin-left: auto;
        margin-right: 400px; /* 380px sidebar + 20px gap */
    }
}

/* Medium desktop - adjust for cart sidebar */
@media (min-width: 1200px) and (max-width: 1479px) {
    .page-localmenu .main-container {
        max-width: calc(100vw - 420px); /* 380px sidebar + 40px margins */
        margin-left: 20px;
        margin-right: 400px;
    }
}

/* Tablet - no sidebar, center content */
@media (min-width: 768px) and (max-width: 1199px) {
    .main-container {
        max-width: 900px;
        padding: 20px;
    }
}

/* Mobile - full width with padding */
@media (max-width: 767px) {
    .main-container {
        padding: 10px;
    }
}

/* Optimierte Button Styles */
.btn-primary {
    background: var(--color-primary);
    transition: var(--transition-base);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

/* Notification Container Styles */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

@media (max-width: 640px) {
    #notification-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }

/* Additional responsive layouts for all devices */
        
        /* Small desktop / large tablet */
        @media (min-width: 1024px) and (max-width: 1199px) {
            .main-container {
                max-width: 100%;
                padding: 15px;
            }
            
            .page-localmenu .main-container {
                max-width: calc(100vw - 400px); /* 380px sidebar + 20px margin */
                margin-left: 10px;
                margin-right: 390px;
            }
        }
        
        /* iPad Pro and larger tablets */
        @media (min-width: 1024px) and (max-width: 1199px) {
            .main-container {
                max-width: 100%;
                padding: 20px;
            }
            
            /* iPad Pro landscape - consider cart sidebar */
            @media (orientation: landscape) {
                .page-localmenu .main-container {
                    max-width: calc(100vw - 400px);
                    margin-left: 20px;
                    margin-right: 380px;
                }
            }
            
            /* iPad Pro portrait - cart overlays */
            @media (orientation: portrait) {
                .page-localmenu .main-container {
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
        }
        
        /* iPad and standard tablets */
        @media (min-width: 768px) and (max-width: 1023px) {
            .main-container {
                max-width: 100%;
                padding: 20px;
            }
            
            /* iPad landscape */
            @media (orientation: landscape) and (min-width: 1000px) {
                .page-localmenu .main-container {
                    max-width: calc(100vw - 380px);
                    margin-left: 20px;
                    margin-right: 360px;
                }
            }
            
            /* iPad portrait and smaller landscape */
            @media (orientation: portrait), (max-width: 999px) {
                .page-localmenu .main-container {
                    margin: 0 auto;
                    max-width: 100%;
                    padding: 20px;
                }
            }
        }
        
        /* Mobile view */
        @media (max-width: 767px) {
            .main-container {
                max-width: 100%;
                padding: 10px;
            }
            
            /* On mobile, cart sidebar overlays */
            .page-localmenu .main-container {
                margin: 0 auto;
            }
        }
        
        /* Cart sidebar responsive behavior */
        @media (max-width: 1023px) {
            /* On tablets and mobile, cart sidebar should overlay */
            .ti-cart-sidebar,
            .cart-sidebar {
                position: fixed !important;
                right: -100%;
                transition: right 0.3s ease;
                z-index: 1050;
            }
            
            .ti-cart-sidebar.show,
            .cart-sidebar.show,
            body.cart-sidebar-open .ti-cart-sidebar,
            body.cart-sidebar-open .cart-sidebar {
                right: 0;
            }
            
            /* Add overlay for tablets */
            body.cart-sidebar-open::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1049;
            }
        }