/* ========================================
   Native Select Override - Design System
   Matches SPC Design System dark theme
   ======================================== */

/* Native Select Element */
select:not(.choices__input):not(.select2-search__field):not(.flatpickr-input),
select.form-select,
select.form-control,
select.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: var(--space-2, 8px) var(--space-8, 32px) var(--space-2, 8px) var(--space-3, 12px);
    font-family: var(--font-sans, inherit);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-normal, 1.5);
    color: var(--text-primary, #fafafa);
    background-color: var(--bg-tertiary, #18181b);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3, 12px) center;
    background-size: 12px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    border-radius: var(--radius-default, 8px);
    box-sizing: border-box;
    min-height: 40px;
    transition: all var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
    cursor: pointer;
}

select:not(.choices__input):not(.select2-search__field):not(.flatpickr-input):hover,
select.form-select:hover,
select.form-control:hover,
select.select:hover {
    border-color: var(--color-primary-300, rgba(8, 52, 189, 0.3));
    background-color: var(--bg-elevated, #1f1f23);
}

select:not(.choices__input):not(.select2-search__field):not(.flatpickr-input):focus,
select.form-select:focus,
select.form-control:focus,
select.select:focus {
    outline: none;
    border-color: var(--color-primary-500, #0834bd);
    box-shadow: 0 0 0 3px var(--color-primary-50, rgba(8, 52, 189, 0.05));
    background-color: var(--bg-elevated, #1f1f23);
}

select:not(.choices__input):not(.select2-search__field):not(.flatpickr-input):disabled,
select.form-select:disabled,
select.form-control:disabled,
select.select:disabled {
    background-color: var(--bg-secondary, #111113);
    border-color: var(--border-color, rgba(255,255,255,0.06));
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-muted, #52525b);
}

/* Select Options */
select option {
    background-color: var(--bg-elevated, #ffffff);
    color: var(--text-primary, #06261b);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    min-height: 36px;
    display: flex;
    align-items: center;
}

select option:hover,
select option:checked,
select option:focus {
    background-color: var(--color-primary-500, #066027);
    color: white;
}

/* Multiple Select */
select[multiple]:not(.choices__input):not(.select2-search__field):not(.flatpickr-input),
select.form-select[multiple],
select.form-control[multiple],
select.select[multiple] {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background-image: none;
    min-height: 80px;
    overflow-y: auto;
}

select[multiple] option {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    margin: var(--space-1, 4px) 0;
    border-radius: var(--radius-sm, 4px);
}

select[multiple] option:checked {
    background-color: var(--color-primary-500, #0834bd);
    color: white;
}

/* Scrollbar for multiple select */
select[multiple]::-webkit-scrollbar {
    width: 8px;
}

select[multiple]::-webkit-scrollbar-track {
    background: var(--bg-secondary, #111113);
    border-radius: 4px;
}

select[multiple]::-webkit-scrollbar-thumb {
    background: var(--bg-elevated, #1f1f23);
    border-radius: 4px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
}

select[multiple]::-webkit-scrollbar-thumb:hover {
    background: var(--bg-card-hover, rgba(255,255,255,0.06));
}

/* Form Group Spacing */
.form-group-ds select,
.form-group select {
    margin-bottom: 0;
}

/* Ensure proper spacing between form groups */
.form-group-ds + .form-group-ds {
    margin-top: var(--space-4, 16px);
}

/* Loading State - Minimal indicator */
select[data-loading="true"] {
    position: relative;
    padding-right: var(--space-10, 40px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E"),
                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%2371717a' stroke-width='2' stroke-dasharray='31.416' stroke-dashoffset='15.708'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 6 6;360 6 6' dur='0.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
    background-position: right var(--space-3, 12px) center, right calc(var(--space-3, 12px) + 16px) center;
}