body.dark-mode,
html.dark-mode body {

    --color-background-primary: #121212;
    --color-background-secondary: #1E1F22;
    --color-background-tertiary: #2A2C30;
    --color-surface: #323438;

    --color-text-primary: #F8F9FA;
    --color-text-secondary: #B4B8BC;
    --color-text-on-accent: #FFFFFF;

    --color-accent-primary: #BA3A3A;
    --color-accent-primary-dim: #9F3232;
    --color-accent-secondary: #92979C;
    --color-border-default: #43464A;
    --color-border-focus: #B4B8BC;

    --color-success: #388E3C;
    --color-success-subtle: #1B3A1C;
    --color-success-text: #80c883;
    --color-warning: #F5A623;
    --color-warning-subtle: #3A2800;
    --color-warning-text: #F5C842;
    --color-danger: #962d22;
    --color-danger-subtle: #962d22;
    --color-danger-text: #e8857c;
    --color-error: #C0392B;
    --color-error-subtle: #3A1A18;
    --color-error-text: #e8857c;
    --color-info: #0D8AB0;
    --color-info-subtle: #082535;
    --color-info-text: #5BC8E8;
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
}

.dark-mode .navbar {
    background-color: var(--color-background-primary);
    border-bottom: 1px solid var(--color-border-default);
}

.dark-mode #main_nav .nav-link {
    color: var(--color-text-primary) !important;
}

.dark-mode #mainNav .nav-link:hover,
.dark-mode #mainNav .nav-link:focus {
    color: var(--color-accent-primary-dim) !important;
    background-color: rgba(74, 96, 122, 0.1) !important;
}

.dark-mode #mainNav .nav-item.active {
    border-bottom: 3px solid var(--color-accent-primary-dim);
    margin-bottom: -3px;
}

.dark-mode #mainNav .nav-item.active .nav-link {
    color: var(--color-accent-primary) !important;
    background-color: rgba(74, 96, 122, 0.15);
}

.dark-mode .headerAccountName,
.dark-mode .headerAccountName a {
    color: var(--color-text-primary) !important;
}

.dark-mode #header {
    background-color: var(--color-background-secondary);
    border-bottom: 1px solid var(--color-border-default);
}

.dark-mode .border-bottom {
    border-bottom: 1px solid var(--color-border-default) !important;
}

.dark-mode #breadcrumbs,
.dark-mode #breadcrumbs a:link,
.dark-mode #breadcrumbs a:hover,
.dark-mode #breadcrumbs a:visited,
.dark-mode #breadcrumbs a:active {
    color: var(--color-text-primary);
}

.dark-mode #navBottom {
    background-color: var(--color-background-secondary);
    color: var(--color-text-secondary);
}

.dark-mode #navBottom .nav-link,
.dark-mode #navBottom a:link,
.dark-mode #navBottom a:visited,
.dark-mode #navBottom .printButton {
    color: var(--color-text-secondary) !important;
    text-decoration: none;
}

    .dark-mode #navBottom .nav-link.nav-link-subtle,
    .dark-mode #navBottom a.nav-link-subtle:link,
    .dark-mode #navBottom a.nav-link-subtle:visited {
        color: transparent !important;
    }

.dark-mode #navBottom a:hover,
.dark-mode #navBottom .printButton:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.dark-mode .breadcrumb {
    background-color: transparent;
    color: var(--color-text-primary);
}

.dark-mode .breadcrumb-item a {
    color: var(--color-text-primary);
}

.dark-mode .breadcrumb-item.active {
    color: var(--color-text-on-accent);
}

.dark-mode .form-control,
.dark-mode .input-group-text {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
}

.dark-mode .form-control::placeholder {
    color: var(--color-text-secondary);
}

.dark-mode .form-control.is-valid,
.dark-mode .was-validated .form-control:valid {
    border-color: var(--color-success);
}

.dark-mode .form-control.is-invalid,
.dark-mode .was-validated .form-control:invalid {
    border-color: var(--color-error);
}

.dark-mode .valid-feedback {
    color: var(--color-success);
}

.dark-mode .invalid-feedback {
    color: var(--color-error);
}

/* ===== Buttons ===== */

.dark-mode .btn-primary {
    background-color: var(--color-info);
    border-color: var(--color-info-subtle);
    color: var(--color-text-on-accent) !important;
}

    .dark-mode .btn-primary:hover,
    .dark-mode .btn-primary:focus {
        background-color: var(--color-info-subtle);
        border-color: var(--color-info-subtle);
        color: var(--color-text-on-accent) !important;
    }

.dark-mode .btn-secondary {
    background-color: var(--color-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-secondary:hover,
.dark-mode .btn-secondary:focus {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-focus);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-success,
.dark-mode .btn-success:hover,
.dark-mode .btn-success:focus {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-on-accent) !important;
}

.dark-mode .btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-text-on-accent) !important;
}

    .dark-mode .btn-danger:hover,
    .dark-mode .btn-danger:focus {
        background-color: var(--color-danger);
        border-color: var(--color-danger);
        color: var(--color-text-on-accent) !important;
    }

.dark-mode .btn-warning,
.dark-mode .btn-warning:hover,
.dark-mode .btn-warning:focus {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-background-primary) !important;
}

.dark-mode .btn-info,
.dark-mode .btn-info:hover,
.dark-mode .btn-info:focus {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-text-on-accent) !important;
}

.dark-mode .btn-light {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-default);
}

.dark-mode .btn-light:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border-focus);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-dark {
    background-color: var(--color-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-dark:hover,
.dark-mode .btn-dark:focus {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-focus);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-outline-primary {
    border-color: var(--color-info);
    color: var(--color-info) !important;
}

    .dark-mode .btn-outline-primary:hover {
        background-color: var(--color-info);
        color: var(--color-text-on-accent) !important;
    }

.dark-mode .btn-outline-secondary {
    border-color: var(--color-border-default);
    color: var(--color-text-secondary) !important;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--color-surface);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-outline-success {
    border-color: var(--color-success);
    color: var(--color-success) !important;
}

.dark-mode .btn-outline-success:hover {
    background-color: var(--color-success);
    color: var(--color-text-on-accent) !important;
}

.dark-mode .btn-outline-danger {
    border-color: var(--color-error);
    color: var(--color-error) !important;
}

.dark-mode .btn-outline-danger:hover {
    background-color: var(--color-error);
    color: var(--color-text-on-accent) !important;
}

.dark-mode .btn-outline-warning {
    border-color: var(--color-warning);
    color: var(--color-warning) !important;
}

.dark-mode .btn-outline-warning:hover {
    background-color: var(--color-warning);
    color: var(--color-background-primary) !important;
}

.dark-mode .btn-outline-info {
    border-color: var(--color-info);
    color: var(--color-info) !important;
}

.dark-mode .btn-outline-info:hover {
    background-color: var(--color-info);
    color: var(--color-text-on-accent) !important;
}

.dark-mode .btn-outline-light {
    border-color: var(--color-border-default);
    color: var(--color-text-secondary) !important;
}

.dark-mode .btn-outline-light:hover {
    background-color: var(--color-surface);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-outline-dark {
    border-color: var(--color-border-focus);
    color: var(--color-text-primary) !important;
}

.dark-mode .btn-outline-dark:hover {
    background-color: var(--color-surface);
    color: var(--color-text-primary) !important;
}


/* ===== Dropdowns ===== */

.dark-mode .dropdown-menu {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode .dropdown-item {
    color: var(--color-text-primary);
}

    .dark-mode .dropdown-item:hover,
    .dark-mode .dropdown-item:focus {
        background-color: var(--color-surface);
        color: var(--color-text-primary);
    }

    .dark-mode .dropdown-item.active,
    .dark-mode .dropdown-item:active {
        background-color: var(--color-accent-primary-dim);
        color: var(--color-text-on-accent);
    }

    .dark-mode .dropdown-item.disabled,
    .dark-mode .dropdown-item:disabled {
        color: var(--color-text-secondary);
    }

.dark-mode .dropdown-divider {
    border-top-color: var(--color-border-default);
}

.dark-mode .dropdown-header {
    color: var(--color-text-secondary);
}

/* ===== Nav Pills ===== */

.dark-mode .nav-pills .nav-link {
    color: var(--color-text-secondary);
}

    .dark-mode .nav-pills .nav-link.active,
    .dark-mode .nav-pills .show > .nav-link {
        background-color: var(--color-accent-primary-dim);
        color: var(--color-text-on-accent);
    }

    .dark-mode .nav-pills .nav-link:hover,
    .dark-mode .nav-pills .nav-link:focus {
        color: var(--color-text-primary);
        background-color: var(--color-surface);
    }

/* ===== Pagination ===== */

.dark-mode .pagination .page-item .page-link {
    background-color: var(--color-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

    .dark-mode .pagination .page-item .page-link:hover {
        background-color: var(--color-background-tertiary);
        border-color: var(--color-border-focus);
        color: var(--color-text-primary);
    }

.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--color-accent-primary-dim);
    border-color: var(--color-accent-primary-dim);
    color: var(--color-text-on-accent);
}

.dark-mode .pagination .page-item.disabled .page-link {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

/* ===== Tooltips ===== */

.dark-mode .tooltip .tooltip-inner {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.dark-mode .tooltip .arrow::before {
    border-top-color: var(--color-surface);
}

.dark-mode .bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--color-surface);
}

.dark-mode .bs-tooltip-left .arrow::before {
    border-left-color: var(--color-surface);
}

.dark-mode .bs-tooltip-right .arrow::before {
    border-right-color: var(--color-surface);
}

/* ===== Popovers ===== */

.dark-mode .popover {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
}

.dark-mode .popover-header {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode .popover-body {
    color: var(--color-text-primary);
}

.dark-mode .popover .arrow::before {
    border-color: transparent;
}

.dark-mode .popover .arrow::after {
    border-top-color: var(--color-background-secondary);
}

.dark-mode .bs-popover-bottom .arrow::after {
    border-bottom-color: var(--color-surface);
}

/* ===== Progress ===== */

.dark-mode .progress {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
}

.dark-mode .progress-bar {
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
}

.dark-mode .progress-bar-striped {
    background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent );
}

/* ===== Spinners ===== */

.dark-mode .spinner-border,
.dark-mode .spinner-grow {
    color: var(--color-accent-primary);
}

/* ===== Custom Form Controls ===== */

.dark-mode .custom-select {
    background-color: var(--color-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode .custom-control-label::before {
    background-color: var(--color-surface);
    border-color: var(--color-border-default);
}

.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

.dark-mode .custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 0.2rem rgba(186, 58, 58, 0.25);
}

.dark-mode .custom-file-label {
    background-color: var(--color-surface);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

    .dark-mode .custom-file-label::after {
        background-color: var(--color-background-tertiary);
        border-left-color: var(--color-border-default);
        color: var(--color-text-primary);
    }

/* ===== Figures & Blockquotes ===== */

.dark-mode blockquote {
    border-left: 4px solid var(--color-border-default);
    color: var(--color-text-secondary);
}

.dark-mode .blockquote-footer {
    color: var(--color-text-secondary);
}

.dark-mode figcaption,
.dark-mode .figure-caption {
    color: var(--color-text-secondary);
}

/* ===== Letter Pagination ===== */

.dark-mode .pagination .page-item .page-link {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode .pagination .page-item .page-link:hover {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border-focus) !important;
        color: var(--color-text-primary) !important;
    }

.dark-mode .pagination .page-item.static .page-link {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode .pagination .page-item.static .page-link:hover {
        background-color: var(--color-background-tertiary) !important;
        border-color: var(--color-border-focus) !important;
        color: var(--color-text-primary) !important;
    }

.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--color-accent-primary-dim) !important;
    border-color: var(--color-accent-primary) !important;
    color: var(--color-text-on-accent) !important;
}

.dark-mode .pagination .page-item.disabled .page-link {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-secondary) !important;
    opacity: 0.5;
}

/* ===== Code ===== */

.dark-mode code {
    background-color: var(--color-background-tertiary);
    color: var(--color-accent-primary);
}

.dark-mode pre {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode kbd {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.dark-mode #stickyIconsWrapper {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode .resultsIconContainer a,
.dark-mode #stickyIconsWrapper .resultsIconContainer a {
    color: var(--color-accent-primary);
}

.dark-mode .resultsIconContainer #stickyIconsWrapper a:hover,
.dark-mode .resultsIconContainer #stickyIconsWrapper a:active {
    background-color: var(--color-background-tertiary);
    color: var(--color-accent-primary-dim);
}

.dark-mode tr.theadTR th:hover,
.dark-mode tr.theadTr th:hover {
    background-color: var(--color-accent-primary-dim);
    color: var(--color-text-on-accent);
}

.dark-mode .accentBar {
    background-color: color-mix(in srgb, var(--color-accent-primary-dim) 35%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-primary-dim) 50%, transparent);
    color: var(--color-text-on-accent);
}

.dark-mode .resultsAccentBar a:link {
    color: var(--color-accent-primary);
}

.dark-mode .resultsAccentBar a:hover {
    color: var(--color-accent-primary-dim);
}

.dark-mode .accentBar .btn-display,
.dark-mode .accentBar .btn-display a {
    background-color: var(--color-accent-primary-dim) !important;
    border-color: var(--color-accent-primary) !important;
    color: var(--color-text-on-accent) !important;
}

    .dark-mode .accentBar .btn-display:hover,
    .dark-mode .accentBar .btn-display:focus {
        background-color: var(--color-accent-primary) !important;
        border-color: var(--color-accent-primary) !important;
        color: var(--color-text-on-accent) !important;
    }


.dark-mode .bd-callout-display {
    border-left-color: var(--color-accent-primary);
}

.dark-mode .btn-display,
.dark-mode .btn-display a {
    background-color: var(--color-accent-primary-dim) !important;
    border-color: var(--color-accent-primary-dim) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .bd-callout-display h4 {
    color: var(--color-accent-primary);
}

.dark-mode .list-group-item-action {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-primary);
}

.dark-mode .list-group-item-action.recip-list {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-primary) !important;
}

.dark-mode .list-group-item-action.recip-list:hover,
.dark-mode .selectedItemsContent .reciprocal-content:hover {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.dark-mode .selectedItemsContent .reciprocal-content {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-primary);
}

.dark-mode #contentInfo {
    background-color: var(--color-accent-primary-dim);
}

/* ===== Alerts ===== */

.dark-mode .alert-success {
    background-color: var(--color-success-subtle);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.dark-mode .alert-danger {
    background-color: var(--color-error-subtle);
    border-color: var(--color-error);
    color: var(--color-danger-text);
}

.dark-mode .alert-warning {
    background-color: var(--color-warning-subtle);
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

.dark-mode .alert-info {
    background-color: var(--color-info-subtle);
    border-color: var(--color-info);
    color: var(--color-info-text);
}

.dark-mode .alert-primary {
    background-color: rgba(74, 96, 122, 0.15);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.dark-mode .alert-secondary {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

.dark-mode .alert-light {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode .alert-dark {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

.dark-mode .alert a {
    color: var(--color-text-primary) !important;
}

/* ===== Badges ===== */

.dark-mode .badge-primary {
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
}

.dark-mode .badge-secondary {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.dark-mode .badge-success {
    background-color: var(--color-success);
    color: var(--color-text-on-accent);
}

.dark-mode .badge-danger,
.dark-mode .bg-danger {
    background-color: var(--color-error) !important;
    color: var(--color-text-on-accent);
}

.dark-mode .badge-warning {
    background-color: var(--color-warning);
    color: var(--color-background-primary);
}

.dark-mode .badge-info {
    background-color: var(--color-info);
    color: var(--color-text-on-accent);
}

.dark-mode .badge-light {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.dark-mode .badge-dark {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
}

.dark-mode .badge-display {
    background-color: var(--color-text-on-accent) !important;
    color: var(--color-background-tertiary) !important;
}

    .dark-mode .badge-display:hover,
    .dark-mode a.badge-display:hover,
    .dark-mode a.badge-display:focus {
        background-color: var(--color-text-primary) !important;
        color: var(--color-surface) !important;
    }

.dark-mode a.badge-display:focus,
.dark-mode a.badge-display.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(180, 184, 188, 0.35);
}

/* ===== Backgrounds ===== */

.dark-mode .bg-primary {
    background-color: var(--color-accent-primary) !important;
    color: var(--color-text-on-accent);
}

.dark-mode .bg-secondary {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary);
}

.dark-mode .bg-success {
    background-color: var(--color-success) !important;
    color: var(--color-text-on-accent);
}

.dark-mode .bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-background-primary);
}

.dark-mode .bg-info {
    background-color: var(--color-info) !important;
    color: var(--color-text-on-accent);
}

.dark-mode .bg-light {
    background-color: var(--color-background-tertiary) !important;
    color: var(--color-text-primary);
}

.dark-mode .bg-dark {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary);
}

.dark-mode .bg-white {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary);
}

/* ===== Text ===== */

.dark-mode .text-primary {
    color: var(--color-accent-primary) !important;
}

.dark-mode .text-secondary {
    color: var(--color-text-secondary) !important;
}

.dark-mode .text-success {
    color: var(--color-success) !important;
}

.dark-mode .text-danger {
    color: var(--color-error) !important;
}

.dark-mode .text-warning {
    color: var(--color-warning) !important;
}

.dark-mode .text-info {
    color: var(--color-info) !important;
}

.dark-mode .text-light {
    color: var(--color-text-secondary) !important;
}

.dark-mode .text-dark {
    color: var(--color-text-primary) !important;
}

.dark-mode .text-muted {
    color: var(--color-text-secondary) !important;
}

.dark-mode .text-white {
    color: var(--color-text-on-accent) !important;
}

.dark-mode .text-body {
    color: var(--color-text-primary) !important;
}

/* ===== Borders ===== */

.dark-mode .border-bottom {
    border-bottom: 1px solid var(--color-border-default) !important;
}

.dark-mode .border-top {
    border-top: 1px solid var(--color-border-default) !important;
}

.dark-mode .border-left {
    border-left: 1px solid var(--color-border-default) !important;
}

.dark-mode .border-right {
    border-right: 1px solid var(--color-border-default) !important;
}

.dark-mode .border {
    border-color: var(--color-border-default) !important;
}

.dark-mode .border-primary {
    border-color: var(--color-accent-primary) !important;
}

.dark-mode .border-secondary,
.dark-mode .border-light,
.dark-mode .border-display {
    border-color: var(--color-border-default) !important;
}

.dark-mode .border-success {
    border-color: var(--color-success) !important;
}

.dark-mode .border-danger {
    border-color: var(--color-error) !important;
}

.dark-mode .border-warning {
    border-color: var(--color-warning) !important;
}

.dark-mode .border-info {
    border-color: var(--color-info) !important;
}

.dark-mode .border-light {
    border-color: var(--color-border-default) !important;
}

.dark-mode .border-dark {
    border-color: var(--color-border-focus) !important;
}

.dark-mode .border-white {
    border-color: var(--color-border-focus) !important;
}
.dark-mode .border-display {
    border-color: var(--color-border-default) !important;
}

/* ===== Tables ===== */

.dark-mode .table {
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.dark-mode .table thead th,
.dark-mode .table > thead > tr > th {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-border-default);
    border-color: var(--color-border-default);
}

.dark-mode thead,
.dark-mode thead tr,
.dark-mode table thead tr,
.dark-mode .table-striped tbody tr.thead th {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .table td,
.dark-mode .table th {
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);
}

.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);
}

.dark-mode .table-hover tbody tr:hover {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.dark-mode .table-bordered,
.dark-mode .table-bordered td,
.dark-mode .table-bordered th {
    border-color: var(--color-border-default);
}

.dark-mode .table-success,
.dark-mode .table-success td,
.dark-mode .table-success th {
    background-color: var(--color-success-subtle);
    color: var(--color-success-text);
    border-color: var(--color-success);
}

.dark-mode .table-danger,
.dark-mode .table-danger td,
.dark-mode .table-danger th {
    background-color: var(--color-error-subtle);
    color: var(--color-danger-text);
    border-color: var(--color-error);
}

.dark-mode .table-warning,
.dark-mode .table-warning td,
.dark-mode .table-warning th {
    background-color: var(--color-warning-subtle);
    color: var(--color-warning-text);
    border-color: var(--color-warning);
}

.dark-mode .table-info,
.dark-mode .table-info td,
.dark-mode .table-info th {
    background-color: var(--color-info-subtle);
    color: var(--color-info-text);
    border-color: var(--color-info);
}

.dark-mode .table-active td,
.dark-mode .table-active th,
.dark-mode .table-active {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

/* ===== Nav Tabs ===== */

.dark-mode .tab-container {
    background-color: transparent;
}

.dark-mode .nav-tabs {
    border-bottom: 1px solid var(--color-border-default);
}

    .dark-mode .nav-tabs .nav-link {
        color: var(--color-text-secondary);
        border-color: var(--color-border-default);
        background-color: transparent;
    }

        .dark-mode .nav-tabs .nav-link:hover,
        .dark-mode .nav-tabs .nav-link:focus {
            color: var(--color-accent-primary-dim);
            background-color: rgba(74, 96, 122, 0.1);
            border-color: var(--color-border-default) var(--color-border-default) transparent;
        }

        .dark-mode .nav-tabs .nav-link.active,
        .dark-mode .nav-tabs .nav-item.show .nav-link {
            color: var(--color-accent-primary);
            background-color: var(--color-background-secondary) !important;
            border-color: var(--color-border-default) var(--color-border-default) var(--color-background-secondary);
        }

.dark-mode .tab-content {
    background-color: var(--color-background-secondary);
    border: 1px solid var(--color-border-default);
    border-top: none;
}

/* ===== Footer ===== */

.dark-mode #footer {
    background-color: var(--color-background-secondary);
    border-top: 1px solid var(--color-border-default);
}

.dark-mode #footer .nav-link,
.dark-mode #footer .nav-link:visited {
    color: var(--color-text-secondary);
}

.dark-mode #footer .nav-link:hover {
    color: var(--color-text-primary);
}

.dark-mode #footer span.nav-link {
    color: var(--color-text-secondary);
}

.dark-mode #helpDialog {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
}

.dark-mode .ui-dialog-titlebar {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-default);
}

.dark-mode .list-group-item {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
}

.dark-mode .list-group-item a {
    color: var(--color-text-primary);
}

.dark-mode .list-group-item-action:hover,
.dark-mode .list-group-item-action:focus,
.dark-mode a.list-group-item:hover,
.dark-mode a.list-group-item:focus {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.dark-mode .list-group-item.active {
    background-color: var(--color-accent-primary-dim);
    border-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
}

.dark-mode #timeout {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
}

.dark-mode .modal-content {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
}

.dark-mode .modal-header {
    border-bottom: 1px solid var(--color-border-default);
}

.dark-mode .modal-footer {
    border-top: 1px solid var(--color-border-default);
}

.dark-mode .close {
    color: var(--color-text-primary);
}

.dark-mode .card {
    background-color: var(--color-background-tertiary) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode #panel_banner .card, 
.dark-mode #panel_banner .card .card-body {
    background-color: var(--color-background-primary) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode .card .border-top {
        border-top: 1px solid var(--color-accent-secondary) !important;
    }

.dark-mode .card .card-header {
    background-color: var(--color-background-tertiary) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode .card .card-body {
        background-color: var(--color-background-secondary) !important;
        color: var(--color-text-primary) !important;
    }


.dark-mode .card .card-header h5,
.dark-mode .card .card-header h6 {
    color: var(--color-text-primary) !important;
}

.dark-mode .card a {
    color: var(--color-accent-secondary);
}

.dark-mode .card .table,
.dark-mode .card .table td,
.dark-mode .card .table th {
    color: var(--color-text-primary) !important;
}

.dark-mode .even {
    background-color: color-mix(in srgb, var(--color-surface) 80%, transparent) !important;
}

/* ===== jQuery UI Datepicker / Calendar Dark Mode ===== */

.dark-mode .ui-widget-content {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.dark-mode .ui-widget-header {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.dark-mode .ui-datepicker th {
    color: var(--color-text-secondary);
}

.dark-mode .ui-datepicker-header {
    background: var(--color-accent-primary-dim) !important;
}

.dark-mode .ui-datepicker td {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
}

    .dark-mode .ui-datepicker td a,
    .dark-mode .ui-datepicker td span {
        background-color: transparent !important;
        color: var(--color-text-primary) !important;
        display: block;
    }

        .dark-mode .ui-datepicker td a:hover {
            background-color: var(--color-surface) !important;
            color: var(--color-text-on-accent) !important;
        }

    .dark-mode .ui-datepicker td.ui-datepicker-today {
        background-color: rgba(255, 250, 144, 0.15);
    }

    .dark-mode .ui-datepicker td.ui-datepicker-other-month span,
    .dark-mode .ui-datepicker td.ui-state-disabled span {
        color: var(--color-text-secondary) !important;
        opacity: 0.4;
    }

.dark-mode .ui-state-default,
.dark-mode .ui-widget-content .ui-state-default,
.dark-mode .ui-widget-header .ui-state-default {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.dark-mode .ui-state-hover,
.dark-mode .ui-widget-content .ui-state-hover,
.dark-mode .ui-widget-header .ui-state-hover,
.dark-mode .ui-state-focus,
.dark-mode .ui-widget-content .ui-state-focus,
.dark-mode .ui-widget-header .ui-state-focus {
    background: var(--color-surface);
    color: var(--color-text-on-accent);
    border-color: var(--color-border-focus);
}

.dark-mode .ui-state-active,
.dark-mode .ui-widget-content .ui-state-active,
.dark-mode .ui-widget-header .ui-state-active {
    background: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent-primary);
}

.dark-mode #home-pods td.highlightEvent a {
    color: var(--color-text-on-accent) !important;
}

.dark-mode #home-pods td.highlightTask a {
    background: var(--color-success) !important;
    border: 1px #4a7b3a solid !important;
    color: var(--color-text-on-accent) !important;
}

.dark-mode #home-pods td.highlightAMSEvdent a {
    background: var(--color-error) !important;
    border: 1px #6a5a3a solid !important;
    color: var(--color-text-on-accent) !important;
}

.dark-mode .ui-state-highlight,
.dark-mode .ui-widget-content .ui-state-highlight,
.dark-mode .ui-widget-header .ui-state-highlight {
    background: rgba(255, 250, 144, 0.25);
    color: #f5f5a0;
    border-color: #8a8740;
}

.dark-mode .card .ui-state-highlight a,
.dark-mode .card .ui-widget-content .ui-state-highlight a {
    color: #f5f5a0 !important;
}

.dark-mode .ui-widget-header .ui-icon,
.dark-mode .ui-widget-content .ui-icon,
.dark-mode .ui-state-hover .ui-icon,
.dark-mode .ui-state-focus .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}

.dark-mode .card .ui-widget.ui-widget-content {
    border: 0;
}

/* ===== Search ===== */

.dark-mode #contentOverall .ui-widget-content {
    background-color: var(--color-background-primary) !important;
}

.dark-mode #contentOverall .ui-widget-header {
    background-color: var(--color-background-primary) !important;
}

.dark-mode #searchTabContent {
    border: none !important;
}

.dark-mode #tabMainMenu.ui-tabs,
.dark-mode #tabMainMenu.ui-widget,
.dark-mode #tabMainMenu.ui-widget-content {
    background-color: var(--color-background-primary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode #tabMainMenu .ui-tabs-nav,
.dark-mode #tabMainMenu .ui-widget-header {
    background-color: var(--color-background-primary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode #tabMainMenu .ui-tabs-tab {
    background-color: transparent !important;
}

.dark-mode #tabMainMenu .ui-tabs-anchor {
    color: var(--color-text-secondary) !important;
}

.dark-mode #tabMainMenu .ui-tabs-tab.ui-state-active .ui-tabs-anchor {
    color: var(--color-accent-primary) !important;
}

.dark-mode #tabMainMenu .ui-tabs-tab.ui-state-hover .ui-tabs-anchor,
.dark-mode #tabMainMenu .ui-tabs-tab.ui-state-focus .ui-tabs-anchor {
    color: var(--color-accent-primary-dim) !important;
}

.dark-mode #tabMainMenu .ui-state-default,
.dark-mode #tabMainMenu .ui-state-active {
    background-color: transparent !important;
    border-color: var(--color-border-default) !important;
}

.dark-mode #tabMainMenu .ui-tabs-panel,
.dark-mode #tabMainMenu .ui-widget-content {
    background-color: var(--color-background-primary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode #searchTab {
    background-color: var(--color-background-primary);
    border-bottom-color: var(--color-border-default);
}

    .dark-mode #searchTab .nav-link {
        color: var(--color-text-secondary);
        background-color: transparent;
        border-color: var(--color-border-default);
    }

        .dark-mode #searchTab .nav-link:hover,
        .dark-mode #searchTab .nav-link:focus {
            color: var(--color-accent-primary-dim);
            background-color: rgba(74, 96, 122, 0.1);
            border-color: var(--color-border-default) var(--color-border-default) transparent;
        }

        .dark-mode #searchTab .nav-link.active,
        .dark-mode #searchTab .nav-item.show .nav-link {
            color: var(--color-accent-primary);
            background-color: var(--color-background-secondary) !important;
            border-color: var(--color-border-default) var(--color-border-default) var(--color-background-secondary);
        }

.dark-mode #searchSectionWrapper {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
}

.dark-mode #searchSectionHeader {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.dark-mode .searchCriteriaFieldset {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
}

.dark-mode .autoFill.multiSelectLength {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-primary);
}

.dark-mode #mlsLinksCard,
.dark-mode #mlsLinksCard .card-body {
    background-color: var(--color-background-primary) !important;
}

/* ===== Resources Tabs ===== */

.dark-mode #resourcesTab {
    background-color: var(--color-background-primary);
    border-bottom-color: var(--color-border-default);
}

    .dark-mode #resourcesTab .nav-link {
        color: var(--color-text-secondary);
        background-color: transparent;
        border-color: var(--color-border-default);
    }

        .dark-mode #resourcesTab .nav-link:hover,
        .dark-mode #resourcesTab .nav-link:focus {
            color: var(--color-accent-primary-dim);
            background-color: rgba(74, 96, 122, 0.1);
            border-color: var(--color-border-default) var(--color-border-default) transparent;
        }

        .dark-mode #resourcesTab .nav-link.active,
        .dark-mode #resourcesTab .nav-item.show .nav-link {
            color: var(--color-accent-primary);
            background-color: var(--color-background-secondary) !important;
            border-color: var(--color-border-default) var(--color-border-default) var(--color-background-secondary);
        }

/* ===== DataTables ===== */

.dark-mode .dataTables_wrapper {
    color: var(--color-text-primary);
}

    .dark-mode .dataTables_wrapper div.dataTables_length label,
    .dark-mode .dataTables_wrapper div.dataTables_filter label,
    .dark-mode .dataTables_wrapper div.dataTables_info,
    .dark-mode .dataTables_wrapper div.dataTables_processing {
        color: var(--color-text-secondary);
    }

    .dark-mode .dataTables_wrapper .dataTables_filter input,
    .dark-mode .dataTables_wrapper .dataTables_length select {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border-default) !important;
        color: var(--color-text-primary) !important;
    }

.dark-mode table.dataTable > tbody > tr > td,
.dark-mode table.dataTable > tbody > tr > th {
    border-color: var(--color-border-default);
}

.dark-mode table.dataTable.table-striped > tbody > tr.odd,
.dark-mode table.dataTable.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, var(--color-surface) 50%, transparent) !important;
}

    .dark-mode table.dataTable.table-striped > tbody > tr.odd > *,
    .dark-mode table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
        box-shadow: none !important;
    }

.dark-mode table.dataTable.table-striped > tbody > tr.even,
.dark-mode table.dataTable.table-striped > tbody > tr:nth-of-type(even) {
    background-color: color-mix(in srgb, var(--color-surface) 25%, transparent) !important;
}

    .dark-mode table.dataTable.table-striped > tbody > tr.even > *,
    .dark-mode table.dataTable.table-striped > tbody > tr:nth-of-type(even) > * {
        box-shadow: none !important;
    }

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

    .dark-mode table.dataTable.table-hover > tbody > tr:hover > * {
        box-shadow: none !important;
    }

.dark-mode table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--color-accent-primary-dim) !important;
    color: var(--color-text-on-accent) !important;
}

.dark-mode table.dataTable thead > tr > th.sorting:before,
.dark-mode table.dataTable thead > tr > th.sorting:after,
.dark-mode table.dataTable thead > tr > th.sorting_asc:before,
.dark-mode table.dataTable thead > tr > th.sorting_asc:after,
.dark-mode table.dataTable thead > tr > th.sorting_desc:before,
.dark-mode table.dataTable thead > tr > th.sorting_desc:after,
.dark-mode table.dataTable thead > tr > th.sorting_asc_disabled:before,
.dark-mode table.dataTable thead > tr > th.sorting_desc_disabled:after {
    color: var(--color-text-secondary);
}

.dark-mode table.dataTable td.dt-control:before {
    background-color: var(--color-success);
    border-color: var(--color-surface);
}

.dark-mode table.dataTable tr.dt-hasChild td.dt-control:before {
    background-color: var(--color-error);
}

.dark-mode .table td.bi-events a {
    color: var(--color-text-secondary) !important;
}

    .dark-mode .table td.bi-events a:hover {
        color: var(--color-text-primary);
    }

.dark-mode .table td.bi-events .text-success {
    color: var(--color-success-text) !important;
}

.dark-mode .table td.bi-events .text-danger {
    color: var(--color-danger-text) !important;
}

.dark-mode .table td.bi-events .text-display {
    color: var(--color-accent-secondary) !important;
}

.dark-mode .dataTables_wrapper .pagination .page-item .page-link {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode .dataTables_wrapper .pagination .page-item .page-link:hover {
        background-color: var(--color-background-tertiary) !important;
        border-color: var(--color-border-focus) !important;
        color: var(--color-text-primary) !important;
    }

.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--color-accent-primary-dim) !important;
    border-color: var(--color-accent-primary) !important;
    color: var(--color-text-on-accent) !important;
}

.dark-mode .dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-secondary) !important;
}

/* ===== #register-event DataTables Bootstrap Pagination ===== */

.dark-mode #register-event .dataTables_wrapper .dataTables_filter input,
.dark-mode #register-event .dataTables_wrapper .dataTables_length select {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.dark-mode #register-event .dataTables_wrapper .pagination .page-item .page-link {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

    .dark-mode #register-event .dataTables_wrapper .pagination .page-item .page-link:hover {
        background-color: var(--color-surface);
        border-color: var(--color-border-focus);
        color: var(--color-text-primary);
    }

.dark-mode #register-event .dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--color-accent-primary-dim);
    border-color: var(--color-accent-primary-dim);
    color: var(--color-text-on-accent);
}

.dark-mode #register-event .dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: var(--color-background-secondary);
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

.dark-mode .contactID {
    color: var(--color-text-secondary);
}

/* ===== Dynamically injected modal inputs (AJAX-loaded content) ===== */

.dark-mode .modal input,
.dark-mode .modal select,
.dark-mode .modal textarea {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-default) !important;
}

    .dark-mode .modal input::placeholder,
    .dark-mode .modal textarea::placeholder {
        color: var(--color-text-secondary) !important;
    }

/* ===== Number input spin buttons ===== */

.dark-mode input[type="number"]::-webkit-inner-spin-button,
.dark-mode input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1);
    opacity: 0.6;
}

.dark-mode input[type="number"] {
    color-scheme: dark;
}

/* ===== Edit Event / Register Event Page ===== */

.dark-mode .bg-display,
.dark-mode .ui-dialog .ui-dialog-titlebar,
.dark-mode #calculatorModal .modal-header {
    background-color: var(--color-accent-primary-dim) !important;
    color: var(--color-text-on-accent) !important;
    border-color: var(--color-accent-primary) !important;
}

.dark-mode fieldset {
    background-color: var(--color-background-primary);
    border-color: var(--color-border-default);
}

.dark-mode .disabledcard {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: .25rem;
    padding: .5rem;
}

.dark-mode .hr-collapse {
    border-color: var(--color-border-default);
}

.dark-mode .disabledIcon {
    opacity: 0.4;
    cursor: not-allowed;
}

.dark-mode #edit-event h5,
.dark-mode #register-event h5 {
    border-bottom: 1px solid var(--color-border-default) !important;
}

.dark-mode #edit-event .card,
.dark-mode #register-event .card {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode #edit-event .card .card-header,
    .dark-mode #register-event .card .card-header {
        background-color: var(--color-background-secondary) !important;
        color: var(--color-text-primary) !important;
    }

.dark-mode #edit-event table .table-striped tbody tr:nth-of-type(odd),
.dark-mode #register-event table .table-striped tbody tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, var(--color-surface) 50%, transparent) !important;
}

.dark-mode #edit-event table .table-striped tbody tr:nth-of-type(even),
.dark-mode #register-event table .table-striped tbody tr:nth-of-type(even) {
    background-color: color-mix(in srgb, var(--color-surface) 80%, transparent) !important;
}

.dark-mode #register-event .card-header {
    border-bottom: 1px solid var(--color-border-default);
}

    .dark-mode #register-event .card-header h5 {
        border-bottom: none !important;
    }

.dark-mode #register-event .list-group-item-action:hover,
.dark-mode #register-event .list-group-item-action:focus {
    background-color: var(--color-background-tertiary);
    color: var(--color-text-primary);
}


/* ===== Validation States ===== */

.dark-mode .input-validation-error,
.dark-mode #register-event .input-validation-error {
    border-color: var(--color-error) !important;
    background-color: var(--color-error-subtle) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .validationMessage {
    color: var(--color-border-default) !important;
}

.dark-mode #edit-event .field-validation-required input,
.dark-mode #edit-event .field-validation-required select,
.dark-mode #edit-event .field-validation-required textarea,
.dark-mode #editInstructorModal .field-validation-required input,
.dark-mode #editInstructorModal .field-validation-required select,
.dark-mode #editInstructorModal .field-validation-required textarea,
.dark-mode #register-event .field-validation-required input,
.dark-mode #register-event .field-validation-required select,
.dark-mode #register-event .field-validation-required textarea,
.dark-mode .listingMaintenanceInputOverallWrapper .field-validation-required input,
.dark-mode .listingMaintenanceInputOverallWrapper .field-validation-required select,
.dark-mode .listingMaintenanceInputOverallWrapper .field-validation-required textarea {
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-surface)) !important;
    background-color: color-mix(in srgb, var(--color-success-subtle) 20%, var(--color-surface)) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode #edit-event .field-validation-error input,
.dark-mode #register-event .field-validation-error input,
.dark-mode #register-event .field-validation-error select,
.dark-mode #register-event .field-validation-error textarea,
.dark-mode .listingMaintenanceInputOverallWrapper .field-validation-error input,
.dark-mode .listingMaintenanceInputOverallWrapper .field-validation-error select,
.dark-mode .listingMaintenanceInputOverallWrapper .field-validation-error textarea {
    border-color: var(--color-error) !important;
    background-color: var(--color-error-subtle) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .validation-summary-errors,
.dark-mode .field-validation-error,
.dark-mode #register-event input.field-validation-error,
.dark-mode #register-event select.field-validation-error {
    color: var(--color-danger-text) !important;
}

.dark-mode #register-event input.field-validation-error,
.dark-mode #register-event select.field-validation-error {
    color: var(--color-danger-text) !important;
    background-color: var(--color-error-subtle) !important;
    border-color: var(--color-error) !important;
}

.dark-mode .input-dollar-amount {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

/* ===== Select2 Dropdowns ===== */

.dark-mode .select2-container--default .select2-selection--single,
.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--color-text-primary) !important;
    }

    .dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: var(--color-text-secondary) transparent transparent transparent !important;
    }

.dark-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-text-secondary) transparent !important;
}

.dark-mode .select2-dropdown {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .select2-container--default .select2-results__option {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
.dark-mode .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--color-accent-primary-dim) !important;
    color: var(--color-text-on-accent) !important;
}

.dark-mode .select2-container--default .select2-results__option[aria-selected=true],
.dark-mode .select2-container--default .select2-results__option[data-selected=true] {
    background-color: var(--color-background-tertiary) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-accent-primary-dim) !important;
    border-color: var(--color-accent-primary) !important;
    color: var(--color-text-on-accent) !important;
}

/* ===== TinyMCE ===== */

.dark-mode .tox .tox-toolbar,
.dark-mode .tox .tox-toolbar__primary,
.dark-mode .tox .tox-toolbar-overlord,
.dark-mode .tox .tox-editor-header {
    background-color: var(--color-background-tertiary) !important;
    border-color: var(--color-border-default) !important;
}

.dark-mode .tox .tox-tbtn {
    color: var(--color-text-primary) !important;
}

    .dark-mode .tox .tox-tbtn:hover,
    .dark-mode .tox .tox-tbtn:focus {
        background-color: var(--color-surface) !important;
        color: var(--color-text-primary) !important;
    }

    .dark-mode .tox .tox-tbtn svg {
        fill: var(--color-text-primary) !important;
    }

.dark-mode .tox .tox-statusbar {
    background-color: var(--color-background-tertiary) !important;
    border-top-color: var(--color-border-default) !important;
    color: var(--color-text-secondary) !important;
}

.dark-mode .tox .tox-edit-area__iframe {
    background-color: var(--color-background-secondary) !important;
}

.dark-mode .tox-tinymce {
    border-color: var(--color-border-default) !important;
}

.dark-mode .tox .tox-dialog {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .tox .tox-dialog__header {
    background-color: var(--color-accent-primary-dim) !important;
    border-bottom-color: var(--color-border-default) !important;
    color: var(--color-text-on-accent) !important;
}

.dark-mode .tox .tox-dialog__title {
    color: var(--color-text-on-accent) !important;
}

.dark-mode .tox .tox-dialog__body {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .tox .tox-dialog__body-nav-item {
    color: var(--color-text-secondary) !important;
}

.dark-mode .tox .tox-dialog__body-nav-item--active {
    border-bottom-color: var(--color-accent-primary) !important;
    color: var(--color-accent-primary) !important;
}

.dark-mode .tox .tox-label,
.dark-mode .tox .tox-form__group label {
    color: var(--color-text-primary) !important;
}

.dark-mode .tox .tox-textfield,
.dark-mode .tox .tox-textarea,
.dark-mode .tox .tox-selectfield select,
.dark-mode .tox .tox-listboxfield .tox-listbox--select {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

.dark-mode .tox .tox-dialog__footer {
    background-color: var(--color-background-tertiary) !important;
    border-top-color: var(--color-border-default) !important;
}

.dark-mode .tox .tox-button {
    background-color: var(--color-accent-primary-dim) !important;
    border-color: var(--color-accent-primary-dim) !important;
    color: var(--color-text-on-accent) !important;
}

    .dark-mode .tox .tox-button:hover {
        background-color: var(--color-accent-primary) !important;
        border-color: var(--color-accent-primary) !important;
    }

.dark-mode .tox .tox-button--secondary {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
}

    .dark-mode .tox .tox-button--secondary:hover {
        background-color: var(--color-background-tertiary) !important;
        border-color: var(--color-border-focus) !important;
    }

.dark-mode .tox .tox-dialog-wrap__backdrop {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .tox .tox-listbox--select:focus,
.dark-mode .tox .tox-selectfield select:focus {
    background-color: var(--color-background-tertiary) !important;
    border-color: var(--color-border-focus) !important;
    outline: none !important;
}

.dark-mode .tox .tox-tbtn--bespoke {
    background-color: var(--color-background-tertiary) !important;
    border-color: var(--color-border-focus) !important;
}

.dark-mode .tox .tox-tbtn--enabled, .dark-mode .tox .tox-tbtn--enabled:hover {
    background-color: var(--color-accent-secondary) !important;
}

/* ===== jQuery DateTimePicker ===== */

.dark-mode .xdsoft_datetimepicker {
    background: var(--color-background-secondary);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.8);
}

    .dark-mode .xdsoft_datetimepicker .xdsoft_label {
        background-color: var(--color-background-secondary);
        color: var(--color-text-primary);
    }

        .dark-mode .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
            background: var(--color-surface);
            border-color: var(--color-border-default);
            color: var(--color-text-primary);
        }

            .dark-mode .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
                color: var(--color-text-primary);
            }

                .dark-mode .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
                    background: var(--color-accent-primary-dim);
                    color: var(--color-text-on-accent);
                }

                .dark-mode .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
                    background: var(--color-accent-primary);
                    box-shadow: var(--color-accent-primary-dim) 0 1px 3px 0 inset;
                    color: var(--color-text-on-accent);
                }

    .dark-mode .xdsoft_datetimepicker .xdsoft_calendar td,
    .dark-mode .xdsoft_datetimepicker .xdsoft_calendar th {
        background: var(--color-background-tertiary);
        border-color: var(--color-border-default);
        color: var(--color-text-secondary);
    }

    .dark-mode .xdsoft_datetimepicker .xdsoft_calendar th {
        background: var(--color-surface);
        color: var(--color-text-secondary);
        font-weight: 700;
    }

    .dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
        color: var(--color-accent-primary);
    }

    .dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
    .dark-mode .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
    .dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
        background: var(--color-accent-primary-dim);
        box-shadow: var(--color-accent-primary) 0 1px 3px 0 inset;
        color: var(--color-text-on-accent);
        font-weight: 700;
    }

    .dark-mode .xdsoft_datetimepicker .xdsoft_calendar td:hover,
    .dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
        background: var(--color-accent-primary) !important;
        color: var(--color-text-on-accent) !important;
        box-shadow: none !important;
    }

    .dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
        border-bottom-color: var(--color-border-default);
    }

        .dark-mode .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
            background: var(--color-background-tertiary);
            border-top-color: var(--color-border-default);
            color: var(--color-text-secondary);
        }

.dark-mode .xdsoft_time_box {
    border-color: var(--color-border-default);
}

.dark-mode .xdsoft_scrollbar > .xdsoft_scroller {
    background: var(--color-accent-primary-dim) !important;
}

.dark-mode .xdsoft_datetimepicker .xdsoft_copyright {
    color: var(--color-text-secondary) !important;
}

/* ===== Contacts & Prospects ===== */

.dark-mode .contactsTable a,
.dark-mode .prospectsTable a {
    color: var(--color-text-primary);
}

.dark-mode thead .contactCheckColumn,
.dark-mode thead .prospectCheckColumn {
    border-right-color: var(--color-border-default);
}

.dark-mode .contactsMultipleSections,
.dark-mode .prospectsMultipleSections {
    background-color: var(--color-surface);
}

.dark-mode .glyphicon-star,
.dark-mode .prospectBuyerGatewayColumn .glyphicon-ok {
    color: var(--color-success-text);
}

    .dark-mode .glyphicon-star:hover {
        color: var(--color-success);
    }

.dark-mode .btn-default.btn-star {
    border-color: var(--color-success);
    background-color: var(--color-success-subtle);
    color: var(--color-success-text);
}

.dark-mode .table .btn-star:hover,
.dark-mode .table .btn-star:hover span {
    color: var(--color-success-text);
    border-color: var(--color-success);
    background-color: var(--color-success-subtle);
}

.dark-mode .prospectBuyerGatewayColumn .glyphicon-remove {
    color: var(--color-danger-text);
}

.dark-mode a.prospectSavedListing {
    color: var(--color-info);
}

.dark-mode .prospectCls {
    border-color: var(--color-border-focus);
    color: var(--color-text-primary);
}

.dark-mode .contactID {
    color: var(--color-text-secondary);
}

.dark-mode .contactSharing {
    color: var(--color-warning);
}

/* ===== Checkboxes & Radio Buttons ===== */

.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dark-mode input[type="radio"] {
    border-radius: 50%;
}

.dark-mode input[type="checkbox"] {
    border-radius: 2px;
}

    .dark-mode input[type="checkbox"]:focus,
    .dark-mode input[type="radio"]:focus {
        outline: 2px solid var(--color-border-focus);
        outline-offset: 2px;
    }

    .dark-mode input[type="checkbox"]:checked,
    .dark-mode input[type="radio"]:checked {
        background-color: var(--color-info);
        border-color: var(--color-info);
    }

        .dark-mode input[type="checkbox"]:checked::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 4px;
            width: 4px;
            height: 8px;
            border: 2px solid var(--color-text-on-accent);
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }

        .dark-mode input[type="radio"]:checked::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40%;
            height: 40%;
            background-color: var(--color-text-on-accent);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

    .dark-mode input[type="checkbox"]:disabled,
    .dark-mode input[type="radio"]:disabled {
        background-color: var(--color-background-tertiary);
        border-color: var(--color-border-default);
        opacity: 0.4;
        cursor: not-allowed;
    }

    .dark-mode input[type="checkbox"]:indeterminate {
        background-color: var(--color-accent-secondary);
        border-color: var(--color-accent-secondary);
    }

        .dark-mode input[type="checkbox"]:indeterminate::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 15%;
            width: 70%;
            height: 2px;
            background-color: var(--color-text-on-accent);
            transform: translateY(-50%);
        }