// --------------------------------------------------
// Css Variables with class
// --------------------------------------------------

.card {
  --bs-card-title-color: rgba(255, 255, 255, 0.85);
  --bs-card-subtitle-color: rgba(255, 255, 255, 0.6);
  --bs-card-bg: #1a2537;
  --bs-card-box-shadow: none;
}

body .text-muted {
  color: #68757a !important;
}

a,
.nav-link:hover,
.nav-link:focus {
  color: rgba(var(--bs-link-color-rgb), 0.85);
}

.link-dark,
.blockquote-footer {
  color: rgba(var(--bs-link-color-rgb), 0.85) !important;
}

.table {
  --bs-table-border-color: #313e54;
  --bs-table-bg: #1a2537;
}

.dropdown-menu {
  --bs-dropdown-bg: #1a2537;
  --bs-dropdown-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: #1a2537;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: #2a3851;
}

.accordion-item,
.accordion-item:focus {
  --bs-accordion-btn-color: #eaeff4;
  --bs-accordion-border-color: #333f55;
}

// --------------------------------------------------
// Font Colors
// --------------------------------------------------

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
.select2-container--classic .select2-results__group,
.accordion-button:not(.collapsed),
.tox .tox-tbtn,
div:where(.swal2-container) .swal2-html-container,
.mce-content-body p {
  color: rgba(255, 255, 255, 0.85);
}

.tooltip-inner,
.text-dark,
.text-dark-light,
.form-label,
.col-form-label,
.table > :not(caption) > * > *,
.picker,
.dtp table.dtp-picker-days tr > td > a,
.dtp .dtp-picker-time > a,
.dtp table.dtp-picker-days tr > th,
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before,
.noUi-tooltip {
  color: $body-color-dark !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.breadcrumb-item + .breadcrumb-item::before {
  color: $link-color-dark;
}

.text-bg-light,
.bg-light,
.striped-rows .row:nth-child(odd),
.bg-hover-light-black:hover,
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--bs-card-title-color) !important;
}

// --------------------------------------------------
// Background Colors
// --------------------------------------------------

.side-mini-panel,
.side-mini-panel .mini-nav,
.side-mini-panel .mini-nav .mini-nav-item > a,
.body-wrapper,
.noUi-handle,
.noUi-tooltip {
  background: $dark-bg-variant !important;
}

.theme-tab.nav-tabs .nav-item .nav-link,
.app-calendar .fc-theme-standard th,
.app-calendar .event-fc-color:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.form-control:disabled,
.bg-white {
  background-color: $dark-bg-variant !important;
}

.side-mini-panel .sidebarmenu .sidebar-nav,
.picker__box,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect,
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
div:where(.swal2-container) div:where(.swal2-popup),
.bootstrap-switch .bootstrap-switch-label,
.app-chat-offcanvas,
.picker__button--today,
.picker__button--clear,
.picker__button--close,
.dtp > .dtp-content,
.dtp table.dtp-picker-days,
.dtp table.dtp-picker-days tr,
.dtp table.dtp-picker-days tr > td {
  background: $body-bg-dark !important;
}

.offcanvas,
.floating-labels .form-control {
  background-color: $body-bg-dark !important;
}

.text-bg-light,
.bg-light,
.striped-rows .row:nth-child(odd),
.bg-hover-light-black:hover,
.list-group-item-action:hover,
.list-group-item-action:focus,
.select2-container--default .select2-selection--single,
.select2-dropdown,
.select2-container--default .select2-selection--multiple,
.select2-container--classic .select2-selection--single,
.select2-container--classic .select2-dropdown,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker .ranges li:hover,
.ql-snow .ql-picker-options,
.noUi-target,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current:after,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:before,
.wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:after,
.wizard-content .wizard > .steps > ul > li.current .step,
.wizard-content .wizard > .steps .step {
  background-color: $dark-bg-variant !important;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover,
.twitter-typeahead .tt-menu {
  background: $light-bg-subtle-dark;
}

.wizard-content .wizard > .actions > ul > li > a[href="#previous"],
.select2-container--classic .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field,
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.table-responsive .dataTables_wrapper .dataTables_filter input,
.table-responsive .dataTables_wrapper .dataTables_length select,
.dropdown-item:hover,
.dropdown-item:focus,
.comment-widgets .comment-row.active,
.comment-widgets .comment-row:hover,
.form-control:disabled,
.select2-container--default.select2-container--disabled
  .select2-selection--single,
body
  .select2-container--default.select2-container--disabled
  .select2-selection--multiple,
.daterangepicker,
.daterangepicker .calendar-table {
  background-color: $dark-bg-subtle-dark;
}

.dp-off {
  background-color: $dark-bg-subtle-dark !important;
}

// --------------------------------------------------
// Border Colors
// --------------------------------------------------
.border-white,
.floating-labels .form-control,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options,
div:where(.swal2-container) div:where(.swal2-footer),
.myadmin-dd-empty .dd-list .dd3-content,
.myadmin-dd-empty .dd-list .dd3-handle,
.twitter-typeahead .league-name,
.wizard > .content > .body input,
.wizard-content .wizard > .actions > ul > li > a[href="#previous"],
.daterangepicker .calendar-table,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect,
.table-responsive .dataTables_wrapper .dataTables_filter input,
.table-responsive .dataTables_wrapper .dataTables_length select,
.noUi-tooltip,
.twitter-typeahead .tt-menu,
.ql-toolbar.ql-snow,
.daterangepicker.show-ranges.ltr .drp-calendar.left,
.picker__box,
.picker__button--today,
.picker__button--clear,
.picker__button--close,
.ql-container.ql-snow {
  border-color: $border-color-dark !important;
}

.form-check-input {
  border: 1px solid #57647a;
}

// ----------------------------------
// form components
// ----------------------------------

.form-select,
.form-select:focus,
.form-control,
.form-control:focus {
  border-color: $border-color-dark;
  color: $body-color-dark;
  background-color: $dark-bg-variant;
}

.form-control:focus {
  border-color: var(--bs-primary) !important;
}

input::file-selector-button {
  background-color: $dark-bg-variant;
  color: $body-color-dark;
}

.input-group-text {
  background-color: $light-bg-subtle-dark;
  border: var(--bs-table-border-color);
  color: $body-color-dark;
}

// ----------------------------------
// ui components
// ----------------------------------

.theme-tab {
  background-color: $body-bg-dark;

  .nav-item .nav-link.active {
    background-color: $light-bg-subtle-dark;
    color: $white;
  }
}

// ----------------------------------
// plugins
// ----------------------------------

.app-calendar .fc .fc-button-primary {
  background-color: var(--bs-body-bg-dark);
  border-color: $border-color-dark;
}

.app-calendar .fc .fc-addEventButton-button {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.app-calendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background-color: $body-bg-dark;
}

.ql-snow .ql-stroke {
  stroke: $body-color-dark;
}

.select2-container--classic .select2-selection--single,
.select2-container--classic.select2-container--open.select2-container--above
  .select2-selection--single,
.select2-container--classic.select2-container--open.select2-container--below
  .select2-selection--single {
  background-image: linear-gradient(
    to bottom,
    $light-bg-subtle-dark 50%,
    $light-bg-subtle-dark 100%
  );
}

.daterangepicker:after,
.datepicker-dropdown:before {
  border-bottom: 6px solid $dark-bg-subtle-dark;
}

.daterangepicker:before {
  border-bottom: 7px solid $dark-bg-subtle-dark;
}

.datepicker-dropdown:after {
  border-bottom: 6px solid $dark-bg-subtle-dark;
}

.daterangepicker.drop-up:after,
.datepicker-dropdown.datepicker-orient-top:after {
  border-top: 6px solid $dark-bg-subtle-dark;
}

.daterangepicker.drop-up:before,
.datepicker-dropdown.datepicker-orient-top:before {
  border-top: 7px solid $dark-bg-subtle-dark;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) > * {
  box-shadow: inset 0 0 0 9999px $light-bg-subtle-dark;
}

.CodeMirror-gutters,
.CodeMirror {
  background-color: $dark-bg-variant;
  border-color: $border-color-dark;
  color: rgba(255, 255, 255, 0.85);
}

.tox-tinymce,
.tox .tox-mbtn,
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary,
.tox .tox-promotion,
.tox .tox-menubar,
.tox .tox-toolbar-overlord,
.tox .tox-tbtn--bespoke,
.tox .tox-menu,
.tox
  .tox-collection--list
  .tox-collection__item--active:not(.tox-collection__item--state-disabled),
.tox .tox-collection__item,
.tox .tox-edit-area__iframe,
.tox .tox-statusbar,
.tox:not(.tox-tinymce-inline) .tox-editor-header,
.tox .tox-tbtn--disabled,
.tox .tox-tbtn--disabled:hover,
.tox .tox-tbtn:disabled,
.tox .tox-tbtn:disabled:hover {
  background-color: $dark-bg-variant;
  border-color: $border-color-dark;
  color: rgba(255, 255, 255, 0.85);
}

.tox .tox-tbtn svg,
.tox .tox-tbtn--disabled svg,
.tox .tox-tbtn--disabled:hover svg,
.tox .tox-tbtn:disabled svg,
.tox .tox-tbtn:disabled:hover svg {
  fill: rgba(255, 255, 255, 0.85);
}

.picker__nav--prev:before {
  border-right: 0.75em solid var(--bs-border-color);
}

.picker__nav--next:before {
  border-left: 0.75em solid var(--bs-border-color);
}

.connect-sorting-todo,
.connect-sorting {
  background: var(--bs-dark-bg-subtle);
}

// form wizard

.wizard-content .wizard > .steps .step {
  border: 3px solid $border-color-dark !important;
}
