/* ============================================================================
   KHOÁ MÀN (disable toàn phần) — DÙNG CHUNG TOÀN HỆ THỐNG

   Tín hiệu khoá chỉ nằm ở nền khối và trạng thái các ô nhập; không dựng dải thông báo.

   3 MỨC — chọn theo việc "có mở lại được không":
     .wd-khoa           P3 · khoá TẠM (chờ duyệt / đã duyệt còn hủy duyệt được) — nền lạnh.
                        Ô nhập giữ nền TRẮNG, chữ #64748b (≈5.7:1, đạt AA).
     .wd-khoa.chot      P4 · khoá VĨNH VIỄN (đã thanh toán / đã khóa sổ / đã ký) — rút hết
                        màu bằng grayscale.
     .wd-khoa.xem       P2 · CHỈ XEM (màn tra cứu) — dẹt ô nhập thành text đậm, bỏ khung.

   Ô MIỄN KHOÁ: ô Enter-để-tìm (Mã KCB, Mã BN, quét mã vạch…) vẫn phải gõ được khi màn khoá
   → gắn class `.wd-khoa-tru` hoặc thuộc tính `data-khoa-tru` (helper khoaMan(...,{tru:[...]})
   tự gắn). Ô này giữ nguyên nền trắng chữ đen + viền brand để thấy ngay là "vẫn dùng được".
   Mức `.chot` dùng CSS `filter` nên khối có ô miễn khoá phải dùng mức `.wd-khoa`.

   `!important` ở đây là có chủ đích: CSS của từng module nạp sau file này và có rule
   `input[readonly]` với specificity tương đương.
   ============================================================================ */

:root {
  --khoa-bg:   #f4f6f8;   /* nền khối bị khoá (xám lạnh, khác nền workspace) */
  --khoa-text: #64748b;   /* chữ trong ô bị khoá — trên nền trắng ≈ 5.7:1 (AA) */
}

/* ---- 1. Khung bị khoá ------------------------------------------------- */
.wd-khoa { position: relative; background: var(--khoa-bg); }

/* Ô nhập: GIỮ nền trắng thay vì xám từng ô. Trừ ô miễn khoá.
   CHỈ tô ô THẬT SỰ bị khoá ([disabled]/[readonly] do JS của màn đặt) — ô còn gõ được thì phải
   trông gõ được. Nhờ vậy màn Đăng ký (5 ô tra cứu vẫn mở ở chế độ Xem) không bị tô nhầm. */
.wd-khoa input:is([disabled],[readonly]):not(.wd-khoa-tru):not([data-khoa-tru]),
.wd-khoa select:is([disabled],[readonly]):not(.wd-khoa-tru):not([data-khoa-tru]),
.wd-khoa textarea:is([disabled],[readonly]):not(.wd-khoa-tru):not([data-khoa-tru]) {
  background: var(--surface, #fff) !important;
  color: var(--khoa-text) !important;
  border-color: var(--line, #e5e7eb) !important;
  cursor: not-allowed;
}
.wd-khoa label { color: var(--muted, #475569); }

/* TomSelect: <select> gốc bị ẩn, style phải đặt trên .ts-control */
.wd-khoa .ts-wrapper .ts-control {
  background: var(--surface, #fff) !important;
  color: var(--khoa-text) !important;
  border-color: var(--line, #e5e7eb) !important;
  cursor: not-allowed;
}
.wd-khoa .ts-wrapper .ts-control .item { color: var(--khoa-text) !important; }

/* Ô ngày: icon lịch gọi thẳng flatpickr.open() nên readOnly/clickOpens không chặn được click icon */
.wd-khoa .date-picker-icon,
.wd-khoa .datepicker-icon,
.wd-khoa .fa-calendar-days,
.wd-khoa .fa-calendar { pointer-events: none; opacity: .45; cursor: not-allowed; }

/* Checkbox / radio bị khoá: mờ nhẹ nhưng vẫn thấy đang tick hay không */
.wd-khoa input[type=checkbox]:not(.wd-khoa-tru),
.wd-khoa input[type=radio]:not(.wd-khoa-tru) { opacity: .6; cursor: not-allowed; }

/* ---- 2. Mức CHỐT (P4 — vĩnh viễn không sửa) ---------------------------- */
.wd-khoa.chot > *:not([data-wd-footer]) { filter: grayscale(.85); }

/* ---- 3. Mức CHỈ XEM (P2 — màn tra cứu) -------------------------------- */
.wd-khoa.xem { background: var(--surface, #fff); }
.wd-khoa.xem input:is([disabled],[readonly]):not(.wd-khoa-tru):not([data-khoa-tru]),
.wd-khoa.xem select:is([disabled],[readonly]):not(.wd-khoa-tru):not([data-khoa-tru]),
.wd-khoa.xem textarea:is([disabled],[readonly]):not(.wd-khoa-tru):not([data-khoa-tru]) {
  border: 0 !important;
  background: transparent !important;
  color: var(--text, #0f172a) !important;
  font-weight: var(--fw-semibold, 600) !important;
  padding-left: 0 !important;
  box-shadow: none !important;
  cursor: default;
}
.wd-khoa.xem .ts-wrapper .ts-control {
  border: 0 !important; background: transparent !important; padding-left: 0 !important;
  color: var(--text, #0f172a) !important; box-shadow: none !important;
}
.wd-khoa.xem .ts-wrapper .ts-control .item { color: var(--text, #0f172a) !important; font-weight: var(--fw-semibold, 600); }
.wd-khoa.xem .ts-wrapper .ts-control::after,
.wd-khoa.xem .ts-wrapper.single .ts-control:after { display: none; }   /* bỏ mũi tên xổ */

/* ---- 4. Ô MIỄN KHOÁ (Enter-để-tìm vẫn gõ được) ------------------------ */
.wd-khoa .wd-khoa-tru,
.wd-khoa [data-khoa-tru] {
  background: var(--surface, #fff) !important;
  color: var(--text, #0f172a) !important;
  border-color: var(--brand, #1d6f5c) !important;
  cursor: text !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
.wd-khoa .wd-khoa-tru:focus,
.wd-khoa [data-khoa-tru]:focus { box-shadow: var(--focus-ring, 0 0 0 3px rgba(29,111,92,.24)); }
/* Nút bấm cạnh ô tìm (icon kính lúp) cũng phải sống */
.wd-khoa .wd-khoa-tru button,
.wd-khoa button.wd-khoa-tru { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; }