/* =====================================================================
   tabulator-theme.css - (100) Màu bảng (Tabulator) theo giao diện SÁNG / TỐI của máy người xem.
   Vì sao có file này: tabulator.min.css nạp SAU app.css (trong block head của từng trang) và tô cứng nền trắng #fff,
   tiêu đề xám #e6e6e6. Máy / điện thoại bật chế độ TỐI -> chữ trắng (var(--ink)) nằm trên nền trắng -> không đọc được.
   File này nạp SAU CÙNG (base.html, sau block head) và mọi selector có thêm "html" ở đầu -> luôn thắng tabulator.min.css.
   CHỈ áp dụng khi máy ở chế độ TỐI -> chế độ sáng giữ nguyên như cũ.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  html .tabulator { background: var(--surface); color: var(--ink); border-color: var(--border); }
  html .tabulator .tabulator-tableholder,
  html .tabulator .tabulator-tableholder .tabulator-table { background: var(--surface); color: var(--ink); }

  /* tiêu đề cột */
  html .tabulator .tabulator-header,
  html .tabulator .tabulator-header .tabulator-col,
  html .tabulator .tabulator-header .tabulator-col.tabulator-moving { background: var(--page); color: var(--ink); border-color: var(--border); }
  html .tabulator .tabulator-header { border-bottom-color: var(--axis); }
  html .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor,
  html .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
  html .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
  html .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter { color: var(--muted); }
  html .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--ink-2); }
  html .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-top-color: var(--ink-2); }
  html .tabulator .tabulator-header .tabulator-calcs-holder,
  html .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { background: var(--page) !important; color: var(--ink); }

  /* dòng dữ liệu */
  html .tabulator-row { background: var(--surface); color: var(--ink); border-bottom-color: var(--grid); }
  html .tabulator-row.tabulator-row-even { background: var(--chart-surface); }
  html .tabulator-row .tabulator-cell { border-right-color: var(--border); }
  html .tabulator-row .tabulator-cell.tabulator-frozen { background: inherit; }
  html .tabulator-row.tabulator-group { background: var(--page); color: var(--ink); border-color: var(--border); }
  html .tabulator-row.tabulator-group span { color: var(--muted); }
  html .tabulator-row.tabulator-selected { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); }
  html .tabulator-row.tabulator-row-moving { background: var(--page); }
  html .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs,
  html .tabulator .tabulator-footer .tabulator-calcs-holder,
  html .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { background: var(--page) !important; color: var(--ink); }
  html .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { color: var(--muted); }
  /* nút mở / thu cây (+ / −) */
  html .tabulator-row .tabulator-cell .tabulator-data-tree-control { border-color: var(--ink-2); background: transparent; }
  html .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,
  html .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after,
  html .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after { background: var(--ink-2); }
  html .tabulator-row .tabulator-cell .tabulator-data-tree-branch { border-color: var(--axis); }

  /* chân bảng, phân trang */
  html .tabulator .tabulator-footer { background: var(--page); color: var(--ink); border-top-color: var(--border); }
  html .tabulator .tabulator-footer .tabulator-paginator { color: var(--ink); }
  html .tabulator .tabulator-footer .tabulator-page { background: var(--surface); color: var(--ink); border-color: var(--border); }
  html .tabulator .tabulator-footer .tabulator-page.active { color: var(--brand); }

  /* menu / popup / danh sách chọn của Tabulator */
  html .tabulator-menu, html .tabulator-popup-container, html .tabulator-edit-list,
  html .tabulator .tabulator-alert .tabulator-alert-msg { background: var(--surface); color: var(--ink); border-color: var(--border); }
  html .tabulator-edit-list .tabulator-edit-list-item { color: var(--ink); }
  html .tabulator-edit-list .tabulator-edit-list-item.active,
  html .tabulator-edit-list .tabulator-edit-list-item.focused { background: var(--brand); color: #fff; }
  html .tabulator-edit-list .tabulator-edit-list-placeholder { color: var(--muted); }

  /* rê chuột: chỉ máy có chuột */
  @media (hover: hover) and (pointer: fine) {
    html .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background: var(--grid); }
    html .tabulator-row.tabulator-selectable:hover,
    html .tabulator-row.tabulator-selectable.tabulator-selected:hover { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); cursor: pointer; }
    html .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover { background: var(--page); }
    html .tabulator .tabulator-footer .tabulator-page:not(disabled):hover { background: var(--grid); color: var(--ink); }
  }

  /* ô / khung tô màu cứng ở các trang (giữ chữ đọc được) */
  html .pz-warn, html .tag-heavy, html .sy-meta.warn { background: #3a2f10; color: #f5d08a; border-color: #7a5a1a; }
  html .sy-sum .add { background: #12301f; border-color: #1f6b3d; }
  html .sy-sum .upd { background: #15213d; border-color: #2c4a8a; }
  html .sy-sum .del { background: #3a1616; border-color: #7a2c2c; }
  html #wk-tbl .tabulator-row.wk-out { background: #222; color: #888; }
  html .up-grid .up-in.dirty { background: #3a2f10; color: #f5d08a; border-color: #7a5a1a; }
}