*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  background: #f5f5f5;
  color: #222;
}

/* Nav */
nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.2rem;
  background: #1a1a2e;
  color: #eee;
}
.nav-brand { font-weight: 600; font-size: 1rem; }
.nav-links { display: flex; gap: 0.2rem; flex: 1; margin-left: 1rem; }
.nav-link  {
  color: #aaa; text-decoration: none; font-size: 0.88rem;
  padding: 0.25rem 0.7rem; border-radius: 4px;
}
.nav-link:hover  { color: #fff; background: rgba(255,255,255,0.08); }
.nav-link.active { color: #fff; background: rgba(255,255,255,0.15); }
.nav-user  { font-size: 0.85rem; color: #aaa; }
.btn-link  { background: none; border: none; color: #aaa; cursor: pointer; font-size: 0.85rem; }
.btn-link:hover { color: #fff; }

/* Main */
main { padding: 1.5rem 1.2rem; max-width: 1200px; }

/* Login */
.login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 2rem;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-box h1 { font-size: 1.2rem; text-align: center; }
.login-box label { font-size: 0.85rem; color: #555; }
.login-box input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}
.login-box button[type=submit] {
  width: 100%;
  padding: 0.55rem;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
}
.login-box button[type=submit]:hover { background: #2a2a4e; }

.error { color: #c00; font-size: 0.85rem; }

/* Allgemein */
.mono { font-family: monospace; font-size: 0.85rem; }

/* Status-Seite */
h2 { margin-bottom: 1rem; font-size: 1.1rem; }

.status-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1.2rem 1.5rem;
  max-width: 480px;
}
.status-card.ok    { border-left: 4px solid #2a9d2a; }
.status-card.error { border-left: 4px solid #c00; }

.status-overall { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }

.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.dot.green { background: #2a9d2a; }
.dot.red   { background: #c00; }

.status-table { width: 100%; border-collapse: collapse; }
.status-table td { padding: 0.35rem 0; font-size: 0.9rem; }
.status-table td:first-child { color: #555; width: 60%; }

/* Aktive Gespräche */
.calls-block {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1rem 1.2rem;
  max-width: 900px;
}
.calls-empty { color: #888; font-size: 0.9rem; }
.calls-error { color: #c00; font-size: 0.9rem; }

.calls-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.calls-table th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid #ddd;
  color: #555;
  font-weight: 600;
}
.calls-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #eee; }
.calls-table tr:last-child td { border-bottom: none; }
.calls-table .calls-name { color: #888; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.call-state { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
tr.state-up   .call-state { color: #2a9d2a; }
tr.state-ring .call-state { color: #d07000; }

.status-error {
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  background: #fff0f0;
  border: 1px solid #fcc;
  border-radius: 4px;
  font-size: 0.82rem;
  color: #900;
  font-family: monospace;
  word-break: break-all;
}