/**
 * Dropdown Fix - Override file to ensure all dropdown menus work correctly
 * This fixes conflicts between multiple dropdown implementations
 */

/* General dropdown containers - target all variants */
.bb-dropdown,
.dropdown,
.catalogue-dropdown,
.media-folder_actions,
.menu-dots {
    position: relative !important;
    display: inline-block !important;
}

/* Toggle buttons for all dropdown types */
.bb-dropdown-toggle,
.dropdown-toggle,
.catalogue-toggle,
.media-folder_action__anchor,
.dots-button {
    background: transparent !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    color: #939597 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dropdown menus for all variants */
body .bb-dropdown-menu,
body .dropdown-menu,
body .catalogue-menu,
body .media-folder_action__list,
body .menu-dropdown {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 9999 !important;
    min-width: 160px !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Override any theme styling with specific high-specificity rule */
body .dropdown:not(.v-select) {
    position: relative !important;
    display: inline-block !important;
    background: transparent !important;
    width: auto !important;
    color: inherit !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Override theme styling for dropdown menus */
body .dropdown:not(.v-select) .dropdown-menu,
body .dropdown:not(.v-select).show .dropdown-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 9999 !important;
    min-width: 160px !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.1) !important;
}

/* Ensure show class works - use high specificity */
.dropdown.show .dropdown-menu,
.bb-dropdown.show .bb-dropdown-menu,
.media-folder_actions.active .media-folder_action__list,
.catalogue-dropdown.show .catalogue-menu,
.menu-dots.active .menu-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Allow hover for catalogue dropdowns */
.catalogue-table .dropdown:hover .dropdown-menu,
.catalogue-table .bb-dropdown:hover .bb-dropdown-menu,
.catalogue-table .catalogue-dropdown:hover .catalogue-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dropdown items */
.dropdown-item,
.bb-dropdown-item,
.media-folder_action__list li a,
.catalogue-menu a,
.menu-dropdown li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 12px !important;
    clear: both !important;
    font-weight: 400 !important;
    color: #212529 !important;
    text-align: inherit !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Hover state for dropdown items */
.dropdown-item:hover,
.bb-dropdown-item:hover,
.media-folder_action__list li a:hover,
.catalogue-menu a:hover,
.menu-dropdown li a:hover {
    background-color: #f8f9fa !important;
    color: #16181b !important;
    text-decoration: none !important;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    .mobile-only[style*="display: none"] {
        display: inline-block !important;
    }
    
    .mobile-only.d-none {
        display: inline-block !important;
    }
    
    .track-listing-table td[data-label="#"] .bb-dropdown,
    .track-listing-table td[data-label="#"] .bb-dropdown-toggle {
        position: static !important;
        display: inline-flex !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }
    
    .track-listing-table td[data-label="#"] .dropdown:not(.v-select) {
        position: static !important;
        display: inline-flex !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        z-index: auto !important;
        width: auto !important;
        color: inherit !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }
    
    .dropdown-menu li,
    .bb-dropdown-menu li {
        list-style: none !important;
    }
    
    .dropdown.show .dropdown-menu, 
    .bb-dropdown.show .bb-dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 99999 !important;
    }

    /* Force dropdown toggle button to be visible */
    .mobile-only .dropdown-toggle,
    .mobile-only .bb-dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        background: transparent !important;
        border: none !important;
    }
    
    /* Make the ellipsis icon more visible */
    .mobile-only .dropdown-toggle .fas.fa-ellipsis-v,
    .mobile-only .bb-dropdown-toggle .bb-icon-f.bb-icon-ellipsis-v {
        font-size: 18px !important;
        color: #555 !important;
        visibility: visible !important;
    }
    
    /* Force dropdown items to display correctly */
    .mobile-only .dropdown-menu .dropdown-item,
    .mobile-only .bb-dropdown-menu .bb-dropdown-item {
        padding: 8px 16px !important;
        font-size: 14px !important;
        color: #333 !important;
    }
    
    /* Super high specificity rule for mobile dropdown menus */
    .mobile-only .dropdown-menu,
    .mobile-only .bb-dropdown-menu,
    .mobile-only.show .dropdown-menu,
    .mobile-only.show .bb-dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 100% !important;
        background-color: white !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        z-index: 999999 !important;
    }

    /* Force dropdown items to have white background and proper padding */
    .dropdown-menu .dropdown-item,
    .bb-dropdown-menu .bb-dropdown-item {
        background-color: white !important;
        padding: 10px 15px !important;
    }
}

/* Desktop-specific adjustments */
@media screen and (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
    
    .mobile-only[style*="display"] {
        display: none !important;
    }
    
    .desktop-only {
        display: block !important;
    }
    
    span.desktop-only {
        display: inline !important;
    }
    
    div.desktop-only {
        display: block !important;
    }
    
    button.desktop-only {
        display: inline-block !important;
    }
}

/* Ellipsis icon styling */
.bb-icon-f.bb-icon-ellipsis-v,
.fas.fa-ellipsis-v {
    font-size: 16px !important;
    color: #666 !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Catalogue and track listing specific adjustments */
.catalogue-table .bb-dropdown,
.catalogue-table .dropdown {
    position: relative !important;
    display: inline-block !important;
    margin-left: auto !important;
    float: right !important;
}

/* Force button to be visible */
button.bb-dropdown-toggle,
button.dropdown-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override table cell styling */
.track-listing-table td {
    overflow: visible !important;
    position: relative !important;
}

/* Make dropdown menu appear when focused */
.dropdown-toggle:focus + .dropdown-menu,
.bb-dropdown-toggle:focus + .bb-dropdown-menu {
    display: block !important;
    z-index: 99999 !important;
}

/* Cell styling */
td[data-label="#"] {
    position: relative !important;
}

/* Override display none for dropdowns with d-none class */
.dropdown.d-none,
.bb-dropdown.d-none,
.dropdown.d-none[style*="display: none"],
.bb-dropdown.d-none[style*="display: none"] {
    display: inline-block !important;
}

/* Ensure show class works for all dropdown variants */
.dropdown.show,
.bb-dropdown.show,
.media-folder_actions.active,
.catalogue-dropdown.show,
.menu-dots.active {
    z-index: 1000 !important;
}

/* Mobile specific override for d-none class */
@media screen and (max-width: 768px) {
    .dropdown.mobile-only.d-none,
    .bb-dropdown.mobile-only.d-none {
        display: inline-block !important;
    }
    
    .dropdown.mobile-only .dropdown-menu,
    .bb-dropdown.mobile-only .bb-dropdown-menu {
        min-width: 180px !important; /* Wider on mobile */
    }
    
    .dropdown-item i.fas,
    .bb-dropdown-item i.bb-icon-f {
        margin-right: 8px !important;
        font-size: 14px !important;
        color: #666 !important;
    }
    
    .track-listing-table .dropdown-menu,
    .track-listing-table .bb-dropdown-menu {
        top: calc(100% + 5px) !important; /* Offset slightly from the toggle */
    }
    
    .track-listing-table .dropdown.show .dropdown-menu,
    .track-listing-table .bb-dropdown.show .bb-dropdown-menu {
        display: block !important;
    }
    
    .track-listing-table tbody td {
        border: none !important;
    }
}

.dropdown.show .dropdown-menu,
.dropdown.active .dropdown-menu,
.dropdown-menu.show {
    display: block !important;
    z-index: 99999 !important;
}

/* Style the dropdown menu content directly */
.dropdown .dropdown-menu,
.bb-dropdown .bb-dropdown-menu {
    background-color: white !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* Desktop view - hide mobile ellipsis icons */
@media screen and (min-width: 769px) {
    .dropdown-toggle .fas.fa-ellipsis-v,
    .bb-dropdown-toggle .bb-icon-f.bb-icon-ellipsis-v {
        display: none !important;
    }
}

/* Force z-index stacking context */
.dropdown-menu,
.bb-dropdown-menu {
    z-index: 999999 !important;
    position: fixed !important; /* Try position:fixed to escape stacking context issues */
    transform: none !important;
}

/* Important rules for mobile dropdown toggles */
@media screen and (max-width: 768px) {
    .mobile-only .dropdown-toggle,
    .mobile-only .bb-dropdown-toggle {
        position: relative !important;
        z-index: 90000 !important;
    }
    
    /* Ensure dropdown menu appears on top of everything */
    .mobile-only.show .dropdown-menu,
    .mobile-only.show .bb-dropdown-menu {
        position: absolute !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
        background-color: white !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        margin-top: 5px !important;
        min-width: 180px !important;
        max-width: 240px !important;
        padding: 5px 0 !important;
    }
    
    /* Override any inline styles that might be added by JavaScript */
    .mobile-only.show .dropdown-menu[style],
    .mobile-only.show .bb-dropdown-menu[style] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force dropdown-item styles */
    .mobile-only .dropdown-menu .dropdown-item,
    .mobile-only .bb-dropdown-menu .bb-dropdown-item {
        display: flex !important;
        align-items: center !important;
        padding: 10px 15px !important;
        color: #333 !important;
        background-color: transparent !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: normal !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }
    
    /* Force hover styles */
    .mobile-only .dropdown-menu .dropdown-item:hover,
    .mobile-only .bb-dropdown-menu .bb-dropdown-item:hover {
        background-color: #f5f5f5 !important;
    }
    
    /* Direct styling for download and info buttons */
    .dropdown-item[data-action="download"],
    .dropdown-item[data-action="more-info"],
    .bb-dropdown-item[data-action="download"],
    .bb-dropdown-item[data-action="more-info"] {
        display: flex !important;
        align-items: center !important;
        color: #333 !important;
        font-size: 14px !important;
        padding: 10px 15px !important;
        background-color: white !important;
    }
    
    /* Force icons to display */
    .dropdown-item i.fas,
    .bb-dropdown-item i.bb-icon-f {
        display: inline-block !important;
        margin-right: 8px !important;
        font-size: 14px !important;
        color: #666 !important;
    }
}

/* Enhanced dropdown menu styles */
.catalogue-menu.dropdown-menu,
.bb-dropdown-menu.catalogue-menu {
    z-index: 999999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* When shown */
.catalogue-dropdown.show .catalogue-menu,
.bb-dropdown.show .catalogue-menu {
    display: block !important;
    pointer-events: auto !important;
}

/* Ensure clickable items */
.catalogue-menu .bb-dropdown-item,
.catalogue-menu a.bb-dropdown-item,
ul.catalogue-menu a.view-release,
ul.catalogue-menu a.delete-release {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1000000 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
}

.catalogue-menu .bb-dropdown-item:hover,
ul.catalogue-menu a.view-release:hover,
ul.catalogue-menu a.delete-release:hover {
    background-color: #f8f9fa !important;
}

.catalogue-menu li {
    pointer-events: auto !important;
}