/* Custom fixes for form elements to ensure visibility of text */

/* Ensure headings are visible */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #FFFFFF !important;
}

/* Form elements in dark backgrounds should always have light text */
.form-control, 
.custom-select,
.form-select,
.custom-control-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="url"],
input[type="color"],
input[type="tel"],
textarea,
select {
    color: #FFFFFF !important;
}

/* Ensure placeholder text is visible but distinct */
::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Make sure select elements have visible text */
option {
    background-color: var(--third);
    color: #D2D4DA;
}

/* Fix datepicker input colors */
.mantine-DatePickerInput-input {
    color: #FFFFFF !important;
}

/* Ensure form inputs have proper backgrounds */
.form-control,
.custom-select,
textarea {
    background-color: rgba(27, 25, 25, 0.7) !important;
}

/* Fix focus states */
.form-control:focus,
.custom-select:focus,
.form-select:focus {
    color: #FFFFFF !important;
    background-color: rgba(27, 25, 25, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important;
}

/* Make sure radio buttons and checkboxes have visible text */
.form-check-label {
    color: #D2D4DA !important;
}

/* Make sure select dropdowns have readable text */
.form-select option:checked,
.custom-select option:checked {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Style advanced form elements */
.advanced-form-input,
.advanced-form-select {
    color: #D2D4DA !important;
}

/* Make sure badges have visible text */
.badge {
    color: #FFFFFF !important;
}

.badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure all text labels are visible */
label, .form-label, legend, p, span {
    color: #FFFFFF;
}

/* Adjust text opacity for hints and secondary text */
.text-muted, .form-text, small, .small {
    color: rgba(255, 255, 255, 0.6) !important;
}