/* ===================================================================
 * styles-forms.css
 * Purpose: Form, input, select, modal-form styling
 * Extracted from styles.css during the Apr 2026 split (task #23).
 * =================================================================== */
/* Form Styles */
.form-control {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    transition: all 0.3s ease;
}

.form-control:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(245, 179, 1, 0.25);
    color: var(--text-light);
}

/* Ensure better contrast in light mode */
[data-theme="light"] .form-control {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #cccccc;
}

[data-theme="light"] .form-control:focus {
    background-color: #ffffff;
    color: #333333;
}

/* Form select and dropdown styles */
.form-select {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    color: var(--text-light) !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
}

.form-select option {
    background-color: var(--darker-bg) !important;
    color: var(--text-light) !important;
    padding: 8px;
}

/* Dark mode specific styles */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-select option {
    background-color: var(--darker-bg) !important;
    color: var(--text-light) !important;
}

/* Light mode specific styles */
[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc;
}

[data-theme="light"] .form-select option {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Dropdown hover states */
.form-select option:hover,
.form-select option:focus {
    background-color: var(--primary-color);
    color: var(--text-dark);
}

/* Modal form styles */
.modal-content .form-select,
.modal-content .form-control {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.modal-content .form-select option {
    background-color: var(--input-bg-dark);
    color: var(--text-light);
    padding: 8px;
}

[data-theme="light"] .modal-content .form-select,
[data-theme="light"] .modal-content .form-control {
    background-color: var(--input-bg-light);
    color: var(--text-dark);
}

[data-theme="light"] .modal-content .form-select option {
    background-color: var(--input-bg-light);
    color: var(--text-dark);
}