/* 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;
}

/* Ticket-Button (ID links, Text rechts) */
.risk-chip{
  --chip-w: 260px;
  --chip-id-w: 40px;
  width: var(--chip-w);
  display: inline-flex;
  align-items: stretch;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  background: var(--chip-bg, #eee);
  color: var(--chip-fg, #111);
}

.risk-chip{
  display:inline-flex;
  flex-direction:column;      /* <— neu */
}

.risk-chip .chip-head{
  padding:.35rem .6rem;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--chip-fg);
  background:rgba(0,0,0,.10);
  border-bottom:1px solid rgba(0,0,0,.12);
}

.risk-chip .chip-main{
  display:flex;
  align-items:stretch;
}

/* linke ID-Spalte mit leichter Textur */
.risk-chip .chip-id{
  flex: 0 0 var(--chip-id-w);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  position: relative;
  background: rgba(0,0,0,.06);
}
.risk-chip .chip-id::after{
  content:"";
  position: absolute; inset:0;
  background:
    linear-gradient( to right, rgba(255,255,255,.15), rgba(0,0,0,.08) 60% ),
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px);
  mix-blend-mode: soft-light;
  opacity:.6;
}

/* rechte Text-Spalte */
.risk-chip .chip-label{
  flex: 1 1 auto;
  padding: .5rem .75rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(0,0,0,.08);
  min-height: 2.25rem;
}

/* Farbzuteilung aus deinen Custom-Klassen */
.risk-chip.is-control-verylow { --chip-bg: var(--c-verylow);   --chip-fg: var(--c-verylow-inv); }
.risk-chip.is-control-low     { --chip-bg: var(--c-low);       --chip-fg: var(--c-low-inv); }
.risk-chip.is-control-mid     { --chip-bg: var(--c-mid);       --chip-fg: var(--c-mid-inv); }
.risk-chip.is-control-high    { --chip-bg: var(--c-high);      --chip-fg: var(--c-high-inv); }
.risk-chip.is-control-veryhigh{ --chip-bg: var(--c-veryhigh);  --chip-fg: var(--c-veryhigh-inv); }

/* Responsiv: auf schmalen Screens volle Breite */
@media (max-width: 480px){
  .risk-chip{ width: 100%; }
}

@media (max-width: 1215px) {
  .risk-chip { --chip-w: 100%; width: var(--chip-w); }
}