/* Reusable Dropdown Styling for Light and Dark Modes */

/* Base dropdown styling */
.form-group select,
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--bg-primary, white);
    color: var(--text-primary, #1f2937);
    transition: all 0.2s ease;
    /* Let natural dropdown styling work */
    /* Let natural dropdown styling work */
    /* Let natural dropdown styling work */
    cursor: pointer;
}

/* Hover state */
.form-group select:hover,
select:hover {
    border-color: var(--primary-color, #3f51b5);
    background-color: var(--bg-secondary, #f8fafc);
}

/* Focus state */
.form-group select:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color, #3f51b5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: var(--bg-secondary, #f8fafc);
}

/* Option styling */
.form-group select option,
select option {
    background: var(--bg-primary, white);
    color: var(--text-primary, #1f2937);
    padding: 0.5rem;
    border: none;
}

/* Dark mode specific improvements */
[data-theme="dark"] .form-group select,
[data-theme="dark"] select,
.dark-mode .form-group select,
.dark-mode select {
    background: var(--input-bg, #334155);
    border-color: var(--border-color, #334155);
    color: var(--text-primary, #f1f5f9);
    /* Let natural dropdown styling work */
}

[data-theme="dark"] .form-group select:hover,
[data-theme="dark"] select:hover,
.dark-mode .form-group select:hover,
.dark-mode select:hover {
    background-color: var(--bg-secondary, #475569);
}

[data-theme="dark"] .form-group select option,
[data-theme="dark"] select option,
.dark-mode .form-group select option,
.dark-mode select option {
    background: var(--input-bg, #334155);
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .form-group select option:hover,
[data-theme="dark"] select option:hover,
.dark-mode .form-group select option:hover,
.dark-mode select option:hover {
    background: var(--bg-secondary, #475569);
}

/* Small dropdown variant */
.form-group select.small,
select.small {
    padding: 0.5rem;
    font-size: 0.8rem;
    padding-right: 2rem;
    /* Let natural dropdown styling work */
}

/* Large dropdown variant */
.form-group select.large,
select.large {
    padding: 1rem;
    font-size: 1rem;
    padding-right: 3rem;
    /* Let natural dropdown styling work */
}

/* Disabled state */
.form-group select:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-disabled, #f1f5f9);
}

[data-theme="dark"] .form-group select:disabled,
[data-theme="dark"] select:disabled,
.dark-mode .form-group select:disabled,
.dark-mode select:disabled {
    background-color: var(--bg-disabled, #1e293b);
}

/* Modal-specific dropdown styling for better consistency */
.modal .form-group select,
.modal select {
    /* Let natural dropdown styling work */
    /* Let natural dropdown styling work */
    /* Let natural dropdown styling work */
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal .form-group select:hover,
.modal select:hover {
    border-color: var(--primary-color, #3f51b5);
    background-color: var(--bg-secondary, #f8fafc);
}

.modal .form-group select option,
.modal select option {
    background: var(--bg-primary, white);
    color: var(--text-primary, #1f2937);
    padding: 0.5rem;
    border: none;
}

/* Dark mode modal dropdowns */
[data-theme="dark"] .modal .form-group select,
[data-theme="dark"] .modal select,
.dark-mode .modal .form-group select,
.dark-mode .modal select {
    /* Let natural dropdown styling work */
}

[data-theme="dark"] .modal .form-group select:hover,
[data-theme="dark"] .modal select:hover,
.dark-mode .modal .form-group select:hover,
.dark-mode .modal select:hover {
    background-color: var(--bg-secondary, #475569);
}

[data-theme="dark"] .modal .form-group select option,
[data-theme="dark"] .modal select option,
.dark-mode .modal .form-group select option,
.dark-mode .modal select option {
    background: var(--input-bg, #334155);
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .modal .form-group select option:hover,
[data-theme="dark"] .modal select option:hover,
.dark-mode .modal .form-group select option:hover,
.dark-mode .modal select option:hover {
    background: var(--bg-secondary, #475569);
}