/* =====================================================================
   GIAO DIỆN NỀN TỐI CHUẨN — cùng thiết kế với nền sáng (css/light-standard.css)
   2026-11-03 (anh Huy): "các bảng tông màu ở giao diện sáng cũng áp dụng cho giao diện tối — dùng chung
   tông màu, thiết kế của giao diện sáng cho cả 2 giao diện, chỉ đổi màu nền".
   → Mục 1–10 của light-standard.css chép sang chế độ tối: cùng cách trình bày (đầu bảng, đường kẻ, ô thống
     kê, nút viên thuốc, tab, ô nhập, Bảng tính BD), màu nhấn CÙNG SẮC nhưng sáng lên cho đọc được trên nền tối.
   - NỀN / ĐƯỜNG KẺ / CHỮ = bộ NAVY anh Huy đã quy định cho chế độ tối (css/base.css, khối PLAYSPACE_NAVY_THEME,
     cùng màu thanh bên) — KHÔNG tự đặt tông nền khác (lượt đầu 03/11 lỡ dùng tông nâu, anh đã bác).

   NGUYÊN TẮC (giống light-standard):
   - CHỈ ĐỔI MÀU / VIỀN / BO GÓC / BÓNG — không đổi padding, cỡ chữ, chiều cao, bố cục.
   - Chế độ tối của app = KHÔNG có data-theme (js/01 applyColorMode) → :root:not([data-theme="light"]).
   - Đã đo tương phản: chữ ≥ 4.5:1 trên mọi nền (Convention #91).
   - Phạm vi như light-standard, TRỪ THÊM chat + Bảng tin (giao diện đã nghiệm thu 30/10 — không đụng).
   - Thanh bên + Trang chủ KHÔNG nằm trong yêu cầu "các bảng" → giữ nguyên.
   ===================================================================== */

/* ---------- 1. Phạm vi + bảng màu ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))){
  /* Lấy đúng biến navy của css/base.css: --bg #152028 · --bg2 #192832 · --bg3 #20323d · --bg4 #293d49 ·
     --border #30434f · --border2 #425967 · --text #e8edf0 · --text2 #9daeb8. Chữ mờ #8ea2ae (5:1 trên đầu bảng;
     #7f94a1 gốc chỉ 4.2:1). */
  --ls-bg:#152028; --ls-surface:#192832; --ls-head:#20323d; --ls-chip:#293d49;
  --ls-line:#30434f; --ls-line2:#24363f; --ls-line3:#425967;
  --ls-ink:#e8edf0; --ls-ink2:#9daeb8; --ls-ink3:#8ea2ae;
  --ls-shadow:0 1px 2px rgba(0,0,0,.35);
  --bg:var(--ls-bg); --bg2:var(--ls-surface); --bg3:var(--ls-head); --bg4:var(--ls-chip);
  --border:var(--ls-line); --border2:var(--ls-line3);
  --text:var(--ls-ink); --text2:var(--ls-ink2); --text3:var(--ls-ink3);
  /* Màu nhấn cùng sắc với nền sáng (#3D6A9E xanh, #2B7050 lục, #95600F hổ phách, #A54834 đỏ, #6B53A3 tím),
     sáng lên cho nền tối. Đo trên nền navy: chữ ≥ 5.2:1, trên nền nhạt cùng màu ≥ 6:1. */
  --blue:#8DB4E0; --blue2:#A3C3E8; --blue-bg:#1D3446;
  --green:#7DC4A0; --green-bg:#193A33;
  --amber:#E2B467; --amber-bg:#3A3423;
  --red:#E89D89;  --red-bg:#3B2A2C;
  --purple:#B9A8E2; --purple-bg:#2C2E47;
  --surf:var(--ls-surface);
  --wc-work-bg:var(--ls-surface); --wc-work-bd:var(--ls-line);
  --wc-off-bg:#20323d; --wc-off-bd:#425967;
  /* KHÔNG đặt background: giữ dải chuyển màu navy của base.css (body/.main/.emp-content) */
  color:var(--ls-ink);
}

/* Viết gọn: mọi quy tắc dưới đây dùng cùng phạm vi ở mục 1 */
/* ---------- 2. Thanh trên trang ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed)))
  :is(.topbar,.emp-topbar-page,[class*="-custom-topbar"],#bonus-tabbar){
  background:var(--ls-surface) !important; border-color:var(--ls-line) !important;
}

/* ---------- 3. Bảng ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .content th{
  background:var(--ls-head); color:var(--ls-ink3); border-bottom-color:var(--ls-line);
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .content td{
  border-bottom-color:var(--ls-line2);
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .content tr:hover td{
  background:var(--ls-bg);
}

/* ---------- 4. Thẻ / khối gập / ô thống kê ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed)))
  :is(.stat-card,.tc,.acc-item){
  background:var(--ls-surface); border-color:var(--ls-line); box-shadow:var(--ls-shadow);
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .acc-item{ border-radius:14px; }
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .acc-head{ background:var(--ls-head); }
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .acc-head:hover{ background:var(--ls-chip); }
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .acc-body{ background:var(--ls-surface); }
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .slabel{ color:var(--ls-ink3); }

/* ---------- 5. Nút: viên thuốc ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .btn{ border-radius:999px; }
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .btn-ghost{
  background:var(--ls-surface); color:var(--ls-ink); border-color:var(--ls-line);
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .btn-ghost:hover{
  background:var(--ls-surface); border-color:var(--ls-ink3);
}
/* Nút chính: nền sáng có nền MỰC ĐẬM chữ trắng → nền tối đảo lại: nền chữ-sáng, chữ đậm (14.5:1) */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .btn-primary{
  background:var(--ls-ink); color:#152028;
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .btn-success{ border-color:#2E5A4C; }
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .btn-danger{ border-color:#6A3A3A; }
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .export-btn{
  background:var(--ls-surface) !important; color:var(--ls-ink) !important; border:1px solid var(--ls-line) !important; border-radius:999px;
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .export-btn:hover{
  border-color:var(--ls-ink3) !important; opacity:1;
}

/* ---------- 6. Tab trong trang: đang chọn = nền chữ-sáng, chữ đậm (đảo của nền sáng) ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) :is(.bonus-tab,.att-tab-btn){
  background:var(--ls-chip) !important; color:var(--ls-ink2) !important; border-color:transparent !important; border-radius:999px !important;
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) :is(.bonus-tab,.att-tab-btn):hover{
  color:var(--ls-ink) !important;
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) :is(.bonus-tab,.att-tab-btn).active{
  background:var(--ls-ink) !important; color:#152028 !important; border-color:var(--ls-ink) !important;
}

/* ---------- 7. Ô nhập / ô chọn ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed)))
  :is(.topbar,.emp-topbar-page,[class*="-custom-topbar"],#bonus-tabbar) :is(select,input[type="text"],input[type="search"],input[type="date"],input[type="month"],input[type="number"],input:not([type])){
  background:var(--ls-chip) !important; color:var(--ls-ink) !important; border-color:transparent !important; border-radius:999px !important;
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .page :is(input[type="text"],input[type="number"],input:not([type]),select,textarea){
  border-color:var(--ls-line3);
}
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .page :is(input,select,textarea):focus{
  outline:none; border-color:var(--ls-ink3) !important; box-shadow:0 0 0 3px rgba(232,237,240,.10);
}

/* ---------- 8. Thẻ tên nhân viên trang Bonus: phủ lớp tối 70% lên chính màu người đó → bản trầm CÙNG sắc ---------- */
:root:not([data-theme="light"]) :is(.main:has(.page.active:not(.ls-off,#page-home,#page-workflow,#page-playcomment,#page-ai_office,#page-chat,#page-feed,#page-spreadsheet)),.emp-content:has(> .emp-content-body > .emp-pane.active:not(.ls-off,#emp-pane-home,#emp-pane-workflow,#emp-pane-playcomment,#emp-pane-chat,#emp-pane-feed))) .bn-tag{
  background-image:linear-gradient(rgba(25,40,50,.70),rgba(25,40,50,.70)) !important; color:var(--ls-ink) !important;
}

/* =====================================================================
   BẢNG TÍNH BD — LUÔN GIAO DIỆN NỀN SÁNG (2026-11-03, anh Huy: "riêng bảng DB không đổi sang nền tối, ở giao
   diện sáng hay tối chỉ dùng đúng giao diện của sáng").
   Dưới đây là mục 1–10 của css/light-standard.css CHÉP NGUYÊN (do tools chép tự động, chỉ đổi phạm vi thành
   "trang Bảng tính khi app ở chế độ tối"). Sửa nền sáng của Bảng tính thì sửa light-standard.css rồi chép lại.
   Thanh bên vẫn navy như các trang khác.
   ===================================================================== */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active){ background:#FBFAF7 !important; background-image:none !important; }
/* ---------- 1. Phạm vi: MỌI trang của cổng quản trị, trừ các trang có giao diện riêng ----------
   Cổng quản trị (.main) VÀ cổng nhân viên (.emp-content), kể cả PLAYCHAT (từ 2026-10-29 chiều).
   Trừ: Trang chủ (màn chào), Workflow (đã tông Timeline riêng — css/workflow.css), Playcomment
   (bảng vẽ), Văn phòng AI. Trang nào cần giữ giao diện riêng thì thêm class "ls-off" vào khung trang. */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active){
  /* Bảng màu Timeline. Chỉ đổi màu viền (border-color), KHÔNG đặt lại border — thêm viền là nút/ô to ra. */
  --ls-bg:#FBFAF7; --ls-surface:#FFFFFF; --ls-head:#F7F5F1; --ls-chip:#F1EEE9;
  --ls-line:#ECE8E1; --ls-line2:#F2EFEA; --ls-line3:#E2DDD5;
  --ls-ink:#2B2A28; --ls-ink2:#6B6660; --ls-ink3:#857F77;
  --ls-shadow:0 1px 2px rgba(40,32,24,.06);
  /* Biến chung của app → tông ấm */
  --bg:var(--ls-bg); --bg2:var(--ls-surface); --bg3:var(--ls-head); --bg4:var(--ls-chip);
  --border:var(--ls-line); --border2:var(--ls-line3);
  --text:var(--ls-ink); --text2:var(--ls-ink2); --text3:var(--ls-ink3);
  /* Màu nhấn dịu (đo: chữ trên trắng ≥5:1, trên nền nhạt cùng màu ≥4.5:1) */
  --blue:#3D6A9E; --blue2:#335C8C; --blue-bg:#E6EEF7;
  --green:#2B7050; --green-bg:#E3F1E8;
  --amber:#95600F; --amber-bg:#F8EDD5;
  --red:#A54834;  --red-bg:#F8E5DF;
  --purple:#6B53A3; --purple-bg:#EDE8F6;
  /* Biến riêng một số trang (Bảng tính dùng --surf / --brd) */
  --surf:var(--ls-surface);   /* KHÔNG định nghĩa --brd: viền đang rỗng, có lại sẽ làm ô rộng thêm 2px */
  background:var(--ls-bg); color:var(--ls-ink);
}

/* ---------- 2. Thanh trên trang ---------- */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active)
  :is(.topbar,.emp-topbar-page,[class*="-custom-topbar"],#bonus-tabbar){
  background:var(--ls-surface) !important; border-color:var(--ls-line) !important;
}

/* ---------- 3. Bảng ---------- */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .content th{
  background:var(--ls-head); color:var(--ls-ink3); border-bottom-color:var(--ls-line);
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .content td{
  border-bottom-color:var(--ls-line2);
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .content tr:hover td{
  background:var(--ls-bg);
}

/* ---------- 4. Thẻ / khối gập / ô thống kê ---------- */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active)
  :is(.stat-card,.tc,.acc-item){
  background:var(--ls-surface); border-color:var(--ls-line); box-shadow:var(--ls-shadow);
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .acc-item{ border-radius:14px; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .acc-head{ background:var(--ls-head); }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .acc-head:hover{ background:var(--ls-chip); }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .acc-body{ background:var(--ls-surface); }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .slabel{ color:var(--ls-ink3); }

/* ---------- 5. Nút: viên thuốc như Timeline ---------- */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .btn{ border-radius:999px; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .btn-ghost{
  background:var(--ls-surface); color:var(--ls-ink); border-color:var(--ls-line);
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .btn-ghost:hover{
  background:var(--ls-surface); border-color:var(--ls-ink3);
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .btn-primary{
  background:var(--ls-ink); color:#fff;
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .btn-success{ border-color:#BFDCCB; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .btn-danger{ border-color:#EBC6BC; }
/* Nút Excel / PDF / các nút công cụ Bảng tính: trung tính như nút Timeline (màu cũ gắn thẳng vào thẻ
   làm chữ chìm trên nền sáng — ghi đè bằng !important). Emoji đầu nút vẫn giữ để nhận ra. */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .export-btn{
  background:var(--ls-surface) !important; color:var(--ls-ink) !important; border:1px solid var(--ls-line) !important; border-radius:999px;
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .export-btn:hover{
  border-color:var(--ls-ink3) !important; opacity:1;
}

/* ---------- 6. Tab trong trang: đang chọn = nền mực đậm, chưa chọn = nền nhạt ---------- */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) :is(.bonus-tab,.att-tab-btn){
  background:var(--ls-chip) !important; color:var(--ls-ink2) !important; border-color:transparent !important; border-radius:999px !important;
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) :is(.bonus-tab,.att-tab-btn):hover{
  color:var(--ls-ink) !important;
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) :is(.bonus-tab,.att-tab-btn).active{
  background:var(--ls-ink) !important; color:#fff !important; border-color:var(--ls-ink) !important;
}

/* ---------- 7. Ô nhập / ô chọn ---------- */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active)
  :is(.topbar,.emp-topbar-page,[class*="-custom-topbar"],#bonus-tabbar) :is(select,input[type="text"],input[type="search"],input[type="date"],input[type="month"],input[type="number"],input:not([type])){
  background:var(--ls-chip) !important; color:var(--ls-ink) !important; border-color:transparent !important; border-radius:999px !important;
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .page :is(input[type="text"],input[type="number"],input:not([type]),select,textarea){
  border-color:var(--ls-line3);
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .page :is(input,select,textarea):focus{
  outline:none; border-color:var(--ls-ink3) !important; box-shadow:0 0 0 3px rgba(43,42,40,.08);
}

/* ---------- 8. Thẻ tên nhân viên trang Bonus: dịu như Workflow ----------
   Màu gốc mỗi người một màu (gắn thẳng vào thẻ) — phủ 72% trắng lên chính màu đó để ra bản pastel CÙNG
   sắc (vẫn phân biệt từng người), chữ mực đậm. Không đổi kích thước. */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .bn-tag{
  background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) !important; color:var(--ls-ink) !important;
}

/* ---------- 9. Lịch làm việc: ngày làm nền trắng, ngày nghỉ nền be (js/70 đọc 2 biến này) ---------- */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active){
  --wc-work-bg:var(--ls-surface); --wc-work-bd:var(--ls-line);
  --wc-off-bg:#F1EEE9; --wc-off-bd:#E2DDD5;
}

/* ---------- 10. Bảng tính BD: đầu bảng sáng ấm thay nền đen, dòng phòng ban xanh dịu, dòng tổng vàng nhạt ----------
   Chỉ đổi MÀU (kẻ ô, nền, chữ) — xuất Excel không bị ảnh hưởng (Excel tự đặt kiểu riêng). */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-table thead th{
  background:var(--ls-head) !important; color:var(--ls-ink) !important; box-shadow:inset 0 0 0 1px var(--ls-line3) !important;
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) :is(.tx-table th,.tx-table td){ border-right-color:#DDD7CE; border-bottom-color:#DDD7CE; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) :is(.tx-table th:first-child,.tx-table td:first-child){ border-left-color:#DDD7CE; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-table thead tr:first-child th{ border-top-color:#DDD7CE; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-table .tx-stt-cell{ background:var(--ls-bg); }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-table .tx-calc-cell{ background:#F4F2EE; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-dept-row td{ background:#E6EEF7 !important; color:#24405F !important; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-dept-row input{ color:#24405F !important; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-dept-row input:hover{ background:rgba(255,255,255,.55); }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-sum-row td{ background:#F8EDD5 !important; }
/* Ô đầu bảng tô màu nhóm (Phụ cấp / OT…) và dòng TỔNG CỘNG: màu gắn thẳng vào thẻ kèm !important nên không
   đè được nền — phủ một lớp trắng bằng bóng trong (inset) để ra bản dịu CÙNG sắc. Bóng không đổi kích thước. */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-table thead th[style*="background"]{
  box-shadow:inset 0 0 0 1px var(--ls-line3), inset 0 0 0 999px rgba(255,255,255,.74) !important;
}
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .tx-table td[style*="#fbbf24"]{
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.6); border-color:#E8C77A !important;
}
/* Ô nhập trong Bảng tính: KHÔNG khung (bảng đã có đường kẻ ô) — chỉ hiện viền mảnh khi rê chuột / đang gõ.
   Đè quy tắc viền ô nhập chung ở mục 7. */
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .page .tx-table input{ border-color:transparent; }
:root:not([data-theme="light"]) .main:has(#page-spreadsheet.active) .page .tx-table input:hover{ border-color:var(--ls-line3); }