/* ============================================================
   CBIZ DARK THEME
   Applied when <html data-theme="dark"> is set.
   Overrides CSS variables and hardcoded colours in:
     - cbiz-modern.css (alerts, badges, auth inline styles)
     - header.blade.php inline <style> (gs-*, qa-*)
     - auth2.blade.php inline <style>
     - AdminLTE/Bootstrap base components
   ============================================================ */

/* ── 1. Dark-mode CSS variable palette ─────────────────────── */
html[data-theme="dark"] {
  /* Background scale */
  --bg-body:        #0f172a;
  --bg-surface:     #1e293b;
  --bg-surface-2:   #253347;
  --bg-surface-3:   #334155;

  /* Typography */
  --text-base:      #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* Borders */
  --border:         #334155;
  --border-strong:  #475569;

  /* Sidebar */
  --sidebar-bg:     #1e293b;
  --sidebar-text:   #94a3b8;
  --sidebar-hover:  rgba(141,198,63,.09);
  --sidebar-active-bg: rgba(141,198,63,.14);

  /* Header stays brand-blue — just slightly darker for depth */
  --header-bg:      #133c78;

  /* Tinted light surfaces → dark equivalents */
  --c-blue-light:   rgba(25,79,151,.28);
  --c-sky-light:    rgba(39,170,225,.16);
  --c-green-light:  rgba(141,198,63,.16);
}

/* ── 2. Base ────────────────────────────────────────────────── */
html[data-theme="dark"] body {
  background-color: var(--bg-body) !important;
  color: var(--text-base) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--text-base) !important;
}

html[data-theme="dark"] hr { border-top-color: var(--border) !important; }

/* ── 3. Scrollbar ───────────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-surface) !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong) !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted) !important;
}

/* ── 4. Sidebar ─────────────────────────────────────────────── */
html[data-theme="dark"] .main-sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right-color: var(--border) !important;
}

html[data-theme="dark"] .sidebar-menu > li.header {
  color: var(--border-strong) !important;
}
html[data-theme="dark"] .sidebar-menu > li.header::before {
  background: var(--border) !important;
}

html[data-theme="dark"] .cbiz-sidebar-brand {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}

/* ── 5. Header dropdown menus ───────────────────────────────── */
html[data-theme="dark"] .main-header .navbar .menu-box,
html[data-theme="dark"] .main-header .navbar ul.dropdown-menu.menu-box {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .main-header .navbar .menu-box .sub-menu-link {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .main-header .navbar .menu-box .sub-menu-link:hover {
  background-color: var(--bg-surface-2) !important;
  color: var(--c-sky) !important;
}
html[data-theme="dark"] .main-header .navbar .menu-box .sub-menu-link i {
  color: var(--text-muted) !important;
}

/* User info block inside menu-box (inline styles in header.blade.php) */
html[data-theme="dark"] .menu-box > li:first-child {
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="dark"] .menu-box > li:first-child > div:first-child {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .menu-box > li:last-child {
  border-top: 1px solid var(--border) !important;
}

/* Notifications dropdown */
html[data-theme="dark"] .main-header .navbar .notifications-menu > .dropdown-menu {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .main-header .navbar .notifications-menu .dropdown-menu li.header {
  background: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .main-header .navbar .notifications-menu .dropdown-menu li.footer a {
  background: var(--bg-surface-2) !important;
  border-top-color: var(--border) !important;
  color: var(--c-sky) !important;
}
html[data-theme="dark"] .main-header .navbar .notifications-menu .dropdown-menu li > a {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .main-header .navbar .notifications-menu .dropdown-menu li > a:hover {
  background: var(--bg-surface-2) !important;
}

/* ── 6. Global Search (inline CSS in header.blade.php) ──────── */
html[data-theme="dark"] .gs-dropdown {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .gs-group-label {
  background: var(--bg-surface-2) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .gs-item {
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .gs-item:hover,
html[data-theme="dark"] .gs-item.gs-active {
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .gs-item-icon {
  background: rgba(25,79,151,.28) !important;
  color: #7eb3ff !important;
}
html[data-theme="dark"] .gs-item-title {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .gs-item-sub {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .gs-badge {
  background: rgba(25,79,151,.28) !important;
  color: #7eb3ff !important;
}
html[data-theme="dark"] .gs-empty {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .gs-footer {
  background: var(--bg-surface-2) !important;
  border-top-color: var(--border) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .gs-footer kbd {
  background: var(--bg-surface-3) !important;
  color: var(--text-secondary) !important;
}

/* ── 7. Quick Add menu (inline CSS in header.blade.php) ─────── */
html[data-theme="dark"] .qa-menu {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .qa-menu-header {
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .qa-menu-title {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .qa-card {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .qa-card:hover {
  background: var(--bg-surface-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-base) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .qa-label { color: var(--text-base) !important; }
html[data-theme="dark"] .qa-sub   { color: var(--text-muted) !important; }

/* ── 8. Content wrapper ─────────────────────────────────────── */
html[data-theme="dark"] .content-wrapper {
  background-color: var(--bg-body) !important;
}

/* ── 9. Boxes / Cards ───────────────────────────────────────── */
html[data-theme="dark"] .box {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .box-header {
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .box-body {
  background: var(--bg-surface) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .box-footer {
  background: var(--bg-surface-2) !important;
  border-top-color: var(--border) !important;
}

/* ── 10. Dashboard info / small boxes ───────────────────────── */
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .dashboard-info-box {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .small-box {
  border-color: var(--border) !important;
}
/* Custom table (inline style in css.blade.php) */
html[data-theme="dark"] .custom-table {
  background: var(--bg-surface-2) !important;
}

/* ── 11. Tables ─────────────────────────────────────────────── */
html[data-theme="dark"] .table {
  background-color: var(--bg-surface) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .table > thead > tr > th {
  background-color: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .table > tbody > tr > td {
  border-top-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(255,255,255,.025) !important;
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
  border-color: var(--border) !important;
}
/* DataTables */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] table.dataTable thead th.sorting,
html[data-theme="dark"] table.dataTable thead th.sorting_asc,
html[data-theme="dark"] table.dataTable thead th.sorting_desc {
  background-color: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: var(--text-muted) !important;
}

/* ── 12. Forms & Inputs ─────────────────────────────────────── */
html[data-theme="dark"] .form-control {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .form-control:focus {
  background-color: var(--bg-surface) !important;
  border-color: var(--c-sky) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .input-group-addon {
  background-color: var(--bg-surface-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .form-group label {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .help-block {
  color: var(--text-muted) !important;
}

/* Select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .select2-dropdown {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .select2-results__options {
  background: var(--bg-surface) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--text-secondary) !important;
  background: transparent !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option:hover,
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--c-blue) !important;
  color: #fff !important;
}
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bg-surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  background: var(--bg-surface-2) !important;
}

/* Date range picker */
html[data-theme="dark"] .daterangepicker {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .daterangepicker .calendar-table {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .daterangepicker td.available {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .daterangepicker td.in-range {
  background: rgba(25,79,151,.25) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .daterangepicker td.off {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .daterangepicker .ranges ul { background: var(--bg-surface) !important; }
html[data-theme="dark"] .daterangepicker .ranges li {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li.active {
  background: var(--c-blue) !important;
  color: #fff !important;
}
html[data-theme="dark"] .daterangepicker .drp-buttons {
  border-top-color: var(--border) !important;
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}

/* jQuery UI Datepicker */
html[data-theme="dark"] .ui-datepicker {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .ui-datepicker .ui-datepicker-header {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .ui-datepicker .ui-datepicker-prev,
html[data-theme="dark"] .ui-datepicker .ui-datepicker-next {
  background: transparent !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .ui-datepicker th { color: var(--text-muted) !important; }
html[data-theme="dark"] .ui-datepicker td span,
html[data-theme="dark"] .ui-datepicker td a {
  background: transparent !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .ui-datepicker td a:hover {
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .ui-datepicker .ui-state-active,
html[data-theme="dark"] .ui-datepicker .ui-state-highlight {
  background: var(--c-blue) !important;
  color: #fff !important;
  border-color: var(--c-blue) !important;
}
html[data-theme="dark"] .ui-datepicker .ui-priority-secondary {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* iCheck */
html[data-theme="dark"] .icheckbox_square-blue,
html[data-theme="dark"] .iradio_square-blue {
  filter: invert(0.85) hue-rotate(160deg);
}

/* ── 13. Buttons ─────────────────────────────────────────────── */
html[data-theme="dark"] .btn-default {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-base) !important;
}
/* DataTable export buttons */
html[data-theme="dark"] .buttons-csv,
html[data-theme="dark"] .buttons-excel,
html[data-theme="dark"] .buttons-pdf,
html[data-theme="dark"] .buttons-print,
html[data-theme="dark"] .buttons-collection {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .buttons-csv:hover,
html[data-theme="dark"] .buttons-excel:hover,
html[data-theme="dark"] .buttons-pdf:hover,
html[data-theme="dark"] .buttons-print:hover {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-base) !important;
}
/* multipay-button dark contrast fix */
html[data-theme="dark"] .multipay-button {
  background: var(--bg-surface-3) !important;
  border-color: var(--border-strong) !important;
}

/* ── 14. Modals ─────────────────────────────────────────────── */
html[data-theme="dark"] .modal-content {
  background: var(--bg-surface) !important;
}
html[data-theme="dark"] .modal-header {
  background-color: var(--bg-surface) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .modal-header .modal-title {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .modal-header .close {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .modal-body {
  background: var(--bg-surface) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .modal-footer {
  background: var(--bg-surface-2) !important;
  border-top-color: var(--border) !important;
}
html[data-theme="dark"] .modal-backdrop.in {
  opacity: .7 !important;
}

/* ── 15. Alerts ─────────────────────────────────────────────── */
html[data-theme="dark"] .alert-success {
  background-color: rgba(22,101,52,.22) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .alert-info {
  background-color: rgba(39,170,225,.16) !important;
  color: #7dd3fc !important;
}
html[data-theme="dark"] .alert-warning {
  background-color: rgba(245,158,11,.16) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .alert-danger {
  background-color: rgba(239,68,68,.16) !important;
  color: #fca5a5 !important;
}

/* ── 16. Badges / Labels ────────────────────────────────────── */
html[data-theme="dark"] .label-default,
html[data-theme="dark"] .badge-default {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .label-primary,
html[data-theme="dark"] .badge-primary {
  background-color: rgba(25,79,151,.32) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .label-success,
html[data-theme="dark"] .badge-success {
  background-color: rgba(141,198,63,.22) !important;
  color: #a3e635 !important;
}
html[data-theme="dark"] .label-info,
html[data-theme="dark"] .badge-info {
  background-color: rgba(39,170,225,.22) !important;
  color: #7dd3fc !important;
}
html[data-theme="dark"] .label-warning,
html[data-theme="dark"] .badge-warning {
  background-color: rgba(245,158,11,.22) !important;
  color: #fcd34d !important;
}
html[data-theme="dark"] .label-danger,
html[data-theme="dark"] .badge-danger {
  background-color: rgba(239,68,68,.22) !important;
  color: #fca5a5 !important;
}

/* ── 17. Navigation tabs ────────────────────────────────────── */
html[data-theme="dark"] .nav-tabs-custom {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs {
  background: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .nav-tabs-custom > .tab-content,
html[data-theme="dark"] .pos-tab-content {
  background: var(--bg-surface) !important;
  color: var(--text-base) !important;
}

/* ── 18. Dropdown menus ─────────────────────────────────────── */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .dropdown-menu > .active > a,
html[data-theme="dark"] .dropdown-menu > .active > a:hover {
  background-color: rgba(25,79,151,.30) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .dropdown-menu .divider {
  background-color: var(--border) !important;
}
html[data-theme="dark"] .dropdown-menu .dropdown-header {
  color: var(--text-muted) !important;
}

/* ── 19. Footer ─────────────────────────────────────────────── */
html[data-theme="dark"] .main-footer {
  background-color: var(--bg-surface) !important;
  border-top-color: var(--border) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .main-footer .btn-xs.toggle-font-size {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .main-footer .btn-xs.toggle-font-size:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
}

/* ── 20. Pagination ─────────────────────────────────────────── */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .pagination > li > a:hover {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--c-sky) !important;
}
html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* ── 21. Popover / Tooltip ──────────────────────────────────── */
html[data-theme="dark"] .popover {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .popover-title {
  background: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .popover-content {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .popover.top    > .arrow::after { border-top-color: var(--bg-surface) !important; }
html[data-theme="dark"] .popover.bottom > .arrow::after { border-bottom-color: var(--bg-surface) !important; }
html[data-theme="dark"] .popover.left   > .arrow::after { border-left-color: var(--bg-surface) !important; }
html[data-theme="dark"] .popover.right  > .arrow::after { border-right-color: var(--bg-surface) !important; }
html[data-theme="dark"] .tooltip-inner {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-base) !important;
}

/* ── 22. Well / Panel / Callout ─────────────────────────────── */
html[data-theme="dark"] .well {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .panel {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .panel-heading {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .panel-body {
  background: var(--bg-surface) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .callout {
  background: var(--bg-surface) !important;
  border-left-color: var(--border-strong) !important;
}

/* ── 23. List groups ────────────────────────────────────────── */
html[data-theme="dark"] .list-group-item {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .list-group-item.active:hover {
  background: var(--c-blue) !important;
  border-color: var(--c-blue) !important;
  color: #fff !important;
}
html[data-theme="dark"] .list-group-item:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}

/* ── 24. Pre / code ─────────────────────────────────────────── */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: #a5f3fc !important;
}

/* ── 25. Progress bar track ─────────────────────────────────── */
html[data-theme="dark"] .progress {
  background-color: var(--bg-surface-3) !important;
}

/* ── 26. Dropzone ───────────────────────────────────────────── */
html[data-theme="dark"] .dropzone {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .dropzone:hover {
  border-color: var(--c-sky) !important;
  background: rgba(39,170,225,.08) !important;
}

/* ── 27. Auth pages (auth2.blade.php inline styles) ─────────── */
html[data-theme="dark"] .auth-form-panel {
  background: #1e293b !important;
}
html[data-theme="dark"] .auth-heading {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .auth-subheading {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .auth-logo-text {
  color: #7eb3ff !important;
}
html[data-theme="dark"] .auth-form-inner label {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .auth-form-inner .form-control {
  border-color: #334155 !important;
  background: #253347 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] .auth-form-inner .form-control:focus {
  background: #1e293b !important;
  border-color: #8dc63f !important;
}
html[data-theme="dark"] .auth-lang-selector select {
  background-color: #253347 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .auth-options label {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .auth-register-link {
  color: #94a3b8 !important;
}
html[data-theme="dark"] #show-password { color: #64748b !important; background: none !important; }
html[data-theme="dark"] #show-password:hover { color: #94a3b8 !important; background: rgba(255,255,255,.07) !important; }

/* ── Math CAPTCHA (auth2 login dark mode) ── */
html[data-theme="dark"] .math-captcha-block {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .math-captcha-equation { color: var(--text-base) !important; }
html[data-theme="dark"] .math-captcha-equation span {
  background: #1e3a5f !important;
  color: #7eb3ff !important;
}
html[data-theme="dark"] .math-captcha-hint { color: var(--text-muted) !important; }
html[data-theme="dark"] .math-captcha-refresh {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .math-captcha-refresh:hover {
  color: #7eb3ff !important;
  border-color: #475569 !important;
}

/* ── 28. Misc admin/status blocks ───────────────────────────── */
/* Dashboard info border (inline in css.blade.php) */
html[data-theme="dark"] .dashboard-info-box {
  border-color: var(--border) !important;
}
/* Callout variants keep their left border accent but get dark bg */
html[data-theme="dark"] .callout.callout-success { background: rgba(22,101,52,.15) !important; }
html[data-theme="dark"] .callout.callout-info    { background: rgba(39,170,225,.10) !important; }
html[data-theme="dark"] .callout.callout-warning { background: rgba(245,158,11,.10) !important; }
html[data-theme="dark"] .callout.callout-danger  { background: rgba(239,68,68,.10) !important; }

/* Section title border */
html[data-theme="dark"] .section-title {
  border-bottom-color: var(--border) !important;
  color: var(--text-base) !important;
}

/* ── 29. Print: always force white background ────────────────── */
@media print {
  html[data-theme="dark"] * {
    background: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
    box-shadow: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PATCH BLOCK — Overrides for app.css hardcoded #fff !important
   rules that have equal or higher CSS specificity than the
   generic selectors above.  Uses the SAME selectors as app.css
   but prefixed with html[data-theme="dark"], giving them one
   extra attribute selector (B+1) so they always win.
   ══════════════════════════════════════════════════════════════ */

/* ── P1. Table header / footer cells (app.css lines 399-406) ── */
html[data-theme="dark"] .table-bordered > tfoot > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table-condensed > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > thead:first-child > tr:first-child > th {
  background: var(--bg-surface-2) !important;
  color: var(--text-muted) !important;
}

/* ── P2. Big white block from app.css lines 407-445 ─────────── */
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .box,
html[data-theme="dark"] .box-body,
html[data-theme="dark"] .box-footer,
html[data-theme="dark"] .box-header,
html[data-theme="dark"] .box-title,
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .even,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .nav-tabs-custom,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a,
html[data-theme="dark"] .pos-tab-container,
html[data-theme="dark"] .pos-tab-content,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .well {
  background: var(--bg-surface) !important;
  color: var(--text-base) !important;
  border-color: var(--border) !important;
}
/* Restore correct bg for box sub-sections */
html[data-theme="dark"] .box-footer { background: var(--bg-surface-2) !important; }
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs { background: var(--bg-surface-2) !important; }

/* ── P3. DataTable striped rows ──────────────────────────────── */
html[data-theme="dark"] .odd > td { background: var(--bg-surface) !important; color: var(--text-secondary) !important; }
html[data-theme="dark"] .even > td { background: var(--bg-surface-2) !important; color: var(--text-secondary) !important; }
html[data-theme="dark"] tr.odd  { background: var(--bg-surface) !important; }
html[data-theme="dark"] tr.even { background: var(--bg-surface-2) !important; }

/* ── P4. Input-group addon (app.css line 446-451) ────────────── */
html[data-theme="dark"] .input-group .input-group-addon {
  background: var(--bg-surface-3) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-strong) !important;
}

/* ── P5. Form-control + Select2 single selection (app.css 458-477) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .input-sm,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-selection .select2-selection--single,
html[data-theme="dark"] .select2-selection__rendered,
html[data-theme="dark"] .select2-search__field,
html[data-theme="dark"] fieldset[disabled] .form-control {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
  border-color: var(--border-strong) !important;
}

/* ── P6. Select2 results / options (app.css lines 485-494) ───── */
html[data-theme="dark"] .select2-container--default .select2-results > .select2-results__options,
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-search {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}

/* ── P7. Bootstrap datepicker (not jQuery UI — class .datepicker) */
html[data-theme="dark"] .datepicker {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th {
  background: transparent !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover,
html[data-theme="dark"] .datepicker table tr td.selected,
html[data-theme="dark"] .datepicker table tr td.selected:hover {
  background: var(--c-blue) !important;
  color: #fff !important;
}
html[data-theme="dark"] .datepicker table tr td:hover,
html[data-theme="dark"] .datepicker table tr th:hover {
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .datepicker table tr td.today,
html[data-theme="dark"] .datepicker table tr td.today:hover {
  background: var(--c-green-light) !important;
  color: var(--c-green-dark) !important;
}
html[data-theme="dark"] .datepicker .datepicker-switch,
html[data-theme="dark"] .datepicker .next,
html[data-theme="dark"] .datepicker .prev,
html[data-theme="dark"] .datepicker tfoot tr th {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .datepicker td.old,
html[data-theme="dark"] .datepicker td.new { color: var(--text-muted) !important; }

/* ── P8. Pagination (app.css sets blue bg — beats our override) ─ */
html[data-theme="dark"] .paginate_button,
html[data-theme="dark"] .paginate_button.next,
html[data-theme="dark"] .paginate_button.previous,
html[data-theme="dark"] .pagination > li > a {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .paginate_button.current,
html[data-theme="dark"] .paginate_button.current:hover,
html[data-theme="dark"] .pagination > .active > a {
  background: var(--c-blue) !important;
  color: #fff !important;
  border-color: var(--c-blue) !important;
}
html[data-theme="dark"] .paginate_button:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .paginate_button.disabled {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
}

/* ── P9. Form-control focus (app.css line 479-484) ───────────── */
html[data-theme="dark"] .form-control:focus {
  border-color: var(--c-sky) !important;
  box-shadow: 0 0 0 3px rgba(39,170,225,.20) !important;
  background: var(--bg-surface) !important;
}

/* ── P10. Dropdown hover (app.css line 495-504) ──────────────── */
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--c-blue) !important;
  color: #fff !important;
}

/* ── P11. TinyMCE editor (white editor body + menu) ─────────── */
html[data-theme="dark"] .tox .tox-toolbar,
html[data-theme="dark"] .tox .tox-toolbar__primary {
  background-color: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .tox .tox-edit-area__iframe { background: var(--bg-surface) !important; }
html[data-theme="dark"] .tox .tox-menu,
html[data-theme="dark"] .tox .tox-collection--list .tox-collection__group,
html[data-theme="dark"] .tox .tox-collection--list .tox-collection__item,
html[data-theme="dark"] .tox .tox-collection--list .tox-collection__item--enabled {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .tox .tox-collection--list .tox-collection__item--active {
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .tox-edit-area {
  background: var(--bg-surface) !important;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD WIDGETS — Classes from cbiz-modern.css §42 & §43.
   CSS variables already update, but we add explicit targets so
   any vendor rule can't slip through.
   ══════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .dash-widget {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .dash-widgetcontent h5 { color: var(--text-base) !important; }
html[data-theme="dark"] .dash-widgetcontent h6 { color: var(--text-muted) !important; }

html[data-theme="dark"] .dpos-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .dpos-card-header {
  background: var(--bg-surface) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .dpos-card-title { color: var(--text-base) !important; }
html[data-theme="dark"] .dpos-card-body { background: var(--bg-surface) !important; }

/* ══════════════════════════════════════════════════════════════
   GOOGLE CHARTS — Charts render inline SVG. CSS `fill` and
   `stroke` override SVG presentation attributes (spec-compliant).
   Targets all chart container divs by the naming convention
   used in home.js (*_chart_div).
   ══════════════════════════════════════════════════════════════ */


/* ── Highcharts — CSS fallback for any element not covered by JS theme ── */
/* home.js already calls dashboardChartTheme() and redraws charts on
   cbiz:themechange, so these are belt-and-suspenders for edge cases only. */
html[data-theme="dark"] .highcharts-background {
  fill: transparent !important;
}
html[data-theme="dark"] .highcharts-plot-background {
  fill: transparent !important;
}
html[data-theme="dark"] .highcharts-grid-line {
  stroke: var(--border) !important;
}
html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick {
  stroke: var(--border-strong) !important;
}
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-legend-item text {
  fill: var(--text-secondary) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .highcharts-tooltip-box {
  fill: var(--bg-surface-2) !important;
  stroke: var(--border) !important;
}
html[data-theme="dark"] .highcharts-tooltip text,
html[data-theme="dark"] .highcharts-tooltip tspan {
  fill: var(--text-base) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .dashboard-chart-empty {
  color: var(--text-muted) !important;
}

/* ── Skin-blue-light sidebar dark override (vendor.css conflict) */
html[data-theme="dark"] .skin-blue-light .main-sidebar,
html[data-theme="dark"] .skin-blue-light .sidebar {
  background-color: var(--sidebar-bg) !important;
}
html[data-theme="dark"] .skin-blue-light .sidebar-menu > li > a,
html[data-theme="dark"] .skin-blue-light .sidebar a {
  color: var(--sidebar-text) !important;
}
html[data-theme="dark"] .skin-blue-light .sidebar-menu > li > a:hover,
html[data-theme="dark"] .skin-blue-light .sidebar-menu > li.active > a,
html[data-theme="dark"] .skin-blue-light .sidebar-menu > li.menu-open > a {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .skin-blue-light .sidebar-menu > li.header {
  color: var(--border-strong) !important;
  background: transparent !important;
}
html[data-theme="dark"] .skin-blue-light .sidebar-menu .treeview-menu {
  background: transparent !important;
}
html[data-theme="dark"] .skin-blue-light .sidebar-menu .treeview-menu > li > a {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
html[data-theme="dark"] .skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--c-sky) !important;
  background-color: var(--sidebar-hover) !important;
}

/* ── Google Charts container background (legacy — kept for any module
   that still renders a Google Chart outside the dashboard) ─────── */
html[data-theme="dark"] [id$="_chart_div"] {
  background: var(--bg-surface) !important;
}

/* ── Skin-specific content-wrapper (vendor.css sets bg) ──────── */
html[data-theme="dark"] .skin-blue-light .content-wrapper,
html[data-theme="dark"] [class*="skin-"] .content-wrapper {
  background: var(--bg-body) !important;
}

/* ── Toastr notifications ────────────────────────────────────── */
html[data-theme="dark"] #toast-container > .toast-success { background-color: #14532d !important; }
html[data-theme="dark"] #toast-container > .toast-error   { background-color: #7f1d1d !important; }
html[data-theme="dark"] #toast-container > .toast-info    { background-color: #0c4a6e !important; }
html[data-theme="dark"] #toast-container > .toast-warning { background-color: #78350f !important; }

/* ── Scrolltop button ────────────────────────────────────────── */
html[data-theme="dark"] .scrolltop {
  background-color: var(--bg-surface-2) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .scrolltop .scroll.icon { color: var(--text-secondary) !important; }

/* ============================================================
   FINAL DARK COVERAGE PATCH
   Broad, scoped overrides for remaining Dream POS/AdminLTE
   surfaces that can otherwise keep white backgrounds.
   ============================================================ */

:root {
  --app-bg: var(--bg-body);
  --app-surface: var(--bg-surface);
  --app-surface-alt: var(--bg-surface-2);
  --app-text: var(--text-base);
  --app-text-muted: var(--text-muted);
  --app-border: var(--border);
  --app-input-bg: var(--bg-surface);
  --app-input-text: var(--text-base);
  --app-input-border: var(--border-strong);
  --app-hover: var(--bg-surface-2);
  --app-primary: var(--c-blue);
}

html[data-theme="dark"] {
  --app-bg: var(--bg-body);
  --app-surface: var(--bg-surface);
  --app-surface-alt: var(--bg-surface-2);
  --app-text: var(--text-base);
  --app-text-muted: var(--text-muted);
  --app-border: var(--border);
  --app-input-bg: var(--bg-surface-2);
  --app-input-text: var(--text-base);
  --app-input-border: var(--border-strong);
  --app-hover: #273449;
  --app-primary: var(--c-blue);
  --pos-mobile-bg: var(--app-surface);
  --pos-mobile-cell-bg: var(--app-surface-alt);
  --pos-mobile-border: var(--app-border);
  --pos-mobile-separator: var(--app-border);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.cbiz-module-page,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .content,
html[data-theme="dark"] section.content,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .container-fluid {
  background-color: var(--app-bg) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .content-header,
html[data-theme="dark"] .content-header > h1,
html[data-theme="dark"] .content-header > .breadcrumb,
html[data-theme="dark"] .breadcrumb {
  background: transparent !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .breadcrumb > li,
html[data-theme="dark"] .breadcrumb > .active,
html[data-theme="dark"] .content-header small,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .description-block > .description-text {
  color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .box,
html[data-theme="dark"] .box-solid,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .dash-widget,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .dashboard-info-box,
html[data-theme="dark"] .dpos-card,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .filter-wrapper,
html[data-theme="dark"] .search-filter,
html[data-theme="dark"] .pos-tab-container,
html[data-theme="dark"] .privacy-policy-card {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .box-header,
html[data-theme="dark"] .box-title,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .dpos-card-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-light-gray,
html[data-theme="dark"] .bg-lightgray,
html[data-theme="dark"] .bg-gray,
html[data-theme="dark"] .footer-total,
html[data-theme="dark"] tr.footer-total {
  background-color: var(--app-surface-alt) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .white,
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"] {
  background-color: var(--app-surface) !important;
  background-image: none !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] table.table,
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] .dataTables_wrapper {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td {
  background-color: var(--app-surface-alt) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable tbody th,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] .table > tbody > tr,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tbody > tr > td {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #172033 !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
  background-color: var(--app-hover) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] table.dataTable.no-footer,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
  background-color: var(--app-input-bg) !important;
  color: var(--app-input-text) !important;
  border-color: var(--app-input-border) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_empty {
  color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--app-surface-alt) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--app-hover) !important;
  color: var(--app-text) !important;
  border-color: var(--app-input-border) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--app-primary) !important;
  color: #ffffff !important;
  border-color: var(--app-primary) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="file"] {
  background-color: var(--app-input-bg) !important;
  color: var(--app-input-text) !important;
  border-color: var(--app-input-border) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--app-text-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] option,
html[data-theme="dark"] optgroup {
  background-color: var(--app-input-bg) !important;
  color: var(--app-input-text) !important;
}

html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] .input-group-btn .btn,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn.btn-default.bg-white,
html[data-theme="dark"] .btn.bg-white {
  background: var(--app-surface-alt) !important;
  color: var(--app-text) !important;
  border-color: var(--app-input-border) !important;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus,
html[data-theme="dark"] .btn.bg-white:hover,
html[data-theme="dark"] .btn.bg-white:focus {
  background: var(--app-hover) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-draft,
html[data-theme="dark"] .quotation-button,
html[data-theme="dark"] .recent-button,
html[data-theme="dark"] .suspend-button,
html[data-theme="dark"] .credit-button,
html[data-theme="dark"] .card-pay,
html[data-theme="dark"] .cash-button,
html[data-theme="dark"] .pesapal-button,
html[data-theme="dark"] .buttons-csv,
html[data-theme="dark"] .buttons-excel,
html[data-theme="dark"] .buttons-pdf,
html[data-theme="dark"] .buttons-print,
html[data-theme="dark"] .buttons-collection {
  color: #ffffff !important;
}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-menu.menu-box,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--default .select2-results > .select2-results__options {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .select2-results__option {
  color: var(--app-text) !important;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--app-hover) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] button.close {
  color: var(--app-text) !important;
  opacity: .9 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .nav-tabs-custom,
html[data-theme="dark"] .nav-tabs-custom > .tab-content,
html[data-theme="dark"] .pos-tab-content {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .nav-tabs > li > a,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
  background: transparent !important;
  color: var(--app-text-muted) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  border-bottom-color: var(--app-surface) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-selection .select2-selection--single {
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-input-border) !important;
  color: var(--app-input-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection__choice {
  color: var(--app-input-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--app-hover) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--app-primary) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--app-input-bg) !important;
  color: var(--app-input-text) !important;
  border-color: var(--app-input-border) !important;
}

html[data-theme="dark"] .alert {
  border-color: transparent !important;
}

html[data-theme="dark"] .swal-modal,
html[data-theme="dark"] .sweet-alert,
html[data-theme="dark"] .swal2-popup {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .swal-title,
html[data-theme="dark"] .swal-text,
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .sweet-alert h2,
html[data-theme="dark"] .sweet-alert p {
  color: var(--app-text) !important;
}

html[data-theme="dark"] .fc-unthemed .fc-content,
html[data-theme="dark"] .fc-unthemed .fc-divider,
html[data-theme="dark"] .fc-unthemed .fc-list-heading td,
html[data-theme="dark"] .fc-unthemed .fc-list-view,
html[data-theme="dark"] .fc-unthemed .fc-popover,
html[data-theme="dark"] .fc-unthemed .fc-row,
html[data-theme="dark"] .fc-unthemed tbody,
html[data-theme="dark"] .fc-unthemed td,
html[data-theme="dark"] .fc-unthemed th,
html[data-theme="dark"] .fc-unthemed thead {
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .fc-unthemed td.fc-today {
  background-color: rgba(39,170,225,.12) !important;
}

html[data-theme="dark"] .fc-view,
html[data-theme="dark"] .fc-widget-content,
html[data-theme="dark"] .fc-widget-header {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .sa-stat-card,
html[data-theme="dark"] .sa-chart-card,
html[data-theme="dark"] .tw-bg-white {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

html[data-theme="dark"] .sa-stat-val,
html[data-theme="dark"] .tw-text-black {
  color: var(--app-text) !important;
}

html[data-theme="dark"] .sa-stat-label,
html[data-theme="dark"] .tw-text-gray-700 {
  color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .tw-border-gray-200,
html[data-theme="dark"] .tw-ring-gray-200,
html[data-theme="dark"] .tw-border-b {
  border-color: var(--app-border) !important;
  --tw-ring-color: var(--app-border) !important;
}


/* ══════════════════════════════════════════════════════════════
   BUSINESS 360 DASHBOARD — .b360-* classes use hardcoded hex
   colours (inline <style> in home/index.blade.php).  Override
   every hardcoded surface, text, and border colour here.
   ══════════════════════════════════════════════════════════════ */

/* Card + Panel surfaces */
html[data-theme="dark"] .b360-card,
html[data-theme="dark"] .b360-panel {
  background-color: var(--bg-surface) !important;
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

/* Header text */
html[data-theme="dark"] .b360-title { color: var(--text-base) !important; }
html[data-theme="dark"] .b360-subtitle { color: var(--text-secondary) !important; }

/* KPI card text */
html[data-theme="dark"] .b360-card-label { color: var(--text-muted) !important; }
html[data-theme="dark"] .b360-card-value { color: var(--text-base) !important; }
html[data-theme="dark"] .b360-card-note  { color: var(--text-muted) !important; }

/* Panel heading */
html[data-theme="dark"] .b360-panel h3 { color: var(--text-base) !important; }

/* List rows */
html[data-theme="dark"] .b360-list li {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .b360-list-name  { color: var(--text-secondary) !important; }
html[data-theme="dark"] .b360-list-value { color: var(--text-base) !important; }

/* Insights list */
html[data-theme="dark"] .b360-insights { color: var(--text-secondary) !important; }
html[data-theme="dark"] .b360-insight-metric { color: var(--text-base) !important; }

/* Empty state placeholder */
html[data-theme="dark"] .b360-empty {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* ── Highcharts chart container backgrounds ──────────────────────
   home.js re-renders every chart with transparent backgroundColor
   on cbiz:themechange, but Highcharts also injects a
   div.highcharts-container with an inline background-color that
   can stay white if the chart hasn't redrawn yet.  We override the
   outer target div, the injected container div, and the SVG root so
   nothing can stay white in dark mode.                           ── */
html[data-theme="dark"] [id$="_chart"],
html[data-theme="dark"] [id$="_chart_div"] {
  background: var(--bg-surface) !important;
}

/* Highcharts-injected inner elements — override any inline background */
html[data-theme="dark"] .highcharts-container {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .highcharts-root {
  background: transparent !important;
  background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   REPORT PAGES — Each report view has a unique CSS prefix with
   hardcoded light colours in its inline <style> block.
   Overrides are grouped by prefix below.
   ══════════════════════════════════════════════════════════════ */

/* ── Shared: card / panel / kpi-card pattern used in most reports ── */
html[data-theme="dark"] .ps-card,
html[data-theme="dark"] .ps-panel,
html[data-theme="dark"] .csr-card,
html[data-theme="dark"] .csr-panel,
html[data-theme="dark"] .pay-card,
html[data-theme="dark"] .pay-panel,
html[data-theme="dark"] .sir-card,
html[data-theme="dark"] .sir-panel,
html[data-theme="dark"] .crr-card,
html[data-theme="dark"] .crr-panel,
html[data-theme="dark"] .er-card,
html[data-theme="dark"] .er-panel,
html[data-theme="dark"] .ppr-card,
html[data-theme="dark"] .ppr-panel,
html[data-theme="dark"] .psr-card,
html[data-theme="dark"] .psr-panel,
html[data-theme="dark"] .ser-card,
html[data-theme="dark"] .ser-panel,
html[data-theme="dark"] .sar-card,
html[data-theme="dark"] .sar-panel,
html[data-theme="dark"] .owner-kpi-card,
html[data-theme="dark"] .owner-analytics-panel,
html[data-theme="dark"] .logistics-kpi-card,
html[data-theme="dark"] .logistics-panel,
html[data-theme="dark"] .daybook-kpi-card,
html[data-theme="dark"] .daybook-panel,
html[data-theme="dark"] .cash-kpi-card,
html[data-theme="dark"] .cash-panel {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

/* ── Shared: label / subtitle / note ────────────────────────── */
html[data-theme="dark"] .ps-card-label,
html[data-theme="dark"] .ps-report-subtitle,
html[data-theme="dark"] .csr-card-label,
html[data-theme="dark"] .csr-report-subtitle,
html[data-theme="dark"] .csr-card-note,
html[data-theme="dark"] .pay-card-label,
html[data-theme="dark"] .pay-report-subtitle,
html[data-theme="dark"] .pay-card-note,
html[data-theme="dark"] .sir-card-label,
html[data-theme="dark"] .sir-report-subtitle,
html[data-theme="dark"] .sir-card-note,
html[data-theme="dark"] .crr-card-label,
html[data-theme="dark"] .crr-report-subtitle,
html[data-theme="dark"] .crr-card-note,
html[data-theme="dark"] .er-card-label,
html[data-theme="dark"] .er-report-subtitle,
html[data-theme="dark"] .er-card-note,
html[data-theme="dark"] .ppr-card-label,
html[data-theme="dark"] .ppr-report-subtitle,
html[data-theme="dark"] .ppr-card-note,
html[data-theme="dark"] .psr-card-label,
html[data-theme="dark"] .psr-report-subtitle,
html[data-theme="dark"] .psr-card-note,
html[data-theme="dark"] .ser-card-label,
html[data-theme="dark"] .ser-card-note,
html[data-theme="dark"] .sar-card-label,
html[data-theme="dark"] .sar-card-note,
html[data-theme="dark"] .owner-kpi-label,
html[data-theme="dark"] .owner-kpi-note,
html[data-theme="dark"] .logistics-kpi-label,
html[data-theme="dark"] .logistics-kpi-note,
html[data-theme="dark"] .daybook-kpi-label,
html[data-theme="dark"] .daybook-kpi-note,
html[data-theme="dark"] .cash-kpi-label,
html[data-theme="dark"] .cash-kpi-note {
  color: var(--text-muted) !important;
}

/* ── Shared: primary value / heading ─────────────────────────── */
html[data-theme="dark"] .ps-card-value,
html[data-theme="dark"] .ps-report-header h1,
html[data-theme="dark"] .csr-card-value,
html[data-theme="dark"] .csr-report-header h1,
html[data-theme="dark"] .csr-panel h3,
html[data-theme="dark"] .pay-card-value,
html[data-theme="dark"] .pay-report-header h1,
html[data-theme="dark"] .pay-panel h3,
html[data-theme="dark"] .sir-card-value,
html[data-theme="dark"] .sir-report-header h1,
html[data-theme="dark"] .sir-panel h3,
html[data-theme="dark"] .crr-card-value,
html[data-theme="dark"] .crr-report-header h1,
html[data-theme="dark"] .crr-panel h3,
html[data-theme="dark"] .er-card-value,
html[data-theme="dark"] .er-report-header h1,
html[data-theme="dark"] .er-panel h3,
html[data-theme="dark"] .ppr-card-value,
html[data-theme="dark"] .ppr-report-header h1,
html[data-theme="dark"] .ppr-panel h3,
html[data-theme="dark"] .psr-card-value,
html[data-theme="dark"] .psr-report-header h1,
html[data-theme="dark"] .psr-panel h3,
html[data-theme="dark"] .ser-panel h3,
html[data-theme="dark"] .sar-panel h3,
html[data-theme="dark"] .owner-kpi-value,
html[data-theme="dark"] .owner-analytics-panel h4,
html[data-theme="dark"] .logistics-kpi-value,
html[data-theme="dark"] .logistics-panel h4,
html[data-theme="dark"] .daybook-kpi-value,
html[data-theme="dark"] .daybook-panel h4,
html[data-theme="dark"] .cash-kpi-value,
html[data-theme="dark"] .cash-panel h4 {
  color: var(--text-base) !important;
}

/* ── Shared: insights / body text ────────────────────────────── */
html[data-theme="dark"] .ps-insights,
html[data-theme="dark"] .csr-insights,
html[data-theme="dark"] .pay-insights,
html[data-theme="dark"] .sir-insights,
html[data-theme="dark"] .crr-insights,
html[data-theme="dark"] .er-insights,
html[data-theme="dark"] .ppr-insights,
html[data-theme="dark"] .psr-insights,
html[data-theme="dark"] .ser-insights,
html[data-theme="dark"] .sar-insights {
  color: var(--text-secondary) !important;
}

/* ── Profit & Loss — report-specific classes ─────────────────── */
html[data-theme="dark"] .pl-toolbar,
html[data-theme="dark"] .pl-statement {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}

html[data-theme="dark"] .pl-report-header {
  border-bottom-color: var(--border-strong) !important;
}

html[data-theme="dark"] .pl-business,
html[data-theme="dark"] .pl-period,
html[data-theme="dark"] .pl-report-meta,
html[data-theme="dark"] .pl-neutral {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .pl-note {
  background: var(--bg-surface-2) !important;
  border-left-color: var(--c-sky) !important;
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .pl-table > thead > tr > th {
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .pl-section-row > td {
  background: var(--bg-surface-3) !important;
  border-top-color: var(--border-strong) !important;
  color: var(--text-base) !important;
}

html[data-theme="dark"] .pl-group-row {
  background: var(--bg-surface-2) !important;
}

html[data-theme="dark"] .pl-detail-row td {
  border-top-color: var(--border) !important;
}

html[data-theme="dark"] .pl-total-row td {
  border-top-color: var(--border-strong) !important;
}

html[data-theme="dark"] .pl-calculated-row td {
  background: var(--bg-surface-2) !important;
  border-top-color: var(--border-strong) !important;
}

html[data-theme="dark"] .pl-calculated-row small,
html[data-theme="dark"] .pl-net-profit-row small {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .pl-gross-profit td {
  background: rgba(141,198,63,.10) !important;
}

html[data-theme="dark"] .pl-net-profit-row td {
  border-top-color: var(--border-strong) !important;
}

html[data-theme="dark"] .pl-net-profit-row.is-profit td {
  background: rgba(141,198,63,.15) !important;
  color: #a3e635 !important;
}

html[data-theme="dark"] .pl-net-profit-row.is-loss td {
  background: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .pl-negative { color: #fca5a5 !important; }
html[data-theme="dark"] .pl-positive { color: #a3e635 !important; }

html[data-theme="dark"] .pl-reconciliation,
html[data-theme="dark"] .pl-ledger-summary {
  border-top-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   VCARD MODULE — VCard edit page and admin surfaces.
   These classes are defined in dreampos-admin.css and the
   inline <style> blocks of the VCard tab partials.
   ══════════════════════════════════════════════════════════════ */

/* ── VCard DreamPOS admin CSS variable overrides ──────────────── */
html[data-theme="dark"] {
  --vcard-dp-ink:    #e2e8f0;
  --vcard-dp-navy:   #e2e8f0;
  --vcard-dp-muted:  #94a3b8;
  --vcard-dp-border: #334155;
  --vcard-dp-bg:     #0f172a;
  --vcard-dp-soft:   #1e293b;
  --vcard-dp-card:   #1e293b;
  --vcard-dp-shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* ── VCard DreamPOS surfaces ──────────────────────────────────── */
html[data-theme="dark"] .vcard-dreampos-page .box,
html[data-theme="dark"] .vcard-dreampos-page .box-primary,
html[data-theme="dark"] .vcard-dreampos-page .box-body,
html[data-theme="dark"] .vcard-dreampos-page .box-header,
html[data-theme="dark"] .vcard-dreampos-page .box-footer {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}

html[data-theme="dark"] .vcard-dreampos-page .box-title {
  color: var(--text-base) !important;
}

html[data-theme="dark"] .vcard-dreampos-page .table > thead > tr > th {
  background: var(--bg-surface-2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .vcard-dreampos-page .table > tbody > tr > td {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .vcard-dreampos-page .btn-default,
html[data-theme="dark"] .vcard-dreampos-page .btn-secondary {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .vcard-dreampos-modal .modal-body {
  background: var(--bg-surface) !important;
  color: var(--text-base) !important;
}

/* ── VCard edit page — ve-* design system surfaces ───────────── */
html[data-theme="dark"] .vcard-edit-page {
  background: var(--bg-body) !important;
}

html[data-theme="dark"] .ve-page-header,
html[data-theme="dark"] .ve-tabs-wrap {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .ve-accordion,
html[data-theme="dark"] .ve-accordion-body,
html[data-theme="dark"] .ve-section-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .ve-accordion-header {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ve-accordion-header:hover {
  background: var(--bg-surface-3) !important;
}

html[data-theme="dark"] .ve-item-card,
html[data-theme="dark"] .ve-block-item,
html[data-theme="dark"] .ve-font-swatch {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .ve-accordion-title,
html[data-theme="dark"] .ve-section-title,
html[data-theme="dark"] .ve-block-name,
html[data-theme="dark"] .ve-font-sample,
html[data-theme="dark"] .ve-page-title {
  color: var(--text-base) !important;
}

html[data-theme="dark"] .ve-accordion-chevron,
html[data-theme="dark"] .ve-toggle-label,
html[data-theme="dark"] .ve-block-desc,
html[data-theme="dark"] .ve-font-name,
html[data-theme="dark"] .ve-text-muted {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .ve-tab {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .ve-tab.active,
html[data-theme="dark"] .ve-tab:hover {
  color: var(--text-base) !important;
}

html[data-theme="dark"] .ve-field-row,
html[data-theme="dark"] .ve-add-field-row {
  border-color: var(--border) !important;
}

html[data-theme="dark"] .ve-btn-ghost {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .ve-btn-ghost:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}

html[data-theme="dark"] .ve-hours-row {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .ve-block-order-num {
  background: var(--bg-surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* Theme tab carousel cards */
html[data-theme="dark"] .theme-view-inner {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .theme-view-img {
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .theme-preview {
  background: var(--bg-surface-2) !important;
}
html[data-theme="dark"] .theme-view-content h6 {
  color: var(--text-base) !important;
}

/* Contact info input addon badges */
html[data-theme="dark"] .ve-contact-icon-badge {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
}

/* QR style cards */
html[data-theme="dark"] .ve-qr-style-card {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ve-qr-style-card.selected {
  border-color: var(--c-sky) !important;
  background: rgba(39,170,225,.10) !important;
}

/* ve-status badges */
html[data-theme="dark"] .ve-status-badge.active {
  background: rgba(16,185,129,.15) !important;
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .ve-status-badge.locked {
  background: rgba(239,68,68,.15) !important;
  color: #fca5a5 !important;
}

/* ── DATE RANGE PICKER BUTTON (dashboard topbar) ────────────────
   .dpos-dr-btn uses var(--bg-surface,#fff) fallback which stays
   white when the variable doesn't cascade correctly in dark mode.
   ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .dpos-dr-btn {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .dpos-dr-btn:hover,
html[data-theme="dark"] .dpos-dr-btn.active {
  border-color: #7dd3fc !important;
  color: #7dd3fc !important;
}
html[data-theme="dark"] .dpos-dr-btn .fa-calendar,
html[data-theme="dark"] .dpos-dr-btn .fa-caret-down {
  color: var(--text-secondary) !important;
}

/* ── HOME DASHBOARD ─────────────────────────────────────────────
   Covers: dash-topbar, b360-section-bar, mfg-kpi-*, mfg-panel-*,
   b360-list, b360-empty, table inside mfg-panel-body
   ────────────────────────────────────────────────────────────── */

/* Topbar */
html[data-theme="dark"] .dash-topbar {
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .dash-topbar-title {
  color: var(--text-base) !important;
}

/* Section header bar */
html[data-theme="dark"] .b360-section-bar {
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .b360-section-title {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .b360-section-sub {
  color: var(--text-muted) !important;
}

/* KPI cards */
html[data-theme="dark"] .mfg-kpi-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .mfg-kpi-label {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .mfg-kpi-value {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .mfg-kpi-note {
  color: var(--text-muted) !important;
}

/* KPI icon badge backgrounds (keep colour, just darken the tint) */
html[data-theme="dark"] .b360-card-revenue  .mfg-kpi-icon { background: rgba(25,79,151,.25) !important;  color: #93b4e8 !important; }
html[data-theme="dark"] .b360-card-gprofit  .mfg-kpi-icon { background: rgba(21,128,61,.22) !important;  color: #86efac !important; }
html[data-theme="dark"] .b360-card-oprofit  .mfg-kpi-icon { background: rgba(91,33,182,.25) !important;  color: #c4b5fd !important; }
html[data-theme="dark"] .b360-card-purchase .mfg-kpi-icon { background: rgba(180,83,9,.22) !important;   color: #fcd34d !important; }
html[data-theme="dark"] .b360-card-cdue     .mfg-kpi-icon { background: rgba(220,38,38,.22) !important;  color: #fca5a5 !important; }
html[data-theme="dark"] .b360-card-stock    .mfg-kpi-icon { background: rgba(8,145,178,.22) !important;  color: #7dd3fc !important; }
html[data-theme="dark"] .b360-card-support  .mfg-kpi-icon { background: rgba(25,79,151,.25) !important;  color: #93b4e8 !important; }
html[data-theme="dark"] .b360-card-sla-ok   .mfg-kpi-icon { background: rgba(21,128,61,.22) !important;  color: #86efac !important; }
html[data-theme="dark"] .b360-card-sla-warn .mfg-kpi-icon { background: rgba(180,83,9,.22) !important;   color: #fcd34d !important; }
html[data-theme="dark"] .b360-card-sla-bad  .mfg-kpi-icon { background: rgba(220,38,38,.22) !important;  color: #fca5a5 !important; }

/* Panels */
html[data-theme="dark"] .mfg-panel {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .mfg-panel h4 {
  color: var(--text-base) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .mfg-panel-head {
  background: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .mfg-panel-title {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .mfg-panel .mfg-panel-head a {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .mfg-panel .mfg-panel-head a:hover {
  color: #7dd3fc !important;
}

/* B360 list rows */
html[data-theme="dark"] .b360-list li {
  border-bottom-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .b360-list-name {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .b360-list-value {
  color: var(--text-base) !important;
}

/* Empty state placeholder */
html[data-theme="dark"] .b360-empty {
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
}

/* Tables inside panels */
html[data-theme="dark"] .mfg-panel-body .table thead th {
  background: var(--bg-surface-2) !important;
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
  border-top: none !important;
}
html[data-theme="dark"] .mfg-panel-body .table tbody td {
  border-top-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .mfg-panel-body .table tbody tr:hover td {
  background: rgba(25,79,151,.12) !important;
}

/* Positive / negative utility colours stay readable in dark */
html[data-theme="dark"] .b360-positive { color: #4ade80 !important; }
html[data-theme="dark"] .b360-negative { color: #f87171 !important; }
html[data-theme="dark"] .b360-insight-metric.b360-positive { color: #4ade80 !important; }
html[data-theme="dark"] .b360-insight-metric.b360-negative { color: #f87171 !important; }

/* ── AI Insights Modal ──────────────────────────────────────────── */
html[data-theme="dark"] #cbiz_ai_insights_modal .modal-content {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] #cbiz_ai_insights_modal .modal-header {
  background: #1b2850 !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] #cbiz_ai_insights_modal .modal-body {
  background: var(--bg-surface) !important;
}
html[data-theme="dark"] #cbiz_ai_insights_modal .modal-footer {
  background: var(--bg-surface-2) !important;
  border-top-color: var(--border) !important;
}
html[data-theme="dark"] .cbiz-ai-insights-modal-list > li {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .cbiz-ai-insights-modal-ico {
  background: rgba(25,79,151,.25) !important;
  color: #93b4e8 !important;
}
html[data-theme="dark"] .cbiz-ai-insights-modal-copy .cbiz-ai-insights-modal-ttl {
  color: var(--text-base) !important;
}
html[data-theme="dark"] .cbiz-ai-insights-modal-copy .cbiz-ai-insights-modal-dsc {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] #cbiz_ai_insights_modal .btn-default {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-base) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD DARK MODE — sell / expense / purchase / product /
   contact / support / asset / hrm dashboards
   ══════════════════════════════════════════════════════════════════ */

/* ── Sell dashboard: sd-* KPI icon badges ──────────────────────── */
html[data-theme="dark"] .sd-blue   .mfg-kpi-icon { background: rgba(25,79,151,.25)  !important; color: #93b4e8 !important; }
html[data-theme="dark"] .sd-sky    .mfg-kpi-icon { background: rgba(8,145,178,.22)  !important; color: #7dd3fc !important; }
html[data-theme="dark"] .sd-green  .mfg-kpi-icon { background: rgba(21,128,61,.22)  !important; color: #86efac !important; }
html[data-theme="dark"] .sd-red    .mfg-kpi-icon { background: rgba(220,38,38,.22)  !important; color: #fca5a5 !important; }
html[data-theme="dark"] .sd-purple .mfg-kpi-icon { background: rgba(91,33,182,.25)  !important; color: #c4b5fd !important; }
html[data-theme="dark"] .sd-amber  .mfg-kpi-icon { background: rgba(180,83,9,.22)   !important; color: #fcd34d !important; }
html[data-theme="dark"] .sd-teal   .mfg-kpi-icon { background: rgba(13,148,136,.22) !important; color: #5eead4 !important; }
html[data-theme="dark"] .sd-indigo .mfg-kpi-icon { background: rgba(67,56,202,.22)  !important; color: #a5b4fc !important; }
html[data-theme="dark"] .sd-orange .mfg-kpi-icon { background: rgba(234,88,12,.22)  !important; color: #fdba74 !important; }

/* Sell / Expense: status badge pills */
html[data-theme="dark"] .dt-badge-blue      { background: rgba(25,79,151,.25) !important; color: #93b4e8 !important; }
html[data-theme="dark"] .dt-badge-packed    { background: rgba(30,64,175,.25) !important; color: #93c5fd !important; }
html[data-theme="dark"] .dt-badge-shipped   { background: rgba(180,83,9,.22)  !important; color: #fcd34d !important; }
html[data-theme="dark"] .dt-badge-delivered { background: rgba(6,95,70,.22)   !important; color: #6ee7b7 !important; }

/* ── Expense dashboard: exp-* KPI icon badges ───────────────────── */
html[data-theme="dark"] .exp-blue   .mfg-kpi-icon { background: rgba(25,79,151,.25)  !important; color: #93b4e8 !important; }
html[data-theme="dark"] .exp-sky    .mfg-kpi-icon { background: rgba(8,145,178,.22)  !important; color: #7dd3fc !important; }
html[data-theme="dark"] .exp-green  .mfg-kpi-icon { background: rgba(21,128,61,.22)  !important; color: #86efac !important; }
html[data-theme="dark"] .exp-red    .mfg-kpi-icon { background: rgba(220,38,38,.22)  !important; color: #fca5a5 !important; }
html[data-theme="dark"] .exp-purple .mfg-kpi-icon { background: rgba(91,33,182,.25)  !important; color: #c4b5fd !important; }
html[data-theme="dark"] .exp-orange .mfg-kpi-icon { background: rgba(180,83,9,.22)   !important; color: #fcd34d !important; }
html[data-theme="dark"] .exp-teal   .mfg-kpi-icon { background: rgba(13,148,136,.22) !important; color: #5eead4 !important; }

/* ── Purchase dashboard ─────────────────────────────────────────── */
html[data-theme="dark"] .pch-kpi-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .pch-kpi-label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .pch-kpi-value { color: var(--text-base) !important; }
html[data-theme="dark"] .pch-kpi-note  { color: var(--text-muted) !important; }

html[data-theme="dark"] .pch-panel {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pch-panel-head {
  background: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .pch-panel-title { color: var(--text-base) !important; }
html[data-theme="dark"] .pch-section-bar  { border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .pch-section-title { color: var(--text-base) !important; }
html[data-theme="dark"] .pch-section-sub  { color: var(--text-secondary) !important; }
html[data-theme="dark"] .pch-empty        { color: var(--text-muted) !important; }

/* Purchase: pch-* KPI icon badges */
html[data-theme="dark"] .pch-blue   .pch-kpi-icon { background: rgba(25,79,151,.25)  !important; color: #93b4e8 !important; }
html[data-theme="dark"] .pch-sky    .pch-kpi-icon { background: rgba(8,145,178,.22)  !important; color: #7dd3fc !important; }
html[data-theme="dark"] .pch-green  .pch-kpi-icon { background: rgba(21,128,61,.22)  !important; color: #86efac !important; }
html[data-theme="dark"] .pch-red    .pch-kpi-icon { background: rgba(220,38,38,.22)  !important; color: #fca5a5 !important; }
html[data-theme="dark"] .pch-purple .pch-kpi-icon { background: rgba(91,33,182,.25)  !important; color: #c4b5fd !important; }
html[data-theme="dark"] .pch-amber  .pch-kpi-icon { background: rgba(180,83,9,.22)   !important; color: #fcd34d !important; }
html[data-theme="dark"] .pch-orange .pch-kpi-icon { background: rgba(180,83,9,.22)   !important; color: #fcd34d !important; }
html[data-theme="dark"] .pch-teal   .pch-kpi-icon { background: rgba(13,148,136,.22) !important; color: #5eead4 !important; }

/* Purchase status badge pills */
html[data-theme="dark"] .pch-badge-paid    { background: rgba(21,128,61,.22)  !important; color: #86efac !important; }
html[data-theme="dark"] .pch-badge-due     { background: rgba(220,38,38,.22)  !important; color: #fca5a5 !important; }
html[data-theme="dark"] .pch-badge-partial { background: rgba(180,83,9,.22)   !important; color: #fcd34d !important; }
html[data-theme="dark"] .pch-badge-overdue { background: rgba(157,23,77,.22)  !important; color: #f9a8d4 !important; }

/* Purchase table */
html[data-theme="dark"] .pch-panel .pch-table thead th,
html[data-theme="dark"] .pch-panel-body .table thead th {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pch-panel .pch-table tbody td,
html[data-theme="dark"] .pch-panel-body .table tbody td {
  border-top-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .pch-panel .pch-table tbody tr:hover td,
html[data-theme="dark"] .pch-panel-body .table tbody tr:hover td {
  background: rgba(25,79,151,.06) !important;
}

/* ── Product dashboard ──────────────────────────────────────────── */
html[data-theme="dark"] .pd-kpi-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .pd-kpi-label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .pd-kpi-value { color: var(--text-base) !important; }
html[data-theme="dark"] .pd-kpi-note  { color: var(--text-muted) !important; }

html[data-theme="dark"] .pd-panel {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pd-panel-head {
  background: var(--bg-surface-2) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .pd-panel-title { color: var(--text-base) !important; }
html[data-theme="dark"] .pd-empty       { color: var(--text-muted) !important; }
html[data-theme="dark"] .pd-positive    { color: #4ade80 !important; }
html[data-theme="dark"] .pd-negative    { color: #f87171 !important; }

/* Product: pd-card-* KPI icon badges */
html[data-theme="dark"] .pd-card-products .pd-kpi-icon { background: rgba(25,79,151,.25)  !important; color: #93b4e8 !important; }
html[data-theme="dark"] .pd-card-stocked  .pd-kpi-icon { background: rgba(8,145,178,.22)  !important; color: #7dd3fc !important; }
html[data-theme="dark"] .pd-card-cost     .pd-kpi-icon { background: rgba(21,128,61,.22)  !important; color: #86efac !important; }
html[data-theme="dark"] .pd-card-profit   .pd-kpi-icon { background: rgba(91,33,182,.25)  !important; color: #c4b5fd !important; }
html[data-theme="dark"] .pd-card-lowstock .pd-kpi-icon { background: rgba(180,83,9,.22)   !important; color: #fcd34d !important; }
html[data-theme="dark"] .pd-card-oos      .pd-kpi-icon { background: rgba(220,38,38,.22)  !important; color: #fca5a5 !important; }

/* Product table */
html[data-theme="dark"] .pd-panel-body .table thead th {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .pd-panel-body .table tbody td {
  border-top-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .pd-panel-body .table tbody tr:hover td {
  background: var(--bg-surface-2) !important;
}

/* Product insights modal list */
html[data-theme="dark"] .pd-insights-modal-list > li {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .pd-insights-modal-ico {
  background: rgba(25,79,151,.25) !important;
  color: #93b4e8 !important;
}

/* ── Contact dashboard ──────────────────────────────────────────── */
html[data-theme="dark"] .ctc-pipeline-step {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ctc-pipeline-step::after {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ctc-kpi-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .ctc-kpi-icon  { background: rgba(25,79,151,.25) !important; color: #93b4e8 !important; }
html[data-theme="dark"] .ctc-kpi-label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .ctc-kpi-value { color: var(--text-base) !important; }
html[data-theme="dark"] .ctc-kpi-note  { color: var(--text-muted) !important; }

html[data-theme="dark"] .ctc-panel {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ctc-panel h4 {
  color: var(--text-base) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .ctc-empty    { color: var(--text-muted) !important; }
html[data-theme="dark"] .ctc-positive { color: #4ade80 !important; }
html[data-theme="dark"] .ctc-negative { color: #f87171 !important; }

/* Contact pipeline step icon variants */
html[data-theme="dark"] .ctc-step-total  .ctc-ps-icon { background: rgba(25,79,151,.25)  !important; color: #93b4e8 !important; }
html[data-theme="dark"] .ctc-step-active .ctc-ps-icon { background: rgba(21,128,61,.22)  !important; color: #86efac !important; }
html[data-theme="dark"] .ctc-step-sales  .ctc-ps-icon { background: rgba(180,83,9,.22)   !important; color: #fcd34d !important; }
html[data-theme="dark"] .ctc-step-due    .ctc-ps-icon { background: rgba(220,38,38,.22)  !important; color: #fca5a5 !important; }

/* Contact pipeline step text */
html[data-theme="dark"] .ctc-step-total  .ctc-ps-label,
html[data-theme="dark"] .ctc-step-total  .ctc-ps-value { color: #93b4e8 !important; }
html[data-theme="dark"] .ctc-step-active .ctc-ps-label,
html[data-theme="dark"] .ctc-step-active .ctc-ps-value { color: #86efac !important; }
html[data-theme="dark"] .ctc-step-sales  .ctc-ps-label,
html[data-theme="dark"] .ctc-step-sales  .ctc-ps-value { color: #fcd34d !important; }
html[data-theme="dark"] .ctc-step-due    .ctc-ps-label,
html[data-theme="dark"] .ctc-step-due    .ctc-ps-value { color: #fca5a5 !important; }

/* Contact badge pills */
html[data-theme="dark"] .ctc-badge-active   { background: rgba(21,128,61,.22)  !important; color: #86efac !important; }
html[data-theme="dark"] .ctc-badge-inactive { background: rgba(220,38,38,.22)  !important; color: #fca5a5 !important; }
html[data-theme="dark"] .ctc-badge-customer { background: rgba(30,64,175,.22)  !important; color: #93c5fd !important; }
html[data-theme="dark"] .ctc-badge-supplier { background: rgba(91,33,182,.22)  !important; color: #c4b5fd !important; }

/* Contact table */
html[data-theme="dark"] .ctc-panel .table thead th {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ctc-panel .table tbody td {
  border-top-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .ctc-panel .table tbody tr:hover td {
  background: var(--bg-surface-2) !important;
}

/* ── Support module dashboard ───────────────────────────────────── */
html[data-theme="dark"] .support-kpi-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .support-kpi-icon  { background: rgba(25,79,151,.25) !important; color: #93b4e8 !important; }
html[data-theme="dark"] .support-kpi-label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .support-kpi-value { color: var(--text-base) !important; }
html[data-theme="dark"] .support-kpi-value.is-green { color: #4ade80 !important; }
html[data-theme="dark"] .support-kpi-value.is-red   { color: #f87171 !important; }
html[data-theme="dark"] .support-kpi-note  { color: var(--text-muted) !important; }

html[data-theme="dark"] .support-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .support-card-header {
  background: var(--bg-surface) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .support-card-title  { color: var(--text-base) !important; }
html[data-theme="dark"] .support-empty        { color: var(--text-muted) !important; }
html[data-theme="dark"] .support-insight-meta { color: var(--text-secondary) !important; }

html[data-theme="dark"] .support-table > thead > tr > th {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .support-table > tbody > tr > td {
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
html[data-theme="dark"] .support-mini-list li { border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .support-mini-list a  { color: #93b4e8 !important; }

html[data-theme="dark"] .sup-ai-panel .cbiz-ai-insights-title {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}

/* ── Asset Management dashboard ─────────────────────────────────── */
html[data-theme="dark"] .asset-kpi-card {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"] .asset-kpi-icon  { background: rgba(25,79,151,.25) !important; color: #93b4e8 !important; }
html[data-theme="dark"] .asset-kpi-label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .asset-kpi-card strong { color: var(--text-base) !important; }

/* ── HRM dashboard ──────────────────────────────────────────────── */
html[data-theme="dark"] .hrm-info-box {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .hrm-info-box .info-box-text   { color: var(--text-secondary) !important; }
html[data-theme="dark"] .hrm-info-box .info-box-number { color: #93b4e8 !important; }

/* ── Sell + Expense scoped table wrapper ────────────────────────── */
html[data-theme="dark"] .sales-dashboard-wrap .table thead th,
html[data-theme="dark"] .expense-dashboard-wrap .table thead th {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .sales-dashboard-wrap .table tbody td,
html[data-theme="dark"] .expense-dashboard-wrap .table tbody td {
  border-top-color: var(--border) !important;
  color: var(--text-base) !important;
}
