/* Mobile-specific fixes for navbar and dropdown issues */

/* 1. Fix tap highlight on iOS/Android */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 2. Prevent text selection on interactive elements */
.dropdown-toggle,
.dropdown-item,
.nav-link,
.navbar-toggler,
.btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 3. Fix dropdown positioning on mobile */
@media (max-width: 991px) {
    .dropdown-menu {
        position: absolute !important;
        inset: 0px auto auto 0px !important;
        margin: 0px !important;
        transform: translate(0px, 40px) !important;
    }
    
    /* Ensure dropdown menu is properly positioned relative to the toggle */
    .dropdown {
        position: relative !important;
    }
    
    /* Fix dropdown menu width on mobile */
    #mainNavbar .dropdown-menu {
        min-width: 180px !important;
        max-width: 250px !important;
    }
}

/* 4. Improve touch interactions */
.dropdown-toggle,
.nav-link,
.navbar-toggler {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* 5. Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Remove all hover effects for navbar elements on touch devices */
    #mainNavbar .nav-link.dropdown-toggle:hover,
    #mainNavbar .nav-tab:hover,
    .dropdown-toggle:hover {
        background-color: transparent !important;
        transform: none !important;
    }
    
    /* Only show active/focus states on actual interaction */
    #mainNavbar .nav-link.dropdown-toggle:active,
    #mainNavbar .nav-link.dropdown-toggle:focus {
        background-color: rgba(0, 0, 0, 0.02) !important;
    }
    
    [data-theme="dark"] #mainNavbar .nav-link.dropdown-toggle:active,
    [data-theme="dark"] #mainNavbar .nav-link.dropdown-toggle:focus {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
}

/* 6. Fix dropdown toggle button appearance on mobile */
#mainNavbar .dropdown-toggle::after {
    vertical-align: middle;
}

/* 7. Ensure dropdown items are easily tappable on mobile */
.dropdown-item {
    padding: 0.75rem 1.25rem;
    min-height: 44px; /* Apple's recommended touch target size */
    display: flex;
    align-items: center;
}

/* 8. Fix potential z-index issues with dropdowns */
.dropdown-menu {
    z-index: 1050;
}

/* 9. Smooth transitions for dropdown */
.dropdown-menu {
    transition: opacity 0.15s ease-in-out;
}

/* 10. Fix Bootstrap dropdown issues on iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific fixes */
    .dropdown-menu {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent iOS from zooming on form inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* 11. Ensure navbar toggle button is properly sized for mobile */
.navbar-toggler {
    padding: 0.5rem 0.75rem;
    min-width: 44px;
    min-height: 44px;
}

/* 12. Fix dropdown menu background on mobile */
.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* 13. Remove any conflicting transform on dropdown when open */
.dropdown.show .dropdown-toggle {
    transform: none !important;
}

/* 14. Ensure dropdown items have proper contrast */
.dropdown-item {
    color: var(--text-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 15. Fix mobile navbar collapse animation */
#navbarNav {
    transition: height 0.3s ease-in-out;
}

/* 16. Ensure proper spacing in mobile dropdown */
@media (max-width: 991px) {
    #mainNavbar .dropdown-menu {
        margin-top: 0.5rem !important;
    }
}

/* 17. Fix potential overlap issues - removed background/border to prevent visual jump */

/* 18. Ensure dropdown stays within viewport on mobile */
@media (max-width: 575px) {
    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}

/* 19. Fix focus outline for accessibility */
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* 20. Prevent accidental double-tap zoom */
.dropdown-toggle,
.dropdown-item,
.nav-link {
    touch-action: manipulation;
}