:root {
  --modern-bg: #eef3fb;
  --modern-surface: #ffffff;
  --modern-text: #172033;
  --modern-muted: #667389;
  --modern-primary: #4f46e5;
  --modern-primary-2: #2563eb;
  --modern-border: #dce4f2;
  --modern-sidebar-bg: #111827;
  --modern-sidebar-bg-2: #0b1224;
  --modern-sidebar-hover: rgba(255, 255, 255, 0.14);
  --modern-sidebar-text: #f8fafc;
  --modern-sidebar-muted: #cbd5e1;
  --modern-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

body {
  background: radial-gradient(circle at top, #f8faff 0%, var(--modern-bg) 50%);
  color: var(--modern-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.main-header .logo,
.main-header .navbar {
  background: linear-gradient(110deg, var(--modern-primary), var(--modern-primary-2)) !important;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35);
}

.main-header .logo {
  border-bottom: 0;
}

.main-header .navbar .nav > li > a,
.main-header .sidebar-toggle {
  color: #fff !important;
}

.main-header .navbar .btn,
.main-header .navbar .btn.btn-flat {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  transition: all 0.2s ease;
}

.main-header .navbar .btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.24) !important;
}

#theme_mode_toggle i {
  margin-inline-end: 6px;
}

.main-sidebar {
  background: linear-gradient(180deg, var(--modern-sidebar-bg), var(--modern-sidebar-bg-2)) !important;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

.main-sidebar .logo,
.sidebar .logo,
.sidebar {
  background: transparent !important;
}

.sidebar-menu > li > a {
  border-radius: 12px;
  margin: 4px 10px;
  color: var(--modern-sidebar-text) !important;
  font-weight: 600;
  border-left: 0 !important;
  transition: all 0.18s ease;
}

.sidebar-menu > li > a > span,
.sidebar-menu > li > a {
  color: var(--modern-sidebar-text) !important;
}

.sidebar-menu > li > a > .pull-right-container i,
.sidebar-menu > li > a > .fa-angle-left {
  color: var(--modern-sidebar-muted) !important;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .fab,
.sidebar-menu > li > a > .glyphicon,
.treeview-menu > li > a > .fa,
.treeview-menu > li > a > .fas,
.treeview-menu > li > a > .fab {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 9px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: linear-gradient(120deg, rgba(79, 70, 229, 0.9), rgba(37, 99, 235, 0.9)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.32);
}

.sidebar-menu > li:hover > a > .pull-right-container i,
.sidebar-menu > li.active > a > .pull-right-container i,
.sidebar-menu > li.menu-open > a > .pull-right-container i {
  color: #fff !important;
}

.sidebar-menu > li.header {
  color: var(--modern-sidebar-muted) !important;
  letter-spacing: 0.3px;
  font-size: 11px;
}

.treeview-menu {
  background: transparent !important;
  padding-bottom: 6px;
}

.treeview-menu > li > a {
  color: #dbe8ff !important;
  border-radius: 10px;
  margin: 3px 10px 3px 18px;
}

.treeview-menu > li.active > a,
.treeview-menu > li > a:hover {
  background: var(--modern-sidebar-hover) !important;
  color: #fff !important;
}

.content-header-custom h1 {
  font-weight: 800;
  color: #1e2a40;
}

.content-wrapper,
.right-side,
.main-footer {
  background: transparent;
}

.box,
.small-box,
.info-box,
.nav-tabs-custom,
.well,
.modal-content {
  border: 1px solid var(--modern-border);
  border-radius: 16px;
  box-shadow: var(--modern-shadow);
  background: var(--modern-surface);
}

.info-box {
  padding: 10px;
}

.info-box .info-box-icon {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.info-box .info-box-content {
  padding-top: 4px;
}

.info-box .info-box-text {
  color: #42526b;
  font-weight: 700;
}

.info-box .info-box-number {
  color: #111827;
  font-size: 24px;
  font-weight: 800;
}

.btn {
  border-radius: 12px;
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-success,
.label-primary,
.bg-primary {
  background: linear-gradient(120deg, var(--modern-primary), var(--modern-primary-2)) !important;
  border: none !important;
}

.table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--modern-border);
  background: #fff;
}

.table > thead > tr > th {
  background: #f3f6ff;
  color: #223252;
  border-bottom: 1px solid var(--modern-border);
  font-weight: 800;
}

.table > tbody > tr > td {
  border-top: 1px solid #edf2fb;
  color: #2a3854;
}

.table-hover > tbody > tr:hover > td {
  background: #f5f8ff;
}

.pagination > li > a,
.pagination > li > span {
  border-radius: 10px !important;
  margin: 0 2px;
}

[data-theme="dark"] {
  --modern-bg: #0a1220;
  --modern-surface: #111827;
  --modern-text: #e5e7eb;
  --modern-muted: #95a2ba;
  --modern-border: #2b3a52;
  --modern-sidebar-bg: #040817;
  --modern-sidebar-bg-2: #0a1020;
  --modern-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] body {
  background: radial-gradient(circle at top, #0f172a 0%, #0a1220 60%);
}

[data-theme="dark"] .content-header-custom h1,
[data-theme="dark"] .content-header-custom p,
[data-theme="dark"] .content-header .breadcrumb,
[data-theme="dark"] .content-header .breadcrumb a {
  color: #dbe7ff !important;
}

[data-theme="dark"] .box,
[data-theme="dark"] .small-box,
[data-theme="dark"] .info-box,
[data-theme="dark"] .nav-tabs-custom,
[data-theme="dark"] .well,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-addon,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .table {
  background-color: #111827 !important;
  color: #e5e7eb !important;
  border-color: var(--modern-border) !important;
}

[data-theme="dark"] .main-header .navbar .btn,
[data-theme="dark"] .main-header .navbar .btn.btn-flat {
  background: rgba(17, 24, 39, 0.6) !important;
  border-color: rgba(229, 231, 235, 0.22) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .help-block,
[data-theme="dark"] .info-box .info-box-text {
  color: var(--modern-muted) !important;
}

[data-theme="dark"] .info-box .info-box-number,
[data-theme="dark"] .small-box h3,
[data-theme="dark"] .small-box p {
  color: #f8fbff !important;
}

[data-theme="dark"] .table > thead > tr > th {
  background: #172033;
  color: #e8efff;
}

[data-theme="dark"] .table > tbody > tr > td {
  border-color: #1f2b40;
  color: #dbe7ff;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background: #162237;
}

[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
  background-color: #0f172a;
  border-color: var(--modern-border);
  color: #e5e7eb;
}

[data-theme="dark"] .dashboard-shortcuts .head-btn-shortcut {
  background: linear-gradient(145deg, #172033, #111827) !important;
  color: #e5e7eb !important;
  border-color: #2d3b55 !important;
}

[data-theme="dark"] .dashboard-shortcuts .head-btn-shortcut i {
  color: #93c5fd !important;
}

[data-theme="dark"] .dashboard-shortcuts .head-btn-shortcut:hover,
[data-theme="dark"] .dashboard-shortcuts .head-btn-shortcut:focus {
  color: #fff !important;
}


.box.box-primary {
  border-top: 0 !important;
}

.box.box-primary > .box-header {
  border-bottom: 1px solid var(--modern-border);
  padding: 14px 16px;
}

.box.box-primary > .box-header .box-title {
  font-weight: 800;
  color: #1d2b45;
}

[data-theme="dark"] .box.box-primary > .box-header .box-title {
  color: #e8efff;
}


/* Strong sidebar readability fixes */
body .main-sidebar,
body .main-sidebar .sidebar,
body.skin-blue .main-sidebar,
body.skin-blue-light .main-sidebar,
body.skin-black .main-sidebar,
body.skin-black-light .main-sidebar {
  background: linear-gradient(180deg, #0f172a, #0b1224) !important;
}

body .sidebar-menu > li > a,
body .sidebar-menu > li > a > span,
body .sidebar-menu .treeview-menu > li > a,
body .sidebar-menu .treeview-menu > li > a > span {
  color: #f8fbff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body .sidebar-menu > li.header {
  color: #b9c8df !important;
  opacity: 1 !important;
}

body .sidebar-menu > li.active > a,
body .sidebar-menu > li.menu-open > a,
body .sidebar-menu > li:hover > a {
  color: #ffffff !important;
}

body .sidebar-menu > li.active > a > span,
body .sidebar-menu > li.menu-open > a > span,
body .sidebar-menu > li:hover > a > span {
  color: #ffffff !important;
}

body .sidebar-menu .treeview-menu > li.active > a,
body .sidebar-menu .treeview-menu > li:hover > a {
  color: #ffffff !important;
}

/* Quick shortcut readability and consistency */
.dashboard-shortcuts .head-btn-shortcut {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Better chart/table contrast */
.box .highcharts-title,
.box .highcharts-axis-title,
.box .highcharts-axis-labels text,
.box .highcharts-legend-item text {
  fill: #1d2b45 !important;
}

[data-theme="dark"] .box .highcharts-title,
[data-theme="dark"] .box .highcharts-axis-title,
[data-theme="dark"] .box .highcharts-axis-labels text,
[data-theme="dark"] .box .highcharts-legend-item text {
  fill: #dbe7ff !important;
}


/* Sidebar active/selected state hard-fix (light + dark) */
body .sidebar-menu > li.active > a,
body .sidebar-menu > li.menu-open > a,
body .sidebar-menu > li:hover > a,
body .sidebar-menu > li.active:hover > a {
  background: linear-gradient(120deg, #4f46e5, #2563eb) !important;
  color: #ffffff !important;
  border-left: 0 !important;
}

body .sidebar-menu > li.active > a > span,
body .sidebar-menu > li.menu-open > a > span,
body .sidebar-menu > li:hover > a > span,
body .sidebar-menu > li.active > a > .pull-right-container,
body .sidebar-menu > li.menu-open > a > .pull-right-container {
  color: #ffffff !important;
}

body .sidebar-menu > li.active > a .fa,
body .sidebar-menu > li.active > a .fas,
body .sidebar-menu > li.active > a .fab,
body .sidebar-menu > li.menu-open > a .fa,
body .sidebar-menu > li.menu-open > a .fas,
body .sidebar-menu > li.menu-open > a .fab,
body .sidebar-menu > li:hover > a .fa,
body .sidebar-menu > li:hover > a .fas,
body .sidebar-menu > li:hover > a .fab {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

body .sidebar-menu .treeview-menu > li.active > a,
body .sidebar-menu .treeview-menu > li:hover > a {
  background: rgba(79, 70, 229, 0.35) !important;
  color: #ffffff !important;
}

body .sidebar-menu .treeview-menu > li.active > a > span,
body .sidebar-menu .treeview-menu > li:hover > a > span,
body .sidebar-menu .treeview-menu > li.active > a .fa,
body .sidebar-menu .treeview-menu > li:hover > a .fa,
body .sidebar-menu .treeview-menu > li.active > a .fas,
body .sidebar-menu .treeview-menu > li:hover > a .fas {
  color: #ffffff !important;
}

/* Force override AdminLTE skin defaults that wash out selected items */
body.skin-blue .sidebar-menu > li.active > a,
body.skin-blue-light .sidebar-menu > li.active > a,
body.skin-black .sidebar-menu > li.active > a,
body.skin-black-light .sidebar-menu > li.active > a,
body.skin-blue .sidebar-menu .treeview-menu > li.active > a,
body.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
body.skin-black .sidebar-menu .treeview-menu > li.active > a,
body.skin-black-light .sidebar-menu .treeview-menu > li.active > a {
  background: linear-gradient(120deg, #4f46e5, #2563eb) !important;
  color: #ffffff !important;
}

/* In light mode keep non-active readable */
html[data-theme="light"] body .sidebar-menu > li > a,
html:not([data-theme]) body .sidebar-menu > li > a {
  color: #f8fbff !important;
}

/* In dark mode boost contrast further */
html[data-theme="dark"] body .sidebar-menu > li > a {
  color: #ffffff !important;
}

html[data-theme="dark"] body .sidebar-menu > li.active > a,
html[data-theme="dark"] body .sidebar-menu > li.menu-open > a,
html[data-theme="dark"] body .sidebar-menu > li:hover > a {
  background: linear-gradient(120deg, #6366f1, #3b82f6) !important;
}


/* ============================================
   Unified contrast mode (simple & strict)
   Dark mode: dark background + white text
   Light mode: light background + dark text
   ============================================ */

/* Light mode unified */
html[data-theme="light"] body,
html:not([data-theme]) body {
  background: #f5f7fb !important;
  color: #111827 !important;
}

html[data-theme="light"] .content-wrapper,
html[data-theme="light"] .right-side,
html[data-theme="light"] .main-footer,
html[data-theme="light"] .box,
html[data-theme="light"] .small-box,
html[data-theme="light"] .info-box,
html[data-theme="light"] .nav-tabs-custom,
html[data-theme="light"] .well,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .table,
html:not([data-theme]) .content-wrapper,
html:not([data-theme]) .right-side,
html:not([data-theme]) .main-footer,
html:not([data-theme]) .box,
html:not([data-theme]) .small-box,
html:not([data-theme]) .info-box,
html:not([data-theme]) .nav-tabs-custom,
html:not([data-theme]) .well,
html:not([data-theme]) .modal-content,
html:not([data-theme]) .table {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d9e1ee !important;
}

html[data-theme="light"] .table > thead > tr > th,
html:not([data-theme]) .table > thead > tr > th {
  background: #eef3fb !important;
  color: #111827 !important;
}

/* Dark mode unified */
html[data-theme="dark"] body {
  background: #0b1220 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .right-side,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .box,
html[data-theme="dark"] .small-box,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .nav-tabs-custom,
html[data-theme="dark"] .well,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .table,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-addon {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #243247 !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table > tfoot > tr > th {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

html[data-theme="dark"] .table > thead > tr > th {
  background: #172238 !important;
}

/* Text utility normalization */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .info-box .info-box-text,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
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,
html[data-theme="dark"] a {
  color: #ffffff !important;
}

html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] label,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] a,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .help-block,
html[data-theme="light"] .info-box .info-box-text,
html:not([data-theme]) p,
html:not([data-theme]) span,
html:not([data-theme]) label,
html:not([data-theme]) h1,
html:not([data-theme]) h2,
html:not([data-theme]) h3,
html:not([data-theme]) h4,
html:not([data-theme]) h5,
html:not([data-theme]) h6,
html:not([data-theme]) a,
html:not([data-theme]) .text-muted,
html:not([data-theme]) .help-block,
html:not([data-theme]) .info-box .info-box-text {
  color: #111827 !important;
}

/* Keep sidebar strict in both modes */
html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .main-sidebar .sidebar,
html[data-theme="light"] .main-sidebar,
html[data-theme="light"] .main-sidebar .sidebar,
html:not([data-theme]) .main-sidebar,
html:not([data-theme]) .main-sidebar .sidebar {
  background: #0b1224 !important;
}

html[data-theme="dark"] .sidebar-menu > li > a,
html[data-theme="dark"] .sidebar-menu > li > a > span,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a > span,
html[data-theme="light"] .sidebar-menu > li > a,
html[data-theme="light"] .sidebar-menu > li > a > span,
html[data-theme="light"] .sidebar-menu .treeview-menu > li > a,
html[data-theme="light"] .sidebar-menu .treeview-menu > li > a > span,
html:not([data-theme]) .sidebar-menu > li > a,
html:not([data-theme]) .sidebar-menu > li > a > span,
html:not([data-theme]) .sidebar-menu .treeview-menu > li > a,
html:not([data-theme]) .sidebar-menu .treeview-menu > li > a > span {
  color: #ffffff !important;
}

/* ===== Final polish: top area + opened sidebar menus + stats tables/charts ===== */

/* Top shortcuts: enforce readable contrast in both modes */
html[data-theme="light"] .dashboard-shortcuts .head-btn-shortcut,
html:not([data-theme]) .dashboard-shortcuts .head-btn-shortcut {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d9e1ee !important;
}

html[data-theme="light"] .dashboard-shortcuts .head-btn-shortcut i,
html:not([data-theme]) .dashboard-shortcuts .head-btn-shortcut i {
  color: #2563eb !important;
}

html[data-theme="dark"] .dashboard-shortcuts .head-btn-shortcut {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

html[data-theme="dark"] .dashboard-shortcuts .head-btn-shortcut i {
  color: #93c5fd !important;
}

/* Sidebar opened treeview in collapsed/mobile states */
body .sidebar-menu .treeview-menu,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a > span {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

body .sidebar-menu .treeview-menu > li > a,
body .sidebar-menu .treeview-menu > li > a > span,
body .sidebar-menu .treeview-menu > li > a .fa,
body .sidebar-menu .treeview-menu > li > a .fas,
body .sidebar-menu .treeview-menu > li > a .fab {
  color: #ffffff !important;
}

/* Top navbar tone fix */
.main-header .logo,
.main-header .navbar {
  background: linear-gradient(110deg, #4f46e5, #3b82f6) !important;
}

/* Statistics tables and cards: strict contrast */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper .row,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .well {
  background: #0f172a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table thead td,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th,
html[data-theme="dark"] .table tfoot td,
html[data-theme="dark"] .table tfoot th,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dataTables_paginate,
html[data-theme="dark"] .dataTables_wrapper label,
html[data-theme="dark"] .dataTables_wrapper span {
  color: #ffffff !important;
  border-color: #223046 !important;
}

html[data-theme="light"] .table,
html:not([data-theme]) .table,
html[data-theme="light"] .table-responsive,
html:not([data-theme]) .table-responsive,
html[data-theme="light"] .dataTables_wrapper,
html:not([data-theme]) .dataTables_wrapper {
  background: #ffffff !important;
  color: #111827 !important;
}

html[data-theme="light"] .table thead th,
html:not([data-theme]) .table thead th,
html[data-theme="light"] .table tbody td,
html:not([data-theme]) .table tbody td,
html[data-theme="light"] .dataTables_info,
html:not([data-theme]) .dataTables_info,
html[data-theme="light"] .dataTables_wrapper label,
html:not([data-theme]) .dataTables_wrapper label {
  color: #111827 !important;
}

/* Highcharts background/text consistency */
html[data-theme="dark"] .highcharts-background {
  fill: #0f172a !important;
}

html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-data-label text,
html[data-theme="dark"] .highcharts-tooltip text {
  fill: #ffffff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .highcharts-background,
html:not([data-theme]) .highcharts-background {
  fill: #ffffff !important;
}

html[data-theme="light"] .highcharts-title,
html[data-theme="light"] .highcharts-subtitle,
html[data-theme="light"] .highcharts-axis-title,
html[data-theme="light"] .highcharts-axis-labels text,
html[data-theme="light"] .highcharts-legend-item text,
html[data-theme="light"] .highcharts-data-label text,
html[data-theme="light"] .highcharts-tooltip text,
html:not([data-theme]) .highcharts-title,
html:not([data-theme]) .highcharts-subtitle,
html:not([data-theme]) .highcharts-axis-title,
html:not([data-theme]) .highcharts-axis-labels text,
html:not([data-theme]) .highcharts-legend-item text,
html:not([data-theme]) .highcharts-data-label text,
html:not([data-theme]) .highcharts-tooltip text {
  fill: #111827 !important;
  color: #111827 !important;
}

/* ===== Fix remaining washed controls (per screenshots) ===== */
/* Dark mode: filters/selects/actions must be dark bg + white text */
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-sm,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn.btn-default {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #2b3a52 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b,
html[data-theme="dark"] .bootstrap-select .filter-option,
html[data-theme="dark"] .bootstrap-select .caret,
html[data-theme="dark"] option {
  color: #ffffff !important;
}

html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-results,
html[data-theme="dark"] .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .dropdown-menu {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #2b3a52 !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option,
html[data-theme="dark"] .dropdown-menu > li > a {
  color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .dropdown-menu > li > a:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

/* DataTable action buttons (copy/csv/excel/print/columns) */
html[data-theme="dark"] .dt-buttons .btn,
html[data-theme="dark"] .dt-buttons .btn-default,
html[data-theme="dark"] button.dt-button,
html[data-theme="dark"] a.dt-button,
html[data-theme="dark"] .buttons-copy,
html[data-theme="dark"] .buttons-csv,
html[data-theme="dark"] .buttons-excel,
html[data-theme="dark"] .buttons-print,
html[data-theme="dark"] .buttons-colvis {
  background: #172238 !important;
  color: #ffffff !important;
  border: 1px solid #2b3a52 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .dt-buttons .btn:hover,
html[data-theme="dark"] button.dt-button:hover,
html[data-theme="dark"] a.dt-button:hover {
  background: #243247 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .dt-buttons .btn.disabled,
html[data-theme="dark"] .dt-buttons .btn:disabled,
html[data-theme="dark"] button.dt-button.disabled,
html[data-theme="dark"] a.dt-button.disabled {
  background: #111827 !important;
  color: #cbd5e1 !important;
  border-color: #2b3a52 !important;
  opacity: 0.9 !important;
}

/* Light mode: keep controls on white bg with dark text */
html[data-theme="light"] select,
html[data-theme="light"] .form-control,
html[data-theme="light"] .input-sm,
html[data-theme="light"] .select2-container--default .select2-selection--single,
html[data-theme="light"] .select2-container--default .select2-selection--multiple,
html[data-theme="light"] .bootstrap-select > .dropdown-toggle,
html:not([data-theme]) select,
html:not([data-theme]) .form-control,
html:not([data-theme]) .input-sm,
html:not([data-theme]) .select2-container--default .select2-selection--single,
html:not([data-theme]) .select2-container--default .select2-selection--multiple,
html:not([data-theme]) .bootstrap-select > .dropdown-toggle {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d9e1ee !important;
}

html[data-theme="light"] .dt-buttons .btn,
html[data-theme="light"] button.dt-button,
html[data-theme="light"] a.dt-button,
html:not([data-theme]) .dt-buttons .btn,
html:not([data-theme]) button.dt-button,
html:not([data-theme]) a.dt-button {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d9e1ee !important;
}

/* ===== Final fixes requested: sidebar submenu + module headers ===== */

/* 1) Sidebar dropdown submenu must always be visible */
.main-sidebar .sidebar .sidebar-menu .treeview-menu,
body .main-sidebar .sidebar .sidebar-menu .treeview-menu,
body.skin-blue .sidebar-menu .treeview-menu,
body.skin-blue-light .sidebar-menu .treeview-menu,
body.skin-black .sidebar-menu .treeview-menu,
body.skin-black-light .sidebar-menu .treeview-menu {
  background: #0f172a !important;
  border: 1px solid #223046 !important;
}

.main-sidebar .sidebar .sidebar-menu .treeview-menu > li > a,
.main-sidebar .sidebar .sidebar-menu .treeview-menu > li > a > span,
.main-sidebar .sidebar .sidebar-menu .treeview-menu > li > a .fa,
.main-sidebar .sidebar .sidebar-menu .treeview-menu > li > a .fas,
.main-sidebar .sidebar .sidebar-menu .treeview-menu > li > a .fab {
  color: #ffffff !important;
  opacity: 1 !important;
}

.main-sidebar .sidebar .sidebar-menu .treeview-menu > li.active > a,
.main-sidebar .sidebar .sidebar-menu .treeview-menu > li > a:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

/* collapsed sidebar popout submenu */
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

/* 2) Module header/title visibility */
html[data-theme="dark"] .content-header,
html[data-theme="dark"] .content-header > h1,
html[data-theme="dark"] .content-header > h1 small,
html[data-theme="dark"] .content-header .breadcrumb,
html[data-theme="dark"] .content-header .breadcrumb li,
html[data-theme="dark"] .content-header .breadcrumb a,
html[data-theme="dark"] .box-header,
html[data-theme="dark"] .box-header .box-title,
html[data-theme="dark"] .box-title,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
  color: #ffffff !important;
}

html[data-theme="dark"] .box-header,
html[data-theme="dark"] .content-header {
  background: transparent !important;
  border-color: #223046 !important;
}

/* dark mode module filter/header controls that still appear white */
html[data-theme="dark"] .content-header .form-control,
html[data-theme="dark"] .content .form-control,
html[data-theme="dark"] .content .input-group-addon,
html[data-theme="dark"] .content .select2-selection,
html[data-theme="dark"] .content .select2-selection--single,
html[data-theme="dark"] .content .select2-selection--multiple,
html[data-theme="dark"] .content .btn-group > .btn,
html[data-theme="dark"] .content .btn-default {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

html[data-theme="dark"] .content .btn-group > .btn:hover,
html[data-theme="dark"] .content .btn-default:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

/* ===== POS screen polish (requested) ===== */
/* keep POS consistent with contrast rule in both modes */

/* Dark POS */
html[data-theme="dark"] .pos-layout-v2,
html[data-theme="dark"] .pos-layout-v2 .box,
html[data-theme="dark"] .pos-layout-v2 .panel,
html[data-theme="dark"] .pos-layout-v2 .well,
html[data-theme="dark"] .pos-layout-v2 .modal-content,
html[data-theme="dark"] .pos-layout-v2 .pos-main-panel-body,
html[data-theme="dark"] .pos-layout-v2 .pos-cart-table-wrap,
html[data-theme="dark"] .pos-layout-v2 .pos_form_totals,
html[data-theme="dark"] .pos-layout-v2 .pos-sale-note-wrap,
html[data-theme="dark"] .pos-layout-v2 #recent-transactions {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

html[data-theme="dark"] .pos-layout-v2 .form-control,
html[data-theme="dark"] .pos-layout-v2 select,
html[data-theme="dark"] .pos-layout-v2 .input-group-addon,
html[data-theme="dark"] .pos-layout-v2 .select2-selection,
html[data-theme="dark"] .pos-layout-v2 .select2-selection--single,
html[data-theme="dark"] .pos-layout-v2 .select2-selection--multiple,
html[data-theme="dark"] .pos-layout-v2 .btn-default,
html[data-theme="dark"] .pos-layout-v2 .btn.btn-default,
html[data-theme="dark"] .pos-layout-v2 .btn-group > .btn {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #2b3a52 !important;
}

html[data-theme="dark"] .pos-layout-v2 #pos_table,
html[data-theme="dark"] .pos-layout-v2 #pos_table thead th,
html[data-theme="dark"] .pos-layout-v2 #pos_table tbody td,
html[data-theme="dark"] .pos-layout-v2 #pos_table tfoot td,
html[data-theme="dark"] .pos-layout-v2 #pos_table tfoot th {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

html[data-theme="dark"] .pos-layout-v2 .pos-total,
html[data-theme="dark"] .pos-layout-v2 .pos-total span,
html[data-theme="dark"] .pos-layout-v2 .pos-total-pill,
html[data-theme="dark"] .pos-layout-v2 .text-muted,
html[data-theme="dark"] .pos-layout-v2 label,
html[data-theme="dark"] .pos-layout-v2 h1,
html[data-theme="dark"] .pos-layout-v2 h2,
html[data-theme="dark"] .pos-layout-v2 h3,
html[data-theme="dark"] .pos-layout-v2 h4,
html[data-theme="dark"] .pos-layout-v2 h5 {
  color: #ffffff !important;
}

html[data-theme="dark"] .pos-layout-v2 .product_list,
html[data-theme="dark"] .pos-layout-v2 .pos-category-menu .btn,
html[data-theme="dark"] .pos-layout-v2 .pos-variation-btn,
html[data-theme="dark"] .pos-layout-v2 .pos-variation-option {
  background: #172238 !important;
  color: #ffffff !important;
  border-color: #2b3a52 !important;
}

/* Light POS */
html[data-theme="light"] .pos-layout-v2,
html:not([data-theme]) .pos-layout-v2,
html[data-theme="light"] .pos-layout-v2 .box,
html:not([data-theme]) .pos-layout-v2 .box,
html[data-theme="light"] .pos-layout-v2 .panel,
html:not([data-theme]) .pos-layout-v2 .panel,
html[data-theme="light"] .pos-layout-v2 .well,
html:not([data-theme]) .pos-layout-v2 .well,
html[data-theme="light"] .pos-layout-v2 .pos-main-panel-body,
html:not([data-theme]) .pos-layout-v2 .pos-main-panel-body,
html[data-theme="light"] .pos-layout-v2 .pos-cart-table-wrap,
html:not([data-theme]) .pos-layout-v2 .pos-cart-table-wrap {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d9e1ee !important;
}

html[data-theme="light"] .pos-layout-v2 .form-control,
html[data-theme="light"] .pos-layout-v2 select,
html[data-theme="light"] .pos-layout-v2 .input-group-addon,
html[data-theme="light"] .pos-layout-v2 .select2-selection,
html[data-theme="light"] .pos-layout-v2 .select2-selection--single,
html[data-theme="light"] .pos-layout-v2 .select2-selection--multiple,
html:not([data-theme]) .pos-layout-v2 .form-control,
html:not([data-theme]) .pos-layout-v2 select,
html:not([data-theme]) .pos-layout-v2 .input-group-addon,
html:not([data-theme]) .pos-layout-v2 .select2-selection,
html:not([data-theme]) .pos-layout-v2 .select2-selection--single,
html:not([data-theme]) .pos-layout-v2 .select2-selection--multiple {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d9e1ee !important;
}

html[data-theme="light"] .pos-layout-v2 #pos_table,
html[data-theme="light"] .pos-layout-v2 #pos_table thead th,
html[data-theme="light"] .pos-layout-v2 #pos_table tbody td,
html:not([data-theme]) .pos-layout-v2 #pos_table,
html:not([data-theme]) .pos-layout-v2 #pos_table thead th,
html:not([data-theme]) .pos-layout-v2 #pos_table tbody td {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d9e1ee !important;
}

/* ===== POS dark-mode final hotfix: product names + white areas ===== */
html[data-theme="dark"] .pos-layout-v2 #product_list_body,
html[data-theme="dark"] .pos-layout-v2 .pos_product_div,
html[data-theme="dark"] .pos-layout-v2 .pos-main-panel,
html[data-theme="dark"] .pos-layout-v2 .pos-main-panel-body,
html[data-theme="dark"] .pos-layout-v2 .pos-sidebar-content,
html[data-theme="dark"] .pos-layout-v2 .pos-main-grid__sidebar,
html[data-theme="dark"] .pos-layout-v2 .pos-main-grid__cart,
html[data-theme="dark"] .pos-layout-v2 .pos-category-select-wrap,
html[data-theme="dark"] .pos-layout-v2 .pos-category-menu {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list,
html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list h4,
html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list h5,
html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list .product_name,
html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list .name,
html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list span,
html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list small,
html[data-theme="dark"] .pos-layout-v2 .product_list,
html[data-theme="dark"] .pos-layout-v2 .product_list * {
  color: #ffffff !important;
}

html[data-theme="dark"] .pos-layout-v2 #product_list_body .product_list {
  background: #172238 !important;
  border: 1px solid #2b3a52 !important;
}

/* remove light placeholders/strips in dark POS area */
html[data-theme="dark"] .pos-layout-v2 .bg-white,
html[data-theme="dark"] .pos-layout-v2 .bg-gray,
html[data-theme="dark"] .pos-layout-v2 .bg-light,
html[data-theme="dark"] .pos-layout-v2 .well,
html[data-theme="dark"] .pos-layout-v2 .panel,
html[data-theme="dark"] .pos-layout-v2 .list-group,
html[data-theme="dark"] .pos-layout-v2 .list-group-item,
html[data-theme="dark"] .pos-layout-v2 .pos-tab-container,
html[data-theme="dark"] .pos-layout-v2 .pos-tab-content {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #223046 !important;
}

/* ===== POS classic layout hotfix (non pos-layout-v2) ===== */
html[data-theme="dark"] .pos_product_div,
html[data-theme="dark"] #product_list_body,
html[data-theme="dark"] .eq-height-row#product_list_body,
html[data-theme="dark"] .pos-sidebar,
html[data-theme="dark"] #pos_sidebar,
html[data-theme="dark"] .bg-lightgray {
  background: #0f172a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #product_list_body .product_box,
html[data-theme="dark"] .product_list .product_box {
  background: #172238 !important;
  border: 1px solid #2b3a52 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #product_list_body .product_box .text_div,
html[data-theme="dark"] #product_list_body .product_box .text,
html[data-theme="dark"] #product_list_body .product_box small,
html[data-theme="dark"] #product_list_body .product_box .text-muted,
html[data-theme="dark"] .product_list .product_box .text,
html[data-theme="dark"] .product_list .product_box small,
html[data-theme="dark"] .product_list .product_box .text-muted {
  color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #product_list_body .product_box .image-container {
  background-color: #0f172a !important;
}

/* ===== POS strict product card design per request (dark mode) ===== */
html[data-theme="dark"] .pos_product_div,
html[data-theme="dark"] #product_list_body,
html[data-theme="dark"] .pos-tab-container,
html[data-theme="dark"] .pos-tab-content,
html[data-theme="dark"] .pos-tab-menu,
html[data-theme="dark"] .pos-tab-menu .list-group,
html[data-theme="dark"] .pos-tab-menu .list-group > a,
html[data-theme="dark"] .pos-category-menu,
html[data-theme="dark"] .pos-category-select-wrap,
html[data-theme="dark"] .bg-lightgray {
  background: #0b1733 !important;
  border-color: #223046 !important;
  color: #ffffff !important;
}

/* remove pale strip under categories/brands area */
html[data-theme="dark"] .pos-tab-content,
html[data-theme="dark"] .pos-tab-content.active,
html[data-theme="dark"] .pos_product_div::before,
html[data-theme="dark"] .pos_product_div::after,
html[data-theme="dark"] #product_list_body::before,
html[data-theme="dark"] #product_list_body::after {
  background: #0b1733 !important;
}

/* product card: dark background + white border */
html[data-theme="dark"] #product_list_body .product_box,
html[data-theme="dark"] .pos_product_div .product_box,
html[data-theme="dark"] .product_list .product_box {
  background: #142549 !important;
  border: 1px solid #ffffff !important;
  border-radius: 10px !important;
  padding: 8px 6px 10px !important;
}

/* image area inside card */
html[data-theme="dark"] #product_list_body .product_box .image-container,
html[data-theme="dark"] .pos_product_div .product_box .image-container {
  background-color: #0f1f3f !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}

/* force product name under image and visible */
html[data-theme="dark"] #product_list_body .product_box .text_div,
html[data-theme="dark"] .pos_product_div .product_box .text_div {
  display: block !important;
  margin-top: 6px !important;
}

html[data-theme="dark"] #product_list_body .product_box .text,
html[data-theme="dark"] #product_list_body .product_box small,
html[data-theme="dark"] #product_list_body .product_box .text-muted,
html[data-theme="dark"] .pos_product_div .product_box .text,
html[data-theme="dark"] .pos_product_div .product_box small,
html[data-theme="dark"] .pos_product_div .product_box .text-muted {
  color: #ffffff !important;
  opacity: 1 !important;
  display: block !important;
  text-align: center !important;
  line-height: 16px !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* ===== Global typography guardrails (light/dark) ===== */
html[data-theme="light"],
html:not([data-theme]) {
  --app-text-primary: #111827;
  --app-text-secondary: #475569;
}

html[data-theme="dark"] {
  --app-text-primary: #f8fafc;
  --app-text-secondary: #cbd5e1;
}

html[data-theme="light"] body,
html:not([data-theme]) body {
  color: var(--app-text-primary) !important;
}

html[data-theme="dark"] body {
  color: var(--app-text-primary) !important;
}

/* Keep main containers readable in both modes */
html[data-theme="light"] .content-wrapper,
html[data-theme="light"] .right-side,
html[data-theme="light"] .main-footer,
html[data-theme="light"] .box,
html[data-theme="light"] .panel,
html[data-theme="light"] .well,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .info-box,
html[data-theme="light"] .small-box,
html[data-theme="light"] .nav-tabs-custom,
html[data-theme="light"] .table,
html:not([data-theme]) .content-wrapper,
html:not([data-theme]) .right-side,
html:not([data-theme]) .main-footer,
html:not([data-theme]) .box,
html:not([data-theme]) .panel,
html:not([data-theme]) .well,
html:not([data-theme]) .modal-content,
html:not([data-theme]) .info-box,
html:not([data-theme]) .small-box,
html:not([data-theme]) .nav-tabs-custom,
html:not([data-theme]) .table,
html[data-theme="light"] .content-wrapper *,
html[data-theme="light"] .right-side *,
html:not([data-theme]) .content-wrapper *,
html:not([data-theme]) .right-side * {
  color: var(--app-text-primary);
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .right-side,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .well,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .small-box,
html[data-theme="dark"] .nav-tabs-custom,
html[data-theme="dark"] .table,
html[data-theme="dark"] .content-wrapper *,
html[data-theme="dark"] .right-side * {
  color: var(--app-text-primary);
}

/* text-white utility fix for light mode white backgrounds */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-white a,
html[data-theme="light"] .color-white,
html:not([data-theme]) .text-white,
html:not([data-theme]) .text-white a,
html:not([data-theme]) .color-white {
  color: var(--app-text-primary) !important;
}

html[data-theme="light"] .text-muted,
html[data-theme="light"] .help-block,
html:not([data-theme]) .text-muted,
html:not([data-theme]) .help-block {
  color: var(--app-text-secondary) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block {
  color: var(--app-text-secondary) !important;
}