/* ============================================================================
   MODULE DARK THEME — FILE CHUẨN, ĐỒNG NHẤT CHO TOÀN APP
   ----------------------------------------------------------------------------
   Mục đích: 1 nguồn duy nhất cho giao diện dark mode của các module
   (Thống kê cơ bản, Quản lý số liệu, Hồi quy, Survival, Meta, v.v.)
   Load SAU CÙNG trong app.R để là "source of truth" (thắng các file khác).

   Cách dùng cho module mới: chỉ cần thêm id "<ten>_view" vào danh sách
   $MODULE-IDS ở các selector tab bên dưới — mọi style khác (box, bảng,
   input, badge) đã generic nên tự áp dụng, không cần sửa gì thêm.
   ============================================================================ */

:root {
  /* Nền */
  --md-bg:          #1e1e1e;   /* nền tab-content / panel */
  --md-surface:     #2b2b2b;   /* nền box-body, bảng (mặt phẳng chính) */
  --md-surface-2:   #333333;   /* hover / vùng nhấn nhẹ */
  --md-border:      rgba(255,255,255,0.14);

  /* Chữ */
  --md-text:        #e8e8e8;   /* chữ chính */
  --md-text-dim:    #bdbdbd;   /* chữ phụ / tab inactive */
  --md-text-strong: #ffffff;

  /* Nhấn (brand) */
  --md-accent:      #E67E58;   /* cam thương hiệu */
  --md-active-on-dark:  #d4695c;  /* đỏ đun — tab active trên nền tối */
  --md-active-on-light: #894242;  /* đỏ đun — tab active trên nền trắng */

  /* Header box theo status — TÔNG TRẦM hợp dark mode */
  --md-hdr-primary: #4a4540;
  --md-hdr-danger:  #6e413d;
  --md-hdr-warning: #6e5a3d;
  --md-hdr-info:    #3d4a55;
  --md-hdr-success: #3d5547;
}

/* ============================================================================
   1) NỀN CONTAINER MODULE
   ============================================================================ */
body.dark-mode .module-view { background-color: var(--md-bg) !important; }

body.dark-mode .module-view .tab-content,
body.dark-mode .module-view .tab-pane,
body.dark-mode .module-view .sidebarPanel,
body.dark-mode .module-view .mainPanel,
body.dark-mode .module-view [class*="sidebar"],
body.dark-mode .module-view [class*="panel"]:not(.box) {
  background-color: var(--md-bg) !important;
}

/* ============================================================================
   2) BOX (shinydashboard) — header màu trầm theo status, thân ĐỒNG NHẤT
   ============================================================================ */
body.dark-mode .box {
  background-color: var(--md-surface) !important;
  border: 1px solid #4a4a4a !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
}
body.dark-mode .box-body,
body.dark-mode .box-footer {
  background-color: var(--md-surface) !important;
  color: var(--md-text) !important;
}
/* Container con trong box → trong suốt (tránh 2 màu nền) */
body.dark-mode .box-body > div,
body.dark-mode .box-body .form-group,
body.dark-mode .box-body .shiny-input-container,
body.dark-mode .box-body .input-group,
body.dark-mode .box-body .well,
body.dark-mode .box-body .row,
body.dark-mode .box-body .tab-content,
body.dark-mode .box-body [class*="conditional"] {
  background-color: transparent !important;
}

/* Viền trên + header theo status (tông trầm, chữ trắng) */
body.dark-mode .box.box-primary { border-top-color: var(--md-hdr-primary) !important; }
body.dark-mode .box.box-danger  { border-top-color: var(--md-hdr-danger)  !important; }
body.dark-mode .box.box-warning { border-top-color: var(--md-hdr-warning) !important; }
body.dark-mode .box.box-info    { border-top-color: var(--md-hdr-info)    !important; }
body.dark-mode .box.box-success { border-top-color: var(--md-hdr-success) !important; }

body.dark-mode .box.box-solid.box-primary > .box-header { background-color: var(--md-hdr-primary) !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-danger  > .box-header { background-color: var(--md-hdr-danger)  !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-warning > .box-header { background-color: var(--md-hdr-warning) !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-info    > .box-header { background-color: var(--md-hdr-info)    !important; color: #fff !important; }
body.dark-mode .box.box-solid.box-success > .box-header { background-color: var(--md-hdr-success) !important; color: #fff !important; }

body.dark-mode .box-header { border-bottom-color: var(--md-border) !important; }
body.dark-mode .box-solid > .box-header,
body.dark-mode .box-solid > .box-header .box-title,
body.dark-mode .box-solid > .box-header * { color: #fff !important; }

/* ============================================================================
   3) TABS — inactive xám sáng; active đỏ đun in đậm
   ----------------------------------------------------------------------------
   $MODULE-IDS: thêm id module mới vào 2 nhóm selector dưới đây nếu module đó
   bị file agent-grids.css ghi đè bằng #id (descriptive/data_management/
   data_transform). Module khác đã được phủ bởi rule .module-view generic.
   ============================================================================ */

/* --- Tab generic cho mọi .module-view --- */
body.dark-mode .module-view .nav-tabs > li > a .ds-tab-label,
body.dark-mode .module-view .nav-tabs > li > a,
body.dark-mode .module-view .nav-pills > li > a {
  color: var(--md-text-dim) !important;
}
body.dark-mode .module-view .nav-tabs > li.active > a .ds-tab-label,
body.dark-mode .module-view .nav-pills > li.active > a {
  color: var(--md-active-on-dark) !important;
  font-weight: 700 !important;
}

/* --- Override #id để thắng agent-grids.css (3 view có style riêng) --- */
body.dark-mode #descriptive_view .nav-pills > li > a,
body.dark-mode #data_management_view .nav-pills > li > a,
body.dark-mode #data_transform_view .nav-pills > li > a,
body.dark-mode #descriptive_view .nav-tabs > li > a,
body.dark-mode #data_management_view .nav-tabs > li > a,
body.dark-mode #data_transform_view .nav-tabs > li > a {
  background-color: transparent !important;
  color: var(--md-text-dim) !important;
}
body.dark-mode #descriptive_view .nav-pills > li > a:hover,
body.dark-mode #data_management_view .nav-pills > li > a:hover,
body.dark-mode #data_transform_view .nav-pills > li > a:hover {
  background-color: var(--md-surface-2) !important;
  color: var(--md-text) !important;
}
/* Sub-tab (nav-pills) active: đỏ đun trên nền tối */
body.dark-mode #descriptive_view .nav-pills > li.active > a,
body.dark-mode #descriptive_view .nav-pills > li.active > a:hover,
body.dark-mode #descriptive_view .nav-pills > li.active > a:focus,
body.dark-mode #data_management_view .nav-pills > li.active > a,
body.dark-mode #data_management_view .nav-pills > li.active > a:hover,
body.dark-mode #data_management_view .nav-pills > li.active > a:focus,
body.dark-mode #data_transform_view .nav-pills > li.active > a,
body.dark-mode #data_transform_view .nav-pills > li.active > a:hover,
body.dark-mode #data_transform_view .nav-pills > li.active > a:focus {
  background-color: var(--md-surface) !important;
  color: var(--md-active-on-dark) !important;
  font-weight: 700 !important;
}
/* Tab chính (nav-tabs) active: nền trắng + đỏ đun #894242 — giống light mode */
body.dark-mode #descriptive_view .nav-tabs > li.active > a,
body.dark-mode #data_management_view .nav-tabs > li.active > a,
body.dark-mode #data_transform_view .nav-tabs > li.active > a {
  background-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
body.dark-mode #descriptive_view .nav-tabs > li.active > a .ds-tab-label,
body.dark-mode #data_management_view .nav-tabs > li.active > a .ds-tab-label,
body.dark-mode #data_transform_view .nav-tabs > li.active > a .ds-tab-label,
body.dark-mode #descriptive_view .nav-tabs > li.active > a span,
body.dark-mode #data_management_view .nav-tabs > li.active > a span,
body.dark-mode #data_transform_view .nav-tabs > li.active > a span {
  color: var(--md-active-on-light) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   4) DATATABLE (DT) — nền đồng nhất, pagination & search chữ trắng
   ============================================================================ */
/* TẤT CẢ phần của bảng → TRONG SUỐT, kế thừa nền container (box-body hoặc
   tab-content) → đồng nhất tuyệt đối: cả băng Search, băng Showing, hàng,
   ô, wrapper đều CÙNG một màu nền với khu vực xung quanh. */
body.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper > .row,
body.dark-mode .dataTables_wrapper > .row > div,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_paginate,
body.dark-mode .dataTables_wrapper .top,
body.dark-mode .dataTables_wrapper .bottom,
body.dark-mode table.dataTable,
body.dark-mode table.dataTable tbody,
body.dark-mode table.dataTable tbody tr,
body.dark-mode table.dataTable tbody tr.odd,
body.dark-mode table.dataTable tbody tr.even,
body.dark-mode table.dataTable tbody td,
body.dark-mode table.dataTable tbody tr.odd td,
body.dark-mode table.dataTable tbody tr.even td,
body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable tfoot th {
  background-color: transparent !important;
  color: var(--md-text) !important;
  border-color: var(--md-border) !important;
}
body.dark-mode table.dataTable thead th { color: var(--md-text-strong) !important; }
/* Hover hàng: chỉ làm sáng nhẹ, không tạo băng khác màu */
body.dark-mode table.dataTable tbody tr:hover td { background-color: rgba(255,255,255,0.05) !important; }
body.dark-mode .dataTables_filter label,
body.dark-mode .dataTables_info,
body.dark-mode .dataTables_length label { color: var(--md-text) !important; }
body.dark-mode .dataTables_filter input {
  background-color: var(--md-surface-2) !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-border) !important;
}

/* Pagination: chữ trắng, KHÔNG xanh; trang hiện tại nền cam */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate a {
  color: var(--md-text) !important;
  background: transparent !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--md-text-strong) !important;
  background: var(--md-surface-2) !important;
  border-color: var(--md-border) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #ffffff !important;
  background: #b85a38 !important;   /* cam đậm: chữ trắng đạt tương phản 4.6:1 (cam #E67E58 chỉ 2.8:1) */
  border-color: #b85a38 !important;
}

/* ============================================================================
   5) INPUT — đồng nhất, dễ nhìn
   ============================================================================ */
body.dark-mode .module-view .form-control,
body.dark-mode .module-view .selectize-input,
body.dark-mode .module-view input[type="text"],
body.dark-mode .module-view input[type="number"],
body.dark-mode .module-view select,
body.dark-mode .module-view textarea {
  background-color: var(--md-surface-2) !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-border) !important;
}
body.dark-mode .module-view .selectize-dropdown,
body.dark-mode .module-view .selectize-dropdown-content,
body.dark-mode .module-view .selectize-dropdown .option,
body.dark-mode .module-view .selectize-input > div,
body.dark-mode .module-view .selectize-input .item {
  background-color: var(--md-surface-2) !important;
  color: var(--md-text) !important;
}
body.dark-mode .module-view .selectize-dropdown .option.active,
body.dark-mode .module-view .selectize-dropdown .active {
  background-color: var(--md-accent) !important;
  color: #fff !important;
}
/* Mũi tên/placeholder của select, radio/checkbox text */
body.dark-mode .module-view .selectize-input::after { border-top-color: var(--md-text) !important; }
body.dark-mode .module-view option { background-color: var(--md-surface-2) !important; color: var(--md-text) !important; }

/* Nút download — chữ xám sáng, hover GIỮ NGUYÊN (không xanh) */
body.dark-mode .shiny-download-link,
body.dark-mode .shiny-download-link:hover,
body.dark-mode .shiny-download-link:focus {
  color: var(--md-text) !important;
}

/* ============================================================================
   5b) OVERRIDE INLINE <style> CỦA TỪNG MODULE (plot frame trắng, panel sáng)
   Mỗi module hardcode nền trắng/sáng trong <style> riêng → ép về nền tối.
   ============================================================================ */
body.dark-mode .module-view [class*="plot-frame"],
body.dark-mode .module-view [class*="-frame"],
body.dark-mode .module-view .well,
body.dark-mode .module-view .panel,
body.dark-mode .module-view .panel-body,
body.dark-mode .module-view .thumbnail,
body.dark-mode .module-view .shiny-input-panel {
  background-color: var(--md-surface) !important;
  border-color: var(--md-border) !important;
  color: var(--md-text) !important;
}
/* Vùng chứa biểu đồ trắng → trong suốt để hòa nền */
body.dark-mode .module-view [class*="plot-frame"] .shiny-plot-output,
body.dark-mode .module-view [class*="-frame"] img { background-color: transparent !important; }

/* ============================================================================
   6) rhandsontable — định dạng thống nhất
   ============================================================================ */
body.dark-mode .handsontable,
body.dark-mode .handsontable .wtHolder,
body.dark-mode .handsontable table {
  background-color: var(--md-surface) !important;
  color: var(--md-text) !important;
}
body.dark-mode .handsontable th {
  background-color: var(--md-surface-2) !important;
  color: var(--md-text) !important;
  border-color: var(--md-border) !important;
  font-weight: 600 !important;
}
body.dark-mode .handsontable td {
  background-color: var(--md-surface) !important;
  color: var(--md-text) !important;
  border-color: var(--md-border) !important;
}
body.dark-mode .handsontable tr:nth-child(even) td { background-color: #303030 !important; }
body.dark-mode .handsontable td.current,
body.dark-mode .handsontable td.area { background-color: #3d4f3d !important; }
body.dark-mode .handsontable .htDropdownMenu,
body.dark-mode .handsontable .htContextMenu {
  background-color: var(--md-surface-2) !important;
  color: var(--md-text) !important;
}

/* ============================================================================
   7) GIỮ MÀU NHẤN (cam/đỏ) — không bị rule chữ trắng nuốt
   ============================================================================ */
body.dark-mode .module-view .text-accent,
body.dark-mode .module-view .ds-hero-accent { color: var(--md-accent) !important; }

/* ============================================================================
   8) PHẦN TỬ NỘI DUNG — đồng nhất cho mọi module
   (Code R, lý thuyết, tài liệu tham khảo, bảng gt, well, help-text...)
   ============================================================================ */

/* Box-title: luôn chữ trắng trên header màu (mọi status) */
body.dark-mode .box-header > .box-title,
body.dark-mode .box-header .box-title { color: #ffffff !important; }

/* Hiển thị "Code R" / output text — verbatimTextOutput, pre, code */
body.dark-mode .module-view pre,
body.dark-mode .module-view code,
body.dark-mode .module-view .shiny-text-output,
body.dark-mode .module-view .verbatim,
body.dark-mode pre.shiny-text-output {
  background-color: #1b1b1b !important;
  color: #e6e6e6 !important;
  border: 1px solid var(--md-border) !important;
  border-radius: 4px !important;
}

/* Khối lý thuyết / tài liệu tham khảo (HTML trong box-body) */
body.dark-mode .module-view .box-body,
body.dark-mode .module-view .box-body p,
body.dark-mode .module-view .box-body li,
body.dark-mode .module-view .box-body td,
body.dark-mode .module-view .box-body span,
body.dark-mode .module-view .box-body div:not(.box):not(.box-header) {
  color: var(--md-text) !important;
}
/* Link nội dung trong box; số trang của bảng giữ màu ở mục Pagination phía trên */
body.dark-mode .module-view .box-body a:not(.btn):not(.paginate_button) { color: #8cc0ff !important; }
body.dark-mode .module-view .box-body strong,
body.dark-mode .module-view .box-body b { color: #ffffff !important; }

/* Bảng kết quả gt (gtsummary/gt) */
body.dark-mode .module-view .gt_table,
body.dark-mode .module-view .gt_table * {
  background-color: var(--md-surface) !important;
  color: var(--md-text) !important;
  border-color: var(--md-border) !important;
}
body.dark-mode .module-view .gt_heading,
body.dark-mode .module-view .gt_column_spanner,
body.dark-mode .module-view .gt_col_heading {
  background-color: var(--md-surface-2) !important;
  color: #ffffff !important;
}

/* Bảng thường (renderTable / flextable HTML) */
body.dark-mode .module-view table:not(.dataTable):not(.handsontable) th {
  background-color: var(--md-surface-2) !important;
  color: #ffffff !important;
  border-color: var(--md-border) !important;
}
body.dark-mode .module-view table:not(.dataTable):not(.handsontable) td {
  background-color: var(--md-surface) !important;
  color: var(--md-text) !important;
  border-color: var(--md-border) !important;
}

/* wellPanel, help-block, radio/checkbox label */
body.dark-mode .module-view .well {
  background-color: var(--md-surface) !important;
  border: 1px solid var(--md-border) !important;
}
body.dark-mode .module-view .help-block,
body.dark-mode .module-view .shiny-input-container > .control-label,
body.dark-mode .module-view label,
body.dark-mode .module-view .radio label,
body.dark-mode .module-view .checkbox label { color: var(--md-text) !important; }

/* Đường kẻ ngang */
body.dark-mode .module-view hr { border-top-color: var(--md-border) !important; }

/* Vùng chứa biểu đồ (giữ nền tối đồng nhất, không trắng) */
body.dark-mode .module-view .shiny-plot-output,
body.dark-mode .module-view .plot-container { background-color: transparent !important; }

/* ============================================================================
   9) LAYOUT — ÁP DỤNG CẢ LIGHT & DARK (không có tiền tố body.dark-mode)
   Bảng gt/gtsummary mặc định auto-width + căn giữa → ép STRETCH hết chiều
   rộng của box cho mọi module.
   ============================================================================ */
.module-view .gt_table {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  table-layout: auto !important;
}
.module-view .gt_table_container,
.module-view .gtsummary,
.module-view .gt_table_container > div {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}
/* Cột stub/đầu của gt giãn để lấp khoảng trống */
.module-view .gt_table .gt_col_heading,
.module-view .gt_table .gt_column_spanner { white-space: normal !important; }

/* CỠ CHỮ ĐỒNG NHẤT cho mọi bảng gt/gtsummary (chuẩn 13px — theo bảng nhỏ).
   Ép cả container lẫn từng phần tử vì gt set font-size inline theo cấp. */
.module-view .gt_table,
.module-view .gt_table * {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
/* Tiêu đề bảng (BẢNG MÔ TẢ...) nằm ở box-header, không bị ảnh hưởng. */