/*
 * mySCP Panel (Neubau) - Design nach dem v5-Kundencenter: dunkles Gaming-Dashboard, linke Sidebar, Topbar, Karten.
 * Kein Build-Schritt: diese Datei wird direkt ausgeliefert. Icons: Material Design Icons (public/vendor/mdi).
 */
:root {
    --bg:#0d1421; --bg2:#111a2b; --card:#182238; --card2:#1e2a44; --line:#26324d;
    --text:#e6edf7; --muted:#8b9bb8; --accent:#3b82f6; --accent2:#60a5fa;
    --green:#22c55e; --red:#ef4444; --yellow:#eab308; --hover:rgba(59,130,246,.12);
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--text); font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif; }
a { color:var(--accent2); text-decoration:none; } a:hover { color:var(--accent); text-decoration:underline; }
h1 { font-size:22px; margin:0 0 6px; } h2 { font-size:16px; margin:0 0 12px; } h3 { font-size:14px; margin:0 0 8px; }
.muted { color:var(--muted); } .small { font-size:12px; }
.mono, .ref { font-family:Consolas,ui-monospace,monospace; } .ref { letter-spacing:.3px; }
.plus { color:var(--green); } .minus { color:var(--red); }
.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mdi { line-height:1; }

/* ---------- Shell ---------- */
.layout { display:flex; min-height:100vh; }
.sidebar { width:235px; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto;
    background:var(--bg2); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.logo { display:flex; align-items:center; gap:10px; padding:18px 20px; font-size:19px; font-weight:700;
    border-bottom:1px solid var(--line); color:var(--text) !important; text-decoration:none !important; }
.logo .mdi { color:var(--accent2); font-size:24px; }
.nav { padding:10px 0; flex:1; }
.nav-sec { padding:14px 20px 6px; font-size:11px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
.nav-item { display:flex; align-items:center; gap:11px; padding:9px 20px; color:var(--muted); font-size:13.5px;
    border-left:3px solid transparent; transition:.15s; text-decoration:none !important; }
.nav-item:hover { background:var(--card); color:var(--text); }
.nav-item.active { color:var(--accent2); background:linear-gradient(90deg,var(--hover),transparent); border-left-color:var(--accent); }
.nav-item .mdi { font-size:18px; width:20px; text-align:center; }
.nav-item .count { margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700; border-radius:9px; padding:1px 6px; }
/* Admin-Menue: Abschnitte auf-/zuklappen */
.nav-group > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; user-select:none; }
.nav-group > summary::-webkit-details-marker { display:none; }
.nav-group > summary:hover { color:var(--text); }
.nav-group .nav-caret { margin-left:auto; font-size:16px; letter-spacing:0; transition:transform .15s; }
.nav-group:not([open]) .nav-caret { transform:rotate(-90deg); }
.nav-group > summary .count { background:var(--red); color:#fff; font-size:10px; font-weight:700; border-radius:9px; padding:1px 6px; letter-spacing:0; }
.nav-group[open] > summary .count { display:none; }
.plan { margin:14px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.plan-l { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.plan-v { font-size:18px; font-weight:700; font-family:Consolas,monospace; color:var(--green); }
.user { display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid var(--line); }
.avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#3b82f6,#8b5cf6);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; }
.user-name { font-size:13px; font-weight:600; } .user-sub { font-size:11px; color:var(--muted); }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 28px;
    background:var(--bg2); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.crumbs { font-size:14px; color:var(--muted); } .crumbs b { color:var(--text); font-weight:600; }
.top-actions { display:flex; gap:8px; align-items:center; }
.chip { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:6px 12px; font-size:13px; color:var(--text) !important;
    text-decoration:none !important; display:inline-flex; align-items:center; gap:6px; }
.chip:hover { border-color:var(--accent); }
.content { padding:22px 28px; flex:1; max-width:1280px; width:100%; min-width:0; }
.footer { color:var(--muted); font-size:11px; text-align:center; padding:22px 0 10px; }

/* Oeffentliche Seiten (Shop, Anmeldung) */
.pubbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 28px; background:var(--bg2); border-bottom:1px solid var(--line); }
.pubbar .logo { border:0; padding:0; flex-shrink:0; }
.pubbar nav { display:flex; gap:18px; align-items:center; min-width:0; }
.pubbar nav a { white-space:nowrap; }
.pubbar nav a { color:var(--muted); } .pubbar nav a:hover { color:var(--text); text-decoration:none; }
.pub { max-width:1100px; margin:28px auto; padding:0 18px; }
.narrow { max-width:440px; margin-left:auto; margin-right:auto; }

/* ---------- Karten, Kacheln ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-head h2 { margin:0; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:16px; }
.grid2 > * { min-width:0; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:18px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; color:var(--text) !important; text-decoration:none !important; display:block; }
a.kpi:hover { border-color:var(--accent); }
.kpi-l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.kpi-v { font-size:26px; font-weight:700; margin:4px 0 2px; font-family:Consolas,monospace; }
.kpi-s { font-size:12px; color:var(--muted); }
.big { font-size:30px; font-weight:700; font-family:Consolas,monospace; }
.kv { display:grid; grid-template-columns:fit-content(170px) minmax(0,1fr); gap:7px 16px; }
/* lange Werte (E-Mail, Host:Port, Pfade) brechen um statt aus der Karte zu laufen */
.kv > * { min-width:0; overflow-wrap:anywhere; }
.kv > span:nth-child(odd) { color:var(--muted); }

/* Server-Karten */
.servers { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:16px; }
.scard { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; color:var(--text) !important;
    text-decoration:none !important; transition:.15s; }
.scard:hover { border-color:var(--accent); transform:translateY(-3px); }
.scard-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.sicon { width:46px; height:46px; border-radius:10px; flex-shrink:0; background:linear-gradient(135deg,#16a34a,#4ade80);
    display:flex; align-items:center; justify-content:center; font-size:23px; color:#fff; }
.sicon.lg { width:54px; height:54px; font-size:28px; }
.sicon.vs { background:linear-gradient(135deg,#2563eb,#8b5cf6); }
.scard-name { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scard-kv { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
/* nur die Beschriftung (direktes Kind) grau - Pills/Icons darin behalten ihre Farbe (Statusseite «läuft» = grün) */
.scard-kv:last-child { border-bottom:0; } .scard-kv > span { color:var(--muted); }
.scard-new { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:170px;
    border-style:dashed !important; color:var(--muted) !important; gap:8px; }
.scard-new .mdi { font-size:30px; }
.scard-new:hover { color:var(--accent2) !important; }

/* Shop-Kacheln */
.games { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.gcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:8px;
    color:var(--text) !important; text-decoration:none !important; transition:.15s; }
.gcard:hover { border-color:var(--accent); transform:translateY(-3px); }
.gcard-name { font-weight:600; font-size:15px; }
.gcard-price { margin-top:auto; font-family:Consolas,monospace; color:var(--green); font-weight:600; }

/* Pills / Badges */
.pill, .badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap;
    background:rgba(139,155,184,.13); color:var(--muted); }
.pill-g, .badge-confirmed { background:rgba(34,197,94,.13); color:var(--green); }
.pill-y, .badge-pending { background:rgba(234,179,8,.13); color:var(--yellow); }
.pill-r, .badge-rejected, .badge-cancelled { background:rgba(239,68,68,.13); color:var(--red); }
.pill-b { background:rgba(59,130,246,.13); color:var(--accent2); }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:currentColor; }

/* ---------- Server-Detail ---------- */
.srvhead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.srvhead-t { flex:1; min-width:220px; }
.srvhead-a { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:4px;
    width:fit-content; max-width:100%; margin-bottom:16px; }
.tabs a { padding:7px 14px; border-radius:8px; color:var(--muted); font-size:13px; text-decoration:none !important; }
.tabs a:hover { color:var(--text); } .tabs a.on { background:var(--card2); color:var(--text); font-weight:600; }
.console { background:#05080f; border:1px solid var(--line); border-radius:10px; padding:12px; height:380px; overflow-y:auto;
    font:12px/1.45 Consolas,ui-monospace,monospace; color:#cbd5e1; white-space:pre-wrap; word-break:break-all; }
.progress { height:6px; background:var(--bg2); border-radius:4px; overflow:hidden; }
.progress > div { height:100%; background:var(--accent); }
.events { list-style:none; margin:0; padding:0; font-size:13px; }
.events li { display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); }
.events li:last-child { border-bottom:0; }
.events time { color:var(--muted); white-space:nowrap; font-size:12px; min-width:110px; }
.events .err { color:var(--red); }

/* ---------- Tabellen ---------- */
table.list { width:100%; border-collapse:collapse; font-size:13.5px; }
table.list th { text-align:left; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); padding:8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
table.list td { border-bottom:1px solid var(--line); padding:9px 8px; vertical-align:middle; }
table.list tr:hover td { background:var(--hover); }
.table-wrap { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }

/* ---------- Formulare + Buttons ---------- */
label { display:block; margin:12px 0 4px; color:var(--muted); font-size:12.5px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input[type=tel], input[type=url], select, textarea {
    width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--line); background:var(--bg2); color:var(--text); font-size:14px; font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(59,130,246,.18); }
input.amount { width:140px; } input.note { width:230px; }
.row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; } .row label { margin-top:0; }
.row > div { min-width:0; }
.inline { display:inline-flex; gap:6px; align-items:center; margin:0; }
/* Checkbox + Text: der Text steht in einem <span> (ein Flex-Element), sonst bricht jeder Link/Textteil einzeln um */
.check { display:flex; gap:8px; align-items:flex-start; color:var(--text); font-size:14px; margin:10px 0; }
.check > input { width:auto; flex:none; margin:3px 0 0; }
.check > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.btn { display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:9px 17px; border:1px solid transparent; border-radius:8px;
    background:var(--accent); color:#fff !important; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none !important; transition:.15s; font-family:inherit; }
.btn:hover { filter:brightness(1.12); }
.btn[disabled], .btn.disabled { opacity:.45; cursor:not-allowed; filter:none; }
.btn-sm { margin-top:0; padding:6px 12px; font-size:12.5px; }
.btn-green { background:var(--green); } .btn-danger { background:var(--red); } .btn-yellow { background:#b7791f; }
.btn-ghost { background:var(--card2); border-color:var(--line); color:var(--text) !important; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent2) !important; filter:none; }
.btn-link { background:none; border:0; color:var(--accent2); cursor:pointer; font-size:13.5px; padding:0; font-family:inherit; }
.btn-link:hover { text-decoration:underline; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* ---------- Meldungen ---------- */
.alert { padding:11px 15px; border-radius:10px; margin-bottom:14px; border:1px solid var(--line); background:var(--card); }
.alert-ok { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#a7f3c9; }
.alert-err { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#f8b4b4; }
.alert-warn { background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.35); color:#fde68a; }
.alert-info { background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.35); color:#bfdbfe; }

/* Seitenwechsel */
nav.pager { margin-top:12px; } nav.pager ul { list-style:none; display:flex; gap:12px; padding:0; margin:0; }

/* Preis-Box im Bestellformular */
.pricebox { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:16px; }
.pricebox .total { font-size:28px; font-weight:700; font-family:Consolas,monospace; color:var(--green); }

@media (max-width:860px) {
    .layout { flex-direction:column; }
    .sidebar { width:100%; height:auto; position:static; }
    .nav { display:flex; flex-wrap:wrap; padding:6px; } .nav-sec, .plan, .user { display:none; }
    .nav-item { border-left:0; padding:8px 12px; }
    .nav-group { width:100%; } .nav-group > summary.nav-sec { display:flex; padding:8px 12px 4px; }
    .content, .topbar { padding-left:16px; padding-right:16px; }
    .kv { grid-template-columns:minmax(0,1fr); } .kv > span:nth-child(odd) { margin-top:6px; }
    table.list { font-size:12.5px; } table.list th, table.list td { padding:7px 6px; }
}
/* Handy: oeffentliches Menue passt in die Breite (Logo nicht an «Gameserver» kleben, «Konto eröffnen» nicht umbrechen) */
@media (max-width:520px) {
    .pubbar { padding:12px 14px; gap:8px; }
    .pubbar .logo { font-size:16px; gap:5px; } .pubbar .logo .mdi { font-size:20px; }
    .pubbar nav { gap:9px; font-size:12.5px; }
    .pubbar nav .chip { padding:5px 8px; font-size:12px; }
    .pub { padding:0 16px; margin:18px auto; }
}
@media (max-width:370px) {
    .pubbar { padding:12px 10px; } .pubbar nav { gap:7px; font-size:12px; }
    .pubbar .logo .mdi, .pubbar nav .chip .mdi { display:none; }
}