/* ======================== CI-Farben ======================== */
:root {
  --ci-green: #0baa54;
  --ci-green-dark: #0a9149;
}
/* Dark-Theme mitziehen (falls aktiv) */
[data-theme="dark"] {
  --ci-green: #0baa54;
  --ci-green-dark: #0a9149;
}

/* ===== System-Variablen auf CI mappen (hell + dunkel) ===== */
:root,
[data-theme="dark"] {
  --button-primary-background: var(--ci-green) !important;
  --button-primary-background-active: var(--ci-green-dark) !important;
  --highlight: var(--ci-green) !important;
  --border-highlight: var(--ci-green) !important;

  /* Sidebar/Menu */
  --menu-background-active: var(--ci-green) !important;
  --menu-text-active: #fff !important;

  /* Links/Navi inaktiv */
  --text-nav: var(--ci-green) !important;
}

/* ======================== Links =========================== */
a, .link, .text-primary { color: var(--ci-green) !important; }
a:hover { color: var(--ci-green-dark) !important; }

/* ===== Buttons / Badges / Progress / Tabs / Pagination ==== */
.btn-primary,
.bg-primary,
.badge-primary,
.progress-bar,
.nav-tabs .nav-link.active,
.pagination .page-item.active .page-link {
  background-color: var(--ci-green) !important;
  border-color: var(--ci-green) !important;
  color: #fff !important;
}
.btn-primary:hover,
.nav-tabs .nav-link.active:hover,
.pagination .page-item.active .page-link:hover {
  background-color: var(--ci-green-dark) !important;
  border-color: var(--ci-green-dark) !important;
}

/* =================== Header / Topbar ====================== */
.header, .navbar {
  background-color: var(--ci-green) !important;
  color: #fff !important;
}

/* =================== Form-Fokus =========================== */
.form-control:focus {
  border-color: var(--ci-green) !important;
  box-shadow: 0 0 0 .2rem rgba(11,170,84,.25) !important;
}

/* ===== Login & Customer-Portal primäre Buttons =========== */
.login .btn-primary,
.customer-ticket-create .btn-primary {
  background-color: var(--ci-green) !important;
  border-color: var(--ci-green) !important;
}

/* =================== Sidebar links ======================= */
/* aktiv + hover: Hintergrund, Text, Icons */
.menu-item.is-active,
.menu-item.is-hovered,
.menu-item:hover {
  background-color: var(--menu-background-active) !important; /* für :hover gleich dunkler? -> unten überschrieben */
  color: var(--menu-text-active) !important;
}
.menu-item.is-active .menu-item-name,
.menu-item.is-active .menu-item-icon,
.menu-item.is-hovered .menu-item-name,
.menu-item.is-hovered .menu-item-icon,
.menu-item:hover .menu-item-name,
.menu-item:hover .menu-item-icon {
  color: var(--menu-text-active) !important;
  fill: var(--menu-text-active) !important;   /* SVG Icons */
  background: transparent !important;        /* hellen Innenblock entfernen */
  box-shadow: none !important;
}

/* Hover etwas dunkler als aktiv */
.menu-item:hover,
.menu-item.is-hovered {
  background-color: var(--ci-green-dark) !important;
}

/* Optional: Fokus ohne Outline (oder eigenen Fokus definieren) */
.menu-item:focus,
.menu-item.is-active:focus,
.menu-item.is-hovered:focus { outline: none !important; box-shadow: none !important; }

/* ====== Fallbacks für andere/ältere Menü-Klassen ========= */
.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .menu-open > .nav-link,
.main-nav .nav-item.active > a,
.sidebar .nav .active > a {
  background-color: var(--ci-green) !important;
  color: #fff !important;
  background-image: none !important;
}
/* optionale linke Akzentlinie wie AdminLTE */
.nav-sidebar .nav-link.active { border-left: 3px solid var(--ci-green) !important; }
.nav-sidebar > .nav-item > .nav-link:hover {
  background-color: var(--ci-green-dark) !important;
  color: #fff !important;
  border-left: 3px solid var(--ci-green-dark) !important;
}
/* Sidebar: Text & Icon im aktiven Menüeintrag weiß darstellen */
.menu-item.is-active .menu-item-name,
.menu-item.is-active .menu-item-icon,
.menu-item.is-hovered .menu-item-name,
.menu-item.is-hovered .menu-item-icon {
  color: #fff !important;
  fill: #fff !important;  /* für SVGs */
}
/* Sidebar: globale Linkfarbe neutralisieren */
aside .menu-item > a { 
  color: inherit !important; 
}

/* Aktiv/Hover in der Sidebar wirklich weiß */
aside .menu-item.is-active > a,
aside .menu-item.is-hovered > a,
aside .menu-item:hover > a,
aside .menu-item.is-active .menu-item-name,
aside .menu-item.is-hovered .menu-item-name,
aside .menu-item:hover .menu-item-name {
  color: #fff !important;
}

/* Icons in der Sidebar ebenfalls weiß */
aside .menu-item.is-active .menu-item-icon,
aside .menu-item.is-hovered .menu-item-icon,
aside .menu-item:hover .menu-item-icon,
aside .menu-item.is-active .menu-item-icon *,
aside .menu-item.is-hovered .menu-item-icon *,
aside .menu-item:hover .menu-item-icon * {
  fill: #fff !important;
  stroke: #fff !important;
}
/* Navigation/Tabs links: globale Linkfarbe neutralisieren */
#navigation a.nav-tab { 
  color: inherit !important;
}

/* Aktiver / Hover-Tab: Text wirklich weiß */
#navigation .nav-tab.is-active,
#navigation .nav-tab:hover,
#navigation .nav-tab.is-hover {
  color: #fff !important;
}

/* Icon im aktiven/hovernden Tab auch weiß (SVG) */
#navigation .nav-tab.is-active svg,
#navigation .nav-tab:hover svg,
#navigation .nav-tab.is-hover svg,
#navigation .nav-tab.is-active svg *,
#navigation .nav-tab:hover svg *,
#navigation .nav-tab.is-hover svg * {
  fill: #fff !important;
  stroke: #fff !important;
}
/* Tabs im #navigation: Standardfarbe = Menütext (nicht globales Link-Grün) */
#navigation a.nav-tab {
  color: var(--menu-text) !important;
}

/* Nur aktiv/hover weiß */
#navigation a.nav-tab.is-active,
#navigation a.nav-tab:hover,
#navigation a.nav-tab.is-hover {
  color: #fff !important;
}

/* Innerer Text erbt die Tab-Farbe */
#navigation a.nav-tab .nav-tab-name {
  color: inherit !important;
}

/* Icons folgen der Textfarbe automatisch */
#navigation a.nav-tab svg,
#navigation a.nav-tab svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Buttons sollen NICHT von der globalen Linkfarbe betroffen sein */
a.btn, button.btn {
  color: var(--text-inverted) !important; /* i.d.R. weiß */
  text-decoration: none !important;
}

/* Grüne Buttons (Zammad-Varianten) -> CI-Grün + weiße Schrift */
a.btn--success,
button.btn--success,
a.btn--positive,
button.btn--positive,
a.btn--create,
button.btn--create,
a.btn--primary,
button.btn--primary {
  background-color: var(--ci-green) !important;
  border-color: var(--ci-green) !important;
  color: #fff !important;
}

/* Hover/Active dunkler */
a.btn--success:hover,
button.btn--success:hover,
a.btn--positive:hover,
button.btn--positive:hover,
a.btn--create:hover,
button.btn--create:hover,
a.btn--primary:hover,
button.btn--primary:hover {
  background-color: var(--ci-green-dark) !important;
  border-color: var(--ci-green-dark) !important;
  color: #fff !important;
}

/* Falls Icons im Button sind (SVG), mit einfärben */
a.btn svg, a.btn svg *, button.btn svg, button.btn svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}