/* app_layout.css - For fixed header/footer and main content padding */

/* Ensure body is a flex container for full height layout */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Fixed Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure it's above other content */
    /* Height defined in style.css */
}

/* Fixed Footer */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure it's above other content */
    /* Height defined in style.css */
}

/* Main Content Area adjustments for fixed header/footer */
.main-content {
    flex-grow: 1; /* Allows main content to fill available space */
    /* Calculate padding based on your header/footer heights from style.css */
    /* Desktop: Header height ~60px, Footer height ~60px, Ad Bar height ~80px */
    padding-top: 60px; /* Matches fixed header height */
    padding-bottom: calc(60px + 80px); /* Footer height + Ad bar height */
    overflow-y: auto; /* Allows main content to scroll independently */
    -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
    box-sizing: border-box; /* Crucial for padding calculation */
}

/* Ad Banner position adjustment for fixed footer */
.bottom-ad-bar {
    position: fixed; /* Ensure it's fixed */
    /* Bottom position defined in style.css relative to footer */
    /* Height defined in style.css */
    left: 0;
    width: 100%;
    z-index: 999; /* Below header/footer, above main content */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Add opacity transition */
}

/* Message Box and Loading Overlay for general feedback */
/* Ensure they are fixed and have high z-index */
.message-box {
    position: fixed;
    top: calc(60px + 0.5rem); /* Below header + a small gap */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001; /* Above header/footer */
    /* Your existing styles for width, padding, etc. will apply */
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002; /* Highest z-index */
}

/* Responsive adjustments for fixed elements */
@media (max-width: 768px) {
    .main-content {
        /* Mobile: Header height ~50px, Footer height ~50px, Ad Bar height ~70px */
        padding-top: 50px; /* Matches mobile header height */
        padding-bottom: calc(50px + 70px); /* Mobile Footer height + Mobile Ad bar height */
    }
    .message-box {
        top: calc(50px + 0.5rem); /* Adjust for mobile header */
    }
}