/* ========================================================================
   Dark Mode Overrides — applies when html[data-theme="dark"]
   Sidebar (.aside, .brand) stays dark in both modes — no changes needed.
   ======================================================================== */

/* --- Smooth transition during toggle --- */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- Body --- */
html[data-theme="dark"] body {
    background-color: var(--cd-body-bg) !important;
    color: var(--cd-text-primary) !important;
}

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

/* --- Header --- */
html[data-theme="dark"] .header {
    background-color: var(--cd-header-bg) !important;
}
html[data-theme="dark"] .header-fixed .header {
    box-shadow: var(--cd-shadow);
}

/* --- Cards --- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-custom,
html[data-theme="dark"] .card.card-custom {
    background-color: var(--cd-card-bg) !important;
    box-shadow: var(--cd-shadow);
}
html[data-theme="dark"] .card-header {
    background-color: var(--cd-card-bg) !important;
    border-bottom-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
/* Override Metronic's hardcoded #181C32 on card-custom title/label */
html[data-theme="dark"] .card.card-custom > .card-header .card-title,
html[data-theme="dark"] .card.card-custom > .card-header .card-title .card-label {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .card.card-custom > .card-header .card-title small {
    color: var(--cd-text-muted) !important;
}
/* Override hardcoded icon colors in card-custom header */
html[data-theme="dark"] .card.card-custom > .card-header .card-title .card-icon i {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .card.card-custom > .card-header .card-title .card-icon .svg-icon svg g [fill] {
    fill: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .card-footer {
    background-color: var(--cd-card-bg) !important;
    border-top-color: var(--cd-border-color) !important;
}

/* --- Modals --- */
html[data-theme="dark"] .modal-content {
    background-color: var(--cd-modal-bg) !important;
    border-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .modal-header {
    background-color: var(--cd-modal-header-bg) !important;
    border-bottom-color: var(--cd-modal-header-border) !important;
}
html[data-theme="dark"] .modal-header .modal-title,
html[data-theme="dark"] .modal-header .close {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .modal-body {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .modal-footer {
    background-color: var(--cd-modal-footer-bg) !important;
    border-top-color: var(--cd-modal-footer-border) !important;
}

/* --- Forms --- */
html[data-theme="dark"] .form-control {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--cd-input-placeholder) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--cd-input-disabled-bg) !important;
}
html[data-theme="dark"] select.form-control {
    background-color: var(--cd-input-bg) !important;
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-text-muted) !important;
}

/* --- Select2 --- */
html[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--cd-dropdown-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--cd-text-primary) !important;
}

/* --- Tables --- */
html[data-theme="dark"] .table {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .table thead th {
    background-color: var(--cd-thead-bg) !important;
    color: var(--cd-thead-color) !important;
    border-color: var(--cd-table-border) !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    border-color: var(--cd-table-border) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--cd-table-stripe-bg) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: var(--cd-table-bg) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--cd-table-hover-bg) !important;
}
html[data-theme="dark"] .table-bordered {
    border-color: var(--cd-table-border) !important;
}
html[data-theme="dark"] .thead-light th {
    background-color: var(--cd-thead-bg) !important;
    color: var(--cd-thead-color) !important;
}

/* --- DataTables --- */
html[data-theme="dark"] .dataTables_wrapper {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--cd-dropdown-hover-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cd-dropdown-hover-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}

/* --- Dropdown menus --- */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--cd-dropdown-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
    box-shadow: var(--cd-shadow-lg);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--cd-dropdown-hover-bg) !important;
}
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--cd-border-color) !important;
}

/* --- Datepicker --- */
html[data-theme="dark"] .datepicker {
    background-color: var(--cd-dropdown-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .datepicker table tr td.today {
    background-color: var(--cd-dropdown-hover-bg) !important;
}
html[data-theme="dark"] .datepicker .datepicker-switch,
html[data-theme="dark"] .datepicker .prev,
html[data-theme="dark"] .datepicker .next {
    color: var(--cd-text-primary) !important;
}

/* --- JSON viewer --- */
html[data-theme="dark"] .json-document {
    background-color: var(--cd-json-bg) !important;
    color: var(--cd-json-color) !important;
    border-color: var(--cd-border-color) !important;
}

/* --- Text utility overrides --- */
html[data-theme="dark"] .text-dark {
    color: var(--cd-text-dark) !important;
}
html[data-theme="dark"] .text-dark-50 {
    color: var(--cd-text-dark-50) !important;
}
html[data-theme="dark"] .text-dark-75 {
    color: var(--cd-text-dark-75) !important;
}
html[data-theme="dark"] .text-muted {
    color: var(--cd-text-muted) !important;
}

/* --- Labels --- */
html[data-theme="dark"] .label-light {
    background-color: var(--cd-label-light-bg) !important;
}
html[data-theme="dark"] .label-light-success {
    background-color: rgba(27, 197, 189, 0.15) !important;
}
html[data-theme="dark"] .label-light-danger {
    background-color: rgba(246, 78, 96, 0.15) !important;
}

/* --- Alerts --- */
html[data-theme="dark"] .alert-info {
    background-color: var(--cd-alert-info-bg) !important;
    border-color: var(--cd-alert-info-border) !important;
    color: var(--cd-alert-info-color) !important;
}

/* --- Separators --- */
html[data-theme="dark"] .separator {
    border-color: var(--cd-separator-color) !important;
}

/* --- Topbar & buttons --- */
html[data-theme="dark"] .btn-light-primary {
    color: var(--cd-btn-light-primary-color) !important;
}
html[data-theme="dark"] .btn-secondary {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-text-primary) !important;
}

/* --- Form labels --- */
html[data-theme="dark"] .col-form-label {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] label {
    color: var(--cd-text-primary) !important;
}

/* --- Checkbox custom --- */
html[data-theme="dark"] .checkbox > span {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
}

/* --- Scrollbar (webkit) --- */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--cd-body-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--cd-border-color);
}

/* --- Page loading overlay --- */
html[data-theme="dark"] .blockUI.blockOverlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* --- DataTable card title bar --- */
html[data-theme="dark"] .card-title .card-label {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .card-toolbar .btn-light {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-text-primary) !important;
}

/* --- Theme toggle button --- */
.btn-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0 8px;
    color: var(--cd-theme-toggle-color);
    display: flex;
    align-items: center;
}
.btn-theme-toggle:hover {
    color: var(--cd-theme-toggle-hover-color);
}
html[data-theme="dark"] .btn-theme-toggle {
    color: var(--cd-theme-toggle-color);
}
html[data-theme="dark"] .btn-theme-toggle:hover {
    color: var(--cd-theme-toggle-hover-color);
}

/* --- Bootstrap-select (selectpicker) --- */
html[data-theme="dark"] .bootstrap-select .dropdown-toggle {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu {
    background-color: var(--cd-dropdown-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-item {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-item:hover,
html[data-theme="dark"] .bootstrap-select .dropdown-item:focus {
    background-color: var(--cd-dropdown-hover-bg) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-item.active,
html[data-theme="dark"] .bootstrap-select .dropdown-item:active {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .bootstrap-select .bs-searchbox .form-control {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .bootstrap-select .bs-actionsbox .btn {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-text-primary) !important;
}

/* --- Discrepancy / error highlight in report tables --- */
.text-discrepancy,
td.discrepancy-cell {
    color: var(--cd-discrepancy-color) !important;
}

/* --- Report filter card (CommissionReport, EarnedPremiumReport, etc.) --- */
html[data-theme="dark"] .card.example {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
}
/* --- .example-compact and example-code (Metronic hardcoded #F3F6F9) --- */
html[data-theme="dark"] .example.example-compact .example-toggle.example-toggled {
    background-color: var(--cd-input-disabled-bg) !important;
}
html[data-theme="dark"] .example.example-compact .example-code,
html[data-theme="dark"] .example.example-compact .example-code pre[class*=language-] {
    background-color: var(--cd-input-disabled-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* --- HR separator --- */
html[data-theme="dark"] hr {
    border-color: var(--cd-border-color) !important;
}

/* --- Header border --- */
html[data-theme="dark"] .header {
    border-bottom-color: var(--cd-header-border) !important;
}

/* --- Tabs --- */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--cd-nav-tabs-border) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--cd-nav-tabs-link-color) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-nav-tabs-border) var(--cd-nav-tabs-border) var(--cd-card-bg) !important;
    color: var(--cd-nav-tabs-link-active-color) !important;
}
html[data-theme="dark"] .nav-tabs.nav-tabs-line .nav-link.active {
    border-bottom-color: var(--cd-nav-tabs-link-active-border) !important;
    color: var(--cd-nav-tabs-link-active-color) !important;
}

/* --- Navi (Metronic sidebar nav items) --- */
html[data-theme="dark"] .navi .navi-item .navi-link:hover {
    background-color: var(--cd-navi-link-bg-hover) !important;
}
html[data-theme="dark"] .navi .navi-item .navi-link .navi-text {
    color: var(--cd-navi-text-color) !important;
}

/* --- Badges --- */
html[data-theme="dark"] .badge-light {
    background-color: var(--cd-badge-light-bg) !important;
    color: var(--cd-badge-light-color) !important;
}

/* --- Progress bars --- */
html[data-theme="dark"] .progress {
    background-color: var(--cd-progress-bg) !important;
}

/* --- Symbol/Avatar light variant --- */
html[data-theme="dark"] .symbol-light .symbol-label,
html[data-theme="dark"] .symbol.symbol-light .symbol-label {
    background-color: var(--cd-symbol-light-bg) !important;
}

/* --- Offcanvas / Quick panels (full background) --- */
html[data-theme="dark"] .offcanvas {
    background-color: var(--cd-offcanvas-bg) !important;
}
html[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--cd-offcanvas-header-border) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .offcanvas-header h3,
html[data-theme="dark"] .offcanvas-header h4,
html[data-theme="dark"] .offcanvas-header h5 {
    color: var(--cd-text-primary) !important;
}

/* --- bg-light variants (Metronic colored light backgrounds) --- */
html[data-theme="dark"] .bg-light {
    background-color: var(--cd-bg-light) !important;
}
html[data-theme="dark"] .bg-light-primary {
    background-color: var(--cd-bg-light-primary) !important;
}
html[data-theme="dark"] .bg-light-success {
    background-color: var(--cd-bg-light-success) !important;
}
html[data-theme="dark"] .bg-light-info {
    background-color: var(--cd-bg-light-info) !important;
}
html[data-theme="dark"] .bg-light-warning {
    background-color: var(--cd-bg-light-warning) !important;
}
html[data-theme="dark"] .bg-light-danger {
    background-color: var(--cd-bg-light-danger) !important;
}
html[data-theme="dark"] .bg-light-dark {
    background-color: var(--cd-bg-light-dark) !important;
}

/* --- Links --- */
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.menu-link):not(.navi-link):not(.dropdown-item) {
    color: var(--cd-link-color) !important;
}

/* --- Negative values (commission reports) --- */
.text-negative {
    color: var(--cd-negative-color) !important;
}

/* --- Switch toggles --- */
html[data-theme="dark"] .switch > label {
    background-color: var(--cd-switch-bg) !important;
}
html[data-theme="dark"] .switch input:checked ~ span {
    background-color: var(--cd-switch-checked-bg) !important;
}

/* --- Breadcrumb --- */
html[data-theme="dark"] .breadcrumb-item a,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--cd-breadcrumb-color) !important;
}
html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--cd-breadcrumb-active-color) !important;
}

/* --- Subheader (page title area) --- */
html[data-theme="dark"] .subheader {
    background-color: var(--cd-card-bg) !important;
    border-bottom-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .subheader .subheader-title {
    color: var(--cd-text-primary) !important;
}

/* --- List group --- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .list-group-item.active {
    background-color: #3699FF !important;
    border-color: #3699FF !important;
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--cd-navi-link-bg-hover) !important;
}

/* --- Tooltips --- */
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--cd-dropdown-bg) !important;
    color: var(--cd-text-primary) !important;
    border: 1px solid var(--cd-dropdown-border);
}

/* --- Popovers --- */
html[data-theme="dark"] .popover {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .popover-header {
    background-color: var(--cd-modal-header-bg) !important;
    border-bottom-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .popover-body {
    color: var(--cd-text-primary) !important;
}

/* --- Accordion --- */
html[data-theme="dark"] .accordion .card {
    border-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .accordion .card-header {
    background-color: var(--cd-modal-header-bg) !important;
}

/* --- Pre/code blocks --- */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: var(--cd-json-bg) !important;
    color: var(--cd-json-color) !important;
    border-color: var(--cd-border-color) !important;
}

/* --- Date range picker --- */
html[data-theme="dark"] .daterangepicker {
    background-color: var(--cd-dropdown-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
}
html[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--cd-dropdown-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
}
html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
}
html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .daterangepicker td.in-range {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .daterangepicker .drp-buttons {
    border-top-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .daterangepicker .drp-calendar td,
html[data-theme="dark"] .daterangepicker .drp-calendar th {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}

/* --- SweetAlert2 --- */
html[data-theme="dark"] .swal2-popup {
    background-color: var(--cd-card-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .swal2-title {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
    color: var(--cd-text-secondary) !important;
}

/* --- Select2 multiple selection --- */
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cd-dropdown-hover-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--cd-input-color) !important;
}

/* --- Pagination --- */
html[data-theme="dark"] .page-link {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .page-link:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: #3699FF !important;
    border-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-muted) !important;
}

/* --- Metronic header menu (light theme overrides) --- */
html[data-theme="dark"] .header-menu .menu-nav > .menu-item .menu-link .menu-text {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .topbar .btn-clean {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .topbar .btn-clean:hover {
    color: var(--cd-text-primary) !important;
    background-color: var(--cd-dropdown-hover-bg) !important;
}

/* --- Metronic label variants with color --- */
html[data-theme="dark"] .label-light-primary {
    background-color: var(--cd-bg-light-primary) !important;
}
html[data-theme="dark"] .label-light-info {
    background-color: var(--cd-bg-light-info) !important;
}
html[data-theme="dark"] .label-light-warning {
    background-color: var(--cd-bg-light-warning) !important;
}

/* --- Mobile header --- */
html[data-theme="dark"] .header-mobile {
    background-color: var(--cd-header-bg) !important;
    border-bottom-color: var(--cd-header-border) !important;
    box-shadow: var(--cd-shadow);
}
html[data-theme="dark"] .header-mobile .burger-icon span,
html[data-theme="dark"] .header-mobile .burger-icon span::before,
html[data-theme="dark"] .header-mobile .burger-icon span::after {
    background-color: var(--cd-text-secondary) !important;
}

/* --- Select2 validation state (moved from _Layout.cshtml inline style) --- */
.has-danger .select2-selection {
    border: 1px solid var(--cd-discrepancy-color);
}

/* --- Wrapper / page content area --- */
html[data-theme="dark"] #kt_wrapper,
html[data-theme="dark"] .wrapper {
    background-color: var(--cd-content-bg) !important;
}

/* --- Table body rows (non-striped) --- */
html[data-theme="dark"] .table tbody tr {
    background-color: var(--cd-table-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .table tbody tr td {
    color: var(--cd-text-primary) !important;
    border-color: var(--cd-table-border) !important;
}

/* --- Textarea dark mode --- */
html[data-theme="dark"] textarea.form-control {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}

/* --- Form-bordered separator lines --- */
html[data-theme="dark"] .form-bordered .form-group {
    border-bottom-color: var(--cd-border-color) !important;
}

/* --- Option elements inside selects (Firefox) --- */
html[data-theme="dark"] select.form-control option,
html[data-theme="dark"] select option {
    background-color: var(--cd-dropdown-bg);
    color: var(--cd-input-color);
}

/* --- ApexCharts / Chart.js canvas backgrounds --- */
html[data-theme="dark"] .apexcharts-canvas,
html[data-theme="dark"] .apexcharts-canvas svg {
    background: transparent !important;
}
html[data-theme="dark"] .apexcharts-tooltip {
    background-color: var(--cd-dropdown-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .apexcharts-tooltip-title {
    background-color: var(--cd-modal-header-bg) !important;
    border-bottom-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .apexcharts-legend-text {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip {
    background-color: var(--cd-dropdown-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .apexcharts-gridline {
    stroke: var(--cd-border-color) !important;
}
html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-title-text,
html[data-theme="dark"] .apexcharts-subtitle-text {
    fill: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label {
    fill: var(--cd-text-secondary) !important;
}

/* --- Add-job steps wizard (addjob.css overrides) --- */
html[data-theme="dark"] .step {
    background-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .step-active {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .step-arrow {
    border-left-color: var(--cd-border-color) !important;
}

/* --- Bootstrap-select notify / no-results --- */
html[data-theme="dark"] .bootstrap-select .dropdown-menu .notify {
    background: var(--cd-dropdown-hover-bg) !important;
    border-color: var(--cd-dropdown-border) !important;
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .bootstrap-select .no-results {
    background: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* --- DataTables search/filter inputs (column search row) --- */
html[data-theme="dark"] .history-filter-row th {
    background-color: var(--cd-thead-bg) !important;
}
html[data-theme="dark"] .history-filter-row input.form-control,
html[data-theme="dark"] .history-filter-row select.form-control {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}

/* --- DataTables processing overlay --- */
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    background-color: var(--cd-card-bg) !important;
    color: var(--cd-text-primary) !important;
    border-color: var(--cd-border-color) !important;
}

/* --- DataTables empty row / no records --- */
html[data-theme="dark"] table.dataTable tbody td.dataTables_empty {
    background-color: var(--cd-table-bg) !important;
    color: var(--cd-text-muted) !important;
}

/* --- Card toolbar buttons (light) --- */
html[data-theme="dark"] .card-toolbar .btn-light-primary,
html[data-theme="dark"] .card-toolbar .btn-light-secondary,
html[data-theme="dark"] .card-toolbar .btn-light-success,
html[data-theme="dark"] .card-toolbar .btn-light-warning,
html[data-theme="dark"] .card-toolbar .btn-light-danger,
html[data-theme="dark"] .card-toolbar .btn-light-info {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
}

/* --- Nav hover items text color --- */
html[data-theme="dark"] .nav-hover .nav-link,
html[data-theme="dark"] .nav-hover .nav-item .nav-link {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .nav-hover .nav-item .nav-link:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
}

/* --- Table group actions / DataTable row actions toolbar --- */
html[data-theme="dark"] .table-group-actions {
    background-color: var(--cd-thead-bg) !important;
    border-color: var(--cd-border-color) !important;
}

/* --- bg-white utility class override --- */
html[data-theme="dark"] .bg-white {
    background-color: var(--cd-card-bg) !important;
}

/* --- alert-light --- */
html[data-theme="dark"] .alert-light {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}

/* --- spinner (text-primary color already handles, but track bg) --- */
html[data-theme="dark"] .spinner-border {
    border-color: currentColor;
    border-right-color: transparent;
}

/* --- ECharts canvas wrapper --- */
html[data-theme="dark"] [_echarts_instance_],
html[data-theme="dark"] .echarts-for-react {
    background: transparent !important;
}

/* --- json-viewer (jquery.json-viewer plugin) --- */
html[data-theme="dark"] .json-document {
    background-color: var(--cd-json-bg) !important;
    color: var(--cd-json-color) !important;
    border-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .json-document .json-string { color: #a8ff78 !important; }
html[data-theme="dark"] .json-document .json-key { color: #78b4ff !important; }
html[data-theme="dark"] .json-document .json-boolean { color: #ff9a78 !important; }
html[data-theme="dark"] .json-document .json-number { color: #ffd700 !important; }

/* --- Metronic card body background bleed (bg from style.bundle) --- */
html[data-theme="dark"] .card-body {
    background-color: transparent !important;
}

/* --- form-check-label / radio label --- */
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .radio label {
    color: var(--cd-text-primary) !important;
}

/* --- Radio custom span (Metronic) --- */
html[data-theme="dark"] .radio > span {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
}

/* --- DataTable header card (generated by bermuda.datatable.v1.js) --- */
html[data-theme="dark"] #kt_datatable_wrapper .dataTables_scrollHead,
html[data-theme="dark"] #kt_datatable_wrapper .dataTables_scrollBody {
    background-color: var(--cd-card-bg) !important;
}

/* --- symbol-light-success (topbar user avatar) --- */
html[data-theme="dark"] .symbol-light-success .symbol-label {
    background-color: rgba(27, 197, 189, 0.15) !important;
}

/* === Bootstrap-select: additional gap fixes === */

/* List anchor links (plugin renders <a> inside <li>, not just .dropdown-item) */
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a {
    color: var(--cd-text-primary) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li a:focus {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* Selected item in bootstrap-select list */
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected a,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected a:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.active > a,
html[data-theme="dark"] .bootstrap-select .dropdown-menu li.active > a:hover {
    background-color: #3699FF !important;
    color: #fff !important;
}

/* Inner scrollable UL container */
html[data-theme="dark"] .bootstrap-select .dropdown-menu .inner {
    background-color: var(--cd-dropdown-bg) !important;
}

/* .btn-light variant used as the select toggle button */
html[data-theme="dark"] .bootstrap-select > .btn-light,
html[data-theme="dark"] .bootstrap-select > .btn.btn-light {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .bootstrap-select > .btn-light:focus,
html[data-theme="dark"] .bootstrap-select > .btn-light:active,
html[data-theme="dark"] .bootstrap-select > .btn-light.active,
html[data-theme="dark"] .bootstrap-select.show > .btn-light {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 74, 98, 0.4) !important;
}

/* === Select2: additional gap fixes === */

/* Selected-but-not-highlighted option */
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* Results UL container background */
html[data-theme="dark"] .select2-results__options {
    background-color: var(--cd-dropdown-bg) !important;
}

/* Dropdown arrow/caret */
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--cd-text-secondary) transparent transparent transparent !important;
}
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--cd-text-secondary) transparent !important;
}

/* Clear (x) and remove choice buttons */
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--cd-text-primary) !important;
}

/* === Native select without .form-control (bare <select> elements) === */
html[data-theme="dark"] select:not(.form-control):not(.selectpicker) {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}

/* === Bootstrap-select: Metronic inner menu selectors === */
/* Metronic style.bundle targets .dropdown-menu.inner > li > a .text, not .dropdown-item */
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li > a .text {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li > a .text small {
    color: var(--cd-text-muted) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.selected > a,
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li:hover > a {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.divider {
    border-bottom-color: var(--cd-border-color) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.dropdown-header {
    color: var(--cd-text-muted) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.no-results {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* Bootstrap-select: check-mark visibility (hardcoded #7E8299 in style.bundle:73746-73783) */
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li > a .check-mark,
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.selected > a .check-mark,
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li:hover > a .check-mark {
    color: var(--cd-text-primary) !important;
}

/* Bootstrap-select: Select All / Deselect All action buttons */
html[data-theme="dark"] .bootstrap-select .bs-actionsbox .btn-group .btn {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .bootstrap-select .bs-actionsbox .btn-group .btn:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .bootstrap-select .bs-actionsbox {
    background-color: var(--cd-dropdown-bg) !important;
    border-bottom-color: var(--cd-border-color) !important;
}

/* === Select2: disabled state === */
html[data-theme="dark"] .select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--disabled .select2-selection--multiple {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    cursor: not-allowed;
}
html[data-theme="dark"] .select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--cd-text-muted) !important;
}

/* === Select2: class-based highlighted option === */
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted,
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* === Toastr notifications === */
html[data-theme="dark"] #toast-container > .toast {
    background-color: var(--cd-card-bg) !important;
    color: var(--cd-text-primary) !important;
    box-shadow: var(--cd-shadow-lg) !important;
    opacity: 1 !important;
}
html[data-theme="dark"] #toast-container > .toast-success {
    background-color: rgba(27, 197, 189, 0.15) !important;
    border-left: 4px solid #1bc5bd;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] #toast-container > .toast-error {
    background-color: rgba(246, 78, 96, 0.15) !important;
    border-left: 4px solid #F64E60;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] #toast-container > .toast-warning {
    background-color: rgba(255, 168, 0, 0.15) !important;
    border-left: 4px solid #FFA800;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] #toast-container > .toast-info {
    background-color: rgba(54, 153, 255, 0.15) !important;
    border-left: 4px solid #3699FF;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] #toast-container > .toast .toast-message,
html[data-theme="dark"] #toast-container > .toast .toast-title {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] #toast-container > .toast .toast-close-button {
    color: var(--cd-text-secondary) !important;
}

/* === SweetAlert2 — buttons, inputs, footer, icons === */
html[data-theme="dark"] .swal2-confirm {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .swal2-cancel {
    background-color: var(--cd-input-disabled-bg) !important;
    color: var(--cd-text-primary) !important;
    border: 1px solid var(--cd-input-border) !important;
}
html[data-theme="dark"] .swal2-deny {
    background-color: rgba(246, 78, 96, 0.85) !important;
    color: #fff !important;
}
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-select,
html[data-theme="dark"] .swal2-textarea {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .swal2-footer {
    background-color: var(--cd-modal-footer-bg) !important;
    border-top-color: var(--cd-border-color) !important;
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .swal2-close {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .swal2-close:hover {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .swal2-icon.swal2-question {
    border-color: rgba(54, 153, 255, 0.4) !important;
    color: #3699FF !important;
}
html[data-theme="dark"] .swal2-icon.swal2-warning {
    border-color: rgba(255, 168, 0, 0.4) !important;
    color: #FFA800 !important;
}
html[data-theme="dark"] .swal2-icon.swal2-error {
    border-color: rgba(246, 78, 96, 0.4) !important;
    color: #F64E60 !important;
}

/* === Accordion toggle arrow — collapsed state (Metronic hardcoded #3F4254) === */
html[data-theme="dark"] .accordion.accordion-toggle-arrow .card .card-header .card-title.collapsed {
    color: var(--cd-text-dark-50) !important;
}
html[data-theme="dark"] .accordion.accordion-toggle-arrow .card .card-header .card-title.collapsed:after {
    color: var(--cd-text-muted) !important;
}

/* === Native date/time inputs (color-scheme ensures browser chrome respects dark) === */
html[data-theme="dark"] input[type="date"].form-control,
html[data-theme="dark"] input[type="time"].form-control,
html[data-theme="dark"] input[type="datetime-local"].form-control {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
    color-scheme: dark;
}

/* === DataTables — label text color (length and filter wrappers) === */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
    color: var(--cd-text-secondary) !important;
}

/* === DataTables — generic scroll containers (history table and other non-kt_datatable tables) === */
html[data-theme="dark"] .dataTables_scrollHead,
html[data-theme="dark"] .dataTables_scrollBody {
    background-color: var(--cd-card-bg) !important;
}
html[data-theme="dark"] .dataTables_scrollHead table thead th {
    background-color: var(--cd-thead-bg) !important;
    color: var(--cd-thead-color) !important;
    border-color: var(--cd-table-border) !important;
}

/* === DataTables — Metronic pagination (style.bundle lines 74198-74258) ===
   Metronic uses deeply nested selectors: .dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link
   Our overrides must match or exceed that specificity. */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link {
    color: var(--cd-text-secondary) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link > i {
    color: var(--cd-text-muted) !important;
}
/* First / Previous / Next / Last nav buttons */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link {
    background-color: var(--cd-input-disabled-bg) !important;
    color: var(--cd-text-secondary) !important;
}
/* Hover on nav buttons */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link:hover,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link:hover,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link:hover,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link:hover {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.previous > .page-link:hover > i,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.next > .page-link:hover > i,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.last > .page-link:hover > i,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.first > .page-link:hover > i {
    color: #fff !important;
}
/* Active page */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link > i {
    color: #fff !important;
}
/* Hover on page number */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item:hover:not(.disabled) > .page-link {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item:hover:not(.disabled) > .page-link > i {
    color: #fff !important;
}
/* Disabled page link */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled > .page-link {
    color: var(--cd-text-muted) !important;
    background-color: transparent !important;
    opacity: 0.5;
}
/* DataTables info text ("Showing 1 to 8 of 8 entries") */
html[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--cd-text-secondary) !important;
}
/* thead-light used by history table */
html[data-theme="dark"] .thead-light th {
    background-color: var(--cd-thead-bg) !important;
    color: var(--cd-thead-color) !important;
    border-color: var(--cd-table-border) !important;
}

/* === Daterangepicker — gaps: prev/next nav, off-month dates, ranges panel, apply/cancel buttons === */
html[data-theme="dark"] .daterangepicker .prev,
html[data-theme="dark"] .daterangepicker .next {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .daterangepicker .prev:hover,
html[data-theme="dark"] .daterangepicker .next:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
    color: var(--cd-text-muted) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .daterangepicker td.disabled,
html[data-theme="dark"] .daterangepicker option.disabled {
    color: var(--cd-text-muted) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li.active {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .daterangepicker .drp-selected {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .daterangepicker .applyBtn {
    background-color: #3699FF !important;
    border-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .daterangepicker .cancelBtn {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-text-primary) !important;
}

/* ========================================================================
   KTDatatable (.datatable.datatable-default) — full dark mode coverage
   Used across 70+ pages via bermuda.datatable.v1.js
   ======================================================================== */

/* --- Table wrapper --- */
html[data-theme="dark"] .datatable.datatable-default {
    color: var(--cd-text-primary) !important;
    background-color: var(--cd-card-bg) !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-table {
    background-color: var(--cd-card-bg) !important;
}

/* --- Head / Body / Foot sections --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-head,
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body,
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-foot {
    background-color: var(--cd-card-bg) !important;
}

/* --- Cell span text (head + body + foot) --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .datatable-cell > span,
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-foot .datatable-row > .datatable-cell > span {
    color: var(--cd-thead-color) !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell > span {
    color: var(--cd-text-primary) !important;
}

/* --- datatable-head-custom (uppercase muted column headers) --- */
html[data-theme="dark"] .datatable.datatable-default.datatable-head-custom > .datatable-table > .datatable-head .datatable-row > .datatable-cell > span,
html[data-theme="dark"] .datatable.datatable-default.datatable-head-custom > .datatable-table > .datatable-foot .datatable-row > .datatable-cell > span {
    color: var(--cd-text-muted) !important;
}
html[data-theme="dark"] .datatable.datatable-default.datatable-head-custom > .datatable-table > .datatable-head .datatable-row > .datatable-cell.datatable-cell-sorted > span {
    color: #3699FF !important;
}

/* --- datatable-head-bg variant (hardcoded #F3F6F9 bg) --- */
html[data-theme="dark"] .datatable.datatable-default.datatable-head-bg > .datatable-table > .datatable-head .datatable-row > .datatable-cell {
    background-color: var(--cd-thead-bg) !important;
}
html[data-theme="dark"] .datatable.datatable-default.datatable-foot-bg > .datatable-table > .datatable-foot .datatable-row > .datatable-cell {
    background-color: var(--cd-thead-bg) !important;
}

/* --- Body row: even (transparent — inherits card bg), active (hardcoded #F3F6F9), hover --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row.datatable-row-active > .datatable-cell {
    background-color: var(--cd-table-hover-bg) !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row.datatable-row-hover:not(.datatable-row-active) > .datatable-cell {
    background-color: var(--cd-table-hover-bg) !important;
}
html[data-theme="dark"] .datatable.datatable-default.datatable-subtable > .datatable-table > .datatable-body .datatable-row.datatable-row-subtable-expanded > .datatable-cell {
    background-color: var(--cd-table-hover-bg) !important;
}

/* --- Bordered variant (hardcoded #EBEDF3 row borders) --- */
html[data-theme="dark"] .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-head .datatable-row,
html[data-theme="dark"] .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-body .datatable-row,
html[data-theme="dark"] .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-foot .datatable-row {
    border-bottom-color: var(--cd-table-border) !important;
}

/* --- Detail row (expanded row panel) --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row-detail .datatable-detail table {
    box-shadow: 0px 10px 15px 1px rgba(0, 0, 0, 0.3) !important;
    background-color: var(--cd-card-bg) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row-detail .datatable-detail .datatable-row > .datatable-cell > span {
    color: var(--cd-text-primary) !important;
}

/* --- Bordered detail table border (hardcoded #EBEDF3) --- */
html[data-theme="dark"] .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-body .datatable-row-detail .datatable-detail table {
    border-left-color: var(--cd-table-border) !important;
    border-right-color: var(--cd-table-border) !important;
}

/* --- Sort icon color (hardcoded #B5B5C3) --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .datatable-cell.datatable-cell-sort i,
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell.datatable-cell-sort i,
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-foot .datatable-row > .datatable-cell.datatable-cell-sort i {
    color: var(--cd-text-muted) !important;
}

/* --- Pager: nav link text and icon --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link > i {
    color: var(--cd-text-muted) !important;
}

/* --- Pager: first/prev/next/last nav buttons (hardcoded #ecf1f6 bg) --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link.datatable-pager-link-first,
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link.datatable-pager-link-prev,
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link.datatable-pager-link-next,
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link.datatable-pager-link-last {
    background-color: var(--cd-input-disabled-bg) !important;
}

/* --- Pager: active page button --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link.datatable-pager-link-active {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link.datatable-pager-link-active > i {
    color: #fff !important;
}

/* --- Pager: hover state --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link:hover:not(.datatable-pager-link-disabled) {
    background-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-link:hover:not(.datatable-pager-link-disabled) > i {
    color: #fff !important;
}

/* --- Pager: page number input (hardcoded #ecf1f6 bg) --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-input {
    background-color: var(--cd-input-disabled-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-nav > li > .datatable-pager-input:focus {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}

/* --- Pager: page-size dropdown toggle (hardcoded #ecf1f6 bg) --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-info .datatable-pager-size .btn.dropdown-toggle {
    background-color: var(--cd-input-disabled-bg) !important;
    color: var(--cd-text-secondary) !important;
    border-color: var(--cd-input-border) !important;
}

/* --- Pager: info text (e.g. "Showing 1–10 of 50") --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-pager > .datatable-pager-info {
    color: var(--cd-text-secondary) !important;
}

/* --- Scrollbar thumb within KTDatatable scroll container --- */
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body::-webkit-scrollbar-thumb {
    background: var(--cd-border-color) !important;
}
html[data-theme="dark"] .datatable.datatable-default > .datatable-table > .datatable-body::-webkit-scrollbar-track {
    background: var(--cd-body-bg) !important;
}

/* ========================================================================
   DataTables FixedColumns (DTFC) — hardcoded white backgrounds in datatables.bundle.css
   ======================================================================== */
html[data-theme="dark"] table.DTFC_Cloned tr,
html[data-theme="dark"] div.DTFC_LeftHeadWrapper table,
html[data-theme="dark"] div.DTFC_RightHeadWrapper table,
html[data-theme="dark"] div.DTFC_LeftBodyWrapper table,
html[data-theme="dark"] div.DTFC_RightBodyWrapper table,
html[data-theme="dark"] div.DTFC_LeftFootWrapper table,
html[data-theme="dark"] div.DTFC_RightFootWrapper table,
html[data-theme="dark"] div.DTFC_Blocker,
html[data-theme="dark"] table.dataTable.table-striped.DTFC_Cloned tbody {
    background-color: var(--cd-card-bg) !important;
}
html[data-theme="dark"] div.DTFC_LeftHeadWrapper table,
html[data-theme="dark"] div.DTFC_RightHeadWrapper table {
    border-bottom-color: var(--cd-table-border) !important;
}
html[data-theme="dark"] div.DTFC_LeftFootWrapper table,
html[data-theme="dark"] div.DTFC_RightFootWrapper table {
    border-top-color: var(--cd-table-border) !important;
}

/* DataTables FixedHeader — hardcoded white */
html[data-theme="dark"] table.dataTable.fixedHeader-floating,
html[data-theme="dark"] table.dataTable.fixedHeader-locked {
    background-color: var(--cd-card-bg) !important;
}

/* DataTables Scroller (DTS) — hardcoded white/light stripe */
html[data-theme="dark"] div.DTS div.dataTables_scrollBody table,
html[data-theme="dark"] div.DTFC_Cloned tr,
html[data-theme="dark"] table.DTCR_clonedTable.dataTable {
    background-color: var(--cd-card-bg) !important;
}
html[data-theme="dark"] div.dts div.dataTables_scrollBody {
    background: var(--cd-card-bg) !important;
}

/* DataTables button collection popup (hardcoded white in bundle) */
html[data-theme="dark"] div.dt-button-collection div.dt-button-collection-title,
html[data-theme="dark"] div.dt-button-info {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] div.dt-button-info h2 {
    background-color: var(--cd-modal-header-bg) !important;
    border-bottom-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}

/* ========================================================================
   Bootstrap-select: bs-placeholder color override
   (plugins.bundle.css sets color:#999 for placeholder state)
   ======================================================================== */
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    color: var(--cd-input-placeholder) !important;
}

/* ========================================================================
   Bootstrap-select: filter-option text (the displayed selection label)
   ======================================================================== */
html[data-theme="dark"] .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    color: var(--cd-input-color) !important;
}

/* ========================================================================
   Bootstrap-select: show-tick checkmark column
   ======================================================================== */
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li > a span.check-mark {
    color: var(--cd-text-muted) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.selected > a span.check-mark {
    color: var(--cd-text-primary) !important;
}

/* ========================================================================
   Select2: placeholder color
   ======================================================================== */
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--cd-input-placeholder) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--cd-input-placeholder) !important;
}

/* ========================================================================
   Native select elements used in DataTables wrappers (length/filter)
   — These are plain <select> without .form-control
   ======================================================================== */
html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] .dataTables_filter input {
    background-color: var(--cd-input-bg) !important;
    border-color: var(--cd-input-border) !important;
    color: var(--cd-input-color) !important;
}

/* ========================================================================
   Metronic .example and .example-compact — card wrapper on report pages
   — Picks up hardcoded background from style.bundle at higher specificity
   ======================================================================== */
html[data-theme="dark"] .example.example-compact {
    border-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .form-bordered .form-group {
    border-bottom-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .form-bordered {
    border-color: var(--cd-border-color) !important;
}

/* ========================================================================
   Additional gap fixes — Metronic utility classes & components
   ======================================================================== */

/* --- .bg-white utility (Metronic hardcodes #ffffff) --- */
html[data-theme="dark"] .bg-white {
    background-color: var(--cd-card-bg) !important;
}

/* --- .bg-light utility — already partially covered, ensure full coverage --- */
html[data-theme="dark"] .bg-light {
    background-color: var(--cd-bg-light) !important;
}

/* --- Symbol / Avatar containers with bg-light --- */
html[data-theme="dark"] .symbol.bg-light,
html[data-theme="dark"] .symbol.symbol-40.bg-light,
html[data-theme="dark"] .symbol-light-success > .symbol-label,
html[data-theme="dark"] .symbol-light-primary > .symbol-label,
html[data-theme="dark"] .symbol-light-info > .symbol-label,
html[data-theme="dark"] .symbol-light-warning > .symbol-label,
html[data-theme="dark"] .symbol-light-danger > .symbol-label {
    background-color: var(--cd-symbol-light-bg) !important;
}

/* --- .btn-bg-light (Metronic action buttons) --- */
html[data-theme="dark"] .btn-bg-light {
    background-color: var(--cd-bg-light) !important;
    color: var(--cd-text-dark-75) !important;
}
html[data-theme="dark"] .btn-bg-light:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* --- Bootstrap-select toggle: match Metronic's compound selector exactly --- */
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-light,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-secondary {
    background: var(--cd-input-bg) !important;
    color: var(--cd-input-color) !important;
    border-color: var(--cd-input-border) !important;
}
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-light .filter-option,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-secondary .filter-option {
    color: var(--cd-input-color) !important;
}
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-light .filter-option .bs-icon,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-secondary .filter-option .bs-icon {
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder {
    color: var(--cd-input-placeholder) !important;
}
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-light.disabled,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-light:disabled,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-secondary.disabled,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-secondary:disabled {
    background: var(--cd-input-disabled-bg) !important;
}

/* --- Bootstrap-select: selected/hover text + icon colors (match Metronic compound) --- */
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.selected > a .text,
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li:hover > a .text {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li.selected > a .bs-icon,
html[data-theme="dark"] .bootstrap-select .dropdown-menu.inner > li:hover > a .bs-icon {
    color: var(--cd-text-secondary) !important;
}

/* --- Metronic .card-body bg (sometimes set via inline style in JS-rendered cards) --- */
html[data-theme="dark"] .card-body {
    background-color: var(--cd-card-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* --- Metronic .header-menu-wrapper text color --- */
html[data-theme="dark"] .header-menu .menu-nav > .menu-item > .menu-link .menu-text {
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .header-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    color: var(--cd-text-secondary) !important;
}

/* --- Subheader area --- */
html[data-theme="dark"] .subheader {
    background-color: var(--cd-content-bg) !important;
}
html[data-theme="dark"] .subheader .subheader-title {
    color: var(--cd-text-dark) !important;
}
html[data-theme="dark"] .breadcrumb .breadcrumb-item {
    color: var(--cd-breadcrumb-color) !important;
}
html[data-theme="dark"] .breadcrumb .breadcrumb-item.active {
    color: var(--cd-breadcrumb-active-color) !important;
}

/* --- Scrollbar — global dark scrollbar for webkit --- */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--cd-body-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--cd-border-color);
    border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--cd-text-muted);
}

/* --- Tooltip (Bootstrap) dark mode --- */
html[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--cd-card-bg) !important;
    color: var(--cd-text-primary) !important;
    border: 1px solid var(--cd-border-color);
}
html[data-theme="dark"] .tooltip .arrow::before {
    border-top-color: var(--cd-border-color) !important;
}

/* --- Popover dark mode --- */
html[data-theme="dark"] .popover {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
}
html[data-theme="dark"] .popover-header {
    background-color: var(--cd-thead-bg) !important;
    border-bottom-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .popover-body {
    color: var(--cd-text-primary) !important;
}

/* --- Nav tabs (used across report pages) --- */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--cd-nav-tabs-border) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--cd-nav-tabs-link-color) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--cd-nav-tabs-link-active-color) !important;
    border-color: var(--cd-nav-tabs-link-active-border) var(--cd-nav-tabs-link-active-border) transparent !important;
    background-color: var(--cd-card-bg) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
    border-color: var(--cd-border-color) var(--cd-border-color) var(--cd-nav-tabs-border) !important;
}

/* --- Tab content panels --- */
html[data-theme="dark"] .tab-content {
    color: var(--cd-text-primary) !important;
}

/* --- Pagination (standard Bootstrap) --- */
html[data-theme="dark"] .page-item .page-link {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-secondary) !important;
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: #3699FF !important;
    border-color: #3699FF !important;
    color: #fff !important;
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--cd-input-disabled-bg) !important;
    color: var(--cd-text-muted) !important;
}

/* --- List group items --- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--cd-card-bg) !important;
    border-color: var(--cd-border-color) !important;
    color: var(--cd-text-primary) !important;
}
html[data-theme="dark"] .list-group-item.active {
    background-color: #3699FF !important;
    border-color: #3699FF !important;
    color: #fff !important;
}

/* --- Badge colors for dark mode --- */
html[data-theme="dark"] .badge-light {
    background-color: var(--cd-badge-light-bg) !important;
    color: var(--cd-badge-light-color) !important;
}
html[data-theme="dark"] .badge-secondary {
    background-color: var(--cd-input-disabled-bg) !important;
    color: var(--cd-text-primary) !important;
}

/* --- Progress bars --- */
html[data-theme="dark"] .progress {
    background-color: var(--cd-progress-bg) !important;
}

/* --- Metronic bg-light-* variant overrides for dark mode --- */
html[data-theme="dark"] .bg-light-primary {
    background-color: var(--cd-bg-light-primary) !important;
}
html[data-theme="dark"] .bg-light-success {
    background-color: var(--cd-bg-light-success) !important;
}
html[data-theme="dark"] .bg-light-info {
    background-color: var(--cd-bg-light-info) !important;
}
html[data-theme="dark"] .bg-light-warning {
    background-color: var(--cd-bg-light-warning) !important;
}
html[data-theme="dark"] .bg-light-danger {
    background-color: var(--cd-bg-light-danger) !important;
}
html[data-theme="dark"] .bg-light-dark {
    background-color: var(--cd-bg-light-dark) !important;
}

/* --- Offcanvas / Quick panels --- */
html[data-theme="dark"] .offcanvas {
    background-color: var(--cd-offcanvas-bg) !important;
}
html[data-theme="dark"] .offcanvas .offcanvas-header {
    border-bottom-color: var(--cd-offcanvas-header-border) !important;
}

/* --- Checkbox/Switch toggle --- */
html[data-theme="dark"] .custom-control-label::before {
    background-color: var(--cd-switch-bg) !important;
    border-color: var(--cd-switch-bg) !important;
}
html[data-theme="dark"] .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cd-switch-checked-bg) !important;
    border-color: var(--cd-switch-checked-bg) !important;
}

/* --- Navi items (Metronic dropdown navigation) --- */
html[data-theme="dark"] .navi .navi-item .navi-link:hover {
    background-color: var(--cd-navi-link-bg-hover) !important;
}
html[data-theme="dark"] .navi .navi-item .navi-link .navi-text {
    color: var(--cd-navi-text-color) !important;
}
html[data-theme="dark"] .navi .navi-item .navi-link .navi-icon i {
    color: var(--cd-text-muted) !important;
}

/* --- Metronic quick-search results --- */
html[data-theme="dark"] .quick-search .quick-search-result .quick-search-item {
    background-color: var(--cd-card-bg) !important;
}
html[data-theme="dark"] .quick-search .quick-search-result .quick-search-item:hover {
    background-color: var(--cd-dropdown-hover-bg) !important;
}

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