/* === GLOBAL THEME (blue) === */
:root{
  --primary: #0000FF;
  --primary2: #0066FF;
  --accent: #00B7FF;

  --page-bg: #000000;
  --panel: #141414;
  --panel2: #1E1E1E;

  --border: #0066FF;
  --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;
    min-height: 100vh !important; /* Sicherstellen, dass body volle Höhe hat */
    padding: 20px !important; /* Abstand zum Browserrand */
    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;
}
.wrap {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background: var(--panel);
    border: 2px solid var(--primary);
    border-radius: 10px;
    /* Schatten hinzufügen für bessere Abgrenzung */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
}