@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0a0a0f;
  --panel:#141220;
  --panel-2:#1a1828;
  --border:rgba(255,255,255,.1);
  --ink:#f2f0f7;
  --ink-dim:#8f8ba3;
  --accent-a:#ff0090;
  --accent-b:#00fff6;
  --accent-gradient: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  --ok:#3ecf6a;
  --warn:#e8b923;
  --crit:#ff4d6d;
}
*{ box-sizing:border-box; }
html, body{
  margin:0; min-height:100%;
  background: var(--bg);
  color: var(--ink);
  font-family:'Inter', system-ui, sans-serif;
}
a{ color: var(--accent-b); }

/* ===================== Login-Seite ===================== */
.login-page{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 90% at 50% 0%, #1c1828 0%, var(--bg) 60%);
}
.login-card{
  width:min(360px, calc(100% - 32px));
  padding:28px 26px 24px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.login-heading{
  font-family:'Great Vibes', cursive;
  font-size:42px;
  text-align:center;
  margin:0 0 18px;
  color: var(--ink);
  text-shadow: 0 0 20px rgba(255,0,144,.5), 0 0 40px rgba(0,255,246,.25);
}

/* ===================== App-Shell (eingeloggt) ===================== */
.app{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:220px; flex-shrink:0;
  background: var(--panel);
  border-right:1px solid var(--border);
  padding:20px 14px;
  display:flex; flex-direction:column;
}
.brand{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:.04em;
  margin: 0 6px 22px;
  background: var(--accent-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-link{
  display:block;
  padding:10px 12px;
  border-radius:9px;
  color: var(--ink-dim);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  margin-bottom:4px;
}
.nav-link:hover{ background: rgba(255,255,255,.05); color: var(--ink); }
.nav-link.active{ background: var(--panel-2); color: var(--ink); }

.sidebar-footer{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.staff-name{ font-size:13px; color: var(--ink-dim); margin-bottom:8px; }
.staff-role{
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px;
  background: rgba(255,0,144,.15); color:#ff8fc9;
  margin-left:6px;
}

.content{ flex:1; padding:28px 32px; max-width:1100px; }
.content h1{
  font-family:'Rajdhani', sans-serif;
  font-size:22px; font-weight:700; margin:0 0 4px;
}
.content .subtitle{ color: var(--ink-dim); font-size:13px; margin:0 0 24px; }

/* ===================== Formulare/Buttons (geteilt) ===================== */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field span{
  font-family:'Rajdhani', sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.05em; color: var(--ink-dim); text-transform:uppercase;
}
input, select{
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:9px;
  padding:10px 12px;
  color: var(--ink);
  font-family:'Inter', sans-serif;
  font-size:14px;
  outline:none;
}
input:focus, select:focus{ border-color: var(--accent-b); }

/* Die aufgeklappte Dropdown-Liste rendert der Browser mit eigenem
   (meist weissem) Hintergrund, unabhaengig vom Rest des Dark-Themes - ohne
   das hier waeren die hellen Options-Texte auf weiss unlesbar. */
select option{ color:#0a0a0f; background:#fff; }

.btn{
  padding:9px 16px;
  border:none; border-radius:9px;
  background: var(--accent-gradient);
  color:#0a0a0f;
  font-family:'Rajdhani', sans-serif;
  font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn-secondary{ background: var(--panel-2); color: var(--ink); border:1px solid var(--border); }
.btn-danger{ background: var(--crit); color:#fff; }
.btn-sm{ padding:5px 10px; font-size:11px; }

.error{ color: var(--crit); font-size:12.5px; min-height:1.2em; margin:0 0 10px; }
.success{ color: var(--ok); font-size:12.5px; min-height:1.2em; margin:0 0 10px; }

/* ===================== Tabellen ===================== */
.panel{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
table{ width:100%; border-collapse:collapse; }
th, td{
  text-align:left; padding:11px 14px;
  font-size:13px;
  border-bottom:1px solid var(--border);
}
th{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color: var(--ink-dim);
  background: var(--panel-2);
}
tr:last-child td{ border-bottom:none; }
.pill{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:600;
}
.pill-ok{ background: rgba(62,207,106,.15); color: var(--ok); }
.pill-crit{ background: rgba(255,77,109,.15); color: var(--crit); }
.pill-warn{ background: rgba(232,185,35,.15); color: var(--warn); }
.pill-dim{ background: rgba(255,255,255,.06); color: var(--ink-dim); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; }
code{
  background: rgba(255,255,255,.06);
  padding:2px 6px; border-radius:5px;
  font-size:12.5px;
}

/* ===================== Uebersicht: Stat-Kacheln ===================== */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
  margin-bottom:24px;
}
.stat-tile{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px;
  text-decoration:none;
  color: var(--ink);
  display:block;
  transition: border-color .15s ease;
}
.stat-tile:hover{ border-color: var(--accent-b); }
.stat-tile .stat-value{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  font-size:32px;
  line-height:1;
  font-variant-numeric: tabular-nums;
  background: var(--accent-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-tile .stat-label{
  font-size:12px; color: var(--ink-dim);
  margin-top:6px;
  letter-spacing:.03em;
}

.quick-links{ display:flex; flex-wrap:wrap; gap:8px; }
.quick-links a{
  text-decoration:none;
  font-size:13px;
  color: var(--ink);
  background: var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
}
.quick-links a:hover{ border-color: var(--accent-b); }

.hidden{ display:none !important; }