:root {
    --cdm-bg: #111827;
    --cdm-bg-soft: #172033;
    --cdm-surface: #1f2937;
    --cdm-surface-2: #263244;
    --cdm-border: #374151;
    --cdm-text: #e5e7eb;
    --cdm-muted: #9ca3af;
    --cdm-accent: #f59e0b;
    --cdm-link: #93c5fd;
}

html.crm-dark-mode {
    color-scheme: dark;
    background: var(--cdm-bg);
}

html.crm-dark-mode body,
html.crm-dark-mode #wrapper,
html.crm-dark-mode .content,
html.crm-dark-mode .main-content,
html.crm-dark-mode .customers-area,
html.crm-dark-mode .customer-profile-group-heading,
html.crm-dark-mode .tw-bg-white {
    background-color: var(--cdm-bg) !important;
    color: var(--cdm-text) !important;
}

html.crm-dark-mode #header,
html.crm-dark-mode header,
html.crm-dark-mode .navbar,
html.crm-dark-mode .navbar-default,
html.crm-dark-mode .navbar-fixed-top,
html.crm-dark-mode .top-navbar,
html.crm-dark-mode .admin-navbar,
html.crm-dark-mode .customers-nav,
html.crm-dark-mode #side-menu,
html.crm-dark-mode .sidebar,
html.crm-dark-mode .sidebar-nav,
html.crm-dark-mode .admin-sidebar {
    background-color: #171923 !important;
    border-color: var(--cdm-border) !important;
}

html.crm-dark-mode #side-menu li a,
html.crm-dark-mode .sidebar a,
html.crm-dark-mode .navbar a,
html.crm-dark-mode .navbar .navbar-nav > li > a {
    color: #d1d5db !important;
}

html.crm-dark-mode #side-menu li.active > a,
html.crm-dark-mode #side-menu li > a:hover,
html.crm-dark-mode .sidebar a:hover,
html.crm-dark-mode .navbar .navbar-nav > li > a:hover,
html.crm-dark-mode .navbar .navbar-nav > li.open > a {
    background-color: var(--cdm-surface) !important;
    color: #fff !important;
}

html.crm-dark-mode .panel,
html.crm-dark-mode .panel_s,
html.crm-dark-mode .panel-body,
html.crm-dark-mode .panel-heading,
html.crm-dark-mode .card,
html.crm-dark-mode .card-body,
html.crm-dark-mode .well,
html.crm-dark-mode .jumbotron,
html.crm-dark-mode .list-group-item,
html.crm-dark-mode .modal-content,
html.crm-dark-mode .dropdown-menu,
html.crm-dark-mode .popover,
html.crm-dark-mode .tooltip-inner,
html.crm-dark-mode .tw-bg-neutral-50,
html.crm-dark-mode .tw-bg-neutral-100 {
    background-color: var(--cdm-surface) !important;
    color: var(--cdm-text) !important;
    border-color: var(--cdm-border) !important;
}

html.crm-dark-mode .panel-footer,
html.crm-dark-mode .modal-header,
html.crm-dark-mode .modal-footer,
html.crm-dark-mode .card-header,
html.crm-dark-mode .tw-border-neutral-200 {
    background-color: var(--cdm-bg-soft) !important;
    border-color: var(--cdm-border) !important;
    color: var(--cdm-text) !important;
}

html.crm-dark-mode h1,
html.crm-dark-mode h2,
html.crm-dark-mode h3,
html.crm-dark-mode h4,
html.crm-dark-mode h5,
html.crm-dark-mode h6,
html.crm-dark-mode label,
html.crm-dark-mode .control-label,
html.crm-dark-mode .text-dark,
html.crm-dark-mode .tw-text-neutral-900,
html.crm-dark-mode .tw-text-gray-900 {
    color: var(--cdm-text) !important;
}

html.crm-dark-mode p,
html.crm-dark-mode span,
html.crm-dark-mode td,
html.crm-dark-mode th,
html.crm-dark-mode .text-muted,
html.crm-dark-mode .tw-text-neutral-500,
html.crm-dark-mode .tw-text-neutral-600 {
    border-color: var(--cdm-border);
}

html.crm-dark-mode .text-muted,
html.crm-dark-mode .help-block,
html.crm-dark-mode small,
html.crm-dark-mode .tw-text-neutral-500,
html.crm-dark-mode .tw-text-neutral-600 {
    color: var(--cdm-muted) !important;
}

html.crm-dark-mode a:not(.btn) {
    color: var(--cdm-link);
}

html.crm-dark-mode hr,
html.crm-dark-mode .hr-panel-heading,
html.crm-dark-mode .border,
html.crm-dark-mode [class*="tw-border-"] {
    border-color: var(--cdm-border) !important;
}

html.crm-dark-mode .form-control,
html.crm-dark-mode input:not([type="checkbox"]):not([type="radio"]),
html.crm-dark-mode textarea,
html.crm-dark-mode select,
html.crm-dark-mode .bootstrap-select > .dropdown-toggle,
html.crm-dark-mode .select2-container .select2-selection,
html.crm-dark-mode .select2-dropdown,
html.crm-dark-mode .input-group-addon,
html.crm-dark-mode .input-group-btn .btn-default {
    background-color: var(--cdm-bg-soft) !important;
    color: var(--cdm-text) !important;
    border-color: #4b5563 !important;
}

html.crm-dark-mode .form-control:focus,
html.crm-dark-mode input:focus,
html.crm-dark-mode textarea:focus,
html.crm-dark-mode select:focus,
html.crm-dark-mode .bootstrap-select.open > .dropdown-toggle {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, .25) !important;
}

html.crm-dark-mode input::placeholder,
html.crm-dark-mode textarea::placeholder {
    color: #6b7280 !important;
}

html.crm-dark-mode .dropdown-menu > li > a,
html.crm-dark-mode .bootstrap-select .dropdown-menu li a,
html.crm-dark-mode .select2-results__option {
    color: var(--cdm-text) !important;
}

html.crm-dark-mode .dropdown-menu > li > a:hover,
html.crm-dark-mode .dropdown-menu > li.active > a,
html.crm-dark-mode .bootstrap-select .dropdown-menu li a:hover,
html.crm-dark-mode .select2-results__option--highlighted {
    background-color: var(--cdm-surface-2) !important;
    color: #fff !important;
}

html.crm-dark-mode table,
html.crm-dark-mode .table,
html.crm-dark-mode .table > thead > tr > th,
html.crm-dark-mode .table > tbody > tr > td,
html.crm-dark-mode .table > tfoot > tr > td,
html.crm-dark-mode table.dataTable,
html.crm-dark-mode .dataTables_wrapper {
    background-color: var(--cdm-surface) !important;
    color: var(--cdm-text) !important;
    border-color: var(--cdm-border) !important;
}

html.crm-dark-mode .table-striped > tbody > tr:nth-of-type(odd),
html.crm-dark-mode table.dataTable.stripe tbody tr.odd,
html.crm-dark-mode table.dataTable.display tbody tr.odd {
    background-color: #1b2535 !important;
}

html.crm-dark-mode .table-hover > tbody > tr:hover,
html.crm-dark-mode table.dataTable tbody tr:hover {
    background-color: var(--cdm-surface-2) !important;
}

html.crm-dark-mode .pagination > li > a,
html.crm-dark-mode .pagination > li > span,
html.crm-dark-mode .dataTables_paginate .paginate_button {
    background-color: var(--cdm-surface) !important;
    color: var(--cdm-text) !important;
    border-color: var(--cdm-border) !important;
}

html.crm-dark-mode .pagination > .active > a,
html.crm-dark-mode .pagination > .active > span,
html.crm-dark-mode .dataTables_paginate .paginate_button.current {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

html.crm-dark-mode .nav-tabs,
html.crm-dark-mode .nav-tabs > li > a,
html.crm-dark-mode .nav-pills > li > a {
    border-color: var(--cdm-border) !important;
    color: var(--cdm-muted) !important;
}

html.crm-dark-mode .nav-tabs > li.active > a,
html.crm-dark-mode .nav-tabs > li.active > a:hover,
html.crm-dark-mode .nav-tabs > li.active > a:focus,
html.crm-dark-mode .nav-pills > li.active > a {
    background-color: var(--cdm-surface) !important;
    color: #fff !important;
    border-color: var(--cdm-border) !important;
}

html.crm-dark-mode .alert-info,
html.crm-dark-mode .alert-warning,
html.crm-dark-mode .alert-success,
html.crm-dark-mode .alert-danger {
    color: var(--cdm-text) !important;
    border-color: var(--cdm-border) !important;
    background-color: var(--cdm-surface-2) !important;
}

html.crm-dark-mode .ticket-reply,
html.crm-dark-mode .ticketstaffnotes,
html.crm-dark-mode .ticket-message,
html.crm-dark-mode .feed-item,
html.crm-dark-mode .activity-feed,
html.crm-dark-mode .task-modal-single,
html.crm-dark-mode .invoice-status,
html.crm-dark-mode .contract-status {
    background-color: var(--cdm-surface) !important;
    color: var(--cdm-text) !important;
    border-color: var(--cdm-border) !important;
}

html.crm-dark-mode .tox .tox-toolbar,
html.crm-dark-mode .tox .tox-toolbar__primary,
html.crm-dark-mode .tox .tox-menubar,
html.crm-dark-mode .tox .tox-statusbar,
html.crm-dark-mode .tox .tox-edit-area__iframe,
html.crm-dark-mode .mce-panel,
html.crm-dark-mode .mce-container-body {
    background-color: var(--cdm-bg-soft) !important;
    border-color: var(--cdm-border) !important;
    color: var(--cdm-text) !important;
}

html.crm-dark-mode .fc,
html.crm-dark-mode .fc-view,
html.crm-dark-mode .fc-day,
html.crm-dark-mode .fc-daygrid-day,
html.crm-dark-mode .fc-scrollgrid,
html.crm-dark-mode .fc-theme-standard td,
html.crm-dark-mode .fc-theme-standard th {
    background-color: var(--cdm-surface) !important;
    color: var(--cdm-text) !important;
    border-color: var(--cdm-border) !important;
}

.crm-dark-mode-toggle-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 10px !important;
    min-height: 46px;
}

#side-menu > .crm-dark-mode-toggle-item,
.sidebar .crm-dark-mode-toggle-item {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 8px;
    padding: 12px !important;
}

.crm-dark-mode-toggle {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    direction: ltr;
}

.crm-dark-mode-toggle:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 3px;
}

.crm-dark-mode-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.crm-dark-mode-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crm-dark-mode-switch {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #f59e0b;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    transition: background .2s ease;
}

.crm-dark-mode-knob {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}

.crm-dark-mode-toggle.is-dark .crm-dark-mode-switch {
    background: #4b5563;
}

.crm-dark-mode-toggle.is-dark .crm-dark-mode-knob {
    transform: translateX(0);
}

.crm-dark-mode-toggle.is-dark .crm-dark-mode-icon-moon,
.crm-dark-mode-toggle:not(.is-dark) .crm-dark-mode-icon-sun {
    color: #f59e0b;
}

.crm-dark-mode-toggle-floating {
    position: fixed;
    z-index: 10050;
    bottom: 18px;
    right: 18px;
    padding: 7px 9px;
    border-radius: 999px;
    background: #1f2937;
    border: 1px solid #374151;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .25);
}

[dir="rtl"] .crm-dark-mode-toggle-floating {
    right: auto;
    left: 18px;
}

@media (max-width: 767px) {
    .crm-dark-mode-toggle-item {
        min-height: 40px;
        padding: 5px 8px !important;
    }
}

@media print {
    html.crm-dark-mode,
    html.crm-dark-mode body,
    html.crm-dark-mode #wrapper,
    html.crm-dark-mode .content,
    html.crm-dark-mode .panel,
    html.crm-dark-mode .panel-body,
    html.crm-dark-mode table,
    html.crm-dark-mode .table {
        background: #fff !important;
        color: #000 !important;
    }

    .crm-dark-mode-toggle-item,
    .crm-dark-mode-toggle-floating {
        display: none !important;
    }
}