:root{
  --color-main-background:#282a36 !important;
  --color-background-hover:#232530 !important;
  --color-main-text:#f8f8f2 !important;

  --color-primary:#8be9fd !important;
  --color-primary-element:#8be9fd !important;
  --color-primary-element-hover:#6ed7e8 !important;
  --color-primary-element-text:#1e1f29 !important;

  --color-success:#8be9fd !important;
  --color-warning:#8be9fd !important;
  --color-error:#8be9fd !important;
}

/* Grundlayout */
body,
.app-content,
#content,
#app-content,
.content,
.settings-section,
.panel,
section{
  background-color:#282a36 !important;
  color:#f8f8f2 !important;
}

/* Allgemeiner Text */
body,
p,
span,
label,
h1,h2,h3,h4,h5,h6,
div,
li{
  color:#f8f8f2 !important;
}

/* Links */
a,
a *{
  color:#8be9fd !important;
}

/* Primäre Buttons */
button,
.button,
input[type="submit"],
input[type="button"],
.primary,
.primary.button,
button.primary{
  border-color:#8be9fd !important;
}

/* Gefüllte / wichtige Buttons */
button.primary,
.primary.button,
.button.primary,
input[type="submit"].primary,
button[class*="primary"]{
  background:#8be9fd !important;
  border-color:#8be9fd !important;
  color:#1e1f29 !important;
}

button.primary *,
.primary.button *,
.button.primary *{
  color:#1e1f29 !important;
}

/* Hover */
button.primary:hover,
.primary.button:hover,
.button.primary:hover,
input[type="submit"].primary:hover,
button[class*="primary"]:hover{
  background:#6ed7e8 !important;
  border-color:#6ed7e8 !important;
  color:#1e1f29 !important;
}

/* Sidebar / aktiver Menüpunkt */
li.active > a,
li.active > button,
.app-navigation-entry-utils-menu-button.active,
.app-navigation .active a,
.app-navigation-entry.active a,
.app-settings-nav__item.active,
.app-settings-nav__item[aria-current="page"],
#app-navigation .active a,
#app-navigation li.active a,
#app-navigation li.active button,
.section.active > a,
.settings-menu .active a{
  background:#8be9fd !important;
  color:#1e1f29 !important;
  border-radius:999px !important;
}

li.active > a *,
li.active > button *,
.app-navigation .active a *,
.app-navigation-entry.active a *,
#app-navigation li.active a *,
#app-navigation li.active button *{
  color:#1e1f29 !important;
}

/* Icons im aktiven Bereich */
li.active svg,
li.active svg *,
.app-navigation .active svg,
.app-navigation .active svg *{
  fill:#1e1f29 !important;
  color:#1e1f29 !important;
}

/* Toggles / Switches */
.checkbox-radio-switch__label__indicator,
.switch-checkbox:checked + .checkbox-radio-switch__label .checkbox-radio-switch__label__indicator,
input[type="checkbox"]:checked,
input[type="radio"]:checked{
  background-color:#8be9fd !important;
  border-color:#8be9fd !important;
}

/* Fokus */
input:focus,
textarea:focus,
select:focus,
button:focus{
  border-color:#8be9fd !important;
  box-shadow:0 0 0 1px #8be9fd !important;
}

/* Optional: SVG / Icons allgemein cyan */
.icon,
svg,
svg *{
  color:#8be9fd;
}