:root {
  --bg: #0f1419;
  --panel: rgba(20, 28, 40, 0.92);
  --line: #243041;
  --fg: #e7ecf1;
  --muted: #8b9aab;
  --accent: #4dabf7;
  --ok: #3dd68c;
  --danger: #ff7b72;
}

body.app-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 15% 0%, #1a2740 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, #152018 0%, transparent 45%),
    var(--bg);
  color: var(--fg);
}

.app-main {
  width: 95%;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.app-body a {
  color: var(--accent);
}

.app-navbar {
  background: rgba(12, 17, 24, 0.9);
  border-bottom: 1px solid var(--line);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link {
  color: var(--fg) !important;
}

.app-navbar .nav-link.active {
  color: var(--accent) !important;
}

.card-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  color: var(--fg);
}

.muted {
  color: var(--muted) !important;
}

.table-darkish {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  color: var(--fg);
}

.badge-active {
  color: var(--ok);
  border: 1px solid rgba(61, 214, 140, 0.35);
}

.badge-inactive {
  color: var(--danger);
  border: 1px solid rgba(255, 123, 114, 0.35);
}

.badge-up,
.badge-ok {
  color: var(--ok);
  border: 1px solid rgba(61, 214, 140, 0.35);
}

.badge-down {
  color: var(--danger);
  border: 1px solid rgba(255, 123, 114, 0.35);
}

.badge-unknown {
  color: var(--muted);
  border: 1px solid rgba(139, 154, 171, 0.35);
}

.modal-content {
  background: #141c28;
  color: var(--fg);
  border: 1px solid var(--line);
}

.modal-header,
.modal-footer {
  border-color: var(--line);
}

.form-control,
.form-select {
  background: #0f1419;
  border-color: var(--line);
  color: var(--fg);
}

.form-control:focus,
.form-select:focus {
  background: #0f1419;
  border-color: var(--accent);
  color: var(--fg);
  box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.2);
}

.btn-outline-light {
  border-color: var(--line);
  color: var(--fg);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--muted);
  color: var(--fg);
}

code {
  color: #ffa8cc;
}