/* Unified Layout CSS - Consistent header positioning and padding across all pages */

/* ===== Z-INDEX HIERARCHY ===== */
/* Main header: highest priority for fixed positioning */
#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    height: 48px !important;
    background-color: white !important;
    border-bottom: 1px solid rgb(229, 231, 235) !important;
}

/* Subheader: below main header */
#subheader-container {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
}

/* Subheader content blocks */
#subheader-container header {
    height: 56px !important;
    background-color: white !important;
    border-bottom: 1px solid rgb(229, 231, 235) !important;
}

/* Products invitation banner (within subheader) */
#subheader-container .bg-indigo-50 {
    height: 40px !important;
    z-index: 29 !important;
}

/* ===== MAIN CONTENT PADDING ===== */
/* Consistent padding using Tailwind classes */

/* Public pages (unauthenticated users): header (48px) + small margin (16px) = 64px */
#main-content.pt-16 {
    padding-top: 64px !important;
}

/* Default pages: header (48px) + subheader (56px) = 104px */
#main-content.pt-26 {
    padding-top: 104px !important;
}

/* Products pages with invitation: header (48px) + subheader (56px) + banner (40px) = 144px */
#main-content.pt-36 {
    padding-top: 144px !important;
}

/* Ensure CSS classes take priority over inline styles */
#main-content.pt-16[style*="padding-top"] {
    padding-top: 64px !important;
}

#main-content.pt-26[style*="padding-top"] {
    padding-top: 104px !important;
}

#main-content.pt-36[style*="padding-top"] {
    padding-top: 144px !important;
}

/* ===== ENSURE PROPER STACKING CONTEXT ===== */
/* Prevent transforms and filters from creating new stacking contexts */
body, html, .htmx-request {
    transform: none !important;
    filter: none !important;
}

/* ===== RESPONSIVE BEHAVIOR ===== */
/* Maintain consistent spacing on all screen sizes */
@media (max-width: 640px) {
    #main-header {
        height: 48px !important;
    }

    #subheader-container {
        top: 48px !important;
    }

    #subheader-container header {
        height: 56px !important;
    }
}

/* ===== DEBUG UTILITIES ===== */
/* Visual indicators for debugging (can be removed in production) */
body[data-debug-layout="true"] #main-header {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

body[data-debug-layout="true"] #subheader-container {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

body[data-debug-layout="true"] #main-content {
    border-top: 2px solid rgba(59, 130, 246, 0.5) !important;
}