/* ==========================================
   BEAUTIFUL SELECT DROPDOWNS
   Global Styling for All Select Menus
   ========================================== */

/* Base Select Styling */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
    padding-right: 2.75rem !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
    position: relative !important;
}

/* Hover State */
select:hover {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Focus State */
select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

/* Active/Clicking State */
select:active {
    transform: translateY(0) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3) !important;
}

/* Options Styling */
select option {
    padding: 14px 16px !important;
    font-weight: 500 !important;
    background: white !important;
    color: #1f2937 !important;
    border-radius: 8px !important;
    margin: 4px 0 !important;
    transition: all 0.2s ease !important;
}

select option:hover {
    background: linear-gradient(to right, #f0f9ff, #dbeafe) !important;
    color: #1e40af !important;
}

select option:checked,
select option:focus {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: white !important;
    font-weight: 700 !important;
}

/* Disabled State */
select:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-color: #f3f4f6 !important;
}

select:disabled:hover {
    border-color: #d1d5db !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Multiple Select Styling */
select[multiple] {
    background-image: none !important;
    padding-right: 0.75rem !important;
    min-height: 150px !important;
}

select[multiple]::-webkit-scrollbar {
    width: 8px;
}

select[multiple]::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

select[multiple]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 10px;
}

select[multiple]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

/* Size Variations */
select.select-sm {
    padding: 0.375rem 2.5rem 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    background-size: 1rem !important;
    background-position: right 0.5rem center !important;
}

select.select-lg {
    padding: 1rem 3rem 1rem 1.25rem !important;
    font-size: 1.125rem !important;
    background-size: 1.5rem !important;
    background-position: right 1rem center !important;
}

/* Color Variations */
select.select-success {
    border-color: #10b981 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}

select.select-success:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2) !important;
}

select.select-error {
    border-color: #ef4444 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}

select.select-error:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
}

select.select-warning {
    border-color: #f59e0b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}

select.select-warning:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2) !important;
}

/* Select with Icons/Emojis in Options */
select option::before {
    margin-right: 8px;
}

/* Animation for opening */
@keyframes selectOpen {
    from {
        opacity: 0;
        transform: scaleY(0.95);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

select:focus option {
    animation: selectOpen 0.2s ease-out;
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
    select {
        color: #374151 !important;
        border-color: #374151 !important;
    }

    select:hover {
        border-color: #6366f1 !important;
    }

    select option {
        background: #1f2937 !important;
        color: #f9fafb !important;
    }

    select option:hover {
        background: linear-gradient(to right, #1e3a8a, #1e40af) !important;
    }
}

/* Loading state (optional) */
select.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'%3E%3C/path%3E%3C/svg%3E") !important;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}