[data-theme=dark] {
   color: #bebebe;
   background-color: #222
}

[data-theme=dark] pre {
   color: #bebebe
}

[data-theme=dark] img.icon,
[data-theme=dark] svg.icon {
   filter: invert(1)
}

[data-theme=dark] .dropdown-menu {
   background-color: #171717;
   border-color: #404040
}

[data-theme=dark] .dropdown-item:not(:disabled):not(.disabled) {
   color: #bebebe
}

[data-theme=dark] .dropdown-item-text {
   color: #bebebe
}

[data-theme=dark] .dropdown-item:focus,
[data-theme=dark] .dropdown-item:hover {
   background-color: #242424
}

[data-theme=dark] .dropdown-divider {
   border-top-color: #404040
}

[data-theme=dark] .card {
   color: #bebebe;
   background-color: #181818;
   border-color: #404040;
}

[data-theme=dark] .card-header,
[data-theme=dark] .card-footer {
   color: #bebebe;
   background-color: #202020;
   border-top-color: #404040;
   border-bottom-color: #404040;
}

[data-theme=dark] .form-control,
[data-theme=dark] .form-control-lg {
   color: #bebebe;
   background-color: #171717;
   border-color: #404040;
}

[data-theme=dark] .select2-selection,
[data-theme=dark] .selection {
   color: #bebebe;
   background-color: #171717;
   border-color: #404040;
}

[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
   color: #bebebe
}

[data-theme=dark] .select2-results__option {
   color: #bebebe;
   background-color: #171717;
   border-color: #404040
}

[data-theme=dark] .select2-search__field,
[data-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
   color: #bebebe;
   background-color: #171717;
   border-color: #404040
}

/* Der Aufklapper selbst ist hell, auch wenn die Eintraege darin dunkel sind. */
[data-theme=dark] .select2-dropdown {
   background-color: #171717;
   border-color: #404040
}

[data-theme=dark] .select2-results__option--highlighted {
   background-color: #2d2d2d;
   color: #fff
}

[data-theme=dark] .form-select {
   color: #bebebe;
   background-color: #171717;
   border-color: #404040;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjYmViZWJlJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS13aWR0aD0nMicgZD0nbTIgNSA2IDYgNi02Jy8+PC9zdmc+)
}

[data-theme=dark] .input-group-text {
   color: #bebebe;
   background-color: #202020;
   border-color: #404040
}

[data-theme=dark] .page-item .page-link {
   color: #bebebe;
   border-color: #404040
}

[data-theme=dark] .page-item.disabled .page-link {
   background-color: #171717;
   color: #bebebe
}

[data-theme=dark] .page-item:not(.active) .page-link {
   background-color: #171717
}

[data-theme=dark] .page-item:not(.active) .page-link:hover {
   background-color: #242424
}

[data-theme=dark] .nav-tabs {
   border-bottom-color: #404040
}

[data-theme=dark] .nav-tabs .nav-link:focus,
[data-theme=dark] .nav-tabs .nav-link:hover {
   color: pink;
   background-color: #242424;
   border-color: #404040
}

[data-theme=dark] .nav-tabs .nav-item.show .nav-link,
[data-theme=dark] .nav-tabs .nav-link.active {
   color: pink;
   background-color: #222;
   border-color: #404040;
   border-bottom-color: #222
}

[data-theme=dark] .nav-tabs.card-header-tabs .nav-item.show .nav-link,
[data-theme=dark] .nav-tabs.card-header-tabs .nav-link.active {
   color: pink;
   background-color: #181818;
   border-bottom-color: #181818
}

[data-theme=dark] .popover {
   background-color: #222;
   border-color: #404040
}

[data-theme=dark] .popover-body {
   color: #bebebe
}

[data-theme=dark] .popover-header {
   background-color: #202020;
   border-bottom-color: #404040
}

[data-theme=dark] .bs-popover-top>.popover-arrow::before,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before {
   border-top-color: #404040
}

[data-theme=dark] .bs-popover-top>.popover-arrow::after,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
   border-top-color: #222
}

[data-theme=dark] .bs-popover-end>.popover-arrow::before,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before {
   border-right-color: #404040
}

[data-theme=dark] .bs-popover-end>.popover-arrow::after,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after {
   border-right-color: #222
}

[data-theme=dark] .bs-popover-bottom>.popover-arrow::before,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before {
   border-bottom-color: #404040
}

[data-theme=dark] .bs-popover-bottom>.popover-arrow::after,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
   border-bottom-color: #222
}

[data-theme=dark] .bs-popover-start>.popover-arrow::before,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before {
   border-left-color: #404040
}

[data-theme=dark] .bs-popover-start>.popover-arrow::after,
[data-theme=dark] .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after {
   border-left-color: #222
}

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

[data-theme=dark] .modal-header,
[data-theme=dark] .modal-footer {
   color: #bebebe;
   background-color: #202020;
   border-bottom-color: #404040;
   border-top-color: #404040
}

[data-theme=dark] .modal-content {
   color: #bebebe;
   background-color: #222;
   border-color: #404040
}

[data-theme=dark] .img-revert {
   filter: invert(100%);
   /* feste dunkle Ausgangsfarbe wie unter BS4: nach dem invert wird daraus ein gut sichtbares helles Icon.
      BS5.3 (data-bs-theme=dark) gibt Buttons sonst eine helle Textfarbe, die invertiert fast unsichtbar wäre.
      Wert anpassen, um die Icon-Helligkeit zu steuern: dunklerer Wert hier = helleres Icon auf der Seite. */
   color: #3a3a3a;
}

/* .btn ausgenommen: ein als Button gestalteter Link bringt seine Schriftfarbe
   selbst mit, sonst stuende auf dem blauen Button rosa Text. */
[data-theme=dark] a:not(.btn) {
   color: pink;
}

[data-theme=dark] a:not(.btn):hover {
   color: #fff !important;
}

/* ===== Akzentfarbe Dark Mode =====
   Im Light Mode ist die Linkfarbe zugleich die Buttonfarbe (beides #0d6efd). Dark Mode bricht
   das, weil Bootstrap 5.3 die Button-Varianten NICHT pro Farbmodus neu faerbt - hier nachgeholt:
   pink ist die eine Farbe fuer alles Anklickbare. Das Pink ist hell, der Text darauf dunkel. */
[data-theme=dark] .btn-primary {
   --bs-btn-color: #212529;
   --bs-btn-bg: pink;
   --bs-btn-border-color: pink;
   --bs-btn-hover-color: #212529;
   --bs-btn-hover-bg: #ff9db0;
   --bs-btn-hover-border-color: #ff9db0;
   --bs-btn-active-color: #212529;
   --bs-btn-active-bg: #ff9db0;
   --bs-btn-active-border-color: #ff9db0;
   --bs-btn-disabled-color: #212529;
   --bs-btn-disabled-bg: pink;
   --bs-btn-disabled-border-color: pink;
   --bs-btn-focus-shadow-rgb: 255, 192, 203;
}

[data-theme=dark] .btn-outline-primary {
   --bs-btn-color: pink;
   --bs-btn-border-color: pink;
   --bs-btn-hover-color: #212529;
   --bs-btn-hover-bg: pink;
   --bs-btn-hover-border-color: pink;
   --bs-btn-active-color: #212529;
   --bs-btn-active-bg: pink;
   --bs-btn-active-border-color: pink;
   --bs-btn-disabled-color: pink;
   --bs-btn-disabled-border-color: pink;
   --bs-btn-focus-shadow-rgb: 255, 192, 203;
}

/* Das Grau traegt weissen Text besser als das geerbte #bebebe (2,5:1 gegenueber 4,7:1). */
[data-theme=dark] .btn-secondary {
   --bs-btn-color: #fff;
   --bs-btn-hover-color: #fff;
   --bs-btn-active-color: #fff;
}

/* Das volle Bootstrap-Rot uebertoente auf dem dunklen Grund die Hauptaktion - der zerstoerende
   Knopf soll warnen, nicht fuehren. Gedaempft wie die Rottoene der Tabellen (inc_size3). */
[data-theme=dark] .btn-danger {
   --bs-btn-bg: #b8303f;
   --bs-btn-border-color: #b8303f;
   --bs-btn-hover-bg: #a32a37;
   --bs-btn-hover-border-color: #a32a37;
   --bs-btn-active-bg: #a32a37;
   --bs-btn-active-border-color: #a32a37;
   --bs-btn-disabled-bg: #b8303f;
   --bs-btn-disabled-border-color: #b8303f;
   --bs-btn-focus-shadow-rgb: 184, 48, 63;
}

/* Der Anhang an einem Eingabefeld gehoert optisch zum Feld: Rahmen wie das Feld, Zeichen so
   hell wie der Feldtext. Bootstraps #6c757d waere auf dem dunklen Grund kaum zu erkennen. */
[data-theme=dark] .btn-outline-secondary {
   --bs-btn-color: #bebebe;
   --bs-btn-border-color: #404040;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #2b2b2b;
   --bs-btn-hover-border-color: #5a5a5a;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #3a3a3a;
   --bs-btn-active-border-color: #5a5a5a;
   --bs-btn-disabled-color: #6c6c6c;
   --bs-btn-disabled-border-color: #3a3a3a;
   --bs-btn-focus-shadow-rgb: 90, 90, 90;
}

/* --bs-primary speist den Rahmen der aktiven Farbflaeche auf der interaktiven Karte und
   --bs-primary-rgb die text-primary-Utility. */
[data-theme=dark] {
   --bs-primary: pink;
   --bs-primary-rgb: 255, 192, 203;
   --bs-focus-ring-color: rgba(255, 192, 203, .25);
}

/* Angehakt/ausgewaehlt gehoert zur selben Familie. Der Haken bzw. Punkt liegt als SVG im
   Hintergrundbild und ist bei Bootstrap weiss - auf dem hellen Pink braucht er den dunklen Ton. */
[data-theme=dark] .form-check-input:checked {
   background-color: pink;
   border-color: pink;
}

[data-theme=dark] .form-check-input:checked[type=checkbox] {
   --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-theme=dark] .form-check-input:checked[type=radio] {
   --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23212529'/%3e%3c/svg%3e");
}

[data-theme=dark] .form-switch .form-check-input:checked {
   --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e");
}

/* Bootstrap schreibt den Fokusrand der Eingabefelder fest als Blau, nicht ueber eine Variable. */
[data-theme=dark] .form-control:focus,
[data-theme=dark] .form-select:focus,
[data-theme=dark] .form-check-input:focus {
   border-color: #ff9db0;
   box-shadow: 0 0 0 .25rem rgba(255, 192, 203, .25);
}

[data-theme=dark] .nav-pills .nav-link.active {
   background-color: pink;
   color: #212529;
}

/* Der markierte Vorschlag (scripts/autocomplete.js) faerbt sich ueber --bs-primary mit, bringt
   seine weisse Schrift aber fest mit - auf dem hellen Pink waere sie nicht zu lesen. */
[data-theme=dark] .dsac-item.active,
[data-theme=dark] .dsac-item:hover,
[data-theme=dark] .dsac-item.active mark,
[data-theme=dark] .dsac-item:hover mark {
   color: #212529;
}

[data-theme=dark] .page-item.active .page-link {
   background-color: #242424;
}

[data-theme=dark] .navbar-nav .nav-item.active .nav-link,
[data-theme=dark] .navbar-nav .nav-item:hover .nav-link:hover {
   color: pink;
}

[data-theme=dark] h1 {
   color: #eee;
}

[data-theme=dark] strong {
   color: #bebebe;
}

[data-theme=dark] .ui-autocomplete {
   color: #bebebe;
   background-color: #202020;
}

[data-theme=dark] th {
   color: #eee;
}

[data-theme=dark] td {
   color: #bebebe
}

[data-theme=dark] .table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
   background-color: #202020;
   /*filter: brightness(50%);*/
}

[data-theme=dark] .dtfc-fixed-left {
   background-color: #343a40 !important;
}

[data-theme=dark] .countdown60 {
   background-color: darkred !important;
   --bs-table-bg: darkred;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .countdown300 {
   background-color: #999900 !important;
   --bs-table-bg: #999900;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .countdown600 {
   background-color: #174417 !important;
   --bs-table-bg: #174417;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .differenceMinus {
   color: #E74639 !important;
}

[data-theme=dark] .differencePlus {
   color: #1ABC9C !important;
}

[data-theme=dark] mark {
   background-color: #404040;
   color: #bebebe;
}

[data-theme=dark] tr.strikeout td {
   background: transparent url('../../img/strike_white.png') 0 50% repeat-x;
}

[data-theme=dark] input[type='time']::-webkit-calendar-picker-indicator {
   filter: invert(100%);
}

[data-theme=dark] input[type='date']::-webkit-calendar-picker-indicator {
   filter: invert(100%);
}

[data-theme=dark] .disabled-nav {
   color: #bebebe !important;
}

[data-theme=dark] .report-modal {
   --rp-line: #404040;
   --rp-band: #1a1a1a;
   --rp-muted: #959595;
}

[data-theme=dark] .relic-quality-shoddy { color: #a0a0a0; }
[data-theme=dark] .relic-quality-polished { color: #62c46f; }
[data-theme=dark] .relic-quality-refined { color: #8c98ff; }
[data-theme=dark] .relic-quality-superior { color: #b38cf2; }
[data-theme=dark] .relic-quality-renowned { color: #e8946f; }

[data-theme=dark] .inc_size1 {
   background-color: #6B8E23 !important;
   --bs-table-bg: #6B8E23;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .inc_size2 {
   background-color: #CCCC00 !important;
   --bs-table-bg: #CCCC00;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .inc_size3 {
   background-color: #800000 !important;
   --bs-table-bg: #800000;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .inc_size4 {
   background-color: #6F9FD8 !important;
   --bs-table-bg: #6F9FD8;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .inc_size5 {
   background-color: #EBAF26 !important;
   --bs-table-bg: #EBAF26;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .inc_size6 {
   background-color: #DA70D6 !important;
   --bs-table-bg: #DA70D6;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .allyConquest {
   background-color: rgba(255,255,255,.1) !important;
   --bs-table-bg: rgba(255,255,255,.1);
   --bs-table-bg-type: initial;
}

[data-theme=dark] .bbConquest {
   background-color: #4e4e4e !important;
   --bs-table-bg: #4e4e4e;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .selfConquest {
   background-color: #1b1938 !important;
   --bs-table-bg: #1b1938;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .internConquest {
   background-color: #360d56 !important;
   --bs-table-bg: #360d56;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .loseConquest {
   background-color: #450505 !important;
   --bs-table-bg: #450505;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .winConquest {
   background-color: #043410 !important;
   --bs-table-bg: #043410;
   --bs-table-bg-type: initial;
}

[data-theme=dark] .multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback), .multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active, .multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback), .multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active, .multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback), .multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active {
   background-color: rgba(255,255,255,.1);
}

[data-theme=dark] input:disabled:not(.form-check-input) {
   background: #222;
}

/* .form-select setzt oben eine feste Hintergrundfarbe und ueberschreibt damit den
   disabled-Look von Bootstrap - hier wieder herstellen, analog zu input:disabled.
   Gilt auch fuer den bootstrap-multiselect-Button, der die Klasse mitbringt. */
[data-theme=dark] .form-select:disabled {
   background-color: #222;
   color: #6c6c6c;
}

[data-theme=dark] .carousel-control-prev-icon, .carousel-control-next-icon, .carousel-indicators {
   filter: invert(100%);
}

[data-theme=dark] div.dt-button-collection {
  background-color: #181818;
}

[data-theme=dark] .dropdown-item.active, .dropdown-item:active {
  background-color: #404040 !important;
  color: #bebebe !important;
}

/* Bootstrap-Dark faerbt Platzhalter fast so hell wie echten Text (#bebebe) - dunkler, damit
   ein leeres Feld nicht wie ausgefuellt aussieht */
[data-theme=dark] .form-control::placeholder {
   color: #777;
}