/* Gestaltungssystem der Status-Website.
   Vorlage ist die Anwendungszentrale: dieselbe Palette, dieselben Radien,
   dasselbe Kopfband mit Reiterleiste. Die vorhandenen Tailwind-Klassen der
   Seite greifen über die Farbzuordnung in der Seitenkopfzeile auf genau diese
   Variablen zu, damit beide Teile wie ein Projekt wirken.

   Die Seite bleibt bewusst in der dunklen Fassung der Palette: die bestehende
   Oberfläche schreibt an 57 Stellen weiße Schrift fest, die auf hellem Grund
   unlesbar wäre. */

:root {
  --akzent: #6d9ce8;
  --akzent-tief: #8db3f0;
  --bg: #10151f;
  --flaeche: #171d29;
  --flaeche-hoch: #1d2432;
  --ink: #e6ebf2;
  --ink-matt: #c6d0dd;
  --weich: #93a0b1;
  --weich-tief: #74808f;
  --linie: #28303e;
  --linie-stark: #36404f;
  --gut: #46b878;
  --gut-tief: #2f9a5e;
  --schlecht: #e0655c;
  --schlecht-tief: #b3443c;
  --warn: #d9a441;
  --sonder: #9b7ae0;
  --band: #0b1322;
  --band-ink: #eef2f8;
  --band-weich: #9fb0c8;
  --band-linie: #2c3c5c;
  --band-flaeche: #1d2c49;
  /* Serienfarben der Systemkurven, je Größe eine feste Farbe */
  --reihe-cpu: #6d9ce8;
  --reihe-gpu: #3fc0ab;
  --reihe-ram: #a98ae6;
  --reihe-vram: #e0a350;
  --reihe-platte: #d97b7b;
  --radius: 12px;
  --radius-klein: 8px;
  --tempo: .18s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}

.ic { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- Kopfband und Reiterleiste ---------- */

.kopfband {
  background: var(--band);
  border-bottom: 1px solid var(--band-linie);
  color: var(--band-ink);
}
/* Eigener Klassenname: "marke" gehört in der Anwendungszentrale zu den
   kleinen Merkzeichen in den Systemtabellen und wird dort schmal versteckt. */
.kopf-marke { font-size: 1.3rem; letter-spacing: .01em; margin: 0; color: var(--band-ink); }

.reiter {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  border-bottom: none;
}
.reiter-knopf {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--band-weich);
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem .9rem .55rem;
  cursor: pointer;
  transition: color var(--tempo) ease;
}
.reiter-knopf:hover { color: var(--band-ink); }
.reiter-knopf.aktiv { color: #fff; border-bottom-color: var(--akzent); }
.reiter-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Knöpfe im Kopfband ---------- */

.btn {
  background: var(--akzent);
  color: #fff;
  border: none;
  border-radius: var(--radius-klein);
  padding: .48rem .9rem;
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background var(--tempo) ease;
}
.btn:hover { background: var(--akzent-tief); }
.btn.still {
  background: transparent;
  color: var(--ink-matt);
  border: 1px solid var(--band-linie);
}
.btn.still:hover { background: var(--band-flaeche); }
.btn.gefahr { background: var(--schlecht); }
.btn.gefahr:hover { background: var(--schlecht-tief); }
dialog .btn.still { color: var(--ink); border-color: var(--linie); }
dialog .btn.still:hover { background: var(--linie); }

.zr { font-size: .78rem; color: var(--band-weich); }
.zr input {
  font: inherit;
  font-size: .82rem;
  padding: .32rem .45rem;
  border-radius: 7px;
  border: 1px solid var(--band-linie);
  background: var(--band-flaeche);
  color: var(--band-ink);
  color-scheme: dark;
}

/* ---------- Flächen der bestehenden Ansichten ---------- */

/* Die Ansichten der Status-Website nutzen Tailwind-Kacheln. Hier bekommen sie
   den Kartenzuschnitt der Anwendungszentrale: gleicher Radius, feine Linie
   statt Schlagschatten, ruhigere Übergänge. */
main .bg-gray-800,
main .bg-gray-900 {
  border-radius: var(--radius);
}
main .shadow, main .shadow-lg {
  box-shadow: none;
  border: 1px solid var(--linie);
}
main table th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--weich);
  font-weight: 600;
}
main table td { font-variant-numeric: tabular-nums; }

.host-card { transition: transform var(--tempo) ease; }
.host-card:hover { transform: translateY(-2px); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-online { background: var(--gut); box-shadow: 0 0 8px var(--gut); }
.status-offline { background: var(--weich-tief); }

.iframe-container { height: 70vh; }
/* Bei VM- und Linux-Reiter wird die volle Breite genutzt, sonst skaliert der
   Browser das Fernbild hoch und alles wird unscharf. */
body.fullwidth-mode main { max-width: none !important; padding: .5rem !important; }
body.fullwidth-mode .iframe-container { height: calc(100vh - 140px); }
:fullscreen .iframe-container { height: 100vh !important; }
.remote-viewer-container { height: 75vh; position: relative; }
.remote-canvas { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .host-card, .reiter-knopf, .btn { transition: none; }
}