/*
 * validation.css — tô đỏ ô nhập không hợp lệ, dùng chung cho mọi màn hình.
 *
 * Vì sao cần: hệ thống có hai kiểu kiểm tra dữ liệu.
 *   1. Unobtrusive (FluentValidation/DataAnnotations + jquery.validate): chỉ gắn class
 *      'input-validation-error' — Bootstrap 4 của AdminLTE không hiểu class này nên ô nhập
 *      vẫn trắng trơn, người dùng chỉ thấy dòng chữ đỏ nhỏ bên dưới, rất dễ bỏ sót.
 *   2. Kiểm tra tay bằng JS (Job, Request, SyncConfig...): gắn 'is-invalid' của Bootstrap.
 * File này cho hai kiểu ra cùng một kiểu hình: viền đỏ + quầng đỏ khi focus.
 *
 * Đi kèm js/validate-bootstrap.js (gắn thêm 'is-invalid' cho mọi validator).
 * Nạp SAU adminlte.min.css để ghi đè được.
 */

/* ---- 1. Ô nhập thường (input / textarea / select) ---- */
.form-control.input-validation-error,
.custom-select.input-validation-error,
textarea.input-validation-error {
    border-color: #dc3545;
}

.form-control.input-validation-error:focus,
.custom-select.input-validation-error:focus,
textarea.input-validation-error:focus,
.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
}

/* Dòng thông báo của unobtrusive (đặt cạnh ô nhập, không phải .invalid-feedback) */
.field-validation-error {
    display: block;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

/* Ô nhập nằm trong .input-group: tô đỏ luôn phần nút/nhãn dán bên cạnh cho liền mạch */
.input-group > .is-invalid ~ .input-group-append > .input-group-text,
.input-group > .is-invalid ~ .input-group-append > .btn,
.input-group > .input-validation-error ~ .input-group-append > .input-group-text,
.input-group > .input-validation-error ~ .input-group-append > .btn,
.input-group > .input-group-prepend > .input-group-text.is-invalid {
    border-color: #dc3545;
}

/* Thông báo lỗi của Bootstrap nằm sau ô nhập bị ẩn (select2, input-group) vẫn phải hiện */
.form-group > .is-invalid ~ .invalid-feedback,
.form-group > .input-validation-error ~ .invalid-feedback,
.input-group > .is-invalid ~ .invalid-feedback {
    display: block;
}

/* ---- 2. Select2 ---- */
/* Select2 ẩn thẻ <select> gốc và vẽ một <span class="select2"> ngay sau nó, nên class đỏ
   gắn trên select không hiện ra gì. Phải tô vào khung do select2 vẽ. */
select.is-invalid + .select2-container .select2-selection,
select.input-validation-error + .select2-container .select2-selection {
    border-color: #dc3545;
}

select.is-invalid + .select2-container--open .select2-selection,
select.input-validation-error + .select2-container--open .select2-selection,
select.is-invalid + .select2-container--focus .select2-selection,
select.input-validation-error + .select2-container--focus .select2-selection {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
}

/* ---- 3. Checkbox / radio kiểu icheck-bootstrap (AdminLTE) ---- */
.icheck-primary > input.is-invalid + label::before,
.icheck-primary > input.input-validation-error + label::before,
.icheck-danger > input.is-invalid + label::before,
.icheck-success > input.is-invalid + label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before {
    border-color: #dc3545;
}

.icheck-primary > input.is-invalid + label,
.icheck-primary > input.input-validation-error + label {
    color: #dc3545;
}

/* ---- 4. Ô chọn file (custom-file) ---- */
.custom-file-input.is-invalid ~ .custom-file-label,
.custom-file-input.input-validation-error ~ .custom-file-label {
    border-color: #dc3545;
}

/* ---- 5. Khung kéo-thả file (dropzone) khi thiếu file bắt buộc ---- */
.dropzone.is-invalid,
.dropzone.input-validation-error {
    border-color: #dc3545 !important;
}

/* Một số màn hình (tiếp nhận phản ánh, chuyển bước) gắn class riêng 'select2-invalid' cho ô
   select2 — trước đây mỗi view tự khai báo một bản CSS. Giữ ở đây để dùng chung, view khỏi
   khai lại. Kèm luôn ô soạn thảo summernote và cách bắt .invalid-feedback hiện ra. */
.select2-invalid + .select2-container .select2-selection,
.select2-invalid + .select2-container--bootstrap4 .select2-selection {
    border-color: #dc3545 !important;
}

.note-invalid .note-editor.note-frame {
    border-color: #dc3545 !important;
}

.invalid-feedback.d-block {
    display: block !important;
}

/* ---- 6. Dấu * đỏ ở nhãn ô bắt buộc ---- */
/* '.req-star' do js/validate-bootstrap.js chèn theo [data-val-required]; '.required-label' là
   cách viết tay có từ trước (Department, Menu, Role). Để cùng một màu/độ đậm cho khỏi lệch nhau. */
.req-star,
.required-label::after {
    color: #dc3545;
    font-weight: 700;
}

.required-label::after {
    content: " *";
}