/*
 * Bootstrap needs-validation 樣式微調(供 web 前台所有 form.needs-validation 表單共用)。
 *
 * 解決的問題:
 *   1. Bootstrap 預設驗證通過會把欄位畫成綠色 — 對前台使用者過度視覺刺激,改成中性配色
 *   2. radio / checkbox 預設 checked 是藍底白勾 / 白點,但 was-validated 後 :valid:checked
 *      會切成綠底 — 統一改回 primary 藍
 *   3. label 文字 :invalid 紅色 / :valid 綠色,我們只蓋掉綠,保留紅(提示使用者哪邊沒選)
 *
 * 重要 NOTE:
 *   `background-image: none` 只能套在 .form-control / .form-select 上,
 *   form-check-input(radio / checkbox)的 :checked 預設白勾 / 白點是用 background-image 畫,
 *   一起擦掉的話會變空白方塊 / 空白圓形。
 */

/* ---- 文字 input / select :valid 不要綠框 + 不要綠勾 indicator ---- */
.needs-validation.was-validated .form-control:valid,
.needs-validation .form-control.is-valid,
.needs-validation.was-validated .form-select:valid,
.needs-validation .form-select.is-valid {
    border-color: var(--bs-border-color);
    background-image: none;
    padding-right: 0.75rem;
}
.needs-validation.was-validated .form-control:valid:focus,
.needs-validation .form-control.is-valid:focus,
.needs-validation.was-validated .form-select:valid:focus,
.needs-validation .form-select.is-valid:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ---- radio / checkbox :valid 只蓋 border-color,保留預設 background-image ---- */
.needs-validation.was-validated .form-check-input:valid,
.needs-validation .form-check-input.is-valid {
    border-color: var(--bs-border-color);
}

/* ---- :checked 一律 primary 藍底(不論 was-validated / :valid 狀態) ---- */
.needs-validation .form-check-input:checked,
.needs-validation.was-validated .form-check-input:valid:checked,
.needs-validation .form-check-input.is-valid:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ---- focus 光暈不要綠 ---- */
.needs-validation .form-check-input:focus,
.needs-validation.was-validated .form-check-input:valid:focus,
.needs-validation .form-check-input.is-valid:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ---- :valid 的 label 文字不要綠;:invalid 的紅色維持 Bootstrap 預設 ---- */
.needs-validation.was-validated .form-check-input:valid ~ .form-check-label,
.needs-validation .form-check-input.is-valid ~ .form-check-label {
    color: inherit;
}

/* ---- radio / checkbox 群組:用「外框紅 + 群組底部訊息」取代「每個 input 各自的紅框 / 紅 label」----
 *
 * 用法:
 *   <div class="form-check-group" th:classappend="${#fields.hasErrors('xxx')} ? 'is-invalid-group'">
 *     <label class="form-check ...">
 *       <input type="radio|checkbox" class="form-check-input" required>
 *       <span class="form-check-label">label</span>
 *     </label>
 *     ...
 *     <div class="invalid-feedback">提示訊息</div>
 *   </div>
 *
 * 觸發紅框 + 訊息的條件:
 *   - server 端拒絕:Thymeleaf 加上 .is-invalid-group
 *   - 客端 was-validated 後:CSS :has(input:invalid) 偵測群組內任一 :invalid */
.form-check-group.is-invalid-group,
.needs-validation.was-validated .form-check-group:has(input:invalid) {
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    padding: 0.5rem;
}
.form-check-group .invalid-feedback {
    flex-basis: 100%;
    margin-top: 0.25rem;
}
.form-check-group.is-invalid-group .invalid-feedback,
.needs-validation.was-validated .form-check-group:has(input:invalid) .invalid-feedback {
    display: block;
}

/* 群組內個別 radio/checkbox 不再用 :invalid 紅(改由外框承擔提示) */
.needs-validation.was-validated .form-check-group .form-check-input:invalid {
    border-color: var(--bs-border-color);
}
.needs-validation.was-validated .form-check-group .form-check-input:invalid:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.needs-validation.was-validated .form-check-group .form-check-input:invalid ~ .form-check-label {
    color: inherit;
}