/* =========================
   Base Palette
   ========================= */
:root {
  --c-verylow:#22c55e;   --c-verylow-100:#dcfce7; --c-verylow-300:#86efac; --c-verylow-inv:#000;
  --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:#000;
  --prosoft-normal:#6f3165; 
  --prosoft-inv:#fff;
}

/* =========================
   Helpers (similar to Bulma)
   ========================= */
.has-text-prosoft { color: var(--prosoft-inv) !important; }
.has-background-prosoft { background: var(--prosoft-normal) !important; color: var(--prosoft-inv) !important; }

.has-background-prosoft a,
.has-background-prosoft abbr { color: var(--prosoft-inv); }

.table thead tr.has-background-prosoft th {
  color: var(--prosoft-inv) !important;
}

abbr { text-decoration: none; }

/* =========================
   Colorized Text / Background
   ========================= */
.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-prosoft { background: var(--prosoft-normal) !important; color: var(--prosoft-inv) !important; }

.button.is-control-verylow,
.button.is-control-low,
.button.is-control-mid,
.button.is-control-high,
.button.is-control-veryhigh {
  border-color: transparent;
}
.button.is-control-verylow { background: var(--c-verylow); color: var(--c-verylow-inv); }
.button.is-control-low     { background: var(--c-low);    color: var(--c-low-inv); }
.button.is-control-mid     { background: var(--c-mid);    color: var(--c-mid-inv); }
.button.is-control-high    { background: var(--c-high);   color: var(--c-high-inv); }
.button.is-control-veryhigh{ background: var(--c-veryhigh);color: var(--c-veryhigh-inv); }

.button.is-control-verylow:hover,
.button.is-control-low:hover,
.button.is-control-mid:hover,
.button.is-control-high:hover,
.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-prosoft { background: var(--prosoft-normal) !important; color: var(--prosoft-inv) !important; }

.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; }
.notification.is-prosoft         { background: var(--prosoft-normal) !important; border-left: var(--prosoft-inv) !important; }

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

.message.is-prosoft { border-color: var(--prosoft-normal); }

/* =========================
   Progress bars
   ========================= */
.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); }

.progress.is-prosoft { background: var(--prosoft-normal) !important; }

/* =========================
   Navbar / Topbar
   ========================= */
.navbar.topbar-nav {
  background-color: #d6801e !important; /* Orange as in screenshot */
  box-shadow: none;
}
.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;
}
.navbar.topbar-nav .navbar-link::after { border-color: #6b2bbd; } /* purple arrow */

/* Logo block */
.logo { background-color: var(--prosoft-normal) !important; color: #fff; }
.logo .logo-text { color: #fff; font-weight: 700; }

/* =========================
   Layout Elements
   ========================= */
.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; }

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

.navbar-dropdown { border-top: none; box-shadow: 0 8px 16px rgba(0,0,0,.1); }

/* =========================
   Breadcrumbs
   ========================= */
.top-breadcrumb { padding: 10px 0; }
.breadcrumb:not(:last-child) { margin-bottom: 0; border-bottom: 1px solid var(--prosoft-normal); }
.breadcrumb { background-color: #f0ebeb; }
.breadcrumb a { color: var(--prosoft-normal) !important; }
.breadcrumb-add-icon {color: limegreen !important}

/* =========================
   Lists inside .content
   ========================= */
.content li { margin-top: 5px !important; }
.content li+li { margin: 0 !important; }

/* =========================
   Dark Mode
   ========================= */
body.dark-mode { background-color: #121212; color: #f5f5f5; }
body.dark-mode .box { background-color: #1e1e1e; color: #f5f5f5; }
body.dark-mode a { color: #bb86fc; }

/* =========================
   Risk Chip (custom widget)
   ========================= */
.risk-chip {
  --chip-w: 260px;
  --chip-id-w: 40px;
  width: var(--chip-w);
  display: inline-flex;
  flex-direction: column; /* stacked style */
  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 .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; }

/* left ID column with texture */
.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;
}

/* right text column */
.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;
}

/* Color assignments for chip */
.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); }

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

/* =========================
   Avatar with badge
   ========================= */
.avatar-wrap { position: relative; display: inline-block; }
.avatar-wrap .badge {
  position: absolute;
  top: -0.35rem; right: -0.35rem;
  min-width: 1.25rem; height: 1.25rem;
  padding: 0 .25rem;
  font-size: 0.75rem; line-height: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.avatar-wrap .tag.is-medium + .badge {
  min-width: 1.15rem; height: 1.15rem;
  font-size: 0.70rem; line-height: 1.15rem;
}

/* =========================
   Bulma Design Changes
   ========================= */

/* ERP-style horizontal tabs */
.erp-tabs {
  display: flex;
  border-bottom: 2px solid var(--prosoft-normal);
}

.erp-tabs a {
  padding: 0.5rem 1rem;
  color: #111;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

.erp-tabs a.is-active {
  color: var(--prosoft-normal);
  border-color: var(--prosoft-normal);
}

.erp-tabs a:hover {
  background: rgba(0,0,0,.03);
}

/* =========================
   Dark Mode
   ========================= */
/* =========================
   Dark Mode Palette
   ========================= */
body.dark-mode {
  --bg-main: #3c3c3c;
  --bg-surface: #3c3c3c;
  --bg-hover: #2a2a2a;
  --border-color: #333;
  --text-main: #f5f5f5;
  --text-muted: #bbb;
  --link-color: #fff;
  --link-hover: #d0aaff;

  background-color: var(--bg-main);
  color: var(--text-main);
}

/* =========================
   Global Elements
   ========================= */
body.dark-mode a {
  color: var(--link-color);
}
body.dark-mode a:hover {
  color: var(--link-hover);
}

body.dark-mode .content {
  background: var(--bg-surface);
  color: var(--text-main);
}

/* =========================
   Navbar / Topbar
   ========================= */
body.dark-mode .navbar.topbar-nav {

  box-shadow: none;
}
body.dark-mode .navbar.topbar-nav .navbar-item,
body.dark-mode .navbar.topbar-nav .navbar-link {
  color: var(--text-main);
}
body.dark-mode .navbar.topbar-nav .navbar-item:hover,
body.dark-mode .navbar.topbar-nav .navbar-link:hover {

  color: #fff;
}
body.dark-mode .navbar.topbar-nav .navbar-link::after {
  border-color: var(--link-color);
}

/* =========================
   Cards, Boxen, Dropdowns
   ========================= */
body.dark-mode .box,
body.dark-mode .card,
body.dark-mode .navbar-dropdown {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

/* =========================
   Breadcrumbs
   ========================= */
body.dark-mode .breadcrumb {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}
body.dark-mode .breadcrumb a {
  color: var(--link-color) !important;
}

/* =========================
   Messages / Notifications
   ========================= */
body.dark-mode .notification {
  background: var(--bg-surface);
  color: var(--text-main);
  border-left: 4px solid var(--prosoft-normal);
}
body.dark-mode .message .message-body {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-color);
}

/* =========================
   Tables
   ========================= */
body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-color);
}

body.dark-mode .table.table tbody tr {
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.dark-mode .table.table tbody tr:hover {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  cursor: pointer;
}

/* Optional: auch für die Zellen, falls nötig */
body.dark-mode .table.table tbody tr:hover td {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}

/* =========================
   Inputs / Forms
   ========================= */
body.dark-mode select,
body.dark-mode textarea {
  background: var(--bg-surface);
  color: var(--text-main);
}

body.dark-mode input::placeholder {
  color: var(--text-muted);
}

/* =========================
   Navbar Dropdown (Dark Mode)
   ========================= */
body.dark-mode .navbar-dropdown {
  background: var(--bg-surface);

}

body.dark-mode .navbar-dropdown .navbar-item {
  background: var(--bg-surface);
  color: var(--text-main) !important;
}

body.dark-mode .navbar-dropdown .navbar-item:hover {
  background: var(--bg-hover);
  color: #fff !important;
}

body.dark-mode .section.has-background-light {
  background-color: var(--border-color) !important;
}

body.dark-mode .label.is-small {
  color: var(--text-main) !important;
}

body.dark-mode .button.is-light {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}