/* ============================================================================
   lw-field-error.css — component BÁO LỖI Ô NHẬP dùng chung
   Cặp với public/js/components/lw-field-error.js. Cả 2 nạp toàn cục ở
   layout/basic/header|footer, layout/admin/header, layout/affiliater/header
   ⇒ mọi màn dùng được ngay, không phải @push thêm gì.

   LO TRỌN BỘ BA khi save hụt:  ô sai VIỀN ĐỎ  +  chữ lỗi DƯỚI Ô  +  toast góc
   dưới phải (component tự gọi lwToast.error)  +  con trỏ NHẢY VÀO ô sai đầu tiên.

   HỢP ĐỒNG MARKUP — JS tự gắn, màn KHÔNG viết tay (trừ thẻ data-lw-error-for
   nếu muốn tự chọn chỗ đặt chữ lỗi, vd để Vue giữ quyền in chữ):

       <input class="lwt-control lw-invalid" aria-invalid="true">
       <div class="lw-field-error" data-lw-error-for="tag_name">…câu lỗi…</div>

   VÌ SAO NHÂN ĐÔI CLASS + !important (.lw-invalid.lw-invalid): mỗi màn có một
   file CSS riêng nhắm ô nhập theo kiểu khác nhau, có chỗ tới 0,2,1 (vd
   `.lwt-scope .lwt-tag-row-form input[type="text"]` trong tag-redesign.css) và
   nạp SAU file này. Chỉ nhân đôi class thôi là thua, ô sai không đỏ. Đây là
   trạng thái LỖI dùng chung cho cả app nên cho phép thắng tuyệt đối; màn nào
   thật sự cần đè thì đè lại cũng bằng !important với selector cụ thể hơn.

   Núm chỉnh (đặt lại ở màn, KHÔNG sửa file này):
       --lw-fe-color   màu chữ lỗi + viền (mặc định var(--lw-danger))
       --lw-fe-ring    quầng đỏ quanh ô sai
   ========================================================================= */

:root {
    --lw-fe-color: var(--lw-danger, #E0484D);
    --lw-fe-ring: rgba(224, 72, 77, .18);
}

/* --- ô nhập đang sai ---------------------------------------------------- */
/* Lúc focus vẫn phải đỏ, nếu không ô sẽ nhảy về quầng xanh của .lwt-control:focus
   /.form-control:focus ngay khi component focus vào nó ⇒ mất dấu ô sai. */
.lw-invalid.lw-invalid,
.lw-invalid.lw-invalid:focus {
    border-color: var(--lw-fe-color) !important;
    box-shadow: 0 0 0 3px var(--lw-fe-ring) !important;
    outline: none !important;
}

/* --- chữ lỗi dưới ô ------------------------------------------------------ */
.lw-field-error {
    margin-top: 6px;
    color: var(--lw-fe-color);
    font-family: var(--lw-sans, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    /* nhiều câu lỗi nối bằng \n vẫn xuống dòng đúng; câu dài không phá vỡ grid */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Thẻ rỗng (màn có chừa sẵn chỗ nhưng chưa có lỗi) không được chiếm chiều cao,
   nếu không mọi form đều hở thêm 6px dù chẳng có lỗi nào. */
.lw-field-error:empty {
    display: none;
}