/* MCServerGratis — Design-Tokens & Komponenten (aus dem Design-Export). */
:root {
  --bg: #0c0e12;
  --panel: #0e1116;
  --card: #13161c;
  --inset: #0e1116;
  --terminal: #080a0d;
  --border: #1a1e26;
  --border-2: #1f242d;
  --border-3: #242a34;
  --text: #e8ecf1;
  --text-2: #d4dae2;
  --muted: #9aa4b2;
  --muted-2: #8a94a2;
  --muted-3: #7a8492;
  --muted-4: #6a7480;
  --faint: #5a6470;
  --accent: #5bbf3a;
  --accent-hover: #6bcf48;
  --accent-ink: #08260a;
  --green: #46d160;
  --amber: #e8a13c;
  --red: #ef5350;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --sans: 'Geist', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
input, button, textarea, select { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent) !important; }
[data-lucide] { display: inline-block; vertical-align: middle; stroke-width: 2; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a313c; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a434f; }

@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeUp { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none; } }
.fadeup { animation: fadeUp .4s ease; }
.spin { animation: spin 1s linear infinite; }

/* ── Buttons ─────────────────────────────────────────── */
.btn { height: 38px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--accent); border: none; color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: #15181f; border: 1px solid var(--border-3); color: var(--text); }
.btn-ghost:hover { border-color: #3a434f; }
.btn-danger { background: transparent; border: 1px solid rgba(239,83,80,0.4); color: var(--red); }
.btn-danger:hover { background: rgba(239,83,80,0.08); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ── Segmented-Toggle (Meine/Alle Server) ────────────── */
.dseg-group { display: flex; background: #15181f; border: 1px solid var(--border-3); border-radius: 9px; padding: 3px; }
.dseg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted-2); cursor: pointer; white-space: nowrap; }
.dseg:hover { color: var(--text); }
.dseg.on { background: #23292f; color: var(--text); }

/* ── Inputs ──────────────────────────────────────────── */
.field { display: block; }
.field > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.input, .textarea, select.input {
  width: 100%; height: 40px; padding: 0 13px; background: var(--inset);
  border: 1px solid var(--border-3); border-radius: 9px; color: var(--text); font-size: 13.5px;
}
.textarea { height: auto; min-height: 78px; padding: 10px 13px; resize: vertical; }
.mono { font-family: var(--mono); }

/* ── Cards & layout ──────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border-2); border-radius: 14px; padding: 18px; }
.card-pad { padding: 20px; }
.muted { color: var(--muted-2); }
.muted-3 { color: var(--muted-3); }
.h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-size: 16px; font-weight: 700; }
.sub { font-size: 14px; color: var(--muted-2); margin-top: 4px; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

/* ── Status badge ────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.st-running { background: rgba(70,209,96,0.12); color: var(--green); }
.st-running .dot { background: var(--green); }
.st-installing { background: rgba(232,161,60,0.12); color: var(--amber); }
.st-installing .dot { background: var(--amber); animation: pulse 1.4s infinite; }
.st-offline { background: rgba(239,83,80,0.1); color: var(--red); }
.st-offline .dot { background: var(--red); }
.st-stopped, .st-starting, .st-stopping { background: rgba(154,164,178,0.1); color: var(--muted); }
.st-stopped .dot, .st-starting .dot, .st-stopping .dot { background: var(--muted); }
.st-starting .dot, .st-stopping .dot { animation: pulse 1.4s infinite; }

/* ── Toast / message ─────────────────────────────────── */
#toast { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; border: 1px solid var(--border-3);
  background: var(--card); color: var(--text); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); max-width: 360px; animation: fadeUp .25s ease; }
.toast.err { border-color: rgba(239,83,80,0.4); }
.toast.ok { border-color: rgba(91,191,58,0.4); }

/* ── Progress / Ladebalken ───────────────────────────── */
.progress { height: 7px; background: #1c212a; border-radius: 4px; overflow: hidden; position: relative; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.progress.indeterminate::after { content: ''; position: absolute; top: 0; left: -45%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: indet 1.15s ease-in-out infinite; }
@keyframes indet { 0% { left: -45%; } 100% { left: 100%; } }

/* ── Meters ──────────────────────────────────────────── */
.meter { height: 5px; background: #1c212a; border-radius: 3px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* ── Tabs ────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { display: flex; align-items: center; gap: 7px; padding: 11px 14px; font-size: 13px; font-weight: 500;
  color: var(--muted-2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── App shell ───────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 248px; flex: none; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.sidebar .brand img { width: 30px; height: 30px; object-fit: contain; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 3px; }
.navlabel { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--faint); padding: 8px 10px 6px; display: flex; align-items: center; gap: 6px; }
.navitem { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; color: var(--muted);
  font-size: 13.5px; font-weight: 500; cursor: pointer; }
.navitem:hover { background: #15181f; color: var(--text); }
.navitem.active { background: rgba(91,191,58,0.1); color: var(--accent); }
.sidefoot { padding: 12px; border-top: 1px solid var(--border); }
.brandname { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.brandname .g, .g { color: var(--accent); }
.avatar { border-radius: 8px; background: linear-gradient(135deg, #5bbf3a, #3a8b2a); display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--accent-ink); flex: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.topbar { height: 60px; flex: none; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px;
  padding: 0 26px; background: #0e1116cc; backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.crumbs .sep { color: var(--faint); }
.crumbs .cur { color: var(--text); font-weight: 500; }
.content { flex: 1; overflow-y: auto; }
.wrap { padding: 32px; max-width: 1240px; margin: 0 auto; }
.wrap-wide { max-width: 1320px; }

/* ── Grids ───────────────────────────────────────────── */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.statcell { background: var(--inset); border: 1px solid #1c212a; border-radius: 9px; padding: 9px 10px; }
.statcell .k { font-size: 10.5px; color: var(--muted-4); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.statcell .v { font-size: 14px; font-weight: 600; font-family: var(--mono); }

/* ── Tables ──────────────────────────────────────────── */
.table { background: var(--card); border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; }
.thead, .trow { display: grid; gap: 12px; padding: 12px 18px; align-items: center; }
.thead { border-bottom: 1px solid #1c212a; font-size: 11px; color: var(--muted-4); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.trow { border-bottom: 1px solid #181c23; }
.trow:hover { background: #15181f; }
.trow:last-child { border-bottom: none; }

/* ── Modal ───────────────────────────────────────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(4,6,9,0.66); backdrop-filter: blur(3px); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--border-3); border-radius: 14px;
  padding: 22px; animation: fadeUp .25s ease; max-height: 90vh; overflow-y: auto; }
.modal h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.icon-btn { width: 36px; height: 36px; border-radius: 9px; background: #15181f; border: 1px solid var(--border-3);
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { border-color: #3a434f; color: var(--text); }
.link { color: var(--accent); cursor: pointer; }
.clickable { cursor: pointer; }

/* ── Mobile / Hamburger ──────────────────────────────── */
.nav-toggle { display: none; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center;
  background: #15181f; border: 1px solid var(--border-3); border-radius: 9px; color: var(--text); cursor: pointer; }
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 55; }

@media (max-width: 820px) {
  /* Sidebar als ein-/ausklappbares Off-Canvas-Menü */
  .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.55); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .nav-backdrop { display: block; }
  .nav-toggle { display: inline-flex; }

  .topbar { padding: 0 12px; gap: 10px; height: 56px; }
  .crumbs { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .wrap { padding: 16px 13px; }
  .grid-cards { grid-template-columns: 1fr; gap: 14px; }
  .h1 { font-size: 20px; }

  /* Inline-Grids (2-/3-spaltige Layouts) auf Handy stapeln — außer Tabellenzeilen */
  #view [style*="grid-template-columns"]:not(.thead):not(.trow),
  #modalRoot [style*="grid-template-columns"]:not(.thead):not(.trow) { grid-template-columns: 1fr !important; }
  /* kleine Stat-Kästchen kompakt halten statt 1-spaltig stapeln (schöner).
     Gleiche Spezifität wie die Stapel-Regel + danach → gewinnt. */
  #view [style*="1fr 1fr 1fr"]:not(.thead):not(.trow) { grid-template-columns: repeat(3, 1fr) !important; }
  #view [style*="repeat(4,1fr)"]:not(.thead):not(.trow),
  #view [style*="repeat(5,1fr)"]:not(.thead):not(.trow) { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tabellen horizontal scrollen statt zusammenquetschen */
  .table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .thead, .trow { min-width: 580px; }

  /* Dialoge fast vollbreit */
  .modal-bg { padding: 12px; }
  .modal { max-width: 100%; }

  /* sticky-Seitenformulare (Nodes/Nutzer) nicht kleben lassen */
  .card[style*="position:sticky"], .card[style*="position: sticky"] { position: static !important; top: auto !important; }
}