/* components/overrides/bootstrap-evf-form.css
   Purpose:
   - Provide shared inactive and read-only form-control styling.
   May contain:
   - Shared Bootstrap form selectors that consume app color roles from the EVF color files
   Must not contain:
   - Raw palette definitions
   - Long-lived global EVF tokens
   - Bootstrap token remaps
   - Page-local form tweaks
   Dependencies:
   - Requires colors/bootstrap-evf-colors-base.css and colors/bootstrap-evf-colors-app.css to be loaded first.
   Scope:
   - Shared Bootstrap override selectors only.
*/

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
    color: var(--evf-form-inactive-text);
    background-color: var(--evf-form-inactive-bg);
    border-color: var(--evf-form-inactive-border);
    box-shadow: var(--evf-form-inactive-shadow);
    opacity: 1;
    -webkit-text-fill-color: var(--evf-form-inactive-text);
}

.form-control:disabled::placeholder,
.form-control[readonly]::placeholder,
.form-select:disabled::placeholder,
.form-select[readonly]::placeholder {
    color: var(--evf-form-inactive-placeholder);
    opacity: 1;
}

.form-floating > .form-control:disabled ~ label,
.form-floating > .form-control[readonly] ~ label,
.form-floating > .form-select:disabled ~ label,
.form-floating > .form-select[readonly] ~ label,
.form-floating > :disabled ~ label {
    color: var(--evf-form-inactive-label);
}

.form-floating > .form-control:disabled ~ label::after,
.form-floating > .form-control[readonly] ~ label::after,
.form-floating > .form-select:disabled ~ label::after,
.form-floating > .form-select[readonly] ~ label::after,
.form-floating > textarea:disabled ~ label::after {
    background-color: var(--evf-form-inactive-bg);
}