/* ── Layout ─────────────────────────────────────────────────────────────── */
#wrapper {
  min-height: 100vh;
}

#sidebar {
  width: 240px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

#page-content {
  min-height: 100vh;
  background: var(--bs-body-bg);
}

/* ── Sidebar nav pills ──────────────────────────────────────────────────── */
#sidebar .nav-link {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  transition: background 0.15s;
}
#sidebar .nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
}
#sidebar .nav-link.active {
  background: var(--bs-primary);
  color: #fff !important;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bs-dark);
}

.stat-card {
  transition: transform 0.2s;
}
.stat-card:hover {
  transform: translateY(-2px);
}

.board-card {
  transition: box-shadow 0.2s;
}
.board-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── Spinner for ping button ────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

/* ── Relay buttons ──────────────────────────────────────────────────────── */
.relay-btn {
  min-width: 90px;
  font-size: 0.8rem;
}

/* ── Login page ─────────────────────────────────────────────────────────── */
body:not(:has(#wrapper)) {
  background: #0d1117;
}

/* ── Misc ───────────────────────────────────────────────────────────────── */
.font-monospace {
  font-size: 0.85em;
}

.input-badge {
  font-size: 0.78rem;
  cursor: default;
}

@media (max-width: 768px) {
  #sidebar {
    width: 100%;
    min-height: auto;
    position: relative;
  }
  #wrapper {
    flex-direction: column;
  }
}