/* NUCLEAR OPTION: Mobile Dropdown Fix with Maximum Specificity */

/* This CSS file provides the most aggressive mobile dropdown fix possible */
/* Load this AFTER Bootstrap CSS to ensure it overrides everything */

@media (max-width: 768px) {
    /* Target every possible dropdown menu combination with maximum specificity */
    html body .dropdown .dropdown-menu.dropdown-menu-end.text-small.show,
    html body ul.dropdown-menu.dropdown-menu-end.text-small.show,
    html body .dropdown-menu.dropdown-menu-end.show,
    html body [class*="dropdown-menu"][class*="show"],
    html body .dropdown-menu.show {
        position: fixed !important;
        top: auto !important;
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
        transform: none !important;
        margin: 0 !important;
        min-width: auto !important;
        max-width: none !important;
        width: calc(100vw - 20px) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        z-index: 9999 !important;
        display: block !important;
        animation: mobileDropdownSlide 0.3s ease-out !important;
    }
    
    /* Even more specific targeting for inline styles */
    html body .dropdown-menu[style*="position: absolute"],
    html body .dropdown-menu[style*="top: 100%"],
    html body .dropdown-menu[style*="right: 0px"],
    html body ul[style*="position: absolute"][class*="dropdown-menu"],
    html body ul[style*="top: 100%"][class*="dropdown-menu"] {
        position: fixed !important;
        top: auto !important;
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
        width: calc(100vw - 20px) !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    /* Animation for mobile dropdown */
    @keyframes mobileDropdownSlide {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Enhance dropdown items for mobile */
    html body .dropdown-menu .dropdown-item {
        padding: 12px 16px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Add backdrop blur effect */
    html body .dropdown-menu.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(3px);
        z-index: -1;
        pointer-events: auto;
    }
    
    /* Prevent body scroll */
    html body.dropdown-open {
        overflow: hidden !important;
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    html body .dropdown-menu.show {
        bottom: 5px !important;
        right: 5px !important;
        left: 5px !important;
        width: calc(100vw - 10px) !important;
    }
}