/* Dark mode overrides for dsm_ui_2022.css and theme-dark.min.css, enabled by features/theme/theme-appearance.html. */

:root {
    --dsm-dark-page: #121417;
    --dsm-dark-header: #181a1d;
    --dsm-dark-card: #1a1c1f;
    --dsm-dark-raised: #24272b;
    --dsm-dark-border: #34393e;
    --dsm-dark-input: #101214;
    --dsm-dark-input-border: #42484f;
    --dsm-dark-thead: #202327;
    --dsm-dark-track: #33383d;
    --dsm-dark-hover: rgba(255, 255, 255, 0.04);
    --dsm-dark-text: #d5d9dd;
    --dsm-dark-heading: #f8f9fa;
    --dsm-dark-muted: #a7aeb5;
    --dsm-dark-link: #7aabff;
    --dsm-dark-link-hover: #a3c4ff;
    --dsm-dark-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.25);

    /* Bootstrap */
    --bs-body-color: var(--dsm-dark-text);
    --bs-body-color-rgb: 213, 217, 221;
    --bs-body-bg: var(--dsm-dark-page);
    --bs-body-bg-rgb: 18, 20, 23;
    --bs-border-color: var(--dsm-dark-border);
    --bs-link-color: var(--dsm-dark-link);
    --bs-link-hover-color: var(--dsm-dark-link-hover);

    /* Page colors (see dsm_ui_2022.css) */
    --dsm-page-bg: var(--dsm-dark-page);
    --dsm-surface-bg: var(--dsm-dark-card);
    --dsm-muted-bg: var(--dsm-dark-raised);
    --dsm-highlight-bg: rgba(55, 125, 255, 0.15);
    --dsm-hover-bg: #2e3237;
    --dsm-border-color: var(--dsm-dark-border);
    --dsm-shadow-color: rgba(0, 0, 0, 0.4);
    --dsm-heading-color: var(--dsm-dark-heading);
    --dsm-warning-text: #fbc96f;
    --dsm-warning-text-hover: #fde0a6;
    --dsm-warning-bg: rgba(249, 191, 86, 0.14);
    --dsm-success-text: #3ddbb8;
    --dsm-success-bg: rgba(0, 201, 167, 0.16);
}

/* General ****************************************************************************************/

body {
    background-color: var(--dsm-dark-page)!important;
    color: var(--dsm-dark-text);
}

.page-header {
    border-color: var(--dsm-dark-border);
}

.footer {
    color: var(--dsm-dark-muted);
}

.card-title,
.card-header-title,
.page-header-title,
.form-label,
.col-form-label {
    color: var(--dsm-dark-heading);
}

.text-muted,
.card-subtitle {
    color: var(--dsm-dark-muted)!important;
}

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

/* Blue on hover, as in light mode (the theme uses white). */
.link-secondary[href]:hover,
.text-body[href]:hover,
.text-muted[href]:hover,
.text-secondary[href]:hover {
    color: var(--dsm-dark-link)!important;
}

.btn-link {
    color: var(--dsm-dark-link);
}

.nav-link {
    color: var(--bs-nav-link-color);
}

/* The theme makes .bg-warning dark gray. */
.bg-warning {
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1))!important;
}

.bg-white {
    background-color: var(--dsm-dark-card)!important;
}

.popover-header {
    border-bottom-color: var(--dsm-dark-border);
}

.dsm-rescore-popover {
    --bs-popover-border-color: var(--dsm-dark-border);
}

.flatpickr-calendar .flatpickr-day.today {
    color: #ffffff;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled, .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(255, 255, 255, 0.3);
}

/* Cards ******************************************************************************************/

.card {
    --bs-card-bg: var(--dsm-dark-card);
    --bs-card-border-color: var(--dsm-dark-border);
    background-color: var(--dsm-dark-card);
    border-color: var(--dsm-dark-border);
    box-shadow: var(--dsm-dark-shadow);
}

.card-header,
.card-footer {
    border-color: var(--dsm-dark-border);
}

/* Ghost cards sit inside another card. */
.card-ghost {
    background-color: transparent;
    box-shadow: none;
}

.col-sm-divider > :not(:first-child)::before {
    background-color: var(--dsm-dark-border);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--dsm-dark-text);
    --bs-list-group-border-color: var(--dsm-dark-border);
}

/* Forms ******************************************************************************************/

.form-control,
.form-select,
.input-group-text {
    background-color: var(--dsm-dark-input);
    border-color: var(--dsm-dark-input-border);
    color: var(--dsm-dark-heading);
}

/* Dark date pickers and option lists. Not set on :root, which gives light iframes a white backdrop. */
input,
select,
textarea {
    color-scheme: dark;
}

select optgroup,
select option {
    background-color: var(--dsm-dark-input);
    color: var(--dsm-dark-heading);
}

select optgroup {
    color: var(--dsm-dark-muted);
}

.input-group-merge {
    border-color: var(--dsm-dark-input-border);
}

.form-control::placeholder {
    color: var(--dsm-dark-muted);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--dsm-dark-input);
    border-color: #377dff;
    box-shadow: 0 0 0 0.2rem rgba(55, 125, 255, 0.25);
    color: var(--dsm-dark-heading);
}

.form-control.disabled, .form-control:disabled, .form-select.disabled, .form-select:disabled {
    background-color: var(--dsm-dark-card);
    color: var(--dsm-dark-muted)!important;
}

.form-select-borderless {
    background-color: transparent;
}

.form-check-input:not(:checked) {
    background-color: var(--dsm-dark-input);
    border-color: var(--dsm-dark-input-border)!important;
}

/* Off state only, so checked switches keep their color. */
.form-switch .form-check-input:not(:checked) {
    background-color: var(--dsm-dark-track);
}

.tom-select-custom .ts-input.disabled {
    background: var(--dsm-dark-card)!important;
}

/* Buttons ****************************************************************************************/

/* Hover lightens a button instead of the theme's glow. Keyboard focus gets a ring. */
.btn:hover,
.btn:focus,
.btn-check:focus + .btn {
    box-shadow: none;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 0.2rem rgba(55, 125, 255, 0.35);
}

.btn-primary {
    --bs-btn-hover-bg: #5c97ff;
    --bs-btn-hover-border-color: #5c97ff;
}

.btn-success {
    --bs-btn-hover-bg: #3ddbbe;
    --bs-btn-hover-border-color: #3ddbbe;
}

.btn-danger {
    --bs-btn-hover-bg: #f37a9b;
    --bs-btn-hover-border-color: #f37a9b;
}

.btn-secondary {
    --bs-btn-hover-bg: #8a9197;
    --bs-btn-hover-border-color: #8a9197;
}

.btn-info {
    --bs-btn-hover-bg: #3fc0d4;
    --bs-btn-hover-border-color: #3fc0d4;
}

.btn-warning {
    --bs-btn-hover-bg: #fcd48a;
    --bs-btn-hover-border-color: #fcd48a;
    --bs-btn-active-bg: #f2b03c;
    --bs-btn-active-border-color: #f2b03c;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    color: #1e2022;
}

.btn-outline-primary {
    --bs-btn-hover-color: #c2d8ff;
    --bs-btn-hover-bg: rgba(55, 125, 255, 0.28);
}

/* The theme clears button borders on hover. */
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    border-color: #377dff;
}

.btn-soft-primary {
    color: #8db8ff;
    background-color: rgba(55, 125, 255, 0.22);
}

.btn-check:focus+.btn-soft-primary, .btn-soft-primary:focus, .btn-soft-primary:hover {
    color: #ffffff;
    background-color: rgba(55, 125, 255, 0.45);
}

.btn-ghost-secondary:hover,
.btn-ghost-secondary:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.14);
}

.btn-white {
    background-color: var(--dsm-dark-raised);
    border-color: var(--dsm-dark-input-border);
    color: var(--dsm-dark-text);
}

.btn-check:focus+.btn-white, .btn-white:focus, .btn-white:hover {
    background-color: #3a3f45;
    border-color: #50565e;
    color: #ffffff;
}

/* Tables *****************************************************************************************/

.table {
    --bs-table-border-color: var(--dsm-dark-border);
    --bs-table-hover-bg: var(--dsm-dark-hover);
    color: var(--dsm-dark-text);
}

.table > :not(caption) > * > *,
.table>:not(:first-child) {
    border-color: var(--dsm-dark-border);
}

.thead-light th {
    background-color: var(--dsm-dark-thead);
    color: var(--dsm-dark-muted);
    border-color: var(--dsm-dark-border)!important;
}

.page-link {
    background-color: var(--dsm-dark-card);
    border-color: var(--dsm-dark-border);
    color: var(--dsm-dark-text);
}

.page-item.active .page-link {
    background-color: #377dff;
    border-color: #377dff;
    color: #ffffff;
}

.page-item.disabled .page-link {
    background-color: var(--dsm-dark-card);
    color: var(--dsm-dark-muted);
}

/* Navigation *************************************************************************************/

.nav-vertical.nav-tabs .nav-link {
    color: var(--dsm-dark-text);
}

.nav-vertical.nav-tabs .nav-link:hover,
.nav-vertical.nav-tabs .nav-link:focus {
    color: var(--dsm-dark-link);
}

.nav-vertical.nav-tabs .nav-link.disabled {
    color: #5b636b;
}

/* Card and modal selectors outrank the theme's. */
.nav-segment,
.card .nav-segment,
.modal .nav-segment {
    background-color: var(--dsm-dark-input);
    border: 1px solid var(--dsm-dark-border);
}

.nav-segment .nav-link {
    color: var(--dsm-dark-muted);
}

.nav-segment .nav-link:hover {
    color: var(--dsm-dark-heading);
}

.nav-segment .nav-link.active {
    color: var(--dsm-dark-heading);
    background-color: var(--dsm-dark-raised);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.nav-vertical.nav-tabs .nav-link.active {
    color: var(--dsm-dark-link)!important;
    border-color: #377dff!important;
}

/* Header *****************************************************************************************/

#header.bg-white {
    background-color: var(--dsm-dark-header)!important;
    border-color: var(--dsm-dark-border);
}

#header .navbar-nav .nav-link {
    color: var(--dsm-dark-text);
}

#header .navbar-nav .nav-link.active,
#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link:focus {
    color: var(--dsm-dark-link);
}

#navbarNotificationsDropdown,
#navbarGlobalSearchDropdown {
    border-color: var(--dsm-dark-border)!important;
}

.dsm-notifications-badge {
    border-color: var(--dsm-dark-header);
}

/* Menus ******************************************************************************************/

.dropdown-menu {
    --bs-dropdown-bg: var(--dsm-dark-raised);
    --bs-dropdown-link-color: var(--dsm-dark-text);
    --bs-dropdown-link-hover-bg: var(--dsm-dark-hover);
    --bs-dropdown-divider-bg: var(--dsm-dark-border);
    background-color: var(--dsm-dark-raised);
    border: 1px solid var(--dsm-dark-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.dropdown-item:hover,
.dropdown-item.active {
    background-color: rgba(55, 125, 255, 0.14);
    color: var(--dsm-dark-heading);
}

.dropdown-menu .card-header {
    border-bottom-color: var(--dsm-dark-border);
}

.dropdown-menu .card-footer {
    border-top-color: var(--dsm-dark-border);
}

/* Feedback ***************************************************************************************/

/* The theme's secondary text is too dim. */
.text-secondary {
    color: var(--dsm-dark-muted)!important;
}

.bg-soft-secondary {
    background-color: rgba(167, 174, 181, 0.14)!important;
}

.badge.bg-warning.text-white {
    color: #1e2022!important;
}

.progress {
    --bs-progress-bg: var(--dsm-dark-track);
    background-color: var(--dsm-dark-track);
}

.alert-soft-primary {
    background-color: rgba(55, 125, 255, 0.12);
    border: 1px solid rgba(55, 125, 255, 0.25);
    color: var(--dsm-dark-link);
}

.badge.bg-soft-dark {
    background-color: rgba(55, 125, 255, 0.2)!important;
    color: var(--dsm-dark-link)!important;
}

/* Modals *****************************************************************************************/

/* Darker backdrop and a deep shadow so modals stand out from the page. */
.modal {
    --bs-modal-bg: var(--dsm-dark-card);
    --bs-modal-border-color: var(--dsm-dark-input-border);
    --bs-modal-header-border-color: var(--dsm-dark-border);
    --bs-modal-footer-border-color: var(--dsm-dark-border);
}

.modal-content {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.modal-backdrop {
    --bs-backdrop-bg: rgba(0, 0, 0, 0.7);
}

.offcanvas {
    --bs-offcanvas-bg: var(--dsm-dark-card);
}

.dsm-modal-content {
    background-color: var(--dsm-dark-page);
}

.toggle-child-divider {
    background-color: var(--dsm-dark-border);
}

/* Multiselect ************************************************************************************/

.dsm-multiselect .dsm-multiselect-placeholder {
    color: var(--dsm-dark-muted);
}

.dsm-multiselect .dsm-multiselect-menu {
    background-color: var(--dsm-dark-raised);
    border-color: var(--dsm-dark-border);
}

.dsm-multiselect--dropdown .dsm-multiselect-menu {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.dsm-multiselect .dsm-multiselect-search-container {
    border-bottom-color: var(--dsm-dark-border);
}

.dsm-multiselect .dsm-multiselect-option {
    color: var(--dsm-dark-text);
}

.dsm-multiselect .dsm-multiselect-option:hover {
    color: var(--dsm-dark-heading);
    background-color: rgba(55, 125, 255, 0.14);
}

.dsm-multiselect .dsm-multiselect-footer {
    border-top-color: var(--dsm-dark-border);
}

.dsm-multiselect.dsm-multiselect--disabled .dsm-multiselect-toggle {
    background-color: var(--dsm-dark-card);
}

/* Dashboard **************************************************************************************/

.btn-add-chart {
    border-color: var(--dsm-dark-input-border);
}

.btn-add-chart:hover {
    background-color: var(--dsm-dark-raised);
}

/* Filters ****************************************************************************************/

.dsm-filters .offcanvas-body {
    background-color: var(--dsm-dark-page);
}

.dsm-filters .dsm-filter-group {
    background-color: var(--dsm-dark-card);
    border-color: var(--dsm-dark-border);
}

.dsm-filters .dsm-filter-group-title,
.dsm-filters-caret,
.dsm-filters-sets-label {
    color: var(--dsm-dark-muted);
}

.dsm-columns-list .dsm-column-handle {
    color: var(--dsm-dark-input-border);
}

.dsm-columns-list .dsm-column-chosen {
    background-color: var(--dsm-dark-raised);
}

.offcanvas.dsm-filters-docked {
    --bs-offcanvas-border-color: var(--dsm-dark-border);
    box-shadow: var(--dsm-dark-shadow);
}

.offcanvas.dsm-filters-docked .offcanvas-header,
.dsm-filters-sets,
.dsm-filters-sets .input-group > .btn,
.dsm-filters-footer,
.dsm-filters-note {
    border-color: var(--dsm-dark-border);
}

.offcanvas.dsm-filters-docked .offcanvas-header.dsm-filters-scrolled {
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.6);
}

.dsm-filters-sets .input-group > .btn:hover,
.dsm-filters-sets .input-group > .btn:focus,
.dsm-filters-sets .input-group > .btn.show {
    background-color: var(--dsm-dark-raised);
}

/* Account ****************************************************************************************/

/* Two-factor pages shown in the Account > Security modal. */
.dsm-framed body {
    background-color: var(--dsm-dark-card)!important;
}

/* QR codes need a white border to scan. */
[id="2fa-qr"] {
    padding: 0.5rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
}

/* White behind the see-through card brand logos, clipped to the card shape. */
.source-icon svg[data-prefix="fab"] {
    background-color: #ffffff;
    clip-path: inset(calc(6.25% + 0.5px) calc((100% - 1.125em) / 2 + 0.5px) round 0.094em);
}

.source-icon .fa-credit-card {
    color: var(--dsm-dark-text)!important;
}

/* Signature (Account > Security > Signature Settings) *********************************************/

.epn-review-action {
    color: var(--dsm-dark-muted);
    background-color: var(--dsm-dark-card);
    border-color: var(--dsm-dark-border);
    box-shadow: none;
}

.epn-review-header {
    border-bottom-color: var(--dsm-dark-border);
}

.epn-review-title,
.epn-review-attestation,
.epn-review-hint b,
.epn-review-step-title {
    color: var(--dsm-dark-heading);
}

.epn-review-link,
.epn-review-link-button,
.signature-pad-clear {
    color: var(--dsm-dark-link);
}

.epn-review-link:hover, .epn-review-link:focus,
.epn-review-link-button:hover, .epn-review-link-button:focus,
.signature-pad-clear:hover, .signature-pad-clear:focus {
    color: var(--dsm-dark-link-hover);
}

.epn-review-input {
    color: var(--dsm-dark-heading);
    background-color: var(--dsm-dark-input);
    border-color: var(--dsm-dark-input-border);
}

.epn-review-input:focus {
    border-color: #377dff;
    box-shadow: 0 0 0 0.2rem rgba(55, 125, 255, 0.25);
}

.epn-review-step:not(:last-child)::before {
    background-color: var(--dsm-dark-border);
}

.epn-review-step.is-disabled .epn-review-step-number {
    background-color: #4b5157;
}

.epn-review-switch {
    background-color: var(--dsm-dark-input);
}

.epn-review-switch-option {
    color: var(--dsm-dark-muted);
}

.epn-review-switch-option.is-active {
    color: var(--dsm-dark-heading);
    background-color: var(--dsm-dark-raised);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.epn-review-pill {
    color: var(--dsm-dark-link);
    background-color: var(--dsm-dark-input);
    border-color: var(--dsm-dark-input-border);
}

.epn-review-pill.is-font {
    color: var(--dsm-dark-heading);
}

.epn-review-print-note {
    background-color: var(--dsm-dark-raised);
}

.signature-pad-footer {
    color: var(--dsm-dark-muted);
}

.epn-review-error {
    color: #ff8fab;
    background-color: rgba(237, 76, 120, 0.16);
}

/* Stays white like the printed report. */
.epn-review-confirm {
    background-color: #ffffff;
    border-color: #bdc5d1;
}

/* Help *******************************************************************************************/

.quick-search,
.quick-search .list-group-item {
    background-color: var(--dsm-dark-raised);
    border-color: var(--dsm-dark-border);
}

.quick-search {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Opaque, since the results overlap the content below. */
.quick-search .list-group-item-action:hover,
.quick-search .list-group-item-action:focus {
    background-color: var(--dsm-dark-raised);
    background-image: linear-gradient(rgba(55, 125, 255, 0.14), rgba(55, 125, 255, 0.14));
}

.category .article-list {
    background-color: var(--dsm-dark-raised);
    border: 1px solid var(--dsm-dark-border);
    border-top: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    left: -1px;
    width: calc(100% + 2px);
}

.card .vote-container,
.vote-container {
    border-top-color: var(--dsm-dark-border);
}

.vote-container #vote-up,
.vote-container #vote-down {
    background-color: transparent;
}

.vote-container #vote-up:hover {
    background-color: #5cb85c;
    color: #ffffff;
}

.vote-container #vote-down:hover {
    background-color: #d9534f;
    color: #ffffff;
}

/* Notifications **********************************************************************************/

/* Notifications are emails with their own light colors. */
#dsm-notification-iframe {
    background-color: #ffffff;
    border-radius: 0.5rem;
}