/* =============================================================================
   skin-green.css — Theme DARK GREEN: token (L0) + REDESIGN component (L1)
   -----------------------------------------------------------------------------
   Nạp ĐIỀU KIỆN trong _HeadCss.cshtml CHỈ khi Context.Items["Skin"]=="green"
   (middleware Program.cs — SkinHelper). Mọi rule scope html[data-skin="green"]
   → không attr + không link = site thuế (light) & non-tax chưa bật skin
   KHÔNG đổi 1 pixel.

   L0: style.css đã token hóa hex → var(--sg-*, hex-cũ); file này ĐỊNH NGHĨA token.
   L1: redesign component theo artifact "HT24 — Skin Dark Green" (đã duyệt
   2026-07-14) — map vào class THẬT từ kiểm kê 2 agent (không style class rác
   modal-popup.cshtml). Selector prefix html[data-skin="green"][data-theme="dark"]
   (0,3,1) thắng rule template [data-theme=dark] .x .y (0,3,0); đối trọng
   !important chỉ ở đúng chỗ template dùng !important (ghi chú từng chỗ).

   Thứ tự nạp: bootstrap → plugins → style.css → accessibility.css →
   tomselect-overrides.css → FILE NÀY (cuối). Phase P dọn nốt <style> per-view.
   ============================================================================= */

/* ============================== L0. TOKENS (SSOT) ========================== */
html[data-skin="green"] {
  /* Bề mặt — phân lớp */
  --sg-bg:        #0f1a14;   /* nền base (thay #0D0D0D) */
  --sg-bg-rgb:    15, 26, 20;
  --sg-bg-deep:   #0b140f;   /* rãnh/sidebar/input (thay #0A0A0A dark) */
  --sg-card:      #16261d;   /* card/modal/dropdown nổi */
  --sg-elev:      #1e3227;   /* hover row / input focus */
  --sg-elev-2:    #1a2c21;   /* surface trung gian, zebra (thay #171717) */
  --sg-sidebar:   #14241c;   /* sidebar — SÁNG hơn bg (feedback 2026-07-15: bg-deep "hơi đen") */

  /* Viền */
  --sg-line:      #26382e;   /* thay #1F2228 */
  --sg-line-soft: rgba(125, 185, 150, .15);
  --sg-line-2:    #2a3f33;   /* thay #2c2c50 */

  /* Chữ — ink hạ 1 nấc sáng (feedback 2026-07-15: trắng trên dark green bị LÓA/halation
     với một số người); heading dùng ink-strong sáng hơn để giữ hierachy. Contrast vẫn >10:1. */
  --sg-ink:        #dbe7e0;   /* thay #D8DFEE (body/table text) */
  --sg-ink-strong: #eaf3ee;   /* heading/số liệu nhấn */
  --sg-ink-2:     #aabfb2;
  --sg-muted:     #7d9287;
  --sg-thead-ink: var(--sg-muted);   /* header bảng (base.cshtml đọc token này) */
  --sg-link:      #93c5fd;           /* link trong bảng dark — giữ xanh dương phân biệt */

  /* Accent emerald (CHỈ skin này; light giữ cam vì token không định nghĩa ngoài scope) */
  --sg-accent:      #3ddc84;
  --sg-accent-rgb:  61, 220, 132;
  --sg-accent-2:    #2cb96d;   /* hover (thay rgb(253.81…) SCSS-computed) */
  --sg-accent-3:    #1f9a58;   /* pressed/deep (thay rgb(191.49…)) */
  --sg-accent-soft: rgba(61, 220, 132, .13);
  --sg-accent-ink:  #04140b;   /* chữ trên nút accent (trắng-trên-emerald FAIL contrast) */

  /* Semantic */
  --sg-good: #4ade80;
  --sg-warn: #f5b544;
  --sg-warn-soft: rgba(245, 181, 68, .16);
  --sg-bad:  #f7706e;
  --sg-bad-soft: rgba(247, 112, 110, .25);
  --sg-good-soft: rgba(74, 222, 128, .18);
  --sg-info: #46b8f0;
  --sg-info-soft: rgba(70, 184, 240, .16);

  /* Bo góc — thống nhất scale (template loạn: 5px/8px/.35rem/.5rem) */
  --sg-radius-sm: .45rem;   /* input, btn-sm, chip */
  --sg-radius:    .7rem;    /* card, dropdown, btn thường */
  --sg-radius-lg: .95rem;   /* modal, popup */

  --sg-shadow:      0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .5);
  --sg-shadow-deep: 0 10px 20px rgba(0, 0, 0, .4), 0 24px 60px -16px rgba(0, 0, 0, .6);

  /* Chart bridge — JS đọc qua GetThemeToken() (common.js) */
  --chart-fg:       var(--sg-ink);
  --chart-muted:    var(--sg-muted);
  --chart-border:   var(--sg-line);
  --chart-card-bg:  var(--sg-card);
  --row-flash-color:   rgba(99, 102, 241, .25);
  --row-flash-warn-bg: rgba(245, 181, 68, .18);

  /* Token a11y (accessibility.css nạp TRƯỚC file này → override thắng).
     Giữ nguyên type-scale a11y (người lớn tuổi) — chỉ đổi MÀU. */
  --vz-color-text:         var(--sg-ink);
  --vz-color-secondary:    var(--sg-ink-2);
  --vz-color-muted:        #8fa398;   /* sáng hơn --sg-muted 1 nấc cho AA trên nền bg */
  --vz-color-link-active:  var(--sg-accent);
  --vz-color-sidebar-text: var(--sg-ink-2);
  --vz-color-success:      var(--sg-good);
  --vz-color-danger:       var(--sg-bad);
}

/* ============================ L1a. NỀN & CHỮ GLOBAL ======================== */
/* Wash gradient nhẹ góc phải trên (artifact) — chiều sâu không gây nhiễu */
html[data-skin="green"][data-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(61, 220, 132, .05), transparent 60%),
    var(--sg-bg);
}
html[data-skin="green"][data-theme="dark"] h1,
html[data-skin="green"][data-theme="dark"] h2,
html[data-skin="green"][data-theme="dark"] h3,
html[data-skin="green"][data-theme="dark"] h4,
html[data-skin="green"][data-theme="dark"] h5,
html[data-skin="green"][data-theme="dark"] h6 {
  color: var(--sg-ink-strong);
  letter-spacing: -.01em;
}
html[data-skin="green"] ::selection { color: var(--sg-accent-ink); }
html[data-skin="green"][data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-skin="green"][data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: var(--sg-line-2);
  border-radius: 5px;
  border: 2px solid var(--sg-bg);
}
html[data-skin="green"][data-theme="dark"] ::-webkit-scrollbar-track { background-color: var(--sg-bg-deep); }
html[data-skin="green"][data-theme="dark"] :focus-visible { outline-color: var(--sg-accent); }

/* ========================= L1b. SHELL — SIDEBAR + HEADER =================== */
/* Sidebar: rãnh chìm sâu hơn content 1 nấc (phần user đã ưng — đẩy tiếp theo artifact).
   Markup thật (_MenuItems): .sidebar-menu > ul > li.submenu-open > ul > li(.submenu) > a
   → selector template ".sidebar-menu > ul > li > a" KHÔNG khớp (rule chết, đã thay).
   Các rule dưới bám markup thật + đối trọng hard-code style.css còn lệch khi bật skin:
   #212324 (25142/25148/25175), #F2F2F2 hover light (17104), dot viền trắng/cream
   (17203/17221/17100), company-badge slate !important (46657/46660). */
html[data-skin="green"][data-theme="dark"] .sidebar,
html[data-skin="green"][data-theme="dark"] .settings-sidebar {
  background-color: var(--sg-sidebar);
  border-right: 1px solid var(--sg-line);
}
/* slimScrollDiv (wrapper JS slimscroll) bị style.css:13952 sơn var(--sg-bg) đè rãnh */
html[data-skin="green"][data-theme="dark"] .sidebar .slimScrollDiv {
  background: var(--sg-sidebar);
}

/* Company badge (logo + tên cty ở sidebar): hòa rãnh bg-deep, kẻ chân line */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-logo {
  background-color: var(--sg-sidebar);
  border-bottom: 1px solid var(--sg-line);
}
/* Đối trọng style.css 46657/46660 (slate cũ, !important) */
html[data-skin="green"][data-theme="dark"] .company-badge-name { color: var(--sg-ink) !important; }
html[data-skin="green"][data-theme="dark"] .company-badge-addr { color: var(--sg-muted) !important; }
/* Nút thu gọn sidebar: nền đã emerald qua token (style.css:17631) → chữ accent-ink */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-logo #toggle_btn {
  color: var(--sg-accent-ink);
}

/* --- Item menu cấp 1 (li con trực tiếp của submenu-open > ul) --- */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li > a {
  border-radius: 9px;
  transition: background-color .15s ease, color .15s ease;
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li > a > i {
  color: var(--sg-ink-2);
}
/* Hover: nâng elev trung tính (accent để dành cho active — tiết chế theo artifact) */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li > a:hover {
  background: var(--sg-elev);
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li > a:hover span,
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li > a:hover i {
  color: var(--sg-ink);
}
/* Active: pill accent-soft + thanh accent trái (inset — không layout shift) */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.active > a {
  background: var(--sg-accent-soft);
  border-radius: 9px;
  box-shadow: inset 3px 0 0 var(--sg-accent);
  color: var(--sg-accent);
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.active > a span {
  color: var(--sg-accent);
  font-weight: 700;
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.active > a i {
  color: var(--sg-accent);
}

/* --- Submenu cha (a.subdrop khi mở / a.active khi chứa trang active) --- */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.subdrop,
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.active {
  background: var(--sg-elev-2);
  border-radius: 9px;
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.subdrop span,
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.active span {
  color: var(--sg-ink);
  font-weight: 600;
}
/* Cha chứa trang active: chữ + icon accent dẫn mắt (nền vẫn elev-2 dịu) */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.active.subdrop span,
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.active.subdrop > i {
  color: var(--sg-accent);
}
/* Mũi tên submenu: bỏ đĩa nền (dark elev-2 15447), chevron ink-2 → accent khi mở */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .menu-arrow {
  background: transparent;
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .menu-arrow::before {
  border-color: var(--sg-ink-2);
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.subdrop .menu-arrow::before,
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.submenu > a.active .menu-arrow::before {
  border-color: var(--sg-accent);
}

/* --- Submenu con (link + dot ::after) --- */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .submenu-open .submenu ul li a {
  color: var(--sg-ink-2);
  border-radius: 7px;
  transition: color .15s ease;
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .submenu-open .submenu ul li a:hover {
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .submenu-open .submenu ul li a.active {
  color: var(--sg-accent);
  font-weight: 600;
}
/* Dot: chấm line-2 viền hòa rãnh (thay dot xám viền TRẮNG 17203);
   hover/active → accent + ring soft (thay viền cream #FFEDDD/#FDB) */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .submenu-open .submenu ul li a::after {
  background: var(--sg-line-2);
  border-color: var(--sg-bg-deep);
}
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .submenu-open .submenu ul li a:hover::after,
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu .submenu-open .submenu ul li a.active::after {
  background: var(--sg-accent);
  border-color: var(--sg-accent-soft);
}

/* Header/topbar: trong mờ + blur, kẻ chân sương (artifact).
   Tint đi qua token (color-mix); dòng var(--sg-bg) trên = fallback trình duyệt cũ. */
html[data-skin="green"][data-theme="dark"] .header {
  background: var(--sg-bg);
  background: color-mix(in srgb, var(--sg-bg) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sg-line);
}

/* ============================== L1c. CARD ================================= */
/* Elevation: card nổi khỏi nền (template: card = body cùng màu → phẳng) */
html[data-skin="green"][data-theme="dark"] .card {
  background-color: var(--sg-card);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
}
html[data-skin="green"][data-theme="dark"] .card .card-header {
  background-color: transparent;           /* header liền khối với card (artifact) */
  border-bottom: 1px solid var(--sg-line);
  padding-top: .7rem;
  padding-bottom: .7rem;
}
html[data-skin="green"][data-theme="dark"] .card .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--sg-line);
}
/* Tiêu đề trang thật = h5.card-title trong card-header (kiểm kê: core pages
   KHÔNG dùng .page-header) — nâng vai trò tiêu đề */
html[data-skin="green"][data-theme="dark"] .card .card-title {
  color: var(--sg-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Trang phụ còn dùng .page-header h3 (Firmware/Guide/Video/Admin…) */
html[data-skin="green"][data-theme="dark"] .page-header h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .breadcrumb .breadcrumb-item a { color: var(--sg-muted); }
html[data-skin="green"][data-theme="dark"] .breadcrumb .breadcrumb-item.active { color: var(--sg-accent); }

/* ============================== L1d. BẢNG ================================= */
/* Nền/zebra/hover do khối token hóa trong base.cshtml cầm (!important sẵn).
   Đây: nâng thead thành kiểu artifact — chữ THƯỜNG (không UPPERCASE nữa, 2026-07: đọc rõ hơn,
   nhất là nhãn có đơn vị "Số lượng (L)/Đơn giá (đ)/Thành tiền (đ)"), giãn chữ nhẹ, màu muted
   (màu chữ thead đi qua token --sg-thead-ink ở base.cshtml). */
html[data-skin="green"][data-theme="dark"] .table > thead th {
  font-size: .78rem;
  letter-spacing: .02em;
  font-weight: 700;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
html[data-skin="green"][data-theme="dark"] .table td {
  font-variant-numeric: tabular-nums;   /* số liệu thẳng cột (artifact) */
}
html[data-skin="green"][data-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: var(--sg-line);
}
/* Link trong bảng đi qua token --sg-link (base.cshtml) — giữ xanh dương phân biệt */

/* ============================== L1e. NÚT ================================== */
html[data-skin="green"] .btn {
  border-radius: .5rem;               /* template 5px → thống nhất */
  font-weight: 600;
}
html[data-skin="green"] .btn.btn-sm { border-radius: var(--sg-radius-sm); }
/* Màu bg/border nút primary đã TỰ emerald qua token (template !important trỏ
   var(--sg-accent)); chỉ ép màu CHỮ — !important đối trọng rule 1361/1423 */
html[data-skin="green"][data-theme="dark"] .btn-primary,
html[data-skin="green"][data-theme="dark"] .btn.btn-primary,
html[data-skin="green"][data-theme="dark"] .btn.btn-primary:hover,
html[data-skin="green"][data-theme="dark"] .btn.btn-primary:focus,
html[data-skin="green"][data-theme="dark"] .btn.btn-primary:active,
html[data-skin="green"][data-theme="dark"] .btn.btn-primary.active,
html[data-skin="green"][data-theme="dark"] .btn-check:checked + .btn-primary {
  color: var(--sg-accent-ink) !important;
}
html[data-skin="green"][data-theme="dark"] .btn-outline-primary:hover,
html[data-skin="green"][data-theme="dark"] .btn-outline-primary:active,
html[data-skin="green"][data-theme="dark"] .btn-outline-primary.active {
  color: var(--sg-accent-ink) !important;
}
/* Ghost (nút phụ phổ biến nhất: outline-secondary quick-date/reset) — kiểu artifact */
html[data-skin="green"][data-theme="dark"] .btn-outline-secondary {
  color: var(--sg-ink-2);
  border-color: var(--sg-line-2);
  background-color: transparent;
}
html[data-skin="green"][data-theme="dark"] .btn-outline-secondary:hover {
  color: var(--sg-ink);
  background-color: var(--sg-elev);
  border-color: var(--sg-line-2);
}
/* Segmented (btn-group quick-range WorkShift/Report): active = emerald đặc.
   !important đối trọng "color:#fff !important" (style.css:1361) */
html[data-skin="green"][data-theme="dark"] .btn-outline-secondary.active,
html[data-skin="green"][data-theme="dark"] .btn-check:checked + .btn-outline-secondary {
  background-color: var(--sg-accent) !important;
  border-color: var(--sg-accent) !important;
  color: var(--sg-accent-ink) !important;
}

/* ============================== L1f. BADGE → PILL ========================== */
/* Soft-pill kiểu artifact: bo tròn 999, nền mềm + chữ đậm màu semantic.
   !important đối trọng utility .bg-* !important của template. */
html[data-skin="green"][data-theme="dark"] .badge {
  border-radius: 999px;
  padding: .3rem .62rem;
  font-weight: 700;
  letter-spacing: .02em;
}
html[data-skin="green"][data-theme="dark"] .badge.bg-success {
  background-color: rgba(74, 222, 128, .16) !important;
  color: var(--sg-good) !important;
}
html[data-skin="green"][data-theme="dark"] .badge.bg-danger {
  background-color: rgba(247, 112, 110, .16) !important;
  color: var(--sg-bad) !important;
}
html[data-skin="green"][data-theme="dark"] .badge.bg-warning {
  background-color: rgba(245, 181, 68, .16) !important;
  color: var(--sg-warn) !important;
}
html[data-skin="green"][data-theme="dark"] .badge.bg-info {
  background-color: rgba(70, 184, 240, .16) !important;
  color: var(--sg-info) !important;
}
html[data-skin="green"][data-theme="dark"] .badge.bg-secondary {
  background-color: var(--sg-elev) !important;
  color: var(--sg-ink-2) !important;
}
html[data-skin="green"][data-theme="dark"] .badge.bg-primary,
html[data-skin="green"][data-theme="dark"] .badge.badge-primary {
  background-color: var(--sg-accent-soft) !important;
  color: var(--sg-accent) !important;
  box-shadow: none;
}

/* ============================== L1g. FORM ================================== */
/* Input CHÌM (bg-deep) trên card, focus NỔI (elev) + ring emerald — artifact.
   !important đối trọng rule gộp input-dark 14390 (!important). */
html[data-skin="green"][data-theme="dark"] .form-control,
html[data-skin="green"][data-theme="dark"] .form-select {
  background-color: var(--sg-bg-deep) !important;
  border-color: var(--sg-line);
  border-radius: .55rem;
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .form-control:focus,
html[data-skin="green"][data-theme="dark"] .form-select:focus {
  background-color: var(--sg-elev) !important;
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 .2rem rgba(var(--sg-accent-rgb), .22);
}
html[data-skin="green"][data-theme="dark"] .form-control::placeholder { color: var(--sg-muted); }
html[data-skin="green"][data-theme="dark"] .form-label {
  color: var(--sg-ink-2);
  font-weight: 600;
}
html[data-skin="green"][data-theme="dark"] .form-check-input {
  background-color: var(--sg-bg-deep);
  border-color: var(--sg-line-2);
}
html[data-skin="green"][data-theme="dark"] .form-check-input:checked {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
}

/* TomSelect — đối trọng 2 khối dark !important trùng nhau (style.css 46713 &
   47331, giá trị lệch nhau #1a1a2e vs #1a1d21) + focus ring #3b82f6 lạc tông */
html[data-skin="green"][data-theme="dark"] .ts-wrapper .ts-control {
  background-color: var(--sg-bg-deep) !important;
  border-color: var(--sg-line) !important;
  color: var(--sg-ink) !important;
  border-radius: .55rem !important;
}
html[data-skin="green"][data-theme="dark"] .ts-wrapper.focus .ts-control {
  border-color: var(--sg-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--sg-accent-rgb), .22) !important;
}
html[data-skin="green"][data-theme="dark"] .ts-dropdown {
  background-color: var(--sg-card) !important;
  border-color: var(--sg-line) !important;
  border-radius: var(--sg-radius) !important;
  box-shadow: var(--sg-shadow-deep);
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .ts-dropdown .option.active {
  background-color: var(--sg-accent-soft) !important;
  color: var(--sg-accent) !important;
}

/* ============================== L1h. TABS ================================== */
/* nav-tabs: underline emerald (pattern template sẵn có, dọn border xám active) */
html[data-skin="green"][data-theme="dark"] .nav-tabs .nav-link { color: var(--sg-ink-2); }
html[data-skin="green"][data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--sg-accent); }
html[data-skin="green"][data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--sg-accent);
  background: transparent;
  border-color: transparent transparent var(--sg-accent);
  border-bottom-width: 2px;
}
/* nav-pills active: giết #FFF6EE cam-nhạt hard-code của template */
html[data-skin="green"][data-theme="dark"] .nav-pills .nav-link.active,
html[data-skin="green"][data-theme="dark"] .nav-pills .show > .nav-link {
  background-color: var(--sg-accent-soft);
  color: var(--sg-accent);
}
/* Vá concern F5: viền nav-tabs .pump-detail hard-code trong _PumphoseList:289 */
html[data-skin="green"][data-theme="dark"] .pump-detail .nav-tabs {
  border-bottom-color: var(--sg-line);
}

/* ========================= L1i. DROPDOWN MENU ============================== */
html[data-skin="green"][data-theme="dark"] .dropdown-menu {
  background-color: var(--sg-card);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow-deep);
}
html[data-skin="green"][data-theme="dark"] .dropdown-item { color: var(--sg-ink-2); }
html[data-skin="green"][data-theme="dark"] .dropdown-item:not(.active):hover,
html[data-skin="green"][data-theme="dark"] .dropdown-item:not(.active):focus {
  color: var(--sg-ink);
  background-color: var(--sg-elev);
}
/* .active bg #FFF6EE !important của template → đối trọng !important */
html[data-skin="green"][data-theme="dark"] .dropdown-item.active {
  background-color: var(--sg-accent-soft) !important;
  color: var(--sg-accent) !important;
}

/* ========================= L1j. PAGINATION ================================= */
/* Template nén 11px (custom cuối style.css) — nới lại cho dễ bấm, active emerald */
html[data-skin="green"][data-theme="dark"] .pagination .page-link {
  background-color: transparent;
  border-color: var(--sg-line);
  color: var(--sg-ink-2);
  border-radius: .45rem;
  padding: 3px 9px;
  font-size: .8rem;
}
html[data-skin="green"][data-theme="dark"] .pagination { gap: 4px; }
html[data-skin="green"][data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--sg-elev);
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .page-item.active .page-link {
  background-color: var(--sg-accent);
  border-color: var(--sg-accent);
  color: var(--sg-accent-ink);
}
html[data-skin="green"][data-theme="dark"] .page-item.disabled .page-link {
  background-color: transparent;
  border-color: var(--sg-line);
  color: var(--sg-muted);
}

/* ====================== L1k. MODAL / OFFCANVAS / TOAST ===================== */
html[data-skin="green"][data-theme="dark"] .modal-content {
  background-color: var(--sg-card);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-deep);
}
html[data-skin="green"][data-theme="dark"] .modal .modal-header,
html[data-skin="green"][data-theme="dark"] .modal .modal-footer {
  border-color: var(--sg-line);
  background-color: transparent;
}
html[data-skin="green"][data-theme="dark"] .modal .modal-title { color: var(--sg-ink); }
html[data-skin="green"][data-theme="dark"] .offcanvas,
html[data-skin="green"][data-theme="dark"] .popover,
html[data-skin="green"][data-theme="dark"] .toast {
  background-color: var(--sg-card);
  border-color: var(--sg-line);
}
html[data-skin="green"][data-theme="dark"] .list-group-item {
  background-color: var(--sg-card);
  border-color: var(--sg-line);
  color: var(--sg-ink);
}

/* SweetAlert2 — popup đồng bộ lớp elevation (template dark #212B36 hard-code) */
html[data-skin="green"][data-theme="dark"] .swal2-popup {
  background-color: var(--sg-card);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  color: var(--sg-ink);
}
html[data-skin="green"][data-theme="dark"] .swal2-popup .swal2-title,
html[data-skin="green"][data-theme="dark"] .swal2-popup .swal2-html-container {
  color: var(--sg-ink);
}

/* ================= L1m. FIX THEO FEEDBACK DUYỆT MẮT (2026-07-15) ============ */
/* 1. Toggle switch OFF "đen thui không thấy" (Admin Systems...): knob Bootstrap là
   SVG tối trên nền tối → knob ink-2 + rãnh elev-2 viền rõ. Checked giữ knob trắng
   trên emerald (đã đạt contrast). */
html[data-skin="green"][data-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-color: var(--sg-elev-2);
  border-color: var(--sg-line-2);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23aabfb2'/%3e%3c/svg%3e");
}
html[data-skin="green"][data-theme="dark"] .form-switch .form-check-input:not(:checked):hover {
  border-color: var(--sg-accent);
}

/* 2. Nút icon topbar (?, chuông, giá xăng, gear): template hover #F2F2F2 KHÔNG scope
   theme (style.css:16443) → cục trắng nuốt icon trên dark. */
html[data-skin="green"][data-theme="dark"] .user-menu .nav-item-box > a:hover {
  background: var(--sg-elev);
  color: var(--sg-accent);
}

/* 3. Badge đếm thông báo trên chuông: bị a11y floor phóng to đè icon → ép nhỏ lại,
   neo góc trên-phải, thêm ring cùng màu nền topbar để tách khỏi chuông.
   !important đối trọng floor font-size !important của accessibility.css. */
/* Badge thông báo: fix là LAYOUT chung 2 theme → dời sang style.css (2026-07-15,
   user báo light vẫn bị hình tròn to đè chuông) — chỉ giữ màu ring theo skin ở đây. */
html[data-skin="green"][data-theme="dark"] #notifBadge { border-color: var(--sg-bg); }

/* --- Fix đợt duyệt mắt #2 (2026-07-15) --- */
/* 4. TomSelect lệch dọc: fix là LAYOUT chung 2 theme → đã dời sang tomselect-overrides.css
   (2026-07-15 — user báo light theme cũng lệch). */

/* 5. Checkbox/radio checked: tick TRẮNG trên emerald bị lóa → tick TỐI (accent-ink).
   Switch (cũng là [type=checkbox]) phải RE-ASSERT knob trắng ngay sau — specificity cao hơn. */
html[data-skin="green"][data-theme="dark"] .form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2304140b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
html[data-skin="green"][data-theme="dark"] .form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2304140b'/%3e%3c/svg%3e");
}
html[data-skin="green"][data-theme="dark"] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* 6. Nút vàng (chốt ca, cảnh báo...): chữ TRẮNG trên vàng bị lóa → chữ tối.
   !important đối trọng color:#fff !important của template (.btn.btn-* 1417+/1361). */
html[data-skin="green"][data-theme="dark"] .btn-warning,
html[data-skin="green"][data-theme="dark"] .btn.btn-warning,
html[data-skin="green"][data-theme="dark"] .btn-warning:hover,
html[data-skin="green"][data-theme="dark"] .btn.btn-warning:hover,
html[data-skin="green"][data-theme="dark"] .btn-warning:focus,
html[data-skin="green"][data-theme="dark"] .btn-warning:active,
html[data-skin="green"][data-theme="dark"] .btn-warning.active,
html[data-skin="green"][data-theme="dark"] .btn-check:checked + .btn-warning {
  color: #2a1f06 !important;
}
/* Nút chốt ca inline (WorkShift .ws-close-btn): hover nền vàng → chữ tối */
html[data-skin="green"][data-theme="dark"] .ws-close-btn:hover {
  color: #2a1f06;
}

/* 7. .menu-hot (Log bơm "hay dùng"): giữ icon accent, đối trọng rule L1b tô icon
   ink-2 + hover ink (specificity cao hơn nhờ li.menu-hot). */
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.menu-hot > a > i,
html[data-skin="green"][data-theme="dark"] .sidebar .sidebar-menu li.submenu-open > ul > li.menu-hot > a:hover > i {
  color: var(--sg-accent);
}