/* Dropdown Fix CSS - Fixes broken select dropdowns */

/* Reset and fix select dropdown styling */
select.search-filter,
select[name="class"],
select[name="subject"],
select[name="type"] {
    /* Reset any conflicting styles */
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    
    /* Ensure proper dropdown behavior */
    background: white !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 0.95rem !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
    
    /* Fix height and display */
    height: auto !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    
    /* Ensure dropdown arrow is visible */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    
    /* Transition effects */
    transition: all 0.3s ease !important;
}

/* Focus states */
select.search-filter:focus,
select[name="class"]:focus,
select[name="subject"]:focus,
select[name="type"]:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Hover states */
select.search-filter:hover,
select[name="class"]:hover,
select[name="subject"]:hover,
select[name="type"]:hover {
    border-color: #007bff !important;
}

/* Fix for option elements */
select.search-filter option,
select[name="class"] option,
select[name="subject"] option,
select[name="type"] option {
    padding: 8px 12px !important;
    background: white !important;
    color: #2c3e50 !important;
    font-size: 0.95rem !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Hide option lists when not focused */
select.search-filter:not(:focus) option:not(:checked),
select[name="class"]:not(:focus) option:not(:checked),
select[name="subject"]:not(:focus) option:not(:checked),
select[name="type"]:not(:focus) option:not(:checked) {
    display: none !important;
}

/* Specific fixes for header search dropdowns */
.search-filters select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    
    background: white !important;
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    padding: 8px 30px 8px 12px !important;
    font-size: 0.9rem !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
    
    height: auto !important;
    min-height: 36px !important;
    max-height: 36px !important;
    overflow: hidden !important;
    
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px !important;
}

/* Advanced search form dropdowns */
.advanced-search-container select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    
    background: white !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 12px 40px 12px 15px !important;
    font-size: 0.95rem !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
    
    height: auto !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

/* Fix for any conflicting styles */
select {
    /* Force proper select behavior */
    size: 1 !important;
    multiple: false !important;
}

/* Remove any list-style that might be applied */
select option {
    list-style: none !important;
    list-style-type: none !important;
}

/* Ensure proper z-index for dropdowns */
select:focus {
    z-index: 1000 !important;
    position: relative !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    select.search-filter,
    select[name="class"],
    select[name="subject"],
    select[name="type"] {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px !important; /* Touch-friendly */
        padding: 12px 35px 12px 12px !important;
    }
    
    .search-filters select {
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 12px 30px 12px 12px !important;
    }
    
    .advanced-search-container select {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 14px 40px 14px 15px !important;
    }
}

/* Fix for Safari */
@supports (-webkit-appearance: none) {
    select.search-filter,
    select[name="class"],
    select[name="subject"],
    select[name="type"],
    .search-filters select,
    .advanced-search-container select {
        -webkit-appearance: menulist !important;
    }
}

/* Fix for Firefox */
@-moz-document url-prefix() {
    select.search-filter,
    select[name="class"],
    select[name="subject"],
    select[name="type"],
    .search-filters select,
    .advanced-search-container select {
        -moz-appearance: menulist !important;
    }
}

/* Ensure dropdowns work properly in all browsers */
select.search-filter,
select[name="class"],
select[name="subject"],
select[name="type"],
.search-filters select,
.advanced-search-container select {
    /* Force native dropdown behavior */
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: auto !important;
    
    /* Ensure proper sizing */
    box-sizing: border-box !important;
    width: 100% !important;
    
    /* Remove any transforms that might break dropdowns */
    transform: none !important;
    
    /* Ensure proper positioning */
    position: relative !important;
    
    /* Remove any conflicting display properties */
    display: inline-block !important;
}

/* Override any Bootstrap or framework styles that might interfere */
.form-control.search-filter,
.form-control[name="class"],
.form-control[name="subject"],
.form-control[name="type"] {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    height: auto !important;
    line-height: normal !important;
}

/* Specific fix for expanded option lists */
select option {
    display: none !important;
}

select:focus option,
select:active option {
    display: block !important;
}

/* Alternative approach - hide expanded options when not in focus */
select:not(:focus):not(:active) {
    overflow: hidden !important;
    height: auto !important;
    max-height: 50px !important;
}

select:not(:focus):not(:active) option:not(:selected) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}