/* Minecraft-Panel - Oberfläche.
   Bewusst ohne Framework: eine Datei, keine Build-Schritte, nichts das
   veraltet. Farben liegen als Variablen vor und werden im Dunkelmodus
   getauscht. */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #eceef1;
    --border: #d8dbe0;
    --text: #1c1f23;
    --text-dim: #5c636d;
    --accent: #2f7d4f;
    --accent-text: #ffffff;
    --danger: #b3261e;
    --warn: #9a6700;
    --ok: #2f7d4f;
    --console-bg: #14171a;
    --console-text: #d6dae0;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181c;
        --surface: #1e2126;
        --surface-2: #262a30;
        --border: #333941;
        --text: #e6e8eb;
        --text-dim: #9aa2ad;
        --accent: #4aa06a;
        --accent-text: #0d1117;
        --danger: #e5675c;
        --warn: #d9a441;
        --ok: #4aa06a;
        --console-bg: #101215;
        --console-text: #cdd3da;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { margin: 0 0 .6rem; font-weight: 600; line-height: 1.25; }
h2 { font-size: 1rem; letter-spacing: .01em; }
h3 { font-size: .9rem; color: var(--text-dim); }

/* ── Anmeldeseite ─────────────────────────────────────────────────────── */

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-box {
    width: min(100%, 22rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.login-box h1 { font-size: 1.25rem; }
.subtitle { color: var(--text-dim); margin: 0 0 1.5rem; font-size: .9rem; }
.login-box label { display: block; margin: .9rem 0 .3rem; font-size: .85rem; color: var(--text-dim); }
.login-box button { width: 100%; margin-top: 1.4rem; }

/* ── Kopfleiste ───────────────────────────────────────────────────────── */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .8rem 1.2rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: .6rem; }
.who { display: flex; align-items: center; gap: .8rem; font-size: .875rem; color: var(--text-dim); }

.badge {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .75rem;
}

.state-label { color: var(--text-dim); font-size: .875rem; }

.dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--text-dim);
    flex: none;
}
.dot[data-state="running"] { background: var(--ok); }
.dot[data-state="starting"] { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.dot[data-state="stopped"] { background: var(--text-dim); }
.dot[data-state="failed"] { background: var(--danger); }

@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; } }

/* ── Raster ───────────────────────────────────────────────────────────── */

.layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
    padding: 1rem;
    max-width: 84rem;
    margin: 0 auto;
    align-items: start;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem;
}

.card.wide { grid-column: 1 / -1; }

.card h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

/* ── Kennzahlen ───────────────────────────────────────────────────────── */

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0 0 1rem; }
.facts.compact { margin-top: 1rem; margin-bottom: 0; }
.facts dt { font-size: .75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: .15rem 0 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

#fact-tps[data-level="good"] { color: var(--ok); }
#fact-tps[data-level="mid"] { color: var(--warn); }
#fact-tps[data-level="bad"] { color: var(--danger); }

/* ── Balken ───────────────────────────────────────────────────────────── */

.meter { margin-bottom: .8rem; }
.meter-head {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--text-dim);
    margin-bottom: .25rem;
}
.meter-head span:last-child { font-variant-numeric: tabular-nums; color: var(--text); }

.bar { height: .45rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 999px;
    transition: width .4s ease;
}
.bar > span[data-level="mid"] { background: var(--warn); }
.bar > span[data-level="high"] { background: var(--danger); }

/* ── Bedienelemente ───────────────────────────────────────────────────── */

.buttons { display: flex; gap: .5rem; flex-wrap: wrap; }

button, input, select {
    font: inherit;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .45rem .8rem;
}

button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--text-dim); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; }
button.danger { color: var(--danger); }

button.link {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-dim);
    text-decoration: underline;
    font-size: .85rem;
}
button.link:hover { color: var(--text); }
button.link.danger { color: var(--danger); }

input:focus-visible, button:focus-visible, select:focus-visible, .console:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.hint { font-size: .8rem; color: var(--text-dim); margin: .7rem 0 0; }
.error { color: var(--danger); font-size: .875rem; margin-top: 1rem; }
.warning {
    font-size: .8rem;
    color: var(--warn);
    border-left: 3px solid var(--warn);
    padding-left: .6rem;
    margin: .8rem 0 0;
}

/* ── Konsole ──────────────────────────────────────────────────────────── */

.console-tools {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.console-tools input[type="search"] { flex: 1 1 10rem; }
.checkbox { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--text-dim); }

.console {
    background: var(--console-bg);
    color: var(--console-text);
    border-radius: 8px;
    padding: .8rem;
    margin: 0;
    height: 26rem;
    overflow: auto;
    font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ws-state { font-size: .75rem; font-weight: 400; color: var(--danger); }
.ws-state[data-ok="1"] { color: var(--ok); }

.command-row { display: flex; gap: .5rem; margin-top: .7rem; }
.command-row input {
    flex: 1;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Aktionen ─────────────────────────────────────────────────────────── */

.actions { display: grid; gap: .5rem; }
.action {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem;
    align-items: center;
    padding: .45rem .55rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.action-label { font-size: .85rem; grid-column: 1 / -1; color: var(--text-dim); }
.action:has(input, select) .action-label { grid-column: 1 / -1; }
.action input, .action select { min-width: 0; }
.action button { padding: .35rem .7rem; font-size: .85rem; }

/* ── Listen und Tabellen ──────────────────────────────────────────────── */

.player-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.player-list li {
    background: var(--surface-2);
    border-radius: 6px;
    padding: .35rem .6rem;
    font-size: .9rem;
}
.player-list .empty { background: none; color: var(--text-dim); font-style: italic; padding-left: 0; }

.table { width: 100%; border-collapse: collapse; font-size: .85rem; display: block; overflow-x: auto; }
.table th, .table td {
    text-align: left;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table th { color: var(--text-dim); font-weight: 500; font-size: .75rem; text-transform: uppercase; }
.table td:nth-child(4) { white-space: normal; max-width: 24rem; }
.row-actions { display: flex; gap: .8rem; }

.stack { display: grid; gap: .5rem; margin-top: 1.2rem; }

/* ── Hinweisbox ───────────────────────────────────────────────────────── */

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 10;
    max-width: min(90vw, 32rem);
    padding: .6rem 1rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-dim);
    box-shadow: var(--shadow);
    font-size: .875rem;
}
.toast[data-kind="ok"] { border-left-color: var(--ok); }
.toast[data-kind="error"] { border-left-color: var(--danger); }

/* ── Serverkacheln ────────────────────────────────────────────────────── */

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: .8rem;
}

.server-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .9rem;
    background: var(--surface-2);
    display: grid;
    gap: .7rem;
    align-content: start;
}
.server-card[data-state="failed"] { border-color: var(--danger); }
.server-card[data-state="running"] { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }

.server-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.server-title {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    margin-right: auto;
}
.server-title:hover { text-decoration: underline; }

.server-card .facts { grid-template-columns: repeat(3, 1fr); margin: 0; gap: .5rem; }
.server-card .facts dd { font-size: .9rem; }
.server-card .buttons { gap: .4rem; align-items: center; }
.server-card .buttons button { padding: .3rem .65rem; font-size: .85rem; }
.server-card .buttons .link { margin-left: auto; }

.empty-state { color: var(--text-dim); font-style: italic; margin: .5rem 0; }

.brand-link { color: var(--text); text-decoration: none; }
.brand-link:hover { text-decoration: underline; }
.back { text-decoration: none; margin-right: .4rem; }

button.small { padding: .28rem .6rem; font-size: .82rem; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; }

/* ── Formulare ────────────────────────────────────────────────────────── */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .9rem;
    align-items: start;
}
.form-grid .span-2 { grid-column: 1 / -1; }

.form-grid label { display: grid; gap: .3rem; font-size: .85rem; }
.form-grid label > span { color: var(--text-dim); display: flex; justify-content: space-between; gap: .5rem; }
.form-grid label > span small { font-weight: 400; opacity: .8; }
.form-grid output { color: var(--text); font-variant-numeric: tabular-nums; }
.form-grid .hint { margin: 0; font-size: .78rem; }
.form-grid .hint[data-level="bad"] { color: var(--danger); }

fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .7rem .9rem;
    margin: 0;
}
legend { font-size: .78rem; color: var(--text-dim); padding: 0 .35rem; text-transform: uppercase; letter-spacing: .04em; }

.switches { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.switches .checkbox { font-size: .85rem; color: var(--text); }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    height: 1.5rem;
    background: none;
    border: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: .4rem; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--border);
}
input[type="range"]::-moz-range-track {
    height: .4rem; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.05rem; height: 1.05rem; border-radius: 50%;
    background: var(--accent); border: none; margin-top: -.36rem;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 1.05rem; height: 1.05rem; border-radius: 50%;
    background: var(--accent); border: none; cursor: pointer;
}

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .85em;
    background: var(--surface-2);
    padding: .1rem .3rem;
    border-radius: 4px;
}

a { color: var(--accent); }

@media (max-width: 40rem) {
    .layout { padding: .7rem; gap: .7rem; }
    .card { padding: .9rem; }
    .console { height: 18rem; }
    .server-grid { grid-template-columns: 1fr; }
    .server-card .facts { grid-template-columns: repeat(2, 1fr); }
}