/* Dropdown Mobile/Tablet Fix - Increase max-height for better visibility */
/* Original issue: Dropdown menu cut off on tablet/mobile requiring scrolling */
/* Additional fix: Remove blur effect that causes readability issues */

/* Mobile/Tablet (below 768px) - Increase from 75% to 85% max-height */
@media not all and (min-width: 768px) {
    .dropdown {
        max-height: none !important; /* Allow full menu height */
        overflow: visible !important;
        z-index: 10002 !important; /* Above sidebar */
        /* Remove blur that causes menu to appear blurred */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(13, 20, 36, 0.99) !important;
    }

    /* Let dropdowns escape nav container clipping */
    #navbar-alignment,
    #navbar-alignment .zn-dropdown {
        overflow: visible !important;
    }

    .dropdown-contents {
        max-height: none !important;
        overflow: visible !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(13, 20, 36, 0.99) !important;
    }
    
    /* Fix dropdown-content container */
    .dropdown-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(13, 20, 36, 0.99) !important;
    }
    
    /* Override the dark-theme blur settings for mobile */
    .zn-dropdown .dropdown,
    .zn-dropdown .\!dropdown,
    .zn-dropdown-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(13, 20, 36, 0.99) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Small mobile devices (below 480px) - Further optimize */
@media (max-width: 480px) {
    .dropdown {
        max-height: 90% !important; /* Even more space on small screens */
    }
}

/* Desktop (768px+) - Increase from 450px to 600px */
@media (min-width: 768px) {
    .dropdown {
        max-height: 600px !important; /* Increased from 450px */
        z-index: 9999 !important;
    }
}

/* Ensure dropdown items are fully visible */
.dropdown-item {
    white-space: nowrap; /* Prevent text wrapping */
    overflow: visible; /* Ensure content isn't clipped */
}

.dropdown-elevated .dropdown-contents {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
    padding: 0.35rem 0.25rem;
}

.dropdown-elevated .dropdown-contents a.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
}

.dropdown-elevated .dropdown-contents a.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Ensure dropdown contents have high z-index in mobile to prevent clipping */
@media not all and (min-width: 768px) {
    .dropdown-contents {
        z-index: 10002 !important;
    }
}