/* Zentrales Stylesheet für alle vom Viewer gerenderten Seiten (Übersicht +
   Fehlerseite). Wird statisch aus public/ ausgeliefert und von jeder Seite
   verlinkt – so wird das Styling an genau einer Stelle gepflegt und bleibt
   einheitlich (auch für bereits auf Platte gecachte Fehlerseiten, da diese das
   Stylesheet erst beim Ausliefern nachladen). */

:root {
  --fg: #222;
  --muted: #666;
  --border: #ddd;
  --bg-soft: #f5f5f5;
  --brand: #003366;
  --brand-dark: #00264d;
  --danger: #b00020;
  --danger-dark: #8a0019;
  --warn: #8a6d00;
  --warn-dark: #6e5700;
  --ok: #1d7a33;
  --ok-dark: #155f27;
  --radius: 4px;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
  color: var(--fg);
  line-height: 1.4;
}

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

h1 { margin-top: 0; }

/* Tabelle (Übersicht) */
table { border-collapse: collapse; width: 100%; max-width: 900px; }
th, td { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; }
th { background: var(--bg-soft); }
caption { text-align: left; color: var(--muted); margin-bottom: .5rem; }

/* Kopfleiste mit globalen Aktionen */
.bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.next { color: #444; }

/* Aktions-Buttons pro Tabellenzeile */
.actions { display: flex; gap: .4rem; }

/* Buttons – Standard = Marke, Modifier-Klassen für Rollen */
button {
  font: inherit;
  padding: .5rem .9rem;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  cursor: pointer;
}
button:hover { background: var(--brand-dark); }

button.compact { padding: .3rem .6rem; }

button.del { background: var(--danger); border-color: var(--danger); }
button.del:hover { background: var(--danger-dark); }

button.pause { background: var(--warn); border-color: var(--warn); }
button.pause:hover { background: var(--warn-dark); }

button.resume { background: var(--ok); border-color: var(--ok); }
button.resume:hover { background: var(--ok-dark); }

.status-ok {color: var(--ok); font-weight: bold;}
.status-warn {color: var(--warn); font-weight: bold;}
.status-danger {color: var(--danger); font-weight: bold;}
.status-brand {color: var(--brand); font-weight: bold;}


/* Fehlerseite */
body.error h1 { color: var(--danger); }
.meta { color: var(--muted); }
pre {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
}