/* NICHTS global setzen – Schüler-Farben kommen aus styles.css */

/* Nur Lehrkräfte-Theme überschreibt Variablen gezielt,
   wenn der Body .role-staff hat */
body.role-staff {
  --bg:#0b1020;
  --card:#0f1630;
  --card-2:#0d1430;
  --ink:#eef1ff;
  --muted:#aeb6d9;
  --accent:#7aa2ff;      /* blau */
  --line:#1f2a49;
  --border:#26366a;
  --border-strong:#1d2a55;
  --ok:#4ade80;
  --warn:#facc15;
  --bad:#f87171;
}

/* Falls du spezielle Komponenten im Staff-Theme schärfer färben willst: */
body.role-staff .tab.active,
body.role-staff .btn,
body.role-staff .btn-details { background: var(--accent); color:#fff; }

/* Schüler: NICHTS nötig – styles.css liefert das Rosa-Theme als Default */
/* ===== Globale Header-/Nav-Gestaltung (rollenbasiert per Variablen) ===== */

/* Basislayout */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line, #1f2a49);
  background: var(--bg, #0b1020);
  color: var(--ink, #eef1ff);
}

.brand{
  margin:0;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.2px;
}

.main-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nav-link{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid var(--line, #1f2a49);
  background: var(--card, #0f1630);
  color: var(--ink, #eef1ff);
  transition:transform .04s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.nav-link:hover{
  filter:brightness(1.05);
}

.nav-link:active{
  transform: translateY(1px);
}

/* Aktiver Reiter optional: gib dem Link die Klasse .is-active */
.nav-link.is-active{
  background: var(--accent, #7aa2ff);
  color:#fff;
  border-color: transparent;
}

/* Für schmalen Viewport leicht kompakter */
@media (max-width: 560px){
  .brand{ font-size:1rem }
  .nav-link{ padding:7px 10px }
}