/*
 * ACP – Design "Tal" (wie die Webseite, web/public/assets/css/tal.css): flach, warmes Grau, Fackel-Orange als einziger Akzent,
 * Mono-Schrift für Zahlen und kleine Überschriften. Das Panel lädt diese Datei nur bei design: "tal" (Standard) nach style.css;
 * style.css bleibt unverändert, damit design: "ki" jederzeit das vorherige Aussehen zeigt.
 *
 * Variablen stehen unter :root[data-design="tal"], damit sie die hellen Werte aus style.css (:root[data-theme="light"])
 * zuverlässig überschreiben.
 */

:root[data-design="tal"] {
  --bg: #0b0d10;
  --bg-2: #111418;
  --surface: #13161b;
  --surface-2: #191d22;
  --surface-3: #22272d;
  --border: rgba(236, 235, 230, 0.09);
  --border-strong: rgba(236, 235, 230, 0.2);
  --text: #ecebe6;
  --text-2: #a3a39b;
  --text-3: #76766f;
  --torch: #f2b04b;
  --torch-hover: #f7c372;
  --torch-ink: #1f1606;
  --brand: #f2b04b;
  --brand-2: #f2b04b;
  --brand-soft: rgba(242, 176, 75, 0.12);
  --ok: #8cba72;
  --ok-soft: rgba(140, 186, 114, 0.13);
  --warn: #e6c25a;
  --warn-soft: rgba(230, 194, 90, 0.12);
  --bad: #e5675a;
  --bad-soft: rgba(229, 103, 90, 0.12);
  --info: #7f9fc4;
  --info-soft: rgba(127, 159, 196, 0.14);
  --shadow: none;
  --radius: 6px;
  --radius-sm: 4px;
  --console-bg: #08090b;
  --console-dim: #a3a39b;
  --c1: #f2b04b; --c2: #7f9fc4; --c3: #8cba72; --c4: #c9c8c0; --c5: #b48ead; --c6: #e5675a;
  --map-bg: #0d1013; --map-grid: rgba(236, 235, 230, 0.05); --map-axis: rgba(242, 176, 75, 0.4); --map-label: rgba(201, 200, 192, 0.45);
}

/* Hell: warmes Papier statt Bläulich-Weiß, Orange dunkler für genug Kontrast */
:root[data-design="tal"][data-theme="light"] {
  --bg: #f3f1eb;
  --bg-2: #ebe8e0;
  --surface: #fbfaf7;
  --surface-2: #f2efe8;
  --surface-3: #e6e2d8;
  --border: rgba(40, 33, 20, 0.11);
  --border-strong: rgba(40, 33, 20, 0.23);
  --text: #1d1b17;
  --text-2: #5c5850;
  --text-3: #8a857a;
  /* style.css nutzt --brand im hellen Design auch als Linkfarbe – daher dunkler als die Fackel */
  --brand: #a8650c;
  --brand-2: #9a5a05;
  --brand-soft: rgba(201, 128, 15, 0.13);
  --ok: #3f7a2c;
  --ok-soft: rgba(63, 122, 44, 0.1);
  --warn: #8f6400;
  --warn-soft: rgba(176, 125, 0, 0.11);
  --bad: #b3392c;
  --bad-soft: rgba(179, 57, 44, 0.09);
  --info: #3f6690;
  --info-soft: rgba(63, 102, 144, 0.1);
  --console-bg: #101215;
  --c1: #c9800f; --c2: #3f6690; --c3: #3f7a2c; --c4: #7a766c; --c5: #7d5a8c; --c6: #b3392c;
}

/* ------------------------------------------------------------ Grundlagen */
body { line-height: 1.55; }
body::before { display: none; }
h1 { font-size: 26px; font-weight: 750; letter-spacing: -0.035em; line-height: 1.15; }
h2 { font-weight: 700; letter-spacing: -0.02em; }
::selection { background: var(--torch); color: var(--torch-ink); }
::-webkit-scrollbar-thumb { border-radius: 0; }
/* style.css färbt im hellen Design alle Links mit :root[data-theme="light"] a – Navigation, Buttons und Kacheln ausnehmen */
:root[data-design="tal"] .nav a { color: var(--text-2); }
:root[data-design="tal"] .nav a:hover, :root[data-design="tal"] .nav a.active { color: var(--text); }
:root[data-design="tal"] a.btn { color: var(--text); }
:root[data-design="tal"] a.btn.ghost { color: var(--text-2); }
:root[data-design="tal"] a.btn.primary { color: var(--torch-ink); }
:root[data-design="tal"] a.stat, :root[data-design="tal"] a.list-item { color: inherit; }
td a, .list-item a:not(.btn), .player-cell a, .kv a { color: var(--text); }
td a:hover, .list-item a:not(.btn):hover, .player-cell a:hover, .kv a:hover { color: var(--brand-2); text-decoration: none; }

/* ------------------------------------------------------------ Seitenleiste und Kopfzeile */
.sidebar { background: var(--bg-2); padding: 18px 12px; }
.brand { padding: 4px 8px 22px; gap: 10px; }
/* Wie die Webseite im Design "tal": nur Schriftzug, ohne Bildmarke */
.brand img { display: none; }
.brand b { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.brand span { font: 500 10.5px var(--mono); letter-spacing: 0.16em; }
.nav-label { font: 500 10.5px var(--mono); letter-spacing: 0.16em; padding: 16px 10px 6px; }
.nav a { border-radius: 0 4px 4px 0; padding: 7px 10px; font-weight: 500; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--torch); }
:root[data-design="tal"][data-theme="light"] .nav a.active { background: var(--surface); }
:root[data-design="tal"] .nav a.active svg { color: var(--brand); }
.nav .badge { margin-left: auto; }
.sidebar-foot .who a { color: var(--text-3); }
.sidebar-foot .who a:hover { color: var(--brand-2); }

.topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-design="tal"][data-theme="light"] .topbar { background: var(--bg); }

/* Kleine Überschrift über dem Seitentitel: Bereich der Navigation (--section setzt main.js) */
.page-head .titles::before {
  content: var(--section, none);
  display: block; margin-bottom: 5px;
  font: 500 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand);
}
.page-head { margin-bottom: 24px; }
.page-head p { color: var(--text-2); max-width: 70ch; }
.page-head .icon-box { border-radius: 4px !important; background: var(--surface-2) !important; color: var(--brand) !important; width: 44px !important; height: 44px !important; }

/* ------------------------------------------------------------ Bausteine */
.card { background: var(--surface); box-shadow: none; }
.card-head h2 { font-size: 14px; }

/* Kennzahlen: Linie oben statt Kachel, Zahlen in Mono */
.card.stat, :root[data-design="tal"] .card.stat { background: none; border: 0; border-top: 1px solid var(--border-strong); border-radius: 0; padding: 14px 2px 12px; }
.stat .value { font: 600 24px/1.2 var(--mono); letter-spacing: -0.03em; }
.stat .value small { font-family: var(--sans); }
.stat .label svg { color: var(--text-3); }
.stat .spark, .server-card .spark { opacity: 0.55; }
a.stat:hover { border-top-color: var(--torch); }

.bar { height: 6px; border-radius: 0; }
.bar > i { border-radius: 0; background: var(--brand); }
.bar.warn > i { background: var(--warn); }
.bar.bad > i { background: var(--bad); }

.pill { border-radius: 3px; padding: 2px 8px; font-weight: 600; font-size: 11.5px; }
:root[data-design="tal"] .pill.brand { color: var(--brand-2); }
.dot { width: 8px; height: 8px; border-radius: 1px; }
.dot.ok { animation: none; box-shadow: none; }
.badge { border-radius: 3px; background: var(--torch); color: var(--torch-ink); font: 700 11px var(--mono); }
.badge.bad { background: var(--bad); color: #fff; }
.tag { border-radius: 3px; background: var(--surface-2); }
code { font-size: 12px; }

/* Formulare */
input, select, textarea { background: var(--surface-2); border-radius: 4px; }
:root[data-design="tal"][data-theme="light"] input,
:root[data-design="tal"][data-theme="light"] select,
:root[data-design="tal"][data-theme="light"] textarea { background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
label.field, .form-grid .field { font-weight: 500; }

.btn { border-radius: 4px; font-weight: 600; background: transparent; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: none; }
.btn.primary { background: var(--torch); color: var(--torch-ink); border-color: var(--torch); box-shadow: none; }
.btn.primary:hover { background: var(--torch-hover); border-color: var(--torch-hover); filter: none; }
.btn.ok:hover { background: color-mix(in srgb, var(--ok) 20%, transparent); }

/* Reiter */
.tabs { gap: 18px; }
.tabs a, .tabs button { padding: 10px 2px; font-weight: 500; }
.tabs .active { border-bottom-color: var(--torch); }
.seg { border-radius: 4px; padding: 2px; }
.seg button { border-radius: 3px; font-weight: 500; }
.seg button.active { background: var(--surface-3); box-shadow: none; }

/* Tabellen und Listen */
th { font: 500 10.5px var(--mono); letter-spacing: 0.14em; color: var(--text-3); }
td { font-variant-numeric: tabular-nums; }
tbody tr:hover, .list-item:hover, .chat-line:hover { background: var(--surface-2); }
.empty { color: var(--text-3); }
.empty svg { opacity: 0.45; }
.kv dt { color: var(--text-3); }

/* Spieler: Pixelköpfe eckig */
.avatar { border-radius: 3px; }
.avatar.md { border-radius: 3px; }
.avatar.lg { border-radius: 4px; box-shadow: none; }

/* Server */
.server-card .icon-box { border-radius: 4px; background: var(--surface-2); color: var(--brand); }
:root[data-design="tal"] .server-card .icon-box { color: var(--brand); }
.metrics { gap: 0; }
.metric { background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 2px 12px; }
.metric:first-child { border-left: 0; padding-left: 0; }
.metric span { font: 500 10px var(--mono); letter-spacing: 0.14em; }
.metric b { font-family: var(--mono); font-weight: 600; }

.banner { border-radius: 4px; }

/* Konsole: auch im hellen Design dunkel, ohne Fensterknöpfe */
.console { border-radius: 4px; box-shadow: none; border-color: var(--border-strong); }
.console-bar { color: var(--console-dim); background: rgba(255, 255, 255, 0.015); }
.console-bar .lights { display: none; }
.console-out { color: #d6d4cc; }
.console-out .ln.warn { color: #e6c25a; }
.console-out .ln.error { color: #ef8a7e; background: rgba(229, 103, 90, 0.07); }
.console-out .ln.cmd { color: #f2b04b; }
.console-out .ln.reply { color: #ecebe6; border-left-color: rgba(242, 176, 75, 0.45); }
.console-out .ln.sys, .console-out .t { color: #76766f; }
.console-out .lvl-info { color: #7f9fc4; }
.console-out .lvl-warn { color: #e6c25a; }
.console-out .lvl-error { color: #ef8a7e; }
.console-in .prompt { color: #f2b04b; }
:root[data-design="tal"] .console-in input { background: transparent; border: 0; color: #ecebe6; }
:root[data-design="tal"] .console-bar input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: #ecebe6; }
:root[data-design="tal"] .console-bar .btn { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #c9c8c0; }

/* Inventar */
.slot { border-radius: 3px; }
.slot.filled:hover { border-color: var(--torch); }

/* Karte */
.map-wrap { background: var(--map-bg); border-radius: 4px; }
.map-tip { border-radius: 4px; box-shadow: none; }
.map-info, .rp-clock, .rp-noworld { background: rgba(11, 13, 16, 0.78); color: #c9c8c0; border-radius: 3px; }

.app-card .answer { border-radius: 4px; }
.chart text { font-family: var(--mono); font-size: 10.5px; }
.legend i { border-radius: 0; height: 8px; width: 8px; }

/* Overlays */
.modal-back { background: rgba(5, 6, 8, 0.7); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-design="tal"][data-theme="light"] .modal-back { background: rgba(29, 27, 23, 0.45); }
.modal { border-radius: 8px; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55); }
.toast { border-radius: 6px; box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.5); }
.menu { border-radius: 6px; box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.5); }
.menu button { border-radius: 3px; }

/* ------------------------------------------------------------ Anmeldung: Block-Landschaft wie auf der Webseite */
.login-wrap {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(#e9e6d6, #e9e6d6) 82% 14% / 46px 46px no-repeat,
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 26%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 7%, #fff 50%, transparent 51%),
    linear-gradient(#0e1726 0%, #1c2a3d 55%, #2a3546 100%);
}
.login-wrap::before, .login-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.login-wrap::before {
  top: 30%; background: #18212c;
  clip-path: polygon(0 100%, 0 52%, 5% 52%, 5% 46%, 10% 46%, 10% 40%, 15% 40%, 15% 48%, 20% 48%, 20% 55%, 25% 55%, 25% 44%, 30% 44%, 30% 36%, 35% 36%, 35% 30%, 40% 30%, 40% 38%, 45% 38%, 45% 47%, 50% 47%, 50% 52%, 55% 52%, 55% 45%, 60% 45%, 60% 39%, 65% 39%, 65% 33%, 70% 33%, 70% 41%, 75% 41%, 75% 49%, 80% 49%, 80% 43%, 85% 43%, 85% 50%, 90% 50%, 90% 56%, 100% 56%, 100% 100%);
}
.login-wrap::after {
  top: 45%; background: #0b0d10;
  clip-path: polygon(0 100%, 0 70%, 7% 70%, 7% 64%, 14% 64%, 14% 68%, 21% 68%, 21% 74%, 28% 74%, 28% 69%, 35% 69%, 35% 62%, 42% 62%, 42% 58%, 49% 58%, 49% 65%, 56% 65%, 56% 72%, 63% 72%, 63% 67%, 70% 67%, 70% 60%, 77% 60%, 77% 66%, 84% 66%, 84% 71%, 91% 71%, 91% 66%, 100% 66%, 100% 100%);
}
.login { border-radius: 6px; padding: 30px 30px 26px; }
.login .logo { display: none; }
.login::before {
  content: "CraftVale · Admin"; display: block; margin-bottom: 14px;
  font: 500 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand);
}
.login h1, .login p.lead { text-align: left; }
.login h1 { font-size: 24px; }
.login p.lead { margin: 6px 0 22px; }
.login .hint { border-radius: 4px; background: var(--surface-2); }
.login .btn.primary { width: 100%; }
.totp-qr { border-radius: 4px; }
.recovery-codes { border-radius: 4px; }

.spinner { border-top-color: var(--torch); }
.skeleton { border-radius: 3px; }

/* ------------------------------------------------------------ MOTD */
.motd-entry { border-radius: 6px; }
.mc-list { border-radius: 4px; }

/* ------------------------------------------------------------ Replays */
.rp-timeline { border-radius: 3px; }
.rp-progress { border-radius: 3px 0 0 3px; }
.rp-head { background: var(--torch); box-shadow: none; }
.rp-chip { border-radius: 3px; }
.rp-chip.on { border-color: var(--torch); }
.rp-ev-time { color: var(--brand-2); }
.rp-hover { border-radius: 3px; box-shadow: none; }
.rp-toggle[aria-pressed]::before { border-radius: 2px; }
.rp-toggle[aria-pressed="true"] { background: var(--torch); border-color: var(--torch); color: var(--torch-ink); }
.rp-toggle[aria-pressed="true"]::before { background: var(--torch-ink); color: var(--torch); border-color: var(--torch-ink); }
.evidence-viewer { border-radius: 4px; }

/* ------------------------------------------------------------ Vereinsverwaltung */
.form-sep { font: 500 10.5px var(--mono); letter-spacing: 0.16em; }

@media print {
  .login-wrap { background: none; }
}