/* ACP-Theme "Neuer Look" (24.10.2026) -- Auswahl des Nutzers aus dem Design-Baukasten, s.
   docs/acp/design/AUSWAHL.md. Wird NACH acp.css geladen und ueberschreibt nur Tokens und die
   betroffenen Bausteine; acp.css bleibt die Struktur-Grundlage (Layout, Abstaende, Klassen).

   Auswahl: Farbwelt A (Schiefer + Eisblau), dunkel · Schrift C (Atkinson Hyperlegible + Chivo Mono,
   Pixel-Ueberschriften Silkscreen) · Formen weich · Dichte normal · Navigation B (obere Leiste,
   schlicht) · Server-Karten A (Verlaufslinien) · Feed B (luftig, Pille) · Spielerliste B (Zeilen
   mit Rundbild) · Konsole B (weiche Box) · Rechte-Matrix A (Zeichen). */

:root {
  --bg-page: #0d1218;
  --bg-panel: #141a22;
  --bg-header: #0a0f14;
  --bg-hover: #1a222c;
  --bg-input: #10161d;
  --border: #263140;
  --border-soft: #1f2a37;
  --text-strong: #eef2f6;
  --text-body: #dce3eb;
  --text-muted: #9aa8b8;
  --text-muteder: #8a99ab;
  --text-label: #8696a8;
  --text-faint: #6f7e90;
  /* Zustandsfarben bleiben Zustandsfarben (gruen = laeuft, gelb = Warnung, rot = Fehler); die Marke
     ist eisblau und hat ihren eigenen Token, damit "OK" nicht plötzlich blau aussieht. */
  --accent-green: #4fd093;
  --accent-green-hover: #7de0b2;
  --accent-blue: #6db6dc;
  --accent-amber: #ecbb4c;
  --accent-red: #f4745f;
  --accent: #6db6dc;
  --accent-ink: #06141c;
  --font-sans: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-pixel: 'Silkscreen', 'Chivo Mono', ui-monospace, monospace;
  --r-box: 12px;
  --r-ctl: 8px;
  --term-bg: #0b0f14;
}

a { color: var(--accent); }
a:hover { color: #a4d4ec; }

/* Pixel-Ueberschriften: nur kleine Grossbuchstaben-Etiketten, nie Fliesstext. */
.label, .stat-label, .matrix-section, .frontend-label, .server-row .label {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Weiche Formen */
.panel, .server-card, .frontend-card { border-radius: var(--r-box); }
.auth-card { border-radius: 16px; }
.auth-brand-stack .dot { border-radius: 10px; }
.app-header .brand .dot, .app-sidebar .brand-row .dot, .auth-card .brand .dot,
.mobile-topbar .dot { border-radius: 7px; }
.button, .field input, .inline-form input, .inline-form select, .log-search input { border-radius: var(--r-ctl); }
.notice, .note-row, .report-row, .player-row { border-radius: 10px; }
.settings-menu { border-radius: 14px; }
.nav-layout-toggle { border-radius: 10px; }
.settings-menu-item .nav-layout-toggle button { border-radius: 8px; }

.button:hover { border-color: var(--accent); color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button.primary:hover { background: #a4d4ec; border-color: #a4d4ec; color: var(--accent-ink); }
.field input:focus, .auth-card .code-input:focus { border-color: var(--accent); }
.console-quick button:hover { border-color: var(--accent); color: var(--accent); }
.mobile-tabbar a.active .icon { background: var(--accent); }

/* Navigation B: obere Leiste, schlicht -- aktiver Reiter als weich getoente Pille statt Unterstrich */
.app-header { height: 60px; padding: 0 22px; gap: 22px; }
.app-nav { align-items: center; gap: 4px; }
.app-nav a {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-ctl);
  font: 500 14px/1 var(--font-sans);
}
.app-nav a.active {
  box-shadow: none;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel));
  color: var(--text-strong);
  font-weight: 700;
}
.app-nav a:hover:not(.active):not(.disabled) { background: var(--bg-hover); }
.app-nav a:focus-visible, .button:focus-visible, .subnav .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.subnav { height: 52px; gap: 4px; }
.subnav .tab {
  height: 34px;
  border-radius: var(--r-ctl);
  font: 500 12.5px/1 var(--font-sans);
  letter-spacing: 0;
}
.subnav .tab.active { box-shadow: none; background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel)); }
.subnav .tab:hover:not(.active) { background: var(--bg-hover); }
/* Seitenband (Konto-Einstellung) bekommt dieselbe Pillenform */
.app-sidebar-nav a { border-radius: var(--r-ctl); font: 500 14px/1 var(--font-sans); }
.app-sidebar-nav a.active { background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel)); font-weight: 700; }

/* Server-Karten A: Statusstreifen links, ruhige Zahlen; die Verlaufslinien (.spark) kommen mit den
   Messwerten aus dem Heartbeat-Verlauf */
.server-card { position: relative; overflow: hidden; background: var(--bg-panel); border: 1px solid var(--border); }
.server-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent-green);
}
.server-card.warn::before { background: var(--accent-amber); }
.server-card.crit::before { background: var(--accent-red); }
.server-card:has(.dot.off)::before { background: var(--accent-red); }
.server-card .dot { width: 9px; height: 9px; }
.server-name { font: 700 15px/1 var(--font-sans); }
.stat-value { font: 500 16px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--text-label); }
.spark { display: block; width: 100%; height: 30px; margin-top: 2px; }
.spark-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-area { fill-opacity: .16; }
.spark.ok .spark-line { stroke: var(--accent-green); } .spark.ok .spark-area, .spark.ok .spark-dot { fill: var(--accent-green); }
.spark.warn .spark-line { stroke: var(--accent-amber); } .spark.warn .spark-area, .spark.warn .spark-dot { fill: var(--accent-amber); }
.spark.info .spark-line { stroke: var(--accent); } .spark.info .spark-area, .spark.info .spark-dot { fill: var(--accent); }
.stat-trend { display: flex; flex-direction: column; gap: 3px; flex: 1 1 100%; min-width: 0; }

/* Handy: der Server-Baum stapelt sich (Elternkarte oben, Kinder darunter, volle Breite), statt die
   Karten nebeneinander zu quetschen. */
@media (max-width: 700px) {
  .topo-node { flex-direction: column; flex-wrap: nowrap; }
  .topo-node > .server-card, .topo-node > .server-card:only-child { flex: 0 0 auto; width: 100%; }
  .topo-children { flex: 0 0 auto; width: 100%; }
  .server-card { flex: 0 0 auto; }
}

/* Ereignis-Feed B: luftig, Quelle als Pille mit Zeichen + Wort (nie Farbe allein) */
.event-feed { gap: 0; }
.event-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 14px 10px;
  font: 400 14px/1.5 var(--font-sans);
}
.event-time { grid-column: 1; grid-row: 1; width: auto; font: 400 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.event-tag {
  grid-column: 2; grid-row: 1;
  justify-self: start;
  width: auto;
  padding: 3px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 12px/1.3 var(--font-sans);
}
.event-msg { grid-column: 2; grid-row: 2; color: var(--text-body); }
.event-row.sev-alarm .event-tag::before { content: "◆ "; }
.event-row.sev-alarm .event-tag::after { content: " · Alarm"; }
.event-row.sev-warn .event-tag::before { content: "▲ "; }
.event-row.sev-warn .event-tag::after { content: " · Warnung"; }
.event-row.sev-info .event-tag::before { content: "● "; }
.event-row.sev-info .event-tag::after { content: " · Info"; }
.event-row.sev-info .event-tag { color: var(--text-muted); }
@media (max-width: 520px) {
  .event-row { grid-template-columns: minmax(0, 1fr); }
  .event-time, .event-tag, .event-msg { grid-column: 1; }
  .event-tag { grid-row: 2; }
  .event-msg { grid-row: 3; }
}

/* Spielerliste B: grosse Zeilen mit Rundbild */
.online-row { padding: 12px 16px; gap: 12px; }
.online-row .avatar { width: 32px; height: 32px; border-radius: 50%; background: #3a4a5c; }
.online-row .name { font: 700 14px/1.2 var(--font-sans); }
.online-row .server-tag, .online-row .last-seen { font: 400 12.5px/1 var(--font-sans); color: var(--text-muted); }
.online-row .status-dot { width: 8px; height: 8px; }
.online-row:hover { background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel)); }
.player-row { padding: 13px 16px; }
.player-name { font: 700 14px/1.2 var(--font-sans); }
.profile-head .avatar-big { border-radius: 50%; width: 60px; height: 60px; background: #3a4a5c; }
.profile-head .name { font: 700 22px/1.1 var(--font-sans); }
.flag-badge { border-radius: 999px; font: 600 11px/1 var(--font-sans); padding: 4px 9px; }

/* Konsole B: weiche Box; das Terminal selbst bleibt dunkel */
.console-output {
  background: var(--term-bg);
  border: 0;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .7);
  font: 400 13px/1.7 var(--font-mono);
}
.console-output .line .who { color: var(--accent); }
.console-prompt-bar { border-radius: 12px; border-color: var(--border); background: var(--bg-input); }
.console-prompt-bar .chevron { color: var(--accent); }
.console-quick button { border-radius: 999px; border-color: var(--border); padding: 7px 13px; }

/* Rechte-Matrix A: Zeichen (✓ / –), kompakt und schnell lesbar */
.rechte-matrix { font-family: var(--font-sans); font-size: 13px; }
.rechte-matrix th, .rechte-matrix td { padding: 8px 12px; border-color: var(--border-soft); }
.rechte-matrix th { color: var(--text-label); font: 400 10px/1.4 var(--font-pixel); text-transform: uppercase; letter-spacing: .06em; }
.rechte-matrix td:first-child code { font: 400 12px/1.4 var(--font-mono); }
.matrix-cell { font: 600 16px/1 var(--font-mono); min-height: 24px; border-radius: 6px; }
.matrix-cell:hover { text-decoration: none; background: var(--bg-hover); }
.matrix-cell.on { color: var(--accent-green); }
.matrix-cell.off { color: var(--text-faint); font-weight: 400; }
.matrix-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.matrix-section { background: var(--bg-header); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Alle uebrigen Seiten (Moderation, Team & Rechte, Bot, Karte, Anmeldung): gleiche Sprache ---- */

/* Ueberschriften und Namen in der Fliesstext-Schrift, Zahlen/Codes bleiben mono */
.network-tab h1, .players-tab h1, .player-detail h1, .moderation-tab h1, .team-page-pad h1,
.team-tab h1, .bot-tab h1, .console-tab h1, .auth-card h1 { font: 700 22px/1.25 var(--font-sans); letter-spacing: 0; }
.network-tab h2, .player-detail h2, .moderation-tab h2, .team-tab h2, .bot-tab h2, .console-tab h2 { font: 700 16px/1.3 var(--font-sans); }
.moderation-tab h3 { font: 700 14px/1.3 var(--font-sans); }
.auth-brand-stack .name, .auth-card .brand .name, .app-header .brand .name, .app-sidebar .brand-row .name,
.mobile-topbar .name { font: 700 14px/1 var(--font-sans); letter-spacing: .01em; }
.auth-brand-stack .subtitle { font: 400 10px/1 var(--font-pixel); letter-spacing: .08em; }
.auth-card p, .muted { font-family: var(--font-sans); }
.auth-card p { font-size: 14px; }
.auth-shell { background: radial-gradient(circle at 50% 0%, #17202b 0%, var(--bg-page) 62%); }

/* Knopf "danger" (Gruppe loeschen u. a.) */
.button { font: 600 12px/1 var(--font-sans); padding: 8px 14px; }
.button.primary { font: 700 14px/1 var(--font-sans); padding: 12px 20px; }
.button.danger { border-color: color-mix(in srgb, var(--accent-red) 55%, var(--border)); color: var(--accent-red); }
.button.danger:hover { background: color-mix(in srgb, var(--accent-red) 14%, transparent); border-color: var(--accent-red); color: var(--accent-red); }

/* Listen links (Gruppen, Konten, Meldungen): ruhige Zeilen, aktive Zeile als getoente Flaeche */
.list-row { padding: 12px 16px; gap: 12px; border-left-width: 4px; }
.list-row.active { background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel)); border-left-color: var(--accent); }
.list-row .list-row-name { font: 700 14px/1.3 var(--font-sans); }
.list-row .list-row-meta { font: 400 12px/1.3 var(--font-sans); color: var(--text-muted); margin-top: 3px; }
.list-row .badge { font: 600 11px/1 var(--font-sans); border-radius: 999px; padding: 4px 9px; }
.detail-head { padding: 18px 22px; }
.detail-head .title { font: 700 20px/1.2 var(--font-sans); }
.detail-head .subtitle { font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); }
.split-side-head { font: 700 14px/1 var(--font-sans); padding: 15px 18px; }

/* Rechte-Haken (Gruppen-Baum, Konten-Zugriff): runde Ecken, Haken sichtbar statt nur Farbe */
.node-check .box, .access-item .box, .checkline .box { border-radius: 5px; width: 16px; height: 16px; border-color: #4a5a6e; display: grid; place-items: center; font: 700 11px/1 var(--font-mono); color: var(--accent-ink); }
.box.on::after { content: "✓"; }
.box.partial::after { content: "–"; }
.access-item .box { width: 15px; height: 15px; }
.node-check .label { font: 500 13px/1.3 var(--font-sans); }
.node-check .label .desc { font: 400 12px/1.4 var(--font-sans); color: var(--text-muted); }
.perm-cat-bulk .box, .perm-cat > .box { border-radius: 5px; width: 17px; height: 17px; border-color: #4a5a6e; }
.perm-cat-summary { font-family: var(--font-sans); }
.perm-cat-summary .perm-cat-count, .access-count { font: 500 12px/1 var(--font-sans); }
.member-chip { border-radius: 999px; padding: 6px 12px 6px 7px; font: 500 12.5px/1 var(--font-sans); }
.member-chip .avatar { width: 20px; height: 20px; border-radius: 50%; }
.role-group-row { border-radius: 10px; padding: 9px 12px; font: 500 12.5px/1.2 var(--font-sans); }
.role-group-row .group { font-family: var(--font-mono); color: var(--accent); font-size: 12px; }
.access-card { border-radius: var(--r-box); }
.access-card-head { padding: 10px 15px; font: 700 13px/1 var(--font-sans); }
.access-tag { border-radius: 999px; padding: 3px 9px; font: 600 11px/1.3 var(--font-sans); color: #bfe1f2; }
.access-item .text { font: 400 12.5px/1.2 var(--font-sans); }
.access-note { border-radius: 10px; font: 400 12.5px/1.55 var(--font-sans); }
.acc-side-row, .acc-session { border-radius: 10px; font-family: var(--font-sans); font-size: 13px; }
.acc-session-head .agent, .acc-session .ip, .acc-action-line { font-family: var(--font-sans); }

/* Moderation: Meldungs-Karten, Pillen, Sanktions-Panel, CoreProtect-Tabelle */
.report-card { border-radius: var(--r-box); border-left-width: 4px; padding: 14px 16px; gap: 8px; background: var(--bg-panel); }
a.report-card:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel)); }
.report-card .report-title { font: 700 14px/1.4 var(--font-sans); }
.report-card .report-id, .report-card .report-meta { font: 400 12px/1.3 var(--font-sans); color: var(--text-muted); }
.report-card .report-status { border-radius: 999px; padding: 4px 10px; font: 600 11px/1 var(--font-sans); letter-spacing: 0; text-transform: none; border: 1px solid currentColor; }
.report-card .report-status.open::before { content: "◆ "; }
.report-card .report-status.pending::before { content: "▲ "; }
.report-card .report-status.resolved::before { content: "✓ "; }
.pill-row { border-radius: 12px; padding: 4px; }
.pill-label { border-radius: 8px; padding: 9px 6px; font: 600 12.5px/1 var(--font-sans); }
.pill-label.duration { border-radius: 999px; padding: 7px 13px; border-color: var(--border); }
.pill-input:focus-visible + .pill-label { outline-color: var(--accent); }
.sanction-panel textarea { border-radius: 10px; font: 400 14px/1.5 var(--font-sans); padding: 11px 13px; }
.sanction-panel .checkline { font: 400 13.5px/1.4 var(--font-sans); }
.sanction-panel .foot-note { font: 400 12px/1.4 var(--font-sans); color: var(--text-muted); }
.sanction-execute { border-radius: 10px; font: 700 14px/1 var(--font-sans); letter-spacing: 0; padding: 14px; color: var(--accent-ink); }
.cp-table { border-radius: var(--r-box); }
.cp-table th { font: 400 10px/1 var(--font-pixel); letter-spacing: .06em; padding: 10px 14px; }
.cp-table td { font: 400 12.5px/1.4 var(--font-mono); padding: 10px 14px; }
.note-row, .report-row { padding: 12px 15px; }
.note-meta { font: 400 12px/1.3 var(--font-sans); color: var(--text-muted); }
.note-text { font-size: 14px; }
.inline-form input, .inline-form select, .log-search input { padding: 9px 12px; font: 400 14px/1.4 var(--font-sans); }

/* Chat-Log / Audit-Log */
.log-header { padding: 15px 22px; }
.log-header .title { font: 700 15px/1 var(--font-sans); }
.log-row { border-radius: 10px; padding: 9px 12px; font: 400 13px/1.5 var(--font-sans); }
.log-time, .log-server, .log-node, .log-detail { font-family: var(--font-mono); font-size: 12px; }
.log-actor { font: 700 13px/1.5 var(--font-sans); }
.log-node { color: var(--accent); }

/* Bot-Seite */
.bot-stat-card, .bot-link-row, .bot-status-card { border-radius: var(--r-box); }
.bot-stat-card .label { font: 400 10px/1 var(--font-pixel); }
.bot-stat-card .value { font: 500 22px/1 var(--font-mono); }
.bot-link-name, .bot-status-name { font: 700 14px/1.2 var(--font-sans); }
.bot-link-meta, .bot-status-sub { font: 400 12.5px/1.5 var(--font-sans); color: var(--text-muted); }
.bot-log-box { border-radius: 10px; }
.bot-tab code { font: 500 13px/1.5 var(--font-mono); color: var(--accent); }

/* Karte: Overlays als weiche Karten */
.map-layers-overlay { border-radius: var(--r-box); border-color: var(--border); background: color-mix(in srgb, var(--bg-header) 92%, transparent); }
.map-coords-overlay { border-radius: 10px; border-color: var(--border); }
.map-render-status { font-family: var(--font-sans); font-size: 12.5px; }
.map-layers-overlay .checkline { font: 400 13px/1.2 var(--font-sans); }

/* Einstellungsmenue und Kopfleiste */
.settings-menu-head .avatar { border-radius: 50%; width: 38px; height: 38px; background: #3a4a5c; }
.settings-menu-head .name { font: 700 14px/1.2 var(--font-sans); }
.settings-menu-head .role, .settings-menu-item button, .settings-menu-item a { font-family: var(--font-sans); }
.settings-menu-item button, .settings-menu-item a { font-size: 13.5px; font-weight: 600; }
.app-header .who-chip, .app-mini-header .who-chip { border-radius: 8px; }
.app-header .who, .app-mini-header .who { font: 500 12.5px/1 var(--font-sans); }
.app-header .who .status-chip, .app-mini-header .who .status-chip { font-family: var(--font-mono); font-size: 12px; }
.mobile-tabbar a { font: 600 10px/1 var(--font-sans); }
.mobile-tabbar a.active { color: var(--text-strong); }
.mobile-tabbar a .icon { border-radius: 6px; }

/* Hinweise und Platzhalter */
.notice { border-radius: 12px; font: 400 14px/1.5 var(--font-sans); padding: 13px 17px; }
.notice.error { border-left: 4px solid var(--accent-red); }
.notice.info { border-left: 4px solid var(--accent); }
.wip-tag { border-radius: 999px; font: 400 9px/1.5 var(--font-pixel); padding: 2px 8px; }
.perm-cat-bulk .box, .perm-cat > .box { display: grid; place-items: center; font: 700 12px/1 var(--font-mono); color: var(--accent-ink); }