/* Base palette */
:root{
  --c-verylow:#22c55e;   --c-verylow-100:#dcfce7; --c-verylow-300:#86efac; --c-verylow-inv:#fff;
  --c-low:#84cc16;       --c-low-100:#ecfccb;     --c-low-300:#bef264;     --c-low-inv:#111;
  --c-mid:#eab308;       --c-mid-100:#fef9c3;     --c-mid-300:#fde047;     --c-mid-inv:#111;
  --c-high:#f97316;      --c-high-100:#ffedd5;    --c-high-300:#fbbf24;    --c-high-inv:#111;
  --c-veryhigh:#dc2626;  --c-veryhigh-100:#fee2e2;--c-veryhigh-300:#fca5a5; --c-veryhigh-inv:#fff;
}

/* Helpers (wie Bulma) */
.has-text-control-verylow{color:var(--c-verylow)!important}
.has-text-control-low{color:var(--c-low)!important}
.has-text-control-mid{color:var(--c-mid)!important}
.has-text-control-high{color:var(--c-high)!important}
.has-text-control-veryhigh{color:var(--c-veryhigh)!important}

.has-background-control-verylow{background:var(--c-verylow)!important;color:var(--c-verylow-inv)!important}
.has-background-control-low{background:var(--c-low)!important;color:var(--c-low-inv)!important}
.has-background-control-mid{background:var(--c-mid)!important;color:var(--c-mid-inv)!important}
.has-background-control-high{background:var(--c-high)!important;color:var(--c-high-inv)!important}
.has-background-control-veryhigh{background:var(--c-veryhigh)!important;color:var(--c-veryhigh-inv)!important}

/* Buttons */
.button.is-control-verylow{background:var(--c-verylow);border-color:transparent;color:var(--c-verylow-inv)}
.button.is-control-low{background:var(--c-low);border-color:transparent;color:var(--c-low-inv)}
.button.is-control-mid{background:var(--c-mid);border-color:transparent;color:var(--c-mid-inv)}
.button.is-control-high{background:var(--c-high);border-color:transparent;color:var(--c-high-inv)}
.button.is-control-veryhigh{background:var(--c-veryhigh);border-color:transparent;color:var(--c-veryhigh-inv)}
.button.is-control-verylow:hover{filter:brightness(.92)}
.button.is-control-low:hover{filter:brightness(.92)}
.button.is-control-mid:hover{filter:brightness(.92)}
.button.is-control-high:hover{filter:brightness(.92)}
.button.is-control-veryhigh:hover{filter:brightness(.92)}
.button.is-control-verylow.is-light{background:var(--c-verylow-100);color:var(--c-verylow)}
.button.is-control-low.is-light{background:var(--c-low-100);color:var(--c-low)}
.button.is-control-mid.is-light{background:var(--c-mid-100);color:var(--c-mid)}
.button.is-control-high.is-light{background:var(--c-high-100);color:var(--c-high)}
.button.is-control-veryhigh.is-light{background:var(--c-veryhigh-100);color:var(--c-veryhigh)}

/* Tags */
.tag.is-control-verylow{background:var(--c-verylow);color:var(--c-verylow-inv)}
.tag.is-control-low{background:var(--c-low);color:var(--c-low-inv)}
.tag.is-control-mid{background:var(--c-mid);color:var(--c-mid-inv)}
.tag.is-control-high{background:var(--c-high);color:var(--c-high-inv)}
.tag.is-control-veryhigh{background:var(--c-veryhigh);color:var(--c-veryhigh-inv)}
.tag.is-control-verylow.is-light{background:var(--c-verylow-100);color:var(--c-verylow)}
.tag.is-control-low.is-light{background:var(--c-low-100);color:var(--c-low)}
.tag.is-control-mid.is-light{background:var(--c-mid-100);color:var(--c-mid)}
.tag.is-control-high.is-light{background:var(--c-high-100);color:var(--c-high)}
.tag.is-control-veryhigh.is-light{background:var(--c-veryhigh-100);color:var(--c-veryhigh)}

/* Notifications */
.notification.is-control-verylow{background:var(--c-verylow-100);border-left:4px solid var(--c-verylow);color:#111}
.notification.is-control-low{background:var(--c-low-100);border-left:4px solid var(--c-low);color:#111}
.notification.is-control-mid{background:var(--c-mid-100);border-left:4px solid var(--c-mid);color:#111}
.notification.is-control-high{background:var(--c-high-100);border-left:4px solid var(--c-high);color:#111}
.notification.is-control-veryhigh{background:var(--c-veryhigh-100);border-left:4px solid var(--c-veryhigh);color:#111}

/* Messages */
.message.is-control-verylow .message-header{background:var(--c-verylow);color:var(--c-verylow-inv)}
.message.is-control-low .message-header{background:var(--c-low);color:var(--c-low-inv)}
.message.is-control-mid .message-header{background:var(--c-mid);color:var(--c-mid-inv)}
.message.is-control-high .message-header{background:var(--c-high);color:var(--c-high-inv)}
.message.is-control-veryhigh .message-header{background:var(--c-veryhigh);color:var(--c-veryhigh-inv)}
.message.is-control-verylow .message-body{border-color:var(--c-verylow-300)}
.message.is-control-low .message-body{border-color:var(--c-low-300)}
.message.is-control-mid .message-body{border-color:var(--c-mid-300)}
.message.is-control-high .message-body{border-color:var(--c-high-300)}
.message.is-control-veryhigh .message-body{border-color:var(--c-veryhigh-300)}

/* Progress (optional) */
.progress.is-control-verylow::-webkit-progress-value{background:var(--c-verylow)}
.progress.is-control-low::-webkit-progress-value{background:var(--c-low)}
.progress.is-control-mid::-webkit-progress-value{background:var(--c-mid)}
.progress.is-control-high::-webkit-progress-value{background:var(--c-high)}
.progress.is-control-veryhigh::-webkit-progress-value{background:var(--c-veryhigh)}
.progress.is-control-verylow::-moz-progress-bar{background:var(--c-verylow)}
.progress.is-control-low::-moz-progress-bar{background:var(--c-low)}
.progress.is-control-mid::-moz-progress-bar{background:var(--c-mid)}
.progress.is-control-high::-moz-progress-bar{background:var(--c-high)}
.progress.is-control-veryhigh::-moz-progress-bar{background:var(--c-veryhigh)}


/* Topbar-Farbe erzwingen (Bulma überschreibt sonst mit weiß) */
.navbar.topbar-nav {
  background-color: #d6801e !important;   /* Orange wie im Screenshot */
  box-shadow: none;
}

/* Textfarben in der Topbar */
.navbar.topbar-nav .navbar-item,
.navbar.topbar-nav .navbar-link {
  color: #111;
}
.navbar.topbar-nav .navbar-item:hover,
.navbar.topbar-nav .navbar-link:hover {
  background-color: rgba(0,0,0,.04);
  color: #111;
}

/* Dropdown-Pfeil in lila */
.navbar.topbar-nav .navbar-link::after {
  border-color: #6b2bbd;  /* lila */
}

/* Lila Logo-Kachel links */
.logo {
  background: #5a2a82 !important;
  color: #fff;

}
.logo .logo-text {
  color: #fff;
  font-weight: 700;
}

/* Rechte Seite: Suche + Profil */
.actions { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
.search  { border: 1px solid #c7c7c7; border-radius: 4px; padding: 4px 8px; font-size: 14px; }
.profile { background: #3c7d74; color: #fff; width: 28px; height: 28px; border-radius: 9999px;
           display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Inhalt darunter */
.content { background: #fafafa; min-height: calc(100vh - 3.25rem); }
.home-icon { font-size: 20px; display: inline-block; margin: 10px; }

/* Dropdown optisch näher am Screenshot */
.navbar-dropdown { border-top: none; box-shadow: 0 8px 16px rgba(0,0,0,.1); }

/* Breadcrumbs */
.top-breadcrumb { padding: 10px 0;}

.breadcrumb {
  margin-bottom: 20px;
  background-color: #f0ebeb;
}

.content li{
  margin-top: 5px !important;
}

.content li+li {
  margin: 0 !important;
}


/* DARK MODE */

/* static/css/custom.css */
body.dark-mode {
    background-color: #121212;
    color: #f5f5f5;
}

body.dark-mode .box {
    background-color: #1e1e1e;
    color: #f5f5f5;
}

/* Optional: Buttons, Links etc. anpassen */
body.dark-mode a {
    color: #bb86fc;
}