/**
 * Accessible Dropdown Styles
 * WCAG 2.1 AA Compliant
 */

/* ==================== Dropdown Wrapper ==================== */

.f-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* ==================== Trigger Button ==================== */

.f-dropdown-trigger {
    /* Uses Bulma .button classes */
    cursor: pointer;
}

.f-dropdown-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Focus indicator (WCAG 2.4.7) */
.f-dropdown-trigger:focus-visible {
    outline: 2px solid #3273dc;
    outline-offset: 2px;
}

/* ==================== Click-Outside Overlay ==================== */

.f-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 999;
}

/* ==================== Dropdown Menu ==================== */

.f-dropdown-menu {
    position: absolute;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 0.5rem 0;
}

/* Horizontal alignment */
.f-dropdown-menu.f-align-left {
    left: 0;
}

.f-dropdown-menu.f-align-right {
    right: 0;
}

/* Position variants */
.f-dropdown-menu.f-position-bottom {
    top: calc(100% + 4px);
}

.f-dropdown-menu.f-position-top {
    bottom: calc(100% + 4px);
}

/* ==================== Menu Items ==================== */

.f-dropdown-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: #4a4a4a;
    transition: background-color 0.15s ease-in-out;

    /* Ensure good contrast (WCAG 1.4.3) */
    background: white;
}

/* Hover state (WCAG 1.4.1) */
.f-dropdown-item:hover {
    background: #f5f5f5;
    color: #363636;
}

/* Highlighted/Active state (keyboard navigation) */
.f-dropdown-item.is-highlighted {
    background: #3273dc;
    color: white;
}

/* Focus indicator (WCAG 2.4.7) */
.f-dropdown-item:focus-visible {
    outline: 2px solid #3273dc;
    outline-offset: -2px;
}

/* Disabled state */
.f-dropdown-item:disabled,
.f-dropdown-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== Accessibility ==================== */

/* High contrast mode support (WCAG 1.4.11) */
@media (prefers-contrast: high) {
    .f-dropdown-menu {
        border: 2px solid currentColor;
    }

    .f-dropdown-item.is-highlighted {
        outline: 2px solid currentColor;
        outline-offset: -2px;
    }
}

/* Reduced motion support (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .f-dropdown-item {
        transition: none !important;
    }
}

/* ==================== Mobile Responsive ==================== */

@media screen and (max-width: 768px) {
    .f-dropdown-menu {
        min-width: 180px;
        max-width: calc(100vw - 2rem);
    }

    .f-dropdown-item {
        padding: 0.875rem 1rem;
        /* Larger tap targets for mobile (WCAG 2.5.5) */
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ==================== Scrollbar Styling ==================== */

/* Custom scrollbar for better aesthetics (optional) */
.f-dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.f-dropdown-menu::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.f-dropdown-menu::-webkit-scrollbar-thumb {
    background: #dbdbdb;
    border-radius: 4px;
}

.f-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #b5b5b5;
}

/* ==================== Dark Mode Support (Optional) ==================== */

@media (prefers-color-scheme: dark) {
    .f-dropdown-menu {
        background: #2b2b2b;
        border-color: #4a4a4a;
        color: #f5f5f5;
    }

    .f-dropdown-item {
        color: #f5f5f5;
        background: #2b2b2b;
    }

    .f-dropdown-item:hover {
        background: #363636;
        color: white;
    }

    .f-dropdown-item.is-highlighted {
        background: #3273dc;
        color: white;
    }

    .f-dropdown-menu::-webkit-scrollbar-track {
        background: #363636;
    }

    .f-dropdown-menu::-webkit-scrollbar-thumb {
        background: #4a4a4a;
    }

    .f-dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: #5a5a5a;
    }
}