/* ============================================================
   NYZA CLOUD – Adminpanel im NYZA-Network-Design
   (gleiche Sprache wie Forum + Shop: League Spartan, Violett, Gold)
   ============================================================ */
@font-face { font-family: 'League Spartan'; src: url('/fonts/LeagueSpartan-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('/fonts/LeagueSpartan-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --bg: #0b0b0f;
  --panel: #17161d;
  --panel-solid: #1d1c24;
  --inset: #121118;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text: #ffffff;
  --muted: #8e8c99;
  --text-2: #a9a7b3;
  --accent: #a587f9;
  --accent-strong: #8b5cf6;
  --accent-deep: #6524d6;
  --accent-soft: rgba(139,92,246,.18);
  --gold: #f6b73c;
  --gold-deep: #d98c0f;
  --on-gold: #231803;
  --green: #22c55e;
  --yellow: #f6b73c;
  --red: #ff4d5e;
  --display: 'League Spartan', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 18px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
@keyframes nyzaPan { from { background-position: 0 0; } to { background-position: 128px 128px; } }

/* ---------- Login (Checkerboard wie Hero) ---------- */
.login {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #341268; background-image: repeating-conic-gradient(#3d1878 0% 25%, #2c0f57 0% 50%);
  background-size: 64px 64px; animation: nyzaPan 16s linear infinite;
}
.login-card {
  width: 380px; padding: 40px 34px; text-align: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.logo {
  width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 20px;
  background: linear-gradient(135deg, #a587f9, #6524d6);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  box-shadow: 0 8px 30px rgba(139,92,246,.45);
}
.login-card h1 {
  font-family: var(--display); font-weight: 900; font-size: 30px; text-transform: uppercase;
  letter-spacing: -.02em; margin-bottom: 6px;
}
.login-card h1 span { color: var(--gold); }
.login-card p { font-size: 13px; margin-bottom: 20px; color: var(--muted); }
.login-card input {
  width: 100%; padding: 13px 15px; margin-bottom: 14px; border-radius: 13px;
  border: 1px solid var(--border-strong); background: var(--inset); color: var(--text);
  font-size: 14px; outline: none; font-family: inherit;
}
.login-card input:focus { border-color: var(--accent); }
.error { color: var(--red); font-size: 13px; margin-top: 12px; font-weight: 700; }

/* ---------- Layout ---------- */
.app { display: flex; height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--panel);
  padding: 22px 14px;
}
.brand {
  font-family: var(--display); font-weight: 900; font-size: 19px; text-transform: uppercase;
  letter-spacing: -.01em; padding: 0 10px 24px; display: flex; align-items: center; gap: 8px;
}
.brand b { color: var(--gold); font-weight: 900; }
.logo-sm {
  display: inline-flex; width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, #a587f9, #6524d6);
  align-items: center; justify-content: center; font-size: 15px; flex: none;
}
/*
 * Die Navigation scrollt in sich selbst (min-height: 0 gibt sie im
 * Flex-Layout dafuer frei). Vorher quollen die unteren Eintraege einfach
 * aus der 100vh-Sidebar heraus - je laenger die Liste wurde, desto
 * kaputter sah es aus, und "Mein Konto" unten war irgendwann unerreichbar.
 */
nav {
  display: flex; flex-direction: column; gap: 3px;
  overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  margin-right: -6px; padding-right: 6px;
}
.nav-sektion {
  margin: 16px 14px 5px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  flex: none;
}
nav a {
  padding: 10px 14px; border-radius: 999px; color: var(--text-2); text-decoration: none;
  font-size: 13.5px; font-weight: 600; transition: all .16s;
}
nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
nav a.active {
  color: #fff; background: var(--accent-strong); font-family: var(--display);
  font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .04em;
  box-shadow: 0 3px 0 var(--accent-deep);
}
.sidebar-footer { margin-top: auto; padding: 10px; }
.who {
  display: block; padding: 9px 12px; margin-bottom: 8px; border-radius: 9px;
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); background: var(--bg);
}
.who:hover { color: var(--text); border-color: var(--accent); }
main { flex: 1; overflow-y: auto; padding: 34px 40px 60px; }
h2 {
  font-family: var(--display); font-weight: 900; font-size: 30px; text-transform: uppercase;
  letter-spacing: -.02em; margin-bottom: 4px; text-shadow: 3px 3px 0 var(--accent-deep);
}
.sub { color: var(--muted); font-size: 13px; margin-bottom: 26px; }

/* ---------- Karten & Statistik ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); margin-bottom: 26px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px;
}
.stat .value {
  font-family: var(--display); font-weight: 900; font-size: 34px; letter-spacing: -.02em; line-height: 1;
}
.stat .value.accent { color: var(--gold); }
.stat .label {
  color: var(--muted); font-size: 11px; margin-top: 6px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--muted); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
tr:last-child td { border-bottom: none; }

/* ---------- Badges ---------- */
.badge {
  padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 900;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
}
.badge.green { background: rgba(34,197,94,.16); color: var(--green); }
.badge.yellow { background: rgba(246,183,60,.16); color: var(--gold); }
.badge.gold { background: rgba(246,183,60,.16); color: var(--gold); }
.badge.red { background: rgba(255,77,94,.16); color: var(--red); }
.badge.purple { background: var(--accent-soft); color: var(--accent); }
.badge.gray { background: rgba(255,255,255,.07); color: var(--muted); }

/* ---------- Buttons ---------- */
button, .btn {
  font-family: var(--display); font-size: 14px; font-weight: 900; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
  border: none; border-radius: 999px; padding: 11px 20px; transition: all .16s;
}
button.primary {
  background: var(--gold); color: var(--on-gold); width: 100%; padding: 14px;
  box-shadow: 0 5px 0 var(--gold-deep); font-size: 15px;
}
button.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
button.ghost {
  background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--border-strong);
}
button.ghost:hover { background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.5); color: #fff; }
button.violet { background: var(--accent-strong); color: #fff; box-shadow: 0 4px 0 var(--accent-deep); }
button.violet:hover { filter: brightness(1.1); }
button.danger { background: rgba(255,77,94,.14); color: var(--red); border: 1px solid rgba(255,77,94,.3); }
button.danger:hover { background: rgba(255,77,94,.26); }
button.small { padding: 7px 14px; font-size: 12px; }
button:disabled { opacity: .4; cursor: default; }
a button { text-decoration: none; }

/* ---------- Formularfelder ----------
   Bewusst ueber alle Feldarten statt nur input[type=text]: sonst rutscht
   jedes Feld ohne type-Attribut ins weisse Browser-Standardaussehen. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea {
  font-family: inherit; padding: 11px 14px; border-radius: 13px; font-size: 13.5px;
  border: 1px solid var(--border-strong); background: var(--inset); color: var(--text); outline: none;
  max-width: 100%; box-sizing: border-box;
}
select {
  /* Eigener Pfeil – der graue Systempfeil passt nicht ins dunkle Bild */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
textarea { line-height: 1.6; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(165, 135, 249, .18);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; }
input[type=number] { -moz-appearance: textfield; }
label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }

/* Tabellen mit Eingabefeldern brauchen Luft, sonst kleben die Zeilen */
table td input, table td select { margin: 3px 0; }
table td { vertical-align: middle; }

/* ---------- Hilfsklassen ---------- */
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.mb { margin-bottom: 16px; }
.mt { margin-top: 16px; }

/* Bereichsreiter, z.B. auf der Serverseite. Bei acht Spielmodi plus Lobbys,
   Bauplaetzen und gehosteten Runden wird eine flache Liste unlesbar. */
.pill {
  background: var(--inset); color: var(--text-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { color: #fff; border-color: var(--gold); }
.pill.active { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.pill.active .muted { color: rgba(26,20,8,.65); }
.pill .muted { font-size: 11px; margin-left: 5px; }
.section-title {
  font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2); margin: 24px 0 12px;
}
.toggle {
  position: relative; width: 48px; height: 28px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.12); transition: background .2s; flex-shrink: 0;
}
.toggle.on { background: var(--accent-strong); }
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: left .2s;
}
.toggle.on::after { left: 23px; }
.wiki-cat { margin-bottom: 26px; }
code {
  background: rgba(139,92,246,.14); color: var(--accent); padding: 3px 8px;
  border-radius: 7px; font-size: 12.5px; font-family: "SF Mono", ui-monospace, Menlo, monospace;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; right: 26px; padding: 14px 22px; border-radius: 14px;
  background: var(--panel-solid); border: 1px solid var(--accent); font-size: 13.5px; font-weight: 700;
  box-shadow: 0 14px 44px rgba(0,0,0,.55); z-index: 99; animation: pop .2s;
}
.toast.ok { border-color: rgba(34,197,94,.55); }
.toast.err { border-color: rgba(255,77,94,.55); }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 820px) {
  .app { flex-direction: column; height: auto; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  nav { flex-direction: row; flex-wrap: wrap; overflow-y: visible; }
  /* Als Chip-Leiste braucht die Liste keine Zwischentitel */
  .nav-sektion { display: none; }
  main { padding: 24px 18px 50px; }
}

/* Rechte-Kästchen in der Rang-Bearbeitung */
.perm-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}
.perm-row:last-child { border-bottom: 0; }
.perm-row input { margin-top: 3px; flex: 0 0 auto; }
.perm-row code { font-size: 11px; }