/* CSS-based dropdown fallback - works without JavaScript */
/* This ensures dropdowns can still be opened via hover even if JS breaks */

/* Hide dropdowns by default */
.lorebook-dropdown-menu,
.plugin-dropdown-menu,
.scenario-dropdown-menu,
.account-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Show dropdowns on hover (desktop) */
@media (min-width: 769px) {
    .lorebook-dropdown:hover .lorebook-dropdown-menu,
    .plugin-dropdown:hover .plugin-dropdown-menu,
    .scenario-dropdown:hover .scenario-dropdown-menu,
    .account-dropdown:hover .account-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    
    /* Rotate chevron on hover */
    .lorebook-dropdown:hover .fa-chevron-down,
    .plugin-dropdown:hover .fa-chevron-down,
    .scenario-dropdown:hover .fa-chevron-down,
    .account-dropdown:hover .fa-chevron-down {
        transform: rotate(180deg);
    }
}

/* Show class for JS control */
.lorebook-dropdown-menu.show,
.plugin-dropdown-menu.show,
.scenario-dropdown-menu.show,
.account-dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Rotate chevron when showing */
.fa-chevron-down.rotate {
    transform: rotate(180deg) !important;
}

/* Make dropdown toggles always clickable */
.lorebook-toggle,
.plugin-toggle,
.scenario-toggle,
.account-toggle {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Ensure dropdowns are above other content */
.lorebook-dropdown-menu,
.plugin-dropdown-menu,
.scenario-dropdown-menu,
.account-dropdown-menu {
    z-index: 9999 !important;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Reset all dropdown styles on mobile */
    .lorebook-dropdown-menu,
    .plugin-dropdown-menu,
    .scenario-dropdown-menu,
    .account-dropdown-menu {
        /* Remove all transitions that might cause delays */
        transition: none !important;
        animation: none !important;
    }
    
    /* When show class is added, force visibility */
    .lorebook-dropdown-menu.show,
    .plugin-dropdown-menu.show,
    .scenario-dropdown-menu.show,
    .account-dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
        pointer-events: auto !important;
        height: auto !important;
        overflow: visible !important;
        /* Mobile styling */
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(138, 43, 226, 0.3) !important;
        border-radius: 8px !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Ensure menu items are visible */
    .lorebook-dropdown-menu.show li,
    .plugin-dropdown-menu.show li,
    .scenario-dropdown-menu.show li,
    .account-dropdown-menu.show li {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Disable all hover effects on mobile */
    .lorebook-dropdown:hover .lorebook-dropdown-menu,
    .plugin-dropdown:hover .plugin-dropdown-menu,
    .scenario-dropdown:hover .scenario-dropdown-menu,
    .account-dropdown:hover .account-dropdown-menu {
        display: none !important;
    }
}