/* === BBS theme — amber on black, monospace, terminal vibe === */

[data-theme="bbs"] {
  --bg: #000000;
  --panel: #000000;
  --panel-2: #0a0a0a;
  --text: #ffb000;
  --muted: #806000;
  --accent: #ffffff;
  --accent-hover: #ffd060;
  --border: #ffb000;
  --danger: #ff4040;
}

[data-theme="bbs"] body {
  font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
  background: #000000;
  color: var(--text);
  letter-spacing: .02em;
}

[data-theme="bbs"] h1,
[data-theme="bbs"] h2,
[data-theme="bbs"] h3 {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}
[data-theme="bbs"] h1::after,
[data-theme="bbs"] h2::after,
[data-theme="bbs"] h3::after {
  content: "_";
  animation: bbs-cursor 1s steps(2) infinite;
  margin-left: .25rem;
}
@keyframes bbs-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

[data-theme="bbs"] .card {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 0;
}

[data-theme="bbs"] .btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  text-transform: uppercase;
}
[data-theme="bbs"] .btn::before { content: "[ "; }
[data-theme="bbs"] .btn::after  { content: " ]"; }
[data-theme="bbs"] .btn:hover { background: var(--text); color: #000; }
[data-theme="bbs"] .btn.primary { color: var(--accent); border-color: var(--accent); }

[data-theme="bbs"] a { color: var(--accent); text-decoration: underline; }
[data-theme="bbs"] a:visited { color: var(--muted); }

[data-theme="bbs"] input,
[data-theme="bbs"] select,
[data-theme="bbs"] textarea {
  background: #000000;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
}
[data-theme="bbs"] input::placeholder { color: var(--muted); }

[data-theme="bbs"] .topbar {
  background: #000;
  border-bottom: 1px solid var(--border);
}

[data-theme="bbs"] .badge {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0;
  font-family: inherit;
}

[data-theme="bbs"] .users-table th,
[data-theme="bbs"] .users-table td {
  border-bottom-color: var(--border);
}

/* ASCII banner via body::before */
[data-theme="bbs"] body::before {
  content: "+============================+\A| SHARE BBS - INTERNAL ACCESS |\A+============================+";
  white-space: pre;
  display: block;
  color: var(--text);
  background: #000;
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
}

/* Status line fixed to bottom of viewport */
[data-theme="bbs"] body::after {
  content: "STATUS: ONLINE | THEME: BBS";
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #000;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding: .25rem 1rem;
  font-family: inherit;
  font-size: .8rem;
  z-index: 100;
}

/* Admin sidebar: BBS uses white for --accent, so the default white-on-white
   active item is invisible. Use amber (--text) for the background and bg
   (black) for the text. */
[data-theme="bbs"] .admin-sidebar nav a.active {
  background: var(--text);
  color: var(--bg);
}

/* The 'member' role badge inherits white-on-white because --accent is white
   in this theme. Flip the text to bg (black) for legibility. */
[data-theme="bbs"] .users-table .badge.member { color: var(--bg); }

/* New-version glow: use the BBS amber instead of white so the halo is
   visibly tinted. */
@keyframes version-glow-bbs {
  0%, 100% { box-shadow: 0 0 0 0 var(--text); }
  50%      { box-shadow: 0 0 12px 4px var(--text); }
}
[data-theme="bbs"] .version-pill.new {
  animation-name: version-glow-bbs;
  border-color: var(--text);
}

/* Long-retention badge — inverted amber-on-black so the badge
   "burns" against the terminal background. */
[data-theme="bbs"] .badge.lr {
  background: #ffb000;
  color: #000000;
  border-color: #ffb000;
  font-weight: 700;
}