/* === GLOBAL THEME (red) === */
:root{
  --primary: #F00000;
  --primary2: #FF0000;
  --accent: #FF3B3B;

  --page-bg: #000000;
  --panel: #140A0A;
  --panel2: #1E1010;

  --border: #FF0000;
  --text: #FFFFFF;
  --danger: #FF0000;

  /* Kontrast-Textfarben */
  --on-primary: #FFFFFF;
  --on-primary2: #FFFFFF;
  --on-accent: #FFFFFF;
  --on-panel: #FFFFFF;
  --on-panel2: #FFFFFF;
}

/* globale Lesbarkeit */
body { background: var(--page-bg) !important; color: var(--text) !important; }
header { background-color: var(--panel2) !important; border-bottom-color: var(--primary2) !important; }
main { background: linear-gradient(0deg, #0b0b0b 3%, var(--panel2) 50%, #090909 98%) !important; }

.container, .login-container { background-color: var(--panel) !important; border-color: var(--primary) !important; color: var(--text) !important; }
table { background-color: var(--panel) !important; border-color: var(--border) !important; color: var(--text) !important; }
th, td { border-color: var(--border) !important; }
tr:nth-child(even) { background-color: var(--panel2) !important; }
tr:hover { background-color: var(--border) !important; }

/* Links: klar sichtbar */
a, .back-link a { color: var(--accent) !important; text-decoration: underline; }


/* Zurück-Buttons/Links (immer ROT, Hover GRÜN) */
.back-link a, a.back, a.back-btn, a.back-button, .btn-back, .back-to-dashboard, .zurueck, .return-link {
  display: inline-block !important;
  padding: 10px 14px !important;
  background-color: #F00000 !important;
  border: 1px solid #FF0000 !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}
.back-link a:hover, a.back:hover, a.back-btn:hover, a.back-button:hover, .btn-back:hover, .back-to-dashboard:hover, .zurueck:hover, .return-link:hover {
  background-color: #00FF00 !important;
  border-color: #00FF00 !important;
  color: #000000 !important;
}


nav a:hover { color: var(--primary2) !important; }

/* Buttons: Textfarbe passt sich an */
button, input[type="submit"], .btn {
  background-color: var(--primary) !important;
  border-color: var(--primary2) !important;
  color: var(--on-primary) !important;
}
button:hover, input[type="submit"]:hover, .btn:hover {
  background-color: var(--primary2) !important;
  color: var(--on-primary2) !important;
}



/* Dashboard/Navigation-Links, die als "Buttons" aussehen (z.B. main a) */
main a, .menu a, .menu-link, .nav-link, .action-link {
  background-color: var(--primary) !important;
  border-color: var(--primary2) !important;
  color: var(--on-primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
main a:hover, .menu a:hover, .menu-link:hover, .nav-link:hover, .action-link:hover {
  background-color: var(--primary2) !important;
  color: var(--on-primary2) !important;
}

/* Icons in Links/Buttons sollen die gleiche Farbe bekommen */
main a i, main a span, main a img,
.menu a i, .menu a span, .menu a img,
.btn i, .btn span {
  color: inherit !important;
  filter: none !important;
  opacity: 1 !important;
}

.image-container img { border-color: var(--primary2) !important; }
h1, h2 { border-color: var(--primary) !important; }

/* Extra: wenn du irgendwo farbige Badges/Labels hast */
.badge-accent, .tag-accent {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}