:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #131317;
    --surface: #1c1c20;
    --surface-raised: #2a2a2e;
    --surface-hover: #333337;
    --border: #424246;
    --text: #afafaf;
    --text-strong: #e0e0e0;
    --text-secondary: #909090;
    --text-placeholder: #6c6c72;
    --text-on-accent: #131317;
    --primary: #3386aa;
    --primary-hover: #4799bd;
    --info-text: #41bfc0;

    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-primary-rgb: 51, 134, 170;
    --bs-secondary-rgb: 144, 144, 144;
    --bs-success-rgb: 62, 161, 107;
    --bs-info-rgb: 40, 166, 167;
    --bs-warning-rgb: 204, 127, 76;
    --bs-danger-rgb: 213, 96, 96;
}

:root[data-theme="dark"] body {
    background-color: var(--bg);
}

:root[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6) {
    color: var(--text-strong);
}

:where(:root[data-theme="dark"]) a {
    color: var(--primary);
}

:where(:root[data-theme="dark"]) a:hover {
    color: var(--primary-hover);
}

:root[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .form-text {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .text-placeholder,
:root[data-theme="dark"] .form-control::placeholder {
    color: var(--text-placeholder) !important;
}

:root[data-theme="dark"] .invalid-feedback,
:root[data-theme="dark"] .field-validation-error {
    color: rgb(var(--bs-danger-rgb)) !important;
}

:root[data-theme="dark"] :is(.border, .border-top, .border-end, .border-bottom, .border-start) {
    border-color: var(--border) !important;
}

:root[data-theme="dark"] .border-success {
    border-color: rgb(var(--bs-success-rgb)) !important;
}

:root[data-theme="dark"] .border-danger {
    border-color: rgb(var(--bs-danger-rgb)) !important;
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light {
    background-color: var(--surface) !important;
}

:root[data-theme="dark"] .bg-secondary {
    background-color: var(--surface-raised) !important;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .modal-content {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border);
}

:root[data-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, .03);
    border-bottom-color: var(--border);
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: var(--border);
}

:root[data-theme="dark"] .modal-backdrop.show {
    backdrop-filter: blur(3px);
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

:root[data-theme="dark"] .list-group-item-action {
    color: var(--text);
}

:root[data-theme="dark"] .list-group-item-action:hover,
:root[data-theme="dark"] .list-group-item-action:focus {
    color: var(--text-strong);
    background-color: var(--surface-raised);
}

:root[data-theme="dark"] .accordion-button {
    color: var(--text-strong);
    background-color: var(--surface);
}

:root[data-theme="dark"] .accordion-button:not(.collapsed) {
    color: var(--text-strong);
    background-color: var(--surface-raised);
}

:root[data-theme="dark"] .accordion-button::after,
:root[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23afafaf'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .form-control {
    color: var(--text-strong);
    background-color: var(--surface);
    border-color: var(--border);
}

:root[data-theme="dark"] .form-control:focus {
    color: var(--text-strong);
    background-color: var(--surface);
    border-color: var(--primary);
}

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] {
    background-color: var(--surface-raised);
}

:root[data-theme="dark"] .form-control::file-selector-button {
    color: var(--text-strong);
    background-color: var(--surface-raised);
}

:root[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--surface-hover);
}

:root[data-theme="dark"] .form-check-input {
    background-color: var(--surface);
    border-color: rgba(255, 255, 255, .25);
}

:root[data-theme="dark"] .form-check-input:focus {
    border-color: var(--primary);
}

:root[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

:root[data-theme="dark"] .input-group-text {
    color: var(--text);
    background-color: var(--surface-raised);
    border-color: var(--border);
}

:root[data-theme="dark"] .table {
    --bs-table-hover-color: var(--text-strong);
    --bs-table-hover-bg: rgba(255, 255, 255, .04);
    color: var(--text);
    border-color: var(--border);
}

:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .nav-link:hover {
    color: var(--text);
}

:root[data-theme="dark"] .nav-link.active {
    color: var(--active-string-color);
}

:root[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border);
}

:root[data-theme="dark"] .nav-tabs .nav-link:hover,
:root[data-theme="dark"] .nav-tabs .nav-link:focus {
    border-color: var(--surface-raised) var(--surface-raised) var(--border);
}

:root[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--text-strong);
    background-color: var(--surface);
    border-color: var(--border) var(--border) var(--surface);
}

:root[data-theme="dark"] .alert-warning {
    color: rgb(var(--bs-warning-rgb));
    background-color: rgba(var(--bs-warning-rgb), .12);
    border-color: rgba(var(--bs-warning-rgb), .3);
}

:root[data-theme="dark"] .alert-info {
    color: var(--info-text);
    background-color: rgba(var(--bs-info-rgb), .12);
    border-color: rgba(var(--bs-info-rgb), .3);
}

:root[data-theme="dark"] .btn-primary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus,
:root[data-theme="dark"] .btn-primary:active {
    color: #fff;
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

:root[data-theme="dark"] .btn-success {
    color: #fff;
    background-color: rgb(var(--bs-success-rgb));
    border-color: rgb(var(--bs-success-rgb));
}

:root[data-theme="dark"] .btn-success:hover,
:root[data-theme="dark"] .btn-success:focus,
:root[data-theme="dark"] .btn-success:active {
    color: #fff;
    background-color: rgba(var(--bs-success-rgb), .85);
    border-color: rgba(var(--bs-success-rgb), .85);
}

:root[data-theme="dark"] .btn-secondary {
    color: var(--text-strong);
    background-color: var(--surface-raised);
    border-color: var(--border);
}

:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-secondary:focus,
:root[data-theme="dark"] .btn-secondary:active {
    color: var(--text-strong);
    background-color: var(--surface-hover);
    border-color: var(--border);
}

:root[data-theme="dark"] .btn-warning {
    color: var(--text-on-accent);
    background-color: var(--active-string-color);
    border-color: var(--active-string-color);
}

:root[data-theme="dark"] .btn-warning:hover,
:root[data-theme="dark"] .btn-warning:focus,
:root[data-theme="dark"] .btn-warning:active {
    color: var(--text-on-accent);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

:root[data-theme="dark"] .btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

:root[data-theme="dark"] .btn-outline-primary:hover,
:root[data-theme="dark"] .btn-outline-primary:active {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

:root[data-theme="dark"] .btn-outline-success {
    color: rgb(var(--bs-success-rgb));
    border-color: rgb(var(--bs-success-rgb));
}

:root[data-theme="dark"] .btn-outline-success:hover,
:root[data-theme="dark"] .btn-outline-success:active {
    color: #fff;
    background-color: rgb(var(--bs-success-rgb));
    border-color: rgb(var(--bs-success-rgb));
}

:root[data-theme="dark"] .btn-outline-danger {
    color: rgb(var(--bs-danger-rgb));
    border-color: rgb(var(--bs-danger-rgb));
}

:root[data-theme="dark"] .btn-outline-danger:hover,
:root[data-theme="dark"] .btn-outline-danger:active {
    color: #fff;
    background-color: rgb(var(--bs-danger-rgb));
    border-color: rgb(var(--bs-danger-rgb));
}

:root[data-theme="dark"] .btn-outline-secondary {
    color: var(--text);
    border-color: var(--border);
}

:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-secondary:active {
    color: var(--text-strong);
    background-color: var(--surface-raised);
    border-color: var(--border);
}

:root[data-theme="dark"] .btn-outline-warning {
    color: var(--active-string-color);
    border-color: var(--active-string-color);
}

:root[data-theme="dark"] .btn-outline-warning:hover,
:root[data-theme="dark"] .btn-outline-warning:active {
    color: var(--text-on-accent);
    background-color: var(--active-string-color);
    border-color: var(--active-string-color);
}

:root[data-theme="dark"] .btn-outline-warning.text-dark {
    color: var(--text-strong) !important;
}

:root[data-theme="dark"] .btn-outline-warning.text-dark:hover {
    color: var(--text-on-accent) !important;
}

:root[data-theme="dark"] .number-in-circle {
    color: var(--text-on-accent);
}