/**
 * SMS action-required highlighting — use when the user must complete a step
 * (select a value, click again, etc.) before continuing.
 *
 * JS API: SmsActionRequired (static/js/action-required.js)
 *
 * Typical markup:
 *   <div class="card" id="myFieldGroup">
 *     <label class="form-label sms-action-required__label" for="mySelect">Account</label>
 *     <select class="form-select" id="mySelect"></select>
 *     <div class="form-text" id="myHelp"></div>
 *   </div>
 *
 * Table cell: add class sms-action-required-cell on <td> / <th>.
 */

.sms-action-required {
    border: 2px solid var(--sms-danger);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--sms-danger) 20%, transparent);
}

.sms-action-required__label,
.sms-action-required .sms-action-required__label {
    color: var(--sms-danger);
}

.sms-action-required-control,
.form-control.sms-action-required-control,
.form-select.sms-action-required-control {
    border-color: var(--sms-danger);
    background-color: color-mix(in srgb, var(--sms-danger) 8%, white);
}

.sms-action-required-message,
.form-text.sms-action-required-message {
    color: var(--sms-danger);
    font-weight: 600;
}

.sms-action-required-cell {
    outline: 2px solid var(--sms-danger);
    outline-offset: -2px;
    background-color: color-mix(in srgb, var(--sms-danger) 8%, white);
}

.btn.sms-action-required-cta {
    font-weight: 600;
}