/* Lower z-index ONLY for invite bar to reasonable values */
.announcement-bar,
.invite-bar {
    z-index: 1000 !important;
}

/* Main header and subheader should have correct z-index from Tailwind */
/* DO NOT override header, .z-50, .z-30, .z-40 classes globally! */

/* Ensure no overflow hidden on main containers */
body,
html,
main,
#htmx-full-container,
#page-content,
[x-data] {
    overflow: visible !important;
}

/* CRITICAL: Header creates stacking context (position: fixed + z-index)
   Dropdown menus inside header are limited to this context!
   SOLUTION: Set header z-index HIGHER than subheader so entire header context is above */
header {
    /* Header must be above subheader stacking-wise */
    z-index: 100 !important;
}

/* Universal subheader must be below header */
#subheader {
    z-index: 50 !important;
}

/* Dropdown menus inside header will use z-[9999] but are limited to header's stacking context
   This is OK because header (z-100) is above subheader (z-50) */

/* Dropdown menus must be at absolute top */
.z-\[9999\],
[class*="z-[9999]"] {
    z-index: 9999 !important;
}

/* Modal must be at absolute top */
#modal-invitation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
}

#modal-invitation:not(.hidden) {
    display: block !important;
}

/* Prevent any parent from creating stacking context */
#modal-invitation {
    contain: layout style !important;
}

/* Modal children inherit high z-index */
#modal-backdrop {
    z-index: 2147483646 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

#modal-content {
    z-index: 2147483647 !important;
    position: fixed !important;
}

/* Disable transforms and filters on all elements except modal when modal is open */
body:has(#modal-invitation:not(.hidden)) *:not(#modal-invitation):not(#modal-invitation *) {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
}