:root { --sidenav-w: 15rem; --line: #e5e7eb; --muted: #6b7280; }

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #111827; }

/* ---- login ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; background: #f8fafc; }
.login-card {
  width: min(24rem, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--line); border-radius: .75rem;
  padding: 2rem; box-shadow: 0 1px 3px rgb(0 0 0 / .06);
}

/* ---- shell ---- */
.app-shell { display: grid; grid-template-columns: var(--sidenav-w) 1fr; min-height: 100vh; }

.sidenav {
  background: #0f172a; color: #cbd5e1; padding: 1.25rem 1rem;
  display: flex; flex-direction: column;
}
.sidenav-brand { font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 1.5rem; }
.sidenav-brand span { font-weight: 400; color: #94a3b8; font-size: .875rem; }
.sidenav-menu { list-style: none; padding: 0; margin: 0; flex: 1; }
.sidenav-menu a {
  display: block; padding: .5rem .75rem; border-radius: .375rem;
  color: #cbd5e1; text-decoration: none; font-size: .925rem;
}
.sidenav-menu a:hover { background: #1e293b; color: #fff; }
.sidenav-menu a.active { background: #1d4ed8; color: #fff; }
.sidenav-footer { border-top: 1px solid #1e293b; padding-top: .75rem; color: #94a3b8; }
.sidenav-footer .btn-link { color: #94a3b8; text-decoration: none; }
.sidenav-footer .btn-link:hover { color: #fff; }

.app-main { padding: 1.5rem 1.75rem; background: #fff; overflow-x: auto; }

/* The sidenav collapses to a top bar rather than disappearing — one nav item does not justify
   a hamburger, and the table below is the part that needs the width. */
@media (max-width: 48rem) {
  .app-shell { grid-template-columns: 1fr; }
  .sidenav { flex-direction: row; align-items: center; gap: 1rem; padding: .75rem 1rem; }
  .sidenav-brand { margin-bottom: 0; }
  .sidenav-menu { display: flex; gap: .5rem; }
  .sidenav-footer { border-top: 0; padding-top: 0; }
}

code { color: #0f172a; background: #f1f5f9; padding: .1rem .3rem; border-radius: .25rem; }

/* ---- API test bed ---- */
.tb-output {
  background: #0f172a; color: #e2e8f0; padding: .75rem; border-radius: .375rem;
  max-height: 32rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
/* A failed call is still a useful result, so it is tinted rather than hidden behind an error state. */
.tb-output.tb-bad { background: #1f1416; color: #fecaca; }