/*
 * Vereinsmanager-Farben fuer die Verwaltung (Metronic 8.3.3, Demo 1).
 *
 * Geladen von der Schale nach style.bundle.css (Modul.stil des Kerns).
 * Metronic baut seine Farben fast ganz aus Variablen; hier werden vor allem
 * die gesetzt -- dieselben Selektoren wie im Paket, also gewinnt dieses Blatt
 * durch die Reihenfolge. Einzelregeln nur, wo Metronic Farben fest eintraegt.
 * Muster: sit-thema.css aus stayintouch-hikel-app.
 *
 * Palette wie Marke und Vereins-App: Petrol #0f766e, Tuerkis #14b8a6,
 * Akzent #5eead4. Im Dunkelmodus ein etwas helleres Petrol (#11807a): weiss
 * darauf 4,8:1 (Text auf Knopf), gegen den dunklen Grund 3,4:1 (Bedienelement);
 * Links nehmen im Dunkeln den hellen Akzent. `barrierefreiheit.test.ts` rechnet nach.
 *
 * **Jede Variable des hellen Blocks steht auch im dunklen** -- ":root" trifft
 * das Wurzelelement in beiden Modi, fehlt eine im dunklen Block, gilt dort
 * der helle Wert.
 */

:root,
[data-bs-theme=light] {
  --vm-petrol: #0f766e;
  --vm-petrol-dunkel: #0b5a54;
  --vm-akzent: #5eead4;

  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-primary-active: #0b5a54;
  --bs-primary-light: #e6f5f3;
  --bs-primary-inverse: #ffffff;
  --bs-primary-clarity: rgba(15, 118, 110, 0.2);
  --bs-primary-text-emphasis: #064e48;
  --bs-primary-bg-subtle: #d5efec;
  --bs-primary-border-subtle: #9fd9d2;
  --bs-text-primary: #0f766e;

  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #0b5a54;
  --bs-link-hover-color-rgb: 11, 90, 84;
  --bs-focus-ring-color: rgba(15, 118, 110, 0.25);

  --bs-component-active-bg: #0f766e;
  --bs-component-hover-color: #0f766e;
  --bs-component-checked-bg: #0f766e;
  --bs-menu-link-color-hover: #0f766e;
  --bs-menu-link-color-show: #0f766e;
  --bs-menu-link-color-here: #0f766e;
  --bs-menu-link-color-active: #0f766e;
  --bs-scrolltop-bg-color: #0f766e;
  --bs-scrolltop-bg-color-hover: #0b5a54;
  --bs-ribbon-label-bg: #0f766e;

  --bs-app-bg-color: #f4f6f7;
}

[data-bs-theme=dark] {
  --vm-petrol: #11807a;
  --vm-petrol-dunkel: #0a2a28;
  --vm-akzent: #5eead4;

  --bs-primary: #11807a;
  --bs-primary-rgb: 17, 128, 122;
  --bs-primary-active: #0f6d66;
  --bs-primary-light: #0f2e2b;
  --bs-primary-inverse: #ffffff;
  --bs-primary-clarity: rgba(17, 128, 122, 0.25);
  --bs-primary-text-emphasis: #99f0e3;
  --bs-primary-bg-subtle: #0b2624;
  --bs-primary-border-subtle: #13615a;
  --bs-text-primary: #5eead4;

  --bs-link-color: #5eead4;
  --bs-link-color-rgb: 94, 234, 212;
  --bs-link-hover-color: #8cf2e1;
  --bs-link-hover-color-rgb: 140, 242, 225;
  --bs-focus-ring-color: rgba(94, 234, 212, 0.25);

  --bs-component-active-bg: #11807a;
  --bs-component-hover-color: #5eead4;
  --bs-component-checked-bg: #11807a;
  --bs-menu-link-color-hover: #5eead4;
  --bs-menu-link-color-show: #5eead4;
  --bs-menu-link-color-here: #5eead4;
  --bs-menu-link-color-active: #5eead4;
  --bs-scrolltop-bg-color: #11807a;
  --bs-scrolltop-bg-color-hover: #0f6d66;
  --bs-ribbon-label-bg: #11807a;

  --bs-app-bg-color: #0f1014;
}

/* ------------------------------------------------ fest eingetragene Farben */

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary-border-subtle);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}
.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}

/* ------------------------------------------------ Seitenleiste (dunkel) */

[data-kt-app-layout=dark-sidebar] .app-sidebar {
  background-color: #0a2a28;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-heading {
  color: #6f9c97 !important; /* Metronic setzt hier selbst !important */
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
  color: #bcd3d0;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: #6f9c97;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
  background-color: #6f9c97;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 3px 0 0 var(--vm-akzent);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i {
  color: var(--vm-akzent);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom {
  background-color: rgba(255, 255, 255, 0.08);
}