/* Color mode fallback when EzcoGui is inactive — keep text readable */
html[data-color-mode="dark"] body {
  --theme-surface: #1a221c;
  --theme-bg: #121812;
  --theme-text: #e7e6d0;
  --theme-muted: #9aa89c;
  --theme-border: #2e3a32;
  color-scheme: dark;
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}
html[data-color-mode="dark"] .content-wrapper,
html[data-color-mode="dark"] .tw-bg-gray-100,
html[data-color-mode="dark"] main {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}
html[data-color-mode="dark"] .box,
html[data-color-mode="dark"] .box-solid,
html[data-color-mode="dark"] .panel,
html[data-color-mode="dark"] .card,
html[data-color-mode="dark"] .tw-bg-white,
html[data-color-mode="dark"] .header-surface-menu {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}
html[data-color-mode="dark"] .tw-text-gray-900,
html[data-color-mode="dark"] .tw-text-gray-700,
html[data-color-mode="dark"] .tw-text-black,
html[data-color-mode="dark"] .content-header h1,
html[data-color-mode="dark"] .box-title,
html[data-color-mode="dark"] label,
html[data-color-mode="dark"] .form-control,
html[data-color-mode="dark"] table.dataTable,
html[data-color-mode="dark"] .table > thead > tr > th,
html[data-color-mode="dark"] .table > tbody > tr > td {
  color: var(--theme-text) !important;
}
html[data-color-mode="dark"] .tw-text-gray-600,
html[data-color-mode="dark"] .tw-text-gray-500,
html[data-color-mode="dark"] .text-muted,
html[data-color-mode="dark"] .help-block {
  color: var(--theme-muted) !important;
}
html[data-color-mode="dark"] .form-control,
html[data-color-mode="dark"] .select2-container--default .select2-selection--single,
html[data-color-mode="dark"] .select2-dropdown,
html[data-color-mode="dark"] .select2-results__option {
  background-color: #222b24 !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}
html[data-color-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #1e2620 !important;
}
html[data-color-mode="dark"] #side-bar,
html[data-color-mode="dark"] .main-sidebar {
  background-color: #162019 !important;
  color: var(--theme-text) !important;
}
html[data-color-mode="light"] {
  color-scheme: light;
}