/* --------------------------------------------------------------------
   Blue-Joline Telemetrie — Stylesheet
   --------------------------------------------------------------------
   Handgeschrieben, kein Framework. Begründung in DECISIONS.md:
   Ein CSS-Framework wäre eine externe Abhängigkeit mit unklarem
   Support-Horizont für eine Oberfläche aus sechs Seiten.

   Grundsätze:
   - Systemschriften, keine Webfonts (kein externer Abruf, kein Tracking,
     nichts, was in fünf Jahren nicht mehr geladen wird).
   - Farbe ist nie die einzige Information: Zustände tragen zusätzlich
     Text ("offline", "veraltet"). Wichtig für Farbfehlsichtigkeit.
   - Hell- und Dunkelmodus über prefers-color-scheme.
   -------------------------------------------------------------------- */

:root {
  --bg:          #f6f7f9;
  --surface:     #ffffff;
  --border:      #d8dce2;
  --text:        #1c2024;
  --text-muted:  #666e79;
  --accent:      #1f5fa9;

  --good:        #1a7f45;
  --good-bg:     #e6f4ec;
  --warn:        #9a6600;
  --warn-bg:     #fdf3e0;
  --bad:         #b3261e;
  --bad-bg:      #fbeae9;

  --chart-line:  #1f5fa9;
  --chart-band:  rgba(31, 95, 169, 0.18);
  --chart-grid:  #e3e6ea;
  --chart-axis:  #7a828c;
  --chart-thr:   #b3261e;

  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #16181c;
    --surface:     #1e2126;
    --border:      #333840;
    --text:        #e6e8eb;
    --text-muted:  #9aa2ad;
    --accent:      #6fa8e8;

    --good:        #58c98a;
    --good-bg:     #16301f;
    --warn:        #e0aa4a;
    --warn-bg:     #33280f;
    --bad:         #f08a84;
    --bad-bg:      #3a1a18;

    --chart-line:  #6fa8e8;
    --chart-band:  rgba(111, 168, 232, 0.20);
    --chart-grid:  #2c3138;
    --chart-axis:  #838b95;
    --chart-thr:   #f08a84;
  }
}

* { 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;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

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

code, pre {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  overflow-x: auto;
}

/* --- Kopfzeile ---------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.topbar .brand {
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.topbar nav {
  display: flex;
  gap: 1rem;
  flex: 1;
}

.topbar nav a {
  text-decoration: none;
  color: var(--text-muted);
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}

.topbar nav a.active,
.topbar nav a:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.topbar .logout {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9em;
}

footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  gap: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85em;
  border-top: 1px solid var(--border);
}

/* --- Bausteine ----------------------------------------------------- */

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }

.site {
  font-weight: normal;
  color: var(--text-muted);
  font-size: 0.8em;
  margin-left: 0.5rem;
}

.breadcrumb {
  color: var(--text-muted);
  font-size: 0.9em;
  margin-bottom: 0.75rem;
}

.badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 0.75em;
  text-align: center;
}

.badge-alert { text-decoration: none; }

.state {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.85em;
  font-weight: 600;
}
.state-good    { background: var(--good-bg); color: var(--good); }
.state-bad     { background: var(--bad-bg);  color: var(--bad); }
.state-unknown { background: var(--warn-bg); color: var(--warn); }
.state-off     { background: var(--border);  color: var(--text-muted); }

.tag {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.05rem 0.35rem;
  vertical-align: middle;
}

.hint, .ok-note {
  color: var(--text-muted);
  font-size: 0.92em;
}

.ok-note { color: var(--good); }

.empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.empty ul { margin: 0.5rem 0; padding-left: 1.25rem; }

.error {
  background: var(--bad-bg);
  color: var(--bad);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
}

/* --- Geräteübersicht ------------------------------------------------ */

.device-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.device-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.device-card h2 { margin: 0; font-size: 1.1rem; }
.device-card h2 a { text-decoration: none; }

.device-card .status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9em;
}

.device-card .seen { color: var(--text-muted); }

.readings {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
}

.readings li {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.readings .label { color: var(--text-muted); font-size: 0.82em; }
.readings .value { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.readings li.stale { opacity: 0.55; }
.readings .stale-note {
  font-size: 0.72em;
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Detailseite ---------------------------------------------------- */

dl.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
  font-size: 0.92em;
}

dl.meta dt { color: var(--text-muted); }
dl.meta dd { margin: 0; }

.rangepicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.rangepicker label { color: var(--text-muted); font-size: 0.9em; }
.rangepicker .checkbox { display: flex; align-items: center; gap: 0.3rem; }

select, button, input[type="password"], .button-like {
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

button, .button-like {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover, .button-like:hover { border-color: var(--accent); }

.channel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.channel header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.channel h2 { margin: 0; font-size: 1.05rem; }

.channel .current {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.channel .current small {
  display: block;
  font-size: 0.6em;
  color: var(--text-muted);
  text-align: right;
}

.stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0;
  font-size: 0.88em;
  color: var(--text-muted);
}

.stats strong { color: var(--text); font-variant-numeric: tabular-nums; }
.stats .resolution { margin-left: auto; }

/* --- Diagramme ------------------------------------------------------ */

svg.chart {
  display: block;
  width: 100%;
  height: auto;
}

svg.chart .grid      { stroke: var(--chart-grid); stroke-width: 1; }
svg.chart .frame     { fill: none; stroke: var(--chart-grid); stroke-width: 1; }
svg.chart .line      { fill: none; stroke: var(--chart-line); stroke-width: 1.6;
                       stroke-linejoin: round; stroke-linecap: round; }
svg.chart .band      { fill: var(--chart-band); stroke: none; }
svg.chart .axis      { fill: var(--chart-axis); font-size: 10px;
                       font-family: system-ui, sans-serif; }
svg.chart .unit      { font-size: 9px; }
svg.chart .threshold { stroke: var(--chart-thr); stroke-width: 1;
                       stroke-dasharray: 4 3; }
svg.chart .threshold-label { fill: var(--chart-thr); font-size: 9px;
                       text-anchor: end; font-family: system-ui, sans-serif; }
svg.chart-empty .axis { font-size: 12px; }

svg.spark polyline {
  fill: none;
  stroke: var(--chart-line);
  stroke-width: 1.4;
}

/* --- Tabellen ------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9em;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.9em;
}

tbody tr:last-child td { border-bottom: none; }

td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.detail { color: var(--text-muted); font-size: 0.92em; }
.unknown { color: var(--text-muted); font-style: italic; }

.sev {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sev-critical .sev { background: var(--bad-bg);  color: var(--bad); }
.sev-warning  .sev { background: var(--warn-bg); color: var(--warn); }
.sev-info     .sev { background: var(--good-bg); color: var(--good); }

.history .is-open { font-weight: 600; }
.acked { color: var(--text-muted); font-size: 0.9em; }

form.inline { display: inline; margin: 0; }
form.inline button { padding: 0.15rem 0.5rem; font-size: 0.9em; }

/* --- Anmeldung ------------------------------------------------------ */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

form.login {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  width: min(340px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

form.login h1 { font-size: 1.15rem; margin: 0 0 0.5rem; }
form.login label { color: var(--text-muted); font-size: 0.9em; }
form.login button { margin-top: 0.5rem; padding: 0.5rem; }

/* --- Ausdruck ------------------------------------------------------- */

@media print {
  .topbar, footer, .rangepicker { display: none; }
  body { background: #fff; }
  .device-card, .channel, table { border-color: #999; break-inside: avoid; }
}