:root,
[data-bs-theme="light"] {
    --peak-page-bg: var(--bs-secondary-bg);
    --peak-surface-bg: var(--bs-body-bg);
    --peak-surface-muted-bg: var(--bs-tertiary-bg);
    --peak-surface-raised-bg: #ffffff;
    --peak-header-bg: var(--peak-company-color, var(--bs-primary));
    --peak-footer-bg: #ffffff;
    --peak-input-bg: #ffffff;
    --peak-input-readonly-bg: var(--bs-secondary-bg);
    --peak-floating-label-bg: var(--bs-body-bg);
    --peak-floating-label-color: rgba(var(--bs-body-color-rgb), .65);
    --peak-file-button-bg: var(--bs-tertiary-bg);
    --peak-file-button-color: var(--peak-text-color);
    --peak-file-button-border-color: var(--peak-border-color);
    --peak-file-button-hover-bg: var(--bs-secondary-bg);
    --peak-border-color: var(--bs-border-color);
    --peak-border-muted-color: #dde4ea;
    --peak-text-color: var(--bs-body-color);
    --peak-text-muted-color: var(--bs-secondary-color);
    --peak-accent-text-color: var(--bs-primary);
    --peak-accent-text-hover-color: var(--bs-link-hover-color);
    --peak-link-color: var(--bs-primary);
    --peak-link-hover-color: var(--bs-link-hover-color);
    --peak-danger-text-color: #c62828;
    --peak-warning-label-text-color: #212529;
    --peak-info-label-text-color: #212529;
    --peak-sidebar-bg: #fafbfc;
    --peak-sidebar-bg-end: var(--peak-sidebar-bg);
    --peak-sidebar-text-color: #212529;
    --peak-sidebar-active-bg: color-mix(in srgb, var(--bs-primary) 10%, var(--peak-sidebar-bg));
    --peak-switch-bg: #f1f4f8;
    --peak-switch-thumb-bg: #fbfbfb;
    --peak-switch-border-color: transparent;
    --peak-segmented-bg: #f1f4f8;
    --peak-segmented-active-bg: #ffffff;
    --peak-segmented-active-color: var(--bs-primary);
    --peak-select2-choice-bg: var(--bs-primary-soft);
    --peak-select2-choice-color: var(--peak-text-color);
    --peak-select2-choice-border-color: var(--bs-primary-soft);
    --peak-databar-positive-start: #c8e6c9;
    --peak-databar-positive-end: #a5d6a7;
    --peak-databar-negative-start: #ef9a9a;
    --peak-databar-negative-end: #ffcdd2;
    --peak-dropdown-hover-bg: var(--bs-tertiary-bg);
    --peak-pagination-color: #869ab8;
    --peak-pagination-bg: var(--bs-body-bg);
    --peak-pagination-border-color: #eef2f5;
    --peak-pagination-hover-color: var(--peak-link-hover-color);
    --peak-pagination-hover-bg: var(--peak-surface-muted-bg);
    --peak-pagination-focus-color: var(--bs-link-hover);
    --peak-pagination-focus-bg: var(--bs-secondary-bg);
    --peak-pagination-active-bg: #ddecec;
    --peak-pagination-active-color: var(--bs-primary);
    --peak-pagination-active-border-color: #f1f0fd;
    --peak-pagination-disabled-color: #c6d3e6;
    --peak-pagination-disabled-bg: var(--bs-secondary-bg);
    --peak-tooltip-bg: #eeeeee;
    --peak-tooltip-color: #000000;
    --peak-tooltip-border-color: #9e9e9e;
    --peak-backdrop-bg: #000000;
    --peak-backdrop-opacity: .45;
    --peak-backdrop-filter: blur(3px);
    --peak-customer-logo-frame-bg: transparent;
    --peak-customer-logo-frame-border-color: transparent;
    --peak-customer-logo-frame-shadow: none;
    --dt-row-selected: 187, 222, 251;
    --dt-row-selected-text: var(--peak-text-color);
    --dt-row-selected-link: var(--peak-text-color);
    --peak-input-danger-bg: #feeef0;
}


[data-bs-theme="dark"] {
    --peak-page-bg: #111111;
    --peak-surface-bg: #1b1b1b;
    --peak-surface-muted-bg: #262626;
    --peak-surface-raised-bg: #2f2f2f;
    --peak-header-bg: var(--peak-company-color, var(--bs-primary));
    --peak-footer-bg: #171717;
    --peak-input-bg: #181818;
    --peak-input-readonly-bg: #282828;
    --peak-floating-label-bg: #181818;
    --peak-floating-label-color: #c1c1c1;
    --peak-file-button-bg: #2a2a2a;
    --peak-file-button-color: var(--peak-text-color);
    --peak-file-button-border-color: #3a3a3a;
    --peak-file-button-hover-bg: #333333;
    --peak-border-color: #3a3a3a;
    --peak-border-muted-color: #4a4a4a;
    --peak-text-color: var(--bs-body-color);
    --peak-text-muted-color: #c1c1c1;
    --peak-accent-text-color: color-mix(in srgb, var(--bs-primary) 42%, #ffffff);
    --peak-accent-text-hover-color: color-mix(in srgb, var(--bs-primary) 28%, #ffffff);
    --peak-link-color: var(--peak-accent-text-color);
    --peak-link-hover-color: var(--peak-accent-text-hover-color);
    --peak-danger-text-color: #ff8a8a;
    --peak-warning-label-text-color: #212529;
    --peak-info-label-text-color: #212529;
    --peak-sidebar-bg: #202225;
    --peak-sidebar-bg-end: var(--peak-sidebar-bg);
    --peak-sidebar-text-color: var(--bs-body-color);
    --peak-sidebar-active-bg: color-mix(in srgb, var(--bs-primary) 20%, var(--peak-sidebar-bg));
    --peak-switch-bg: #2c2c2c;
    --peak-switch-thumb-bg: #d8d8d8;
    --peak-switch-border-color: #484848;
    --peak-segmented-bg: #262626;
    --peak-segmented-active-bg: #3a3a3a;
    --peak-segmented-active-color: #ffffff;
    --peak-select2-choice-bg: #333333;
    --peak-select2-choice-color: var(--peak-text-color);
    --peak-select2-choice-border-color: #4f4f4f;
    --peak-databar-positive-start: rgba(102, 187, 106, .18);
    --peak-databar-positive-end: rgba(129, 199, 132, .30);
    --peak-databar-negative-start: rgba(239, 83, 80, .24);
    --peak-databar-negative-end: rgba(239, 83, 80, .12);
    --peak-dropdown-hover-bg: #2a2a2a;
    --peak-pagination-color: #d6d6d6;
    --peak-pagination-bg: #242424;
    --peak-pagination-border-color: #3a3a3a;
    --peak-pagination-hover-color: #ffffff;
    --peak-pagination-hover-bg: #303030;
    --peak-pagination-focus-color: #ffffff;
    --peak-pagination-focus-bg: #303030;
    --peak-pagination-active-bg: #2a2a2a;
    --peak-pagination-active-color: #ffffff;
    --peak-pagination-active-border-color: #555555;
    --peak-pagination-disabled-color: #8f8f8f;
    --peak-pagination-disabled-bg: #242424;
    --peak-tooltip-bg: #2f2f2f;
    --peak-tooltip-color: #e5e7eb;
    --peak-tooltip-border-color: #555555;
    --peak-backdrop-bg: #000000;
    --peak-backdrop-opacity: .66;
    --peak-backdrop-filter: grayscale(1) blur(3px);
    --peak-customer-logo-frame-bg: rgba(255, 255, 255, .86);
    --peak-customer-logo-frame-border-color: rgba(255, 255, 255, .42);
    --peak-customer-logo-frame-shadow: 0 1px 5px rgba(0, 0, 0, .22);
    --dt-row-selected: 50, 50, 50;
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: var(--peak-text-color);
    --peak-input-danger-bg: #290206;
}

body {
    background-color: var(--peak-page-bg);
    color: var(--peak-text-color);
}

body.layout-admin #middle {
    background-color: var(--peak-page-bg);
}

body.layout-admin #header {
    background-color: var(--peak-header-bg);
    border-bottom: 1px solid var(--peak-border-color);
}

a {
    color: var(--peak-link-color);
}

a:hover {
    color: var(--peak-link-hover-color);
}

#footer {
    background-color: var(--peak-footer-bg) !important;
    border-top: 1px solid var(--peak-border-color);
    color: var(--peak-text-muted-color);
}

[data-bs-theme="dark"] #footer a {
    color: var(--peak-link-color);
}

[data-bs-theme="dark"] #footer a:hover,
[data-bs-theme="dark"] #footer a:focus-visible {
    color: var(--peak-link-hover-color) !important;
    text-decoration: underline;
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.list-group-item {
    background-color: var(--peak-surface-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

.modal-backdrop,
.offcanvas-backdrop {
    --bs-backdrop-bg: var(--peak-backdrop-bg);
    --bs-backdrop-opacity: var(--peak-backdrop-opacity);
    background-color: var(--peak-backdrop-bg) !important;
    -webkit-backdrop-filter: var(--peak-backdrop-filter) !important;
    backdrop-filter: var(--peak-backdrop-filter) !important;
}

.modal-backdrop.show,
.offcanvas-backdrop.show {
    opacity: var(--peak-backdrop-opacity) !important;
}

.peak-customer-logo-frame {
    align-items: center;
    background: var(--peak-customer-logo-frame-bg);
    border: 1px solid var(--peak-customer-logo-frame-border-color);
    border-radius: .4rem;
    box-shadow: var(--peak-customer-logo-frame-shadow);
    display: inline-flex;
    justify-content: center;
    padding: .16rem .38rem;
}

.peak-customer-logo {
    filter: none;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.dropdown-header {
    border-color: var(--peak-border-color);
}

.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    background-color: var(--peak-input-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--peak-input-readonly-bg);
    color: var(--peak-text-muted-color);
}

.form-control::placeholder {
    color: var(--peak-text-muted-color);
}

.input-group-text {
    background-color: var(--peak-surface-muted-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

.form-control::file-selector-button {
    background-color: var(--peak-file-button-bg);
    border-color: var(--peak-file-button-border-color);
    color: var(--peak-file-button-color);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--peak-file-button-hover-bg);
    color: var(--peak-file-button-color);
}

.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
    color: var(--peak-floating-label-color);
}

.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: var(--peak-floating-label-bg) !important;
}

[data-bs-theme="dark"] .form-floating > label {
    background-color: transparent !important;
    color: var(--peak-floating-label-color);
}

[data-bs-theme="dark"] .form-floating > label::after,
[data-bs-theme="dark"] .form-floating > .form-select.bg-primary-soft ~ label::after {
    background-color: var(--peak-floating-label-bg) !important;
}

.table {
    --bs-table-bg: var(--peak-surface-bg);
    --bs-table-color: var(--peak-text-color);
    --bs-table-border-color: var(--peak-border-color);
    --bs-table-striped-bg: var(--peak-surface-muted-bg);
    --bs-table-striped-color: var(--peak-text-color);
    --bs-table-hover-bg: var(--peak-surface-muted-bg);
    --bs-table-hover-color: var(--peak-text-color);
}

.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
    color: var(--bs-table-color);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

table.dataTable,
table.dataTable > thead > tr > *,
table.dataTable > tbody > tr > * {
    background-color: var(--peak-surface-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

table.dataTable > thead > tr > * {
    color: var(--peak-text-muted-color);
}

table.dataTable > tbody > tr:hover > * {
    background-color: var(--peak-surface-muted-bg);
    color: var(--peak-text-color);
}

.table-theme,
table.dataTable.table-theme {
    background-color: var(--peak-surface-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

.table-theme > :not(caption) > * > *,
table.dataTable.table-theme > thead > tr > *,
table.dataTable.table-theme > tbody > tr > * {
    background-color: var(--peak-surface-bg) !important;
    border-color: var(--peak-border-color);
    box-shadow: none;
    color: var(--peak-text-color) !important;
}

    table.dataTable.table-theme > tbody > tr.selected > *,
    table.dataTable.table-theme > tbody > tr.selected a {
        color: rgb(var(--dt-row-selected-text)) !important;
    }

.table-theme > thead > tr > *,
table.dataTable.table-theme > thead > tr > * {
    color: var(--peak-text-muted-color) !important;
}

.table-theme.table-hover > tbody > tr:hover > *,
table.dataTable.table-theme > tbody > tr:hover > * {
    background-color: var(--peak-surface-muted-bg) !important;
    color: var(--peak-text-color);
}

[data-bs-theme="dark"] table.table-hover:not(.table-bordered) > :not(caption) > * > * {
    background-color: var(--peak-surface-bg) !important;
    border-color: var(--peak-border-color);
    color: var(--peak-text-color) !important;
}

[data-bs-theme="dark"] table.table-hover:not(.table-bordered) > thead > tr > * {
    color: var(--peak-text-muted-color) !important;
}

[data-bs-theme="dark"] table.table-hover:not(.table-bordered) > tbody > tr:hover > * {
    background-color: var(--peak-surface-muted-bg) !important;
    color: var(--peak-text-color) !important;
}

.dt-container .dt-input,
.dt-container .dt-search input,
.dt-container .dt-length select {
    background-color: var(--peak-input-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

.dt-container .dt-input:focus,
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    background-color: var(--peak-input-bg);
    border-color: rgba(var(--bs-primary-rgb), .5);
    color: var(--peak-text-color);
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--peak-surface-bg) !important;
}

[data-bs-theme="dark"] .bg-white .text-dark,
[data-bs-theme="dark"] .bg-light .text-dark {
    color: var(--peak-text-color) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--peak-text-color) !important;
}

[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .link-primary,
[data-bs-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link) {
    color: var(--peak-accent-text-color);
}

[data-bs-theme="dark"] .link-primary:hover,
[data-bs-theme="dark"] a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
    color: var(--peak-accent-text-hover-color) !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link:not(.active) {
    color: var(--peak-accent-text-color);
}

.badge.bg-warning,
.badge.text-bg-warning,
.bg-warning.badge,
.bg-warning.rounded-pill {
    color: var(--peak-warning-label-text-color) !important;
}

.badge.bg-warning *,
.badge.text-bg-warning *,
.bg-warning.badge *,
.bg-warning.rounded-pill * {
    color: inherit !important;
}

.badge.bg-info,
.badge.text-bg-info,
.bg-info.badge,
.bg-info.rounded-pill {
    color: var(--peak-info-label-text-color) !important;
}

.badge.bg-info *,
.badge.text-bg-info *,
.bg-info.badge *,
.bg-info.rounded-pill * {
    color: inherit !important;
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--peak-text-color);
    --bs-btn-bg: var(--peak-surface-muted-bg);
    --bs-btn-border-color: var(--peak-border-color);
    --bs-btn-hover-color: var(--peak-text-color);
    --bs-btn-hover-bg: var(--peak-surface-raised-bg);
    --bs-btn-hover-border-color: var(--peak-border-muted-color);
    --bs-btn-active-color: var(--peak-text-color);
    --bs-btn-active-bg: var(--peak-surface-raised-bg);
    --bs-btn-active-border-color: var(--peak-border-muted-color);
}

[data-bs-theme="dark"] #header .btn-light.text-dark-hover:hover,
[data-bs-theme="dark"] #header .btn-light.text-dark-hover:focus,
[data-bs-theme="dark"] #header .btn-light.text-dark-hover:active,
[data-bs-theme="dark"] #header .btn-light.text-dark-hover[aria-expanded="true"] {
    color: var(--peak-text-color) !important;
}

[data-bs-theme="dark"] #header .btn-light.text-dark-hover:hover i,
[data-bs-theme="dark"] #header .btn-light.text-dark-hover:focus i,
[data-bs-theme="dark"] #header .btn-light.text-dark-hover:active i,
[data-bs-theme="dark"] #header .btn-light.text-dark-hover[aria-expanded="true"] i {
    color: inherit;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--peak-border-color);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--peak-input-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--peak-text-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--peak-select2-choice-bg);
    border-color: var(--peak-select2-choice-border-color);
    color: var(--peak-select2-choice-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--peak-text-muted-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--peak-text-color);
}

.select2-dropdown {
    background-color: var(--peak-surface-bg);
    border-color: var(--peak-border-color);
    color: var(--peak-text-color);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--peak-dropdown-hover-bg);
    color: var(--peak-text-color);
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--peak-surface-muted-bg);
}
