/*! Minimal Bootstrap-like Validation CSS (no layout/reset) */
/* Colors taken from Bootstrap 5: success #198754, danger #dc3545 */

/* ---- Inputs & selects ---- */
/* .form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #198754;
} */

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545;
}

/* .form-select.is-valid,
.was-validated .form-select:valid {
  border-color: #198754;
} */

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: #dc3545;
}

/* ---- Checkboxes & radios ---- */
/* .form-check-input.is-valid,
.was-validated .form-check-input:valid {
  border-color: #198754;
} */

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: #dc3545;
}

/* .form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
  color: #198754;
} */

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
    color: #dc3545;
}

/* ---- Feedback blocks ---- */
.valid-feedback,
.invalid-feedback {
    display: none;
    width: 100%;
    font-size: 0.875em;
    font-weight: bold;
}

/* .valid-feedback { color: #198754; } */
.invalid-feedback {
    color: #dc3545;
}

/* Show feedback after validation */
.form-control.is-valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback,
.was-validated .form-select:valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-feedback {
    display: block;
}

.form-control.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback {
    display: block;
}

/* ラジオボタンのバリデーションメッセージを表示 */
.was-validated dd:has(input[type="radio"][required]:invalid) .invalid-feedback {
    display: block;
}
/* 未選択のときにラジオボタンを赤くする */
.was-validated
    dd:has(input[type="radio"][required]:invalid)
    .form-check
    label::before {
    outline: 1px solid #dc3545;
}
.was-validated dd:has(input[type="radio"][required]:invalid) .form-check label {
    color: #dc3545;
}

/* ---- Tooltip-style feedback (optional) ---- */
.valid-tooltip,
.invalid-tooltip {
    position: absolute;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.875em;
    border-radius: 0.25rem;
    color: #fff;
}

/* .valid-tooltip { background-color: rgba(25, 135, 84, 0.9); } */
.invalid-tooltip {
    background-color: rgba(220, 53, 69, 0.9);
}

.form-control.is-valid ~ .valid-tooltip,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-select.is-valid ~ .valid-tooltip,
.was-validated .form-select:valid ~ .valid-tooltip,
.form-check-input.is-valid ~ .valid-tooltip,
.was-validated .form-check-input:valid ~ .valid-tooltip {
    display: block;
}

.form-control.is-invalid ~ .invalid-tooltip,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-select.is-invalid ~ .invalid-tooltip,
.was-validated .form-select:invalid ~ .invalid-tooltip,
.form-check-input.is-invalid ~ .invalid-tooltip,
.was-validated .form-check-input:invalid ~ .invalid-tooltip {
    display: block;
}

/* ---- Optional: remove default glow on invalid/valid in some browsers ---- */
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: none;
}