/* =====================================================================================
   LỚP GIAO DIỆN MỚI (bản thử) — nạp SAU site.css, chỉ CỘNG THÊM, không sửa file cũ.
   Gồm 7 hạng mục nâng cấp theo chuẩn phòng điều khiển hạng nhất (High-Performance HMI):
     1. Kỷ luật màu: bình thường = trầm/xám; màu mạnh (đỏ/hổ phách) chỉ cho BẤT THƯỜNG.
     2. Thanh cảnh báo thường trực (CSS ở đây, HTML ở _ThanhCanhBao, JS ở giao-dien-moi.js).
     3. Chế độ "xem dày" cho trang Điều khiển.
     4. Xu hướng tại chỗ (sparkline — CSS hỗ trợ, dữ liệu ở view).
     5. An toàn mù màu (hình + màu) và Chế độ tối.
     6. Menu gọn hơn (giữ phẳng theo ý người dùng, chỉ làm nhẹ thị giác).
     7. Bộ token dùng chung (biến CSS) để nhất quán.

   Muốn tắt hẳn lớp này: bỏ 2 dòng <link>/<script> giao-dien-moi trong _Layout.
   ===================================================================================== */

/* ---------- 7) BỘ TOKEN DÙNG CHUNG ---------- */
:root {
    --gd-nen:        #eceff3;   /* nền vùng làm việc — xám trung tính, đỡ chói */
    --gd-the:        #ffffff;   /* nền thẻ/bảng */
    --gd-vien:       #d7dde3;
    --gd-chu:        #1f2933;
    --gd-chu-mo:     #6b7681;
    --gd-nhan:       #0f6b6b;   /* xanh cổ vịt — GIỮ làm màu thương hiệu, dùng CÓ CHỪNG MỰC */

    /* Màu trạng thái — bình thường TRẦM, bất thường MẠNH */
    --gd-ok:      #2f7d5b;      /* đang chạy tốt — lục trầm (không chói) */
    --gd-ok-nen:  #e7f1ec;
    --gd-tat:     #7b848d;      /* tắt/nghỉ — xám */
    --gd-tat-nen: #eceef1;
    --gd-canhbao: #b9770b;      /* cảnh báo — hổ phách */
    --gd-canhbao-nen:#fbf1df;
    --gd-loi:     #c0392b;      /* lỗi/mất kết nối — đỏ (màu ĐƯỢC PHÉP nổi nhất) */
    --gd-loi-nen: #f8e6e3;
}

/* ---------- 1) KỶ LUẬT MÀU: làm dịu nền, giữ dữ liệu gần đơn sắc ---------- */
body:not(.login-body) { background-color: var(--gd-nen); }

/* Huy hiệu trạng thái: bình thường TRẦM lại, lỗi/cảnh báo GIỮ mạnh + IN ĐẬM để nổi.
   (Ghi đè các badge Bootstrap đang dùng cho trạng thái trên toàn hệ thống.) */
.badge.bg-success { background-color: var(--gd-ok) !important; }
.badge.bg-secondary { background-color: var(--gd-tat) !important; }
.badge.bg-warning { background-color: var(--gd-canhbao) !important; color: #fff !important; }
.badge.bg-danger  { background-color: var(--gd-loi) !important; font-weight: 700; }

/* ---------- 5a) AN TOÀN MÙ MÀU: trạng thái phân biệt bằng HÌNH, không chỉ bằng màu ----------
   Thêm một dấu hình học nhỏ trước chữ trong huy hiệu trạng thái. Người mù màu đỏ–lục vẫn
   phân biệt được: ● đang chạy · ○ tắt · ■ cảnh báo · ▲ lỗi. */
.badge.bg-success::before { content: "\25CF\00A0"; }  /* ● */
.badge.bg-secondary::before { content: "\25CB\00A0"; } /* ○ */
.badge.bg-warning::before { content: "\25A0\00A0"; }   /* ■ */
.badge.bg-danger::before  { content: "\25B2\00A0"; }   /* ▲ */
/* Không thêm hình cho huy hiệu ĐẾM SỐ (chỉ là con số, không phải trạng thái). */
.badge.badge-so::before, .badge.khong-hinh::before { content: none !important; }

/* ---------- 2) HUY HIỆU CẢNH BÁO nhỏ gọn ở GÓC DƯỚI PHẢI ----------
   Gọn, không che nội dung. Chỉ hiện SỐ sự cố; bấm sang trang xử lý; rê chuột hiện tóm tắt.
   Không "hét" cả một dải ngang như trước, nhưng vẫn nhấp nháy đủ để chú ý. */
#thanhCanhBao {
    display: none;                 /* JS bật khi có sự cố */
    position: fixed;
    right: 18px; bottom: 18px;
    /* 1035 chứ không phải 1050: 1050 đúng bằng lớp phủ mờ của modal, nên badge lúc thì nổi trên
       lúc thì chìm dưới tuỳ thứ tự vẽ; và nó nổi trên cả khung chat trợ lý (1041) dù hai thứ chồng
       lên nhau ở góc phải dưới. 1035 vẫn trên thanh điều hướng (1030) và dưới mọi hộp thoại. */
    z-index: 1035;
    background: var(--gd-loi);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    overflow: hidden;
    font-weight: 600;
}
#thanhCanhBao.hien { display: inline-flex; align-items: stretch; }
#thanhCanhBao .tcb-chinh {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem;
    color: #fff; text-decoration: none; white-space: nowrap;
}
#thanhCanhBao .tcb-chinh:hover { background: rgba(0,0,0,.12); }
#thanhCanhBao .tcb-so { font-size: 1.05rem; font-weight: 800; line-height: 1; }
#thanhCanhBao .tcb-nhan { opacity: .95; }
#thanhCanhBao .tcb-nhipnhay { animation: tcb-nhay 1.4s ease-in-out infinite; }
@keyframes tcb-nhay { 0%,100%{opacity:1} 50%{opacity:.35} }
#thanhCanhBao .tcb-an {
    background: rgba(0,0,0,.16); border: 0; color: #fff;
    width: 28px; cursor: pointer; opacity: .85;
}
#thanhCanhBao .tcb-an:hover { opacity: 1; background: rgba(0,0,0,.32); }

/* ---------- 4) SPARKLINE (xu hướng tại chỗ) ---------- */
.sparkline { display: inline-block; vertical-align: middle; }
.sparkline svg { display: block; }

/* ---------- 6) MENU GỌN HƠN (giữ phẳng, chỉ làm NHẸ thị giác) ----------
   Không đổi sang menu thả xuống (người dùng đã chọn menu phẳng). Chỉ giảm "độ ồn":
   thanh menu bớt bóng, khoảng cách chữ đều hơn. */
.navbar.bg-primary { box-shadow: 0 1px 0 rgba(0,0,0,.15) !important; }

/* ===================================================================================
   5b) CHẾ ĐỘ TỐI (dark HMI) — cho ca đêm, đỡ mỏi mắt. Bật bằng nút; nhớ trong localStorage.
   Ưu tiên: nút bấm data-theme trên <html> thắng; nếu chưa chọn thì theo hệ điều hành.
   =================================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gd-nen: #12161b; --gd-the: #1b2129; --gd-vien: #2c343d;
        --gd-chu: #e6eaee; --gd-chu-mo: #9aa4ae;
    }
}
:root[data-theme="dark"] {
    --gd-nen: #12161b; --gd-the: #1b2129; --gd-vien: #2c343d;
    --gd-chu: #e6eaee; --gd-chu-mo: #9aa4ae;
}

/* Áp token tối lên các bề mặt chính. Nền body đã tự theo --gd-nen (rule body ở đầu file),
   nên chỉ cần khai màu chữ + các bề mặt. Dùng !important vì phải thắng site.css. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] body { color: var(--gd-chu); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .list-group-item {
    background-color: var(--gd-the) !important;
    color: var(--gd-chu);
    border-color: var(--gd-vien) !important;
}
:root[data-theme="dark"] .table { color: var(--gd-chu); border-color: var(--gd-vien); }
:root[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--gd-chu); border-color: var(--gd-vien) !important; }
:root[data-theme="dark"] .table-light > :not(caption) > * > *,
:root[data-theme="dark"] thead.table-light th { background-color: #232b34 !important; color: var(--gd-chu) !important; }
:root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #232b34 !important; }
:root[data-theme="dark"] .bg-light { background-color: #232b34 !important; color: var(--gd-chu); }
:root[data-theme="dark"] .text-muted { color: var(--gd-chu-mo) !important; }
/* "-" xám của thiết bị mất kết nối (control-menu.js) dùng text-body-tertiary = màu chữ Bootstrap
   SÁNG-nền ở 50%: trên nền tối ra gần như đen trên đen, ô số liệu trông như TRỐNG (đo 14/10/2026 ở
   trang Chi tiết tủ, chế độ tối). Người trực đọc "trống" thành "chưa nạp xong" chứ không phải
   "mất kết nối". */
/* Lần 12 (22/10/2026): #7a848e cũ chỉ đạt 4,26:1 trên nền thẻ #1b2129 và 3,76:1 trên #232b34 (ô số của
   Chi tiết tủ). #8c96a0 đạt 6,04 / 5,39 / 4,76:1 trên #12161b / #1b2129 / #232b34, vẫn mờ hơn
   --gd-chu-mo (#9aa4ae) nên "mất kết nối" còn khác "đọc được". */
:root[data-theme="dark"] .text-body-tertiary { color: #8c96a0 !important; }
/* Chữ màu trạng thái ở chế độ tối (lần 12, 22/10/2026). Màu Bootstrap #dc3545 / #198754 / #6c757d dành
   cho nền sáng: trên ba nền tối #12161b / #1b2129 / #232b34 chỉ được 4,01 / 3,58 / 3,16:1 (đỏ, lục) và
   ~3,9 / 3,46 / ~3,1:1 (xám). Thấp nhất là nhãn phạm vi "Tất cả khu vực" ở thanh lệnh hàng loạt của
   /Control và Tổng quan (đỏ trên .bg-light #232b34, 3,16:1) — đúng chữ báo lệnh đi xa nhất. Dùng màu
   Bootstrap tự dùng cho chế độ tối như GD10-4: #ea868f 5,66:1, #75b798 6,13:1, xám theo --gd-chu-mo 5,66:1
   ở nền khó nhất. CHỪA nền nhạt (bg-*-subtle, .alert): các nền đó không đổi ở chế độ tối nên chữ đậm cũ
   mới đúng (biểu tượng tròn ở thẻ Tổng quan là bg-danger-subtle text-danger). */
:root[data-theme="dark"] .text-danger:not([class*="-subtle"]):not(.alert *):not([class*="-subtle"] *) { color: #ea868f !important; }
:root[data-theme="dark"] .text-success:not([class*="-subtle"]):not(.alert *):not([class*="-subtle"] *) { color: #75b798 !important; }
:root[data-theme="dark"] .text-secondary:not([class*="-subtle"]):not(.alert *):not([class*="-subtle"] *),
:root[data-theme="dark"] .stat-label { color: var(--gd-chu-mo) !important; }
/* Huy hiệu xám (bg-secondary: "0/4 sáng", số đếm, cờ quyền): chữ trắng trên --gd-tat #7b848d chỉ 3,80:1.
   Ở chế độ tối nền trầm xuống #656e77 → 5,19:1; vẫn tách khỏi nền thẻ (3,12:1) nên huy hiệu không chìm. */
:root[data-theme="dark"] .badge.bg-secondary { background-color: #656e77 !important; }
/* Huy hiệu hổ phách (bg-warning: "thiếu dung lượng ắc quy" ở Cân đối pin, "GW cũ", "Nháp"): chữ trắng trên
   --gd-canhbao #b9770b chỉ 3,68:1 (đo 29/10/2026, rà soát lần 3 B L3B-1). Cùng cách huy hiệu xám ngay trên: ở chế độ
   tối trầm nền xuống #9a630a → 5,04:1, vẫn tách khỏi nền thẻ #1b2129 (3,21:1). */
:root[data-theme="dark"] .badge.bg-warning { background-color: #9a630a !important; }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: #232b34; color: var(--gd-chu); border-color: var(--gd-vien);
}
:root[data-theme="dark"] .form-control::placeholder { color: #7a848e; }
/* Ô bị KHOÁ phải trông khác ô mở (GD10-2, 22/10/2026). Luật nền #232b34 ở trên bắt cả :disabled nên
   ở chế độ tối 5 ô mốc khoá (ĐK9-2), ô khu vực khoá khi Sửa tủ (BM9-1), ô nhịp FW 25 có nền y hệt
   ô gõ được. Ô [readonly] (tên/ghi chú kịch bản tủ có phần ẩn, BM9-2) thì ở CẢ HAI chế độ trông như
   ô mở: bấm vào gõ không ra chữ, người dùng tưởng phần mềm treo. Bootstrap cố ý để readonly giống ô
   thường, nhưng ở đây readonly luôn có nghĩa "bị khoá theo quyền", nên cho dáng như disabled.
   Tối: nền #171c22 chìm dưới nền thẻ #1b2129 (ô mở nổi lên #232b34), viền #262d35 mờ hơn viền ô mở
   #2c343d, chữ #9aa4ae vẫn đọc được 6,77:1. flatpickr chạy allowInput nên ô ngày không mang readonly. */
.form-control[readonly] { background-color: var(--bs-secondary-bg); cursor: not-allowed; }
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-select:disabled,
:root[data-theme="dark"] .form-control[readonly] {
    background-color: #171c22; color: var(--gd-chu-mo); border-color: #262d35; cursor: not-allowed;
}
/* Tom Select chỉ đọc trạng thái disabled của <select> LÚC DỰNG; mã trang khoá ô sau đó bằng
   sel.disabled = true (t_RegionId ở Sửa tủ, ô loại/mốc kịch bản tủ có phần ẩn) thì khung Tom Select
   vẫn mở, chọn được, mà giá trị rơi vào <select> bị khoá nên không được gửi. Khung nằm NGAY SAU
   <select> gốc, nên bắt theo trạng thái thật của <select> và chặn bấm. Nền ở chế độ sáng bằng đúng
   nền Bootstrap tô cho <select> disabled khi chưa bị Tom Select che. */
select.tomselected:disabled + .ts-wrapper { pointer-events: none; background-color: var(--bs-secondary-bg); }
:root[data-theme="dark"] select.tomselected:disabled + .ts-wrapper,
:root[data-theme="dark"] .ts-wrapper.disabled { background-color: #171c22; border-color: #262d35; }
:root[data-theme="dark"] select.tomselected:disabled + .ts-wrapper .ts-control,
:root[data-theme="dark"] .ts-wrapper.disabled .ts-control { background-color: #171c22; border-color: #262d35; color: var(--gd-chu-mo); opacity: 1; }
:root[data-theme="dark"] select.tomselected:disabled + .ts-wrapper .ts-control .item,
:root[data-theme="dark"] .ts-wrapper.disabled .ts-control .item { color: var(--gd-chu-mo); }
:root[data-theme="dark"] .input-group-text { background-color: #2a323b; color: var(--gd-chu-mo); border-color: var(--gd-vien); }
:root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--gd-vien); }
:root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom { border-color: var(--gd-vien) !important; }
:root[data-theme="dark"] .btn-outline-secondary { color: #c7ccd2; border-color: #3a434d; }
/* Nút viền đỏ / xanh lá ở chế độ tối (GD10-4, 22/10/2026). Màu Bootstrap #dc3545 và #198754 dành cho
   nền sáng: trên nền tối chỉ đạt 4,01:1 (#12161b), 3,58:1 (#1b2129), 3,16:1 (#232b34). Thẻ <a> trước
   lần 10 ăn ké màu cổ vịt của luật `a`, nay chừa .btn nên rơi về màu này ("Khoá vận hành", "Xuất Excel",
   "Nhập Excel", "Tải tệp mẫu"). Dùng màu Bootstrap tự dùng cho chế độ tối của nó: #ea868f đạt
   7,18 / 6,41 / 5,66:1, #75b798 đạt 7,77 / 6,93 / 6,13:1 trên ba nền trên. Đặt bằng biến nên áp
   chung cho <a> và <button>. Rê chuột / đang bấm giữ nền đặc Bootstrap, chữ trắng 4,53:1. */
:root[data-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ea868f; --bs-btn-border-color: #ea868f;
    --bs-btn-disabled-color: #ea868f; --bs-btn-disabled-border-color: #ea868f;
}
:root[data-theme="dark"] .btn-outline-success {
    --bs-btn-color: #75b798; --bs-btn-border-color: #75b798;
    --bs-btn-disabled-color: #75b798; --bs-btn-disabled-border-color: #75b798;
}
:root[data-theme="dark"] .alert-secondary { background-color: #232b34; color: var(--gd-chu); border-color: var(--gd-vien); }
/* Liên kết chữ trên nền thẻ tối: xanh cổ vịt sáng. CHỪA mọi thẻ <a> đã có NỀN MÀU riêng (GD9-1,
   GD9-2, 22/10/2026). Luật `a` trơn (đặc hiệu 0,2,1) đè màu chữ của Bootstrap (0,1,0) nên:
   - menu chính (.navbar .nav-link, .navbar-brand) ra #4bb3b3 trên nền #0b4f4f = 3,74:1, cả thanh
     menu nhoè ở MỌI trang khi bật chế độ tối (chế độ sáng là chữ trắng);
   - nút đặc là thẻ <a> (.btn-primary "Đi tới trang báo cáo", nút VI/EN trang đăng nhập quản trị)
     ra #4bb3b3 trên #0f6b6b = 2,52:1;
   - huy hiệu và mục .active (dropdown/list-group/phân trang) cũng tự tô nền màu.
   :where() giữ đặc hiệu đúng 0,2,1 như cũ: viết :not() trần thì mỗi lớp trong đó cộng thêm đặc hiệu,
   luật này sẽ thắng cả các luật riêng như `.phan-trang .page-link` (site.css) vốn đang đúng.
   Chừa cả nút +/− của bản đồ (.leaflet-bar a, GD10-5): nền Leaflet vẫn trắng ở chế độ tối, #4bb3b3 trên
   #fff chỉ 2,50:1; trả về chữ đen của Leaflet, 21:1. */
:root[data-theme="dark"] a:where(:not(.btn, .badge, .active, .navbar .nav-link, .navbar-brand, .leaflet-bar a)) { color: #4bb3b3; }
/* Chữ ghi nguồn bản đồ ("Leaflet", "OpenStreetMap", "CARTO", GD10-5): nền rgba(255,255,255,.8) phủ lên
   ảnh bản đồ. #4bb3b3 ra 2,36:1 trên #f8f8f8; màu gốc Leaflet #0078a8 đạt 4,65:1 trên nền sáng nhưng
   chỉ 3,08:1 khi ảnh nền phía dưới tối (nền ô xuống #ccc). #00567a đạt 7,57:1 trên #f8f8f8 và 5,01:1
   trên #ccc. Đặc hiệu 0,3,1 thắng luật `a` ở trên (0,2,1). */
:root[data-theme="dark"] .leaflet-control-attribution a { color: #00567a; }
/* Chữ "đang chờ / chưa thành công" (.text-warning-emphasis) là màu Bootstrap dành cho nền SÁNG
   (#664d03); phần mềm dùng data-theme riêng chứ không data-bs-theme nên Bootstrap không đổi biến
   này: trên nền thẻ tối ra 2,03:1 (/Monitor/LenhDaGui "Chưa thành công", /BaoTri "chờ bảo hành",
   /CanDoiPin, kết quả ở /Report). Chừa huy hiệu nền nhạt (bg-*-subtle) — nền đó vẫn sáng ở chế độ
   tối nên chữ đậm cũ mới đúng. #ffda6a là màu Bootstrap tự dùng cho chế độ tối của nó. */
:root[data-theme="dark"] .text-warning-emphasis:not([class*="-subtle"]) { color: #ffda6a !important; }
/* Thanh menu giữ nền xanh cổ vịt cả ở chế độ tối (nhận diện thương hiệu), chỉ đậm hơn chút. */
:root[data-theme="dark"] .navbar.bg-primary { background-color: #0b4f4f !important; }
/* Bản đồ nền tối: hơi giảm sáng ảnh nền cho đỡ chói ban đêm. */
:root[data-theme="dark"] .leaflet-tile { filter: brightness(.85) contrast(1.02); }

/* Nút bật/tắt chế độ tối và xem dày trên thanh menu */
.gd-nut { }
.navbar .gd-nut.btn { padding: .2rem .5rem; }

/* =========================================================================
   Ô CHỌN CÓ TÌM KIẾM (Tom Select) — DÁNG cho gọn đẹp, dễ nhập.
   Sửa lỗi: chữ đã chọn bị XUỐNG DÒNG khi ô hẹp -> cho MỘT DÒNG, thừa thì cắt "…".
   ========================================================================= */
.ts-wrapper { min-width: 150px; }
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-control > .item {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Cỡ nhỏ (form-select-sm): cao & chữ khớp các ô nhập cạnh bên cho hàng lọc thẳng đều. */
.ts-wrapper.form-select-sm .ts-control {
    min-height: calc(1.5em + .5rem + 2px);
    padding-top: .15rem; padding-bottom: .15rem; font-size: .875rem;
}
/* Con trỏ gõ tìm: rõ ràng, không đội chữ đã chọn. */
.ts-wrapper.single.input-active .ts-control { cursor: text; }
.ts-control input::placeholder { color: #98a1ab; }
.ts-dropdown .option { padding: .35rem .65rem; }
.ts-dropdown .active { background: #0f6b6b; color: #fff; }

/* =========================================================================
   CHẾ ĐỘ TỐI — BỔ SUNG cho các thành phần TỰ ĐẶT MÀU (không theo Bootstrap)
   và 2 thư viện mới (Tom Select, flatpickr). Trước đây các chỗ này để nền
   trắng/xám sáng cố định nên bị chìm khi bật chế độ tối.
   ========================================================================= */

/* --- Tom Select (ô chọn có tìm kiếm) --- */
:root[data-theme="dark"] .ts-control { background-color: #232b34; color: var(--gd-chu); border-color: var(--gd-vien); }
:root[data-theme="dark"] .ts-control .item { color: var(--gd-chu); }
:root[data-theme="dark"] .ts-control input,
:root[data-theme="dark"] .ts-control input::placeholder { color: var(--gd-chu) !important; }
:root[data-theme="dark"] .ts-dropdown { background: #232b34; color: var(--gd-chu); border-color: var(--gd-vien); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
:root[data-theme="dark"] .ts-dropdown .option { color: var(--gd-chu); }
:root[data-theme="dark"] .ts-dropdown .active { background: #0f6b6b; color: #fff; }
:root[data-theme="dark"] .ts-dropdown .no-results,
:root[data-theme="dark"] .ts-dropdown .optgroup-header { color: var(--gd-chu-mo); background: #232b34; }
:root[data-theme="dark"] .ts-dropdown .dropdown-input-wrap { border-bottom-color: var(--gd-vien); }
:root[data-theme="dark"] .ts-dropdown .dropdown-input { background: #1b2129; color: var(--gd-chu); border-color: var(--gd-vien); }
:root[data-theme="dark"] .ts-dropdown .dropdown-input::placeholder { color: #7a848e; }
:root[data-theme="dark"] .ts-wrapper.single .ts-control:after { border-color: var(--gd-chu-mo) transparent transparent; }

/* --- flatpickr (lịch chọn ngày) --- */
:root[data-theme="dark"] .flatpickr-calendar { background: #1b2129; color: var(--gd-chu); border: 1px solid var(--gd-vien); box-shadow: 0 6px 18px rgba(0,0,0,.6); }
:root[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
:root[data-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: #1b2129; }
:root[data-theme="dark"] .flatpickr-calendar.arrowBottom:before,
:root[data-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: #1b2129; }
:root[data-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .flatpickr-monthDropdown-months { color: var(--gd-chu); fill: var(--gd-chu); }
:root[data-theme="dark"] .flatpickr-monthDropdown-months { background: #1b2129; }
:root[data-theme="dark"] .flatpickr-weekday { color: var(--gd-chu-mo); }
:root[data-theme="dark"] .flatpickr-day { color: var(--gd-chu); }
:root[data-theme="dark"] .flatpickr-day:hover,
:root[data-theme="dark"] .flatpickr-day:focus { background: #2c343d; border-color: #2c343d; }
:root[data-theme="dark"] .flatpickr-day.today { border-color: #0f6b6b; }
:root[data-theme="dark"] .flatpickr-day.selected { background: #0f6b6b; border-color: #0f6b6b; color: #fff; }
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay,
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: #5b636c; }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--gd-chu); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg { fill: #4bb3b3; }
:root[data-theme="dark"] .numInputWrapper span { border-color: var(--gd-vien); }
:root[data-theme="dark"] .numInputWrapper span:hover { background: rgba(255,255,255,.05); }

/* --- Kịch bản: ô "mốc" lịch đóng/cắt (trước để nền trắng nên chìm hẳn) --- */
:root[data-theme="dark"] .kb-moc { background: #232b34 !important; border-color: var(--gd-vien) !important; }
:root[data-theme="dark"] .kb-moc-so { background: #4a535d; color: #fff; }

/* --- Tiện ích Bootstrap còn sót --- */
:root[data-theme="dark"] .bg-white { background-color: var(--gd-the) !important; color: var(--gd-chu); }
/* Chữ "tối" (text-dark) trên nền tối sẽ chìm -> đổi sáng, TRỪ khi nằm trên huy hiệu màu (badge). */
:root[data-theme="dark"] .text-dark:not(.badge) { color: var(--gd-chu) !important; }
/* Huy hiệu nền-sáng + chữ-tối: nền đã hoá tối -> cho chữ sáng lại. */
:root[data-theme="dark"] .badge.bg-light.text-dark { color: var(--gd-chu) !important; }
/* Dải nền vàng nhạt "nghi ngờ lỗi" (Báo cáo) -> vàng trầm cho đỡ chói. */
.nen-vang-nhat { background: #fff3cd; }
:root[data-theme="dark"] .nen-vang-nhat { background: #3a3212 !important; }

/* --- Báo cáo: dòng tiêu đề nhóm tủ (nền xanh nhạt cố định -> tối) --- */
:root[data-theme="dark"] .nhom-tu > td {
    background: #24303f !important; color: #bcd4ff !important;
    border-color: var(--gd-vien) !important; border-top-color: #3b6ea5 !important;
}
:root[data-theme="dark"] .nhom-tu-dem { color: var(--gd-chu-mo) !important; }

/* --- Nhắc cài ứng dụng (PWA) --- */
:root[data-theme="dark"] .pwa-nhac { background: var(--gd-the); border-color: var(--gd-vien); color: var(--gd-chu); }
:root[data-theme="dark"] .pwa-nhac-phu { color: var(--gd-chu-mo); }

/* --- Menu chuột phải trên bản đồ --- */
:root[data-theme="dark"] .scada-context-menu { background: #232b34; border-color: var(--gd-vien); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
:root[data-theme="dark"] .scada-context-menu-item { color: var(--gd-chu); }
:root[data-theme="dark"] .scada-context-menu-item:hover { background: #2c343d; }
:root[data-theme="dark"] .scada-context-menu-item.disabled { color: #5b636c; }
:root[data-theme="dark"] .scada-context-menu-sep { background: var(--gd-vien); }
:root[data-theme="dark"] .cabinet-node-row:hover { background: #232b34; }

/* --- Modal "Chi tiết tủ" --- */
:root[data-theme="dark"] .cabinet-section-title { color: #6ea8fe; border-bottom-color: var(--gd-vien); }
:root[data-theme="dark"] .cabinet-info-box { background: #232b34; }
:root[data-theme="dark"] .cabinet-info-box .label { color: var(--gd-chu-mo); }
:root[data-theme="dark"] .cabinet-info-box .value { color: var(--gd-chu); }

/* --- Khung lịch (trong modal) --- */
:root[data-theme="dark"] .lich-khung { background: #1f2a37; border-color: #2f4055; }
:root[data-theme="dark"] .lich-tieu-de { color: #8fb4ea; }
:root[data-theme="dark"] .lich-moc { background: #232b34; border-color: var(--gd-vien); }
:root[data-theme="dark"] .lich-gio { color: var(--gd-chu); }
:root[data-theme="dark"] .lich-mo-ta { color: var(--gd-chu-mo); }
:root[data-theme="dark"] .lich-chu-thich { color: var(--gd-chu-mo); }

/* --- Mũi tên sắp xếp + hover tiêu đề cột --- */
:root[data-theme="dark"] .th-arrow { color: #5b636c; }
:root[data-theme="dark"] .js-sort thead th:hover { background: #232b34 !important; }

/* --- Nhãn tên tủ trên bản đồ --- */
:root[data-theme="dark"] .leaflet-tooltip.nhan-tu { background: rgba(27,33,41,.92); color: var(--gd-chu); border-color: rgba(255,255,255,.18); }

/* --- Bong bóng thông tin thiết bị trên bản đồ (Leaflet popup) --- */
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip { background: #1b2129; color: var(--gd-chu); box-shadow: 0 3px 14px rgba(0,0,0,.6); }
:root[data-theme="dark"] .mp-dau { background: #232b34; border-left-color: #4a535d; }
:root[data-theme="dark"] .mp-phu,
:root[data-theme="dark"] .mp-o-nhan,
:root[data-theme="dark"] .mp-o-so span,
:root[data-theme="dark"] .mp-cap-m,
:root[data-theme="dark"] .mp-cap-nhan,
:root[data-theme="dark"] .mp-tong,
:root[data-theme="dark"] .mp-mo { color: var(--gd-chu-mo); }
:root[data-theme="dark"] .mp-o-item { background: #232b34; border-color: var(--gd-vien); }
:root[data-theme="dark"] .mp-cap-dong { border-left-color: var(--gd-vien); }