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

html, body {
  height: 100%;
  font-family: monospace;
  background: #000;
  color: #e0e0e0;
}

a { color: #4ab4ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Form elements ───────────────────────────────────────────────────── */
input, select, textarea {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #e0e0e0;
  font-family: monospace;
  font-size: .95rem;
  padding: .55rem .75rem;
  width: 100%;
  outline: none;
  transition: border-color .2s;
}
input:focus, select:focus { border-color: #4ab4ff; }

button, .btn {
  background: #4ab4ff;
  border: none;
  border-radius: 6px;
  color: #0d0d0d;
  cursor: pointer;
  font-family: monospace;
  font-size: .95rem;
  font-weight: bold;
  padding: .6rem 1.2rem;
  transition: background .2s, opacity .2s;
  width: 100%;
}
button:hover { background: #72c7ff; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
  width: auto;
}
button.secondary:hover { border-color: #4ab4ff; color: #4ab4ff; }

button.danger {
  background: transparent;
  border: 1px solid #5a1010;
  color: #f44336;
  width: auto;
}
button.danger:hover { border-color: #f44336; background: rgba(244,67,54,.1); }

/* ── Table ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; padding: .5rem .75rem; color: #888; font-weight: normal;
     border-bottom: 1px solid #2a2a2a; white-space: nowrap; }
td { padding: .5rem .75rem; border-bottom: 1px solid #1a1a1a; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.td-actions { display: flex; gap: .4rem; }

/* ── Badge ───────────────────────────────────────────────────────────── */
.badge { border-radius: 4px; padding: .15rem .45rem; font-size: .78rem; }
.badge-admin { background: #1a3a5a; color: #4ab4ff; }
.badge-user  { background: #1e1e1e; color: #888; }
.badge-warn  { background: #3a2800; color: #ffc107; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.toolbar { display: flex; gap: .75rem; align-items: center; padding: 1rem; }
.toolbar button { width: auto; }

/* ── Card ────────────────────────────────────────────────────────────── */
.card {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 1.5rem;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 1.25rem;
}
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #888;
  cursor: pointer;
  font-family: monospace;
  font-size: .9rem;
  padding: .5rem 1rem .6rem;
  width: auto;
}
.tab:hover { color: #e0e0e0; background: none; }
.tab.active { color: #4ab4ff; border-bottom-color: #4ab4ff; }

/* ── Error / info banners ────────────────────────────────────────────── */
.error   { color: #f44336; font-size: .87rem; margin-top: .5rem; min-height: 1.2em; }
.success { color: #4caf50; font-size: .87rem; margin-top: .5rem; min-height: 1.2em; }

/* ── Field group ─────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: .82rem; color: #888; }

/* ── Header ──────────────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem;
  background: #111; border-bottom: 1px solid #1e1e1e;
}
header h1 { font-size: 1rem; color: #4ab4ff; white-space: nowrap; }

/* ── Unified nav links (injected by nav.js) ──────────────────────────── */
.nav-links { display: flex; gap: .25rem; flex: 1; padding: 0 .5rem; }
.nav-link  {
  font-size: .82rem; color: #888; padding: .28rem .65rem;
  border-radius: 4px; text-decoration: none; white-space: nowrap;
}
.nav-link:hover  { color: #e0e0e0; background: #1a1a1a; text-decoration: none; }
.nav-link.active { color: #4ab4ff; background: #0a1520; }

/* ── Hamburger button (hidden on desktop) ────────────────────────────── */
.hamburger {
  display: none;
  background: none; border: 1px solid #2a2a2a; border-radius: 6px;
  color: #888; font-size: 1rem; line-height: 1;
  padding: .28rem .6rem; cursor: pointer; width: auto;
}
.hamburger:hover { border-color: #555; color: #e0e0e0; }

/* ── Slide-down drawer ───────────────────────────────────────────────── */
.nav-drawer {
  display: none;
  flex-direction: column;
  background: #111; border-bottom: 1px solid #1e1e1e;
  overflow: hidden; max-height: 0;
  transition: max-height .22s ease;
}
.nav-drawer.open { max-height: 300px; }
.nav-drawer .nav-link {
  padding: .75rem 1.1rem; border-radius: 0;
  border-bottom: 1px solid #1a1a1a; font-size: .9rem;
}
.nav-drawer .nav-link:last-child { border-bottom: none; }

@media (max-width: 600px) {
  header h1  { flex: 1; }
  #user      { display: none; }
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav-drawer { display: flex; }
}

/* ── Nav cards (index page) ──────────────────────────────────────────── */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
.nav-card {
  display: flex; flex-direction: column; gap: .4rem;
  background: #111; border: 1px solid #2a2a2a; border-radius: 12px;
  padding: 1.2rem 1.4rem;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color .2s;
}
.nav-card:hover { border-color: #4ab4ff; text-decoration: none; }
.nav-card .icon { display: flex; color: #aaa; }
.nav-card:hover .icon { color: #e0e0e0; }
.nav-card .title { font-size: 1rem; color: #4ab4ff; }
.nav-card .desc  { font-size: .8rem; color: #666; }