﻿/* ============ LƯỚI DÙNG CHUNG của Labo (luoiChung — 07-luoi-chung.js), 20/10/2026 ============
   Rời từ lis.css (các luật .lx-luoi chung, 28/09–08/10) lên lõi để UILis và UIQC dùng CÙNG MỘT bộ (chủ dự án 20/10). Tệp này nạp
   SAU các script lưới trong <head> của _MainLayout: 04-grid.js chèn <style> của lõi vào cuối <head> lúc chạy, nên đặt <link> sau
   script là đứng SAU các luật đó — y như khi các luật này còn nằm trong lis.css. CSS của module (lis.css, qc.css) nạp sau nữa.
   Màu theo BIẾN, module đặt biến theo token riêng (lis.css: token LIS, có nền tối); không đặt thì dùng giá trị dự phòng:
     --luoi-nen        nền dòng (cả dòng CHẴN — host để trong suốt — và ô neo)
     --luoi-dong-sua   dòng đã sửa chưa lưu (row-dirty)
     --luoi-dong-moi   dòng thêm mới chưa lưu (row-new)
   luoiChung gắn lớp .luoi-chung cho mọi lưới; .luoi-chung-cho là chỗ giữ được co theo số dòng (tc.co) — 160px chỉ là cỡ lúc chưa đo. */
.luoi-chung-cho { height:160px; }
/* Đệm ô gọn (dòng hai tầng barcode + mã máy vẫn vừa 10 dòng như bảng cũ của LIS). */
.luoi-chung .tabulator-cell { padding-top:5px !important; padding-bottom:5px !important; }
/* Tiêu đề cột: thu phần phụ của tiêu đề lõi (đo 28/09: 68px/cột = vùng mũi tên 25 + đệm 10+10 + khoảng 5 + phễu 18) — không thì khung
   hẹp cắt "Thời gian", "Trạng thái" thành "Thời …". */
.luoi-chung .tabulator-col .tabulator-col-title { padding-right:15px !important; }
.luoi-chung .tabulator-col .grid-head-title { padding-left:6px !important; padding-right:2px !important; gap:3px !important; }
/* Tiêu đề chỉ có ô tích ("Chọn tất cả"): không sắp/lọc nên bỏ hai đệm trên và căn GIỮA như ô tích của dòng — giữ đệm thì lệch trái
   8,5px (chủ dự án 07/10). Hai dạng: ô tích màn tự đặt trong tiêu đề (.grid-head-title) và cột ô tích của lõi (showCheckbox = tc.chonNhieu,
   ô tích nằm THẲNG trong .tabulator-col-title — thiếu dạng này thì lưới QC lệch 8px, chủ dự án 21/10). */
.luoi-chung .tabulator-col .tabulator-col-title:has(> .grid-head-title > input[type=checkbox]),
.luoi-chung .tabulator-col.grid-checkbox-col .tabulator-col-title { padding-right:0 !important; justify-content:center !important; }
.luoi-chung .tabulator-col .grid-head-title:has(> input[type=checkbox]) { padding-left:0 !important; padding-right:0 !important; justify-content:center !important; text-align:center; }
.luoi-chung .tabulator-col .grid-title-text { font-size:12px !important; }
.luoi-chung .tabulator-row.tabulator-group { cursor:pointer; }
/* Dòng CHẴN có nền đặc: host (bootStrapCustom.css) để dòng chẵn trong suốt trừ khi module đặt --tbl-row-stripe. Ô NEO lấy nền của dòng ⇒
   trong suốt thì chữ cột cuộn ngang hiện XUYÊN qua ô neo (soát vòng 3 mapping LIS). */
.luoi-chung { --tbl-row-stripe: var(--luoi-nen, #fff); }
/* Rê chuột: lõi tô dòng :hover KHÔNG !important (04-grid.js) mà dòng CHẴN bị host ép nền !important (sọc ở trên) ⇒ chỉ dòng LẺ sáng lên,
   cách một dòng một (chủ dự án 08/10). Cùng màu với lõi; dòng đang chọn giữ nền riêng của host. Chừa: dòng đã sửa / thêm mới chưa lưu
   (row-dirty, row-new) và dòng lõi "Tô màu" bằng style nội tuyến — luật này !important thắng cả hai, rê chuột là mất màu (soát 08/10). Các
   điều kiện chừa nằm trong :where() để GIỮ độ ưu tiên 0,4,0: luật "đã tích" của màn (vd .lx-kq-grid … lx-row-sel, cùng 0,4,0) thắng nhờ đứng
   SAU — :not() thường đẩy lên 0,6,0. */
.luoi-chung .tabulator-row:hover:not(.tabulator-selected):where(:not(.row-dirty):not(.row-new):not([style*="background"])) { background:color-mix(in srgb, var(--accent,#2563eb) 6%, #fff) !important; }
/* Dòng đã sửa chưa lưu — lõi gắn row-dirty (nó chỉ in nghiêng); ô neo có nền riêng nên tô cả nó. Tông VÀNG (cảnh báo nhẹ), không xanh:
   nền xanh nhạt gần trùng màu dòng đang chọn của lõi — bấm vào dòng là trông như đã sửa. !important: luật dòng chẵn của host cũng
   !important — thiếu thì dòng chẵn đã sửa chỉ tô mỗi ô neo (soát vòng 3 mapping LIS). Dòng thêm mới (row-new) đứng SAU: dòng mới đã gõ
   cũng mang row-dirty nhưng vẫn đọc là "dòng mới". */
.luoi-chung .tabulator-row.row-dirty, .luoi-chung .tabulator-row.row-dirty .tabulator-cell.tabulator-frozen { background:var(--luoi-dong-sua, color-mix(in srgb, #e0a800 16%, #fff)) !important; }
.luoi-chung .tabulator-row.row-new, .luoi-chung .tabulator-row.row-new .tabulator-cell.tabulator-frozen { background:var(--luoi-dong-moi, color-mix(in srgb, #00aa77 12%, #fff)) !important; }
/* Câu chờ/trống/lọc-hết nằm GIỮA PHẦN ĐANG THẤY: Tabulator cho khung chữ rộng bằng phần thấy + dời theo cuộn ngang, nhưng khung ngoài (rộng
   bằng TỔNG các cột) lại căn giữa ⇒ lưới rộng hơn khung thì chữ bị đẩy ra ngoài (soát vòng 4 mapping LIS). */
.luoi-chung .tabulator-tableholder .tabulator-placeholder { justify-content:flex-start !important; }
.luoi-chung .tabulator-placeholder .tabulator-placeholder-contents { box-sizing:border-box; }   /* rộng = phần thấy, kể cả đệm */
/* Vạch xanh dòng đang chọn là bóng của DÒNG — ô neo có nền che mất: vẽ lại ở ô neo đầu. */
.luoi-chung .tabulator-row.tabulator-selected .tabulator-cell.tabulator-frozen:first-child { box-shadow:inset 2px 0 0 var(--accent,#2563eb); }
/* Lưới NHẬP (.luoi-chung-nhap = luoiChung tc.sua) — soát vòng 4 mapping LIS, nhìn bằng ảnh chụp:
   (a) theme bootstrap5 của Tabulator ép dòng cao ≥ 40px mà ô (đệm 5px) chỉ 30–34px: chữ dạt trên, vạch ô neo đứt khúc từng dòng ⇒ dòng cao
   đúng bằng ô; (b) ô đang sửa: host đẩy ô nhập lên 14px + đệm 6px ⇒ chữ nhảy phải và to ra lúc bấm vào — giữ đúng chỗ, đúng cỡ chữ lúc xem;
   (c) ô tích căn giữa dòng chữ. */
.luoi-chung-nhap .tabulator-row { min-height:0 !important; }
.luoi-chung-nhap .tabulator .tabulator-cell.tabulator-editing { padding:5px 10px !important; }   /* .tabulator là phần tử CON của div luoiChung */
.luoi-chung-nhap .tabulator .tabulator-cell.tabulator-editing input { padding:0 !important; font-size:inherit !important; }
.luoi-chung-nhap .tabulator-cell input[type=checkbox] { vertical-align:middle; margin:0; }
/* Lưới đang KHOÁ (lock() của lõi gắn grid-readonly: chưa bấm Sửa / đang lưu): ô tích dùng chung chỉ để xem. */
.luoi-chung.grid-readonly input[type=checkbox][data-luoi-co] { pointer-events:none; opacity:.6; }
/* ============ CHẾ ĐỘ SỬA DÙNG CHUNG (cheDoSua — 07-luoi-chung.js), 20/10/2026 ============
   Lớp dang-sua trên phạm vi (body của màn QC / lớp phủ popup LIS). [data-sua="trong"] ẩn khi KHÔNG nằm trong phạm vi đang sửa — viết
   bằng :not(.dang-sua *) nên trang chưa chạy JS đã ẩn đúng (không nháy nút Lưu / Hủy). Vùng [data-khoa-sua] chặn chuột khi đang sửa
   (JS tắt từng ô cho cả bàn phím). */
[data-sua="trong"]:not(.dang-sua *),
.dang-sua [data-sua="vao"] { display:none !important; }
.dang-sua [data-khoa-sua] { pointer-events:none; opacity:.55; }
