/**
 * Direct CSS fix for dropdown arrows
 * This CSS uses !important to force the correct behavior
 */

/* Force dropdown arrow rotation */
.dropdown-arrow {
    transition: transform 0.3s ease !important;
}

/* When dropdown is open, rotate the arrow */
.nav-dropdown > button.active .dropdown-arrow,
.nav-dropdown > button.bg-gray-100 .dropdown-arrow,
.nav-dropdown > button.text-gray-900 .dropdown-arrow {
    transform: rotate(180deg) !important;
}

/* Ensure dropdown content visibility */
.nav-dropdown > button.active + .dropdown-content,
.nav-dropdown > button.bg-gray-100 + .dropdown-content,
.nav-dropdown > button.text-gray-900 + .dropdown-content {
    display: block !important;
}

/* Make dropdown buttons explicitly clickable */
.nav-dropdown > button {
    cursor: pointer !important;
}

/* Make dropdown arrows non-clickable */
.dropdown-arrow {
    pointer-events: none !important;
}

/* Fix for Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .dropdown-arrow {
            will-change: transform !important;
        }
    }
}

/* Fix for Firefox */
@-moz-document url-prefix() {
    .dropdown-arrow {
        transition: transform 0.3s ease !important;
    }
}

/* Fix for IE and Edge */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown-arrow {
        transition: transform 0.3s ease !important;
    }
}