/* ============================================================
   theme-forms.css — Checkbox / radio theo token.

   Trong app này có BA khuôn khác nhau, và chúng cần cách xử lý KHÁC nhau:

   (1) .form-check-input (Bootstrap 5) — control native, NHÌN THẤY được
       -> style trực tiếp lên input.

   (2) .checkbox > input (khuôn của theme, sinh bởi
       Mio.View/.../MioCheckBox.cshtml cho mọi form auto-generate từ [Checkbox],
       và bởi _QuickAddv3.cshtml) — đây là CUSTOM CHECKBOX:
         assets/css/style.css:11349  .checkbox input[type=checkbox] { opacity: 0 }
         assets/css/color-7.css:15451 .checkbox label::before -> ô 19x19 NHÌN THẤY được
         assets/css/style.css:11356  :checked + label::before -> dấu tick (glyph themify)
       -> input phải GIỮ NGUYÊN vô hình. Token hoá `label::before`, KHÔNG style input.
       Đặt width/opacity lên input sẽ làm control native hiện ra chồng lên ô giả
       và đẩy lệch ô đó (đã xảy ra thật, xem git log của file này).

   (3) input[type=checkbox] trơn không thuộc hai nhóm trên — trong repo này là
       `.qa-select-all` của _QuickAddv3 (nằm trong label.qa-master, KHÔNG có tổ tiên
       .checkbox nên vendor không ẩn) -> control native thật, style trực tiếp.

   Không sửa được tại gốc vì mọi luật vendor nêu trên nằm trong wwwroot/assets/css/,
   và MioCheckBox.cshtml thuộc Mio.View (thư viện khung dùng chung).
   ============================================================ */

/* ---------- (1) Bootstrap 5: control native, nhìn thấy được ---------- */
.form-check-input {
    accent-color: var(--primary);
    width: 1rem;
    height: 1rem;
    margin: 0 0.5rem 0 0;
    vertical-align: middle;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-check-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
}

html[data-theme="dark"] .form-check-input {
    background-color: var(--bg-body);
    border-color: var(--border);
}

/* ---------- (3) Control native trơn: accent-color cho dấu tick ----------
   Chỉ đặt accent-color ở phạm vi toàn cục — không đụng kích thước/khoảng cách
   nên không có nguy cơ xô lệch bố cục ở màn khác (datatable, vendor widget).
   KHÔNG có tác dụng lên nhóm (2) vì input đó opacity:0. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

/* .qa-select-all là control native thật -> cho cùng cỡ với ô giả 19px của nhóm (2)
   để hai loại nằm cạnh nhau trong cùng modal không lệch nhau. */
#div-check input.qa-select-all {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---------- (2) Custom checkbox của theme: token hoá Ô GIẢ, không đụng input ----------
   Selector cùng specificity với vendor nhưng file này nạp SAU + có !important nên thắng.
   Dùng `.checkbox` (không phải `.form-group.checkbox`) vì khuôn này xuất hiện ở cả ba nơi:
   Mio.View/MioCheckBox.cshtml và _QuickAddv3.cshtml dùng `form-group checkbox`, còn
   Views/User/Login.cshtml ("Ghi nhớ") chỉ dùng `checkbox` — cả ba đều có <label> là con
   trực tiếp ngay sau <input>. */
.checkbox > label::before {
    background-color: var(--white) !important;
    border-color: var(--border) !important;
}

/* Đã tick: ô đổ màu brand, dấu tick (glyph themify do vendor đặt qua content) màu trắng.
   Giữ #fff vì nền là var(--primary) — màu nhấn, không đổi theo theme. */
.checkbox > input[type="checkbox"]:checked + label::before,
.checkbox > input[type="radio"]:checked + label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    /* Vendor vẽ dấu tick bằng glyph themify (style.css:11356) nhưng _Layout.cshtml
       không nạp themify.css -> glyph không bao giờ render, ô tick chỉ là khối màu đặc.
       Vẽ dấu tick bằng SVG inline để không phụ thuộc icon font nào.
       stroke #fff: nền là var(--primary), màu nhấn không đổi theo theme. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 13px 13px !important;
    /* Dập luôn glyph themify của vendor: font không nạp nên U+E64C render thành tofu
       (một khung chữ nhật) nằm chồng lên dấu tick SVG ở trên. */
    content: "" !important;
    font-family: inherit !important;
}

.checkbox > input:disabled + label::before {
    opacity: 0.55;
    cursor: not-allowed;
}

.checkbox > input:focus-visible + label::before {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Radio trong khuôn (2) phải là hình tròn */
.checkbox > input[type="radio"] + label::before {
    border-radius: 50% !important;
}

/* Label đi kèm — MioCheckBox render <label> ngay sau <input> */
.checkbox > label {
    color: var(--text-main);
    cursor: pointer;
    vertical-align: middle;
}