:root {
  --accent: #e11d48;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 225, 29, 72;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 225, 29, 72;
}
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 75%, black);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent);
}
.badge.text-bg-primary { background-color: var(--accent) !important; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.navbar {
  flex: none;
  border-bottom: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
}

.app-shell {
  flex: 1;
  display: flex;
  min-height: 0;
}
.viewport {
  flex: 1;
  min-width: 0;
  position: relative;
  background: #14141b;
}
.viewport canvas { display: block; width: 100%; height: 100%; }

.sidebar {
  width: 340px;
  flex: none;
  overflow-y: auto;
  padding: 0.75rem;
  border-left: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
}
.sidebar .card-header { font-weight: 600; }

.status-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 0.2rem;
  column-gap: 0.75rem;
  margin: 0;
}
.status-grid dt { font-weight: 500; color: var(--bs-secondary-color); }
.status-grid dd { margin: 0; font-variant-numeric: tabular-nums; }

.violations { list-style: none; padding: 0; }
.violations .vio { padding: 0.15rem 0; }
.vio-danger { color: #f77; }
.vio-light { color: #e2e8f0; }
.vio-success { color: #34d399; }

.legend > div { padding: 0.15rem 0; }
.sw {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.sw-online { background: #34d399; }
.sw-white { background: #e2e8f0; }
.sw-red { background: #ef4444; }

@media (max-width: 820px) {
  body { overflow: auto; }
  .app-shell { flex-direction: column; }
  .viewport { height: 58vh; flex: none; }
  .sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--bs-border-color);
  }
}