/* Tailwind CSS Override - Fix dropdown conflicts */

/* Override any Tailwind display classes that might interfere */
.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

/* Ensure our dropdown IDs take precedence over Tailwind */
#userMenu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#userMenu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#mobileUserMenu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#mobileUserMenu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Override any Tailwind positioning that might interfere */
.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

/* Ensure z-index works properly */
.z-50 {
    z-index: 50 !important;
}

.z-1000 {
    z-index: 1000 !important;
}

/* Override any Tailwind visibility classes */
.invisible {
    visibility: hidden !important;
}

.visible {
    visibility: visible !important;
}

/* Override any Tailwind opacity classes */
.opacity-0 {
    opacity: 0 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* Ensure our dropdowns are always on top */
#userMenu,
#mobileUserMenu {
    z-index: 9999 !important;
}

/* Override any Tailwind transform classes */
.transform {
    transform: none !important;
}

.translate-y-0 {
    transform: translateY(0) !important;
}

.translate-y-1 {
    transform: translateY(0.25rem) !important;
}

/* Ensure our dropdown animations work */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-fade-in {
    animation: dropdownFadeIn 0.2s ease-out;
}

/* Force hide dropdowns when not showing */
#userMenu:not(.show),
#mobileUserMenu:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
}

/* Force show dropdowns when showing */
#userMenu.show,
#mobileUserMenu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Additional specificity to override Tailwind */
body #userMenu,
body #mobileUserMenu {
    display: none !important;
}

body #userMenu.show,
body #mobileUserMenu.show {
    display: block !important;
}

/* Ensure dropdowns work in all contexts */
html body #userMenu,
html body #mobileUserMenu {
    display: none !important;
}

html body #userMenu.show,
html body #mobileUserMenu.show {
    display: block !important;
}