/**
 * Custom Select Dropdown Component
 * 
 * This file contains styles for custom styled select dropdowns.
 * It transforms native <select> elements into styled dropdowns
 * with alphabetical sorting and smart positioning.
 * 
 * Structure:
 * - .custom-select-wrapper - Container wrapping the select
 * - .custom-select - Main custom select container
 * - .custom-select-selected - Display area showing selected value
 * - .custom-select-arrow - Dropdown arrow indicator
 * - .custom-select-options - Dropdown options container
 * - .custom-select-option - Individual option item
 * 
 * States:
 * - .custom-select.open - Dropdown is expanded
 * - .custom-select.flip-up - Dropdown opens upward (smart positioning)
 * - .custom-select-option.selected - Currently selected option
 * 
 * Usage:
 * Add data-custom-select attribute to native select elements
 * for automatic initialization via custom-select.js
 * 
 * <select data-custom-select>
 *     <option value="">Select...</option>
 *     <option value="1">Option 1</option>
 * </select>
 * 
 * Requirements: 6.2
 */

/* === Custom Select Wrapper === */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

/* === Custom Select Container === */
.custom-select {
    position: relative;
    width: 100%;
    cursor: pointer;
}

/* === Selected Value Display === */
.custom-select-selected {
    padding: 0.75rem 3rem 0.75rem 1rem;
    border: 4px solid var(--text-dark, #000);
    border-radius: 0;
    background-color: var(--primary-bg, #FFFFFF);
    color: var(--text-dark, #000000);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
    position: relative;
}

.custom-select-selected:hover {
    background-color: var(--secondary-bg, #F5F5F5);
}

/* === Open State === */
.custom-select.open {
    z-index: 99;
}

.custom-select.open .custom-select-selected {
    border-bottom-color: var(--primary-bg, #FFFFFF);
}

/* === Dropdown Arrow === */
.custom-select-arrow {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.3s ease;
    color: var(--text-dark, #000);
}

.custom-select.open .custom-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* === Options Container === */
.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background-color: var(--primary-bg, #FFFFFF);
    border: 4px solid var(--text-dark, #000);
    border-top: none;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: -4px;
    box-sizing: border-box;
}

.custom-select.open .custom-select-options {
    max-height: 250px;
    overflow-y: auto;
    z-index: 99;
}

/* === Flip Upward Positioning === */
.custom-select.open.flip-up .custom-select-selected {
    border-bottom-color: var(--text-dark, #000);
    border-top-color: var(--primary-bg, #FFFFFF);
}

.custom-select.open.flip-up .custom-select-options {
    top: auto;
    bottom: 100%;
    border-top: 4px solid var(--text-dark, #000);
    border-bottom: none;
    margin-top: 0;
    margin-bottom: -4px;
}

/* === Individual Option === */
.custom-select-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--text-dark, #000000);
    font-size: 1rem;
    transition: all 0.2s ease;
    background-color: var(--primary-bg, #FFFFFF);
}

.custom-select-option:hover {
    background-color: var(--text-dark, #000000);
    color: var(--primary-bg, #FFFFFF);
}

.custom-select-option.selected {
    font-weight: 600;
    background-color: var(--secondary-bg, #F5F5F5);
    color: var(--text-dark, #000000);
}

.custom-select-option.selected:hover {
    background-color: var(--text-dark, #000000);
    color: var(--primary-bg, #FFFFFF);
}

/* === Scrollbar Styling === */
.custom-select-options::-webkit-scrollbar {
    width: 8px;
}

.custom-select-options::-webkit-scrollbar-track {
    background: var(--secondary-bg, #F5F5F5);
}

.custom-select-options::-webkit-scrollbar-thumb {
    background: var(--text-dark, #000);
    border-radius: 0;
}

/* === Dark Mode === */
[data-theme="dark"] .custom-select-selected {
    background-color: var(--primary-bg, #000000);
    color: var(--text-dark, #FFFFFF);
    border-color: #FFFFFF;
}

[data-theme="dark"] .custom-select.open .custom-select-selected {
    border-bottom-color: var(--primary-bg, #000000);
}

[data-theme="dark"] .custom-select.open.flip-up .custom-select-selected {
    border-bottom-color: #FFFFFF;
    border-top-color: var(--primary-bg, #000000);
}

[data-theme="dark"] .custom-select-selected:hover {
    background-color: var(--secondary-bg, #1a1a1a);
}

[data-theme="dark"] .custom-select-arrow {
    color: var(--text-dark, #FFFFFF);
}

[data-theme="dark"] .custom-select-options {
    background-color: var(--primary-bg, #000000);
    border-color: #FFFFFF;
}

[data-theme="dark"] .custom-select.open.flip-up .custom-select-options {
    border-top-color: #FFFFFF;
}

[data-theme="dark"] .custom-select-option {
    color: var(--text-dark, #FFFFFF);
    background-color: var(--primary-bg, #000000);
}

[data-theme="dark"] .custom-select-option:hover {
    background-color: var(--text-dark, #FFFFFF);
    color: var(--primary-bg, #000000);
}

[data-theme="dark"] .custom-select-option.selected {
    background-color: var(--secondary-bg, #1a1a1a);
    color: var(--text-dark, #FFFFFF);
}

[data-theme="dark"] .custom-select-option.selected:hover {
    background-color: var(--text-dark, #FFFFFF);
    color: var(--primary-bg, #000000);
}

[data-theme="dark"] .custom-select-options::-webkit-scrollbar-track {
    background: var(--secondary-bg, #1a1a1a);
}

[data-theme="dark"] .custom-select-options::-webkit-scrollbar-thumb {
    background: var(--text-dark, #FFFFFF);
}

/* === Native Select Override (for custom-select enabled selects) === */
select[data-custom-select],
.custom-select-wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--primary-bg, #FFFFFF) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' 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 1rem center !important;
    background-size: 16px !important;
    padding: 0.75rem 3rem 0.75rem 1rem !important;
    border: 4px solid var(--text-dark, #000) !important;
    border-radius: var(--border-radius-sm, 5px) !important;
    color: var(--text-dark, #000000) !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    width: 100% !important;
}

select[data-custom-select]:hover,
.custom-select-wrapper select:hover {
    background-color: var(--secondary-bg, #F5F5F5) !important;
}

select[data-custom-select]:focus,
.custom-select-wrapper select:focus {
    outline: none !important;
    border-color: var(--text-dark, #000) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--primary-bg, #FFFFFF) !important;
}

/* Dark mode for native select override */
[data-theme="dark"] select[data-custom-select],
[data-theme="dark"] .custom-select-wrapper select {
    background-color: var(--primary-bg, #000000) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    color: var(--text-dark, #FFFFFF) !important;
    border-color: #FFFFFF !important;
}

[data-theme="dark"] select[data-custom-select]:hover,
[data-theme="dark"] .custom-select-wrapper select:hover {
    background-color: var(--secondary-bg, #1a1a1a) !important;
}