/* ==========================================================================
   UFC and Games Wiki: cyberpunk theme for An Otter Wiki
   Palette: near-black + neon cyan / magenta, with an acid-yellow warning accent.
   ========================================================================== */
:root, body, body.dark-mode {
  --cp-bg: #07080d;
  --cp-panel: #0d0f17;
  --cp-panel-2: #121522;
  --cp-line: #1e2336;
  --cp-text: #d6dbea;
  --cp-dim: #8791ad;
  --cp-cyan: #00e5ff;
  --cp-magenta: #ff2bd6;
  --cp-yellow: #f3ff3a;
  --cp-glow-c: 0 0 12px rgba(0, 229, 255, .45);
  --cp-glow-m: 0 0 12px rgba(255, 43, 214, .45);
  --cp-font: "Inter", system-ui, sans-serif;
  --cp-mono: "JetBrains Mono", ui-monospace, monospace;
  --cp-display: "Orbitron", "JetBrains Mono", sans-serif;

  /* halfmoon dark-mode variables */
  --dm-base-body-bg-color: var(--cp-bg);
  --dm-base-text-color: var(--cp-text);
  --dm-base-text-color-light: var(--cp-dim);
  --dm-border-color: var(--cp-line);
  --dm-navbar-bg-color: rgba(7, 8, 13, .92);
  --dm-navbar-border-color: var(--cp-line);
  --dm-sidebar-bg-color: var(--cp-panel);
  --dm-sidebar-border-color: var(--cp-line);
  --dm-card-bg-color: var(--cp-panel);
  --dm-card-border-color: var(--cp-line);
  --dm-code-bg-color: #150a1a;
  --dm-code-border-color: #3a1340;
  --dm-code-text-color: var(--cp-magenta);
  --dm-dropdown-menu-bg-color: var(--cp-panel-2);
  --dm-dropdown-menu-border-color: var(--cp-line);
  --dm-input-bg-color: var(--cp-panel-2);
  --dm-input-border-color: var(--cp-line);
  --dm-input-text-color: var(--cp-text);
  --dm-link-text-color: var(--cp-cyan);
  --dm-link-text-color-hover: var(--cp-magenta);
  --dm-table-border-color: var(--cp-line);
  --base-font-family: var(--cp-font);
}

body, body.dark-mode {
  background-color: var(--cp-bg) !important;
  color: var(--cp-text);
  font-family: var(--cp-font);
}

/* faint grid + scanlines behind everything */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .035) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
  background-size: 48px 48px, 48px 48px, auto;
}
.page-wrapper { position: relative; z-index: 1; }
.content-wrapper { background: transparent !important; }

/* ---------- navbar ---------- */
.navbar {
  background: rgba(7, 8, 13, .92) !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cp-line) !important;
  box-shadow: 0 1px 0 rgba(0, 229, 255, .25), 0 6px 24px rgba(0, 0, 0, .6);
}
.navbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-cyan) 20%, var(--cp-magenta) 80%, transparent);
}
.navbar-brand, .navbar-brand:hover {
  font-family: var(--cp-display) !important; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #fff !important; text-shadow: var(--cp-glow-c);
}
.navbar-brand img { filter: invert(1) drop-shadow(0 0 6px var(--cp-cyan)); }
.top-search .form-control, .navbar .form-control {
  background: var(--cp-panel-2) !important; border: 1px solid var(--cp-line) !important;
  color: var(--cp-text) !important; font-family: var(--cp-mono); font-size: 13px;
}
.navbar .form-control:focus { border-color: var(--cp-cyan) !important; box-shadow: var(--cp-glow-c) !important; }
.navbar .btn { background: var(--cp-panel-2) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-text) !important; }
.navbar .btn-primary, .btn-primary {
  background: transparent !important; border: 1px solid var(--cp-cyan) !important;
  color: var(--cp-cyan) !important; box-shadow: var(--cp-glow-c);
}
.btn-primary:hover { background: rgba(0, 229, 255, .12) !important; }

/* ---------- sidebar ---------- */
.sidebar { background: var(--cp-panel) !important; border-right: 1px solid var(--cp-line) !important; }
.sidebar-link, .sidebar a {
  color: var(--cp-dim) !important; font-family: var(--cp-mono); font-size: 13.5px;
  border-left: 2px solid transparent; transition: color .12s, border-color .12s, background .12s;
}
.sidebar-link:hover, .sidebar a:hover {
  color: var(--cp-cyan) !important; background: rgba(0, 229, 255, .06) !important; border-left-color: var(--cp-cyan);
}
.sidebar-link.active, .sidebar a.active {
  color: #fff !important; border-left-color: var(--cp-magenta); background: rgba(255, 43, 214, .08) !important;
  text-shadow: var(--cp-glow-m);
}
.sidebar-title, .sidebar-menu .sidebar-title {
  font-family: var(--cp-mono) !important; text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px !important; color: var(--cp-magenta) !important;
}
.sidebar-otter { opacity: .15; filter: invert(1); }

/* ---------- page content ---------- */
.page { font-size: 16px; line-height: 1.65; }
.page h1 {
  font-family: var(--cp-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; text-shadow: 0 0 18px rgba(0, 229, 255, .55), 0 0 2px var(--cp-cyan);
  border-bottom: 1px solid var(--cp-line); padding-bottom: .35em; margin-bottom: .6em;
}
.page h2 {
  font-family: var(--cp-display); font-weight: 600; font-size: 1.35rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--cp-magenta); text-shadow: var(--cp-glow-m); margin-top: 2em;
}
.page h2::before { content: "// "; color: var(--cp-cyan); text-shadow: none; }
.page h3 { font-family: var(--cp-mono); color: var(--cp-cyan); font-size: 1.05rem; letter-spacing: .03em; }
.page a { color: var(--cp-cyan); text-decoration: none; border-bottom: 1px dotted rgba(0, 229, 255, .45); }
.page a:hover { color: var(--cp-magenta); border-bottom-color: var(--cp-magenta); text-shadow: var(--cp-glow-m); }
.page strong { color: #fff; }
.page ul li::marker { color: var(--cp-magenta); }
.page hr { border-color: var(--cp-line); }

/* the "(auto)" note and other quotes: yellow warning stripe */
.page blockquote {
  background: linear-gradient(90deg, rgba(243, 255, 58, .06), transparent) !important;
  border-left: 3px solid var(--cp-yellow) !important; color: var(--cp-dim) !important;
  font-family: var(--cp-mono); font-size: 13px; border-radius: 0 6px 6px 0; padding: 10px 14px;
}
.page blockquote strong { color: var(--cp-yellow); }

/* code */
.page code { font-family: var(--cp-mono); color: var(--cp-magenta) !important; background: #150a1a !important; border: 1px solid #3a1340; border-radius: 4px; padding: 1px 5px; }
.page pre { background: #0a0c14 !important; border: 1px solid var(--cp-line) !important; border-left: 3px solid var(--cp-cyan) !important; }
.page pre code { background: none !important; border: 0; color: var(--cp-text) !important; }

/* tables */
.page table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  background: var(--cp-panel) !important; border: 1px solid var(--cp-line) !important; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .05), 0 10px 30px rgba(0, 0, 0, .35);
}
.page table th {
  background: #0a0c14 !important; color: var(--cp-cyan) !important; font-family: var(--cp-mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  border-bottom: 1px solid var(--cp-cyan) !important; border-color: var(--cp-line);
}
.page table td { border-color: var(--cp-line) !important; background: transparent !important; color: var(--cp-text); font-size: 14.5px; padding: 7px 10px; }
.page table th { padding: 9px 10px; }
.page table tr:nth-child(even) td { background: rgba(255, 255, 255, .015) !important; }
.page table tr:hover td { background: rgba(0, 229, 255, .06) !important; }

/* right-hand "On this page" */
.extra-nav { font-family: var(--cp-mono); font-size: 13px; }
.extra-nav a { color: var(--cp-dim) !important; }
.extra-nav a:hover { color: var(--cp-cyan) !important; }

/* breadcrumbs */
.breadcrumb a, .breadcrumb-item a { color: var(--cp-cyan) !important; font-family: var(--cp-mono); }

/* (auto) pages get a small badge next to the title */
body.cp-auto .page h1::after {
  content: "AUTO"; font-family: var(--cp-mono); font-size: 11px; letter-spacing: .15em; vertical-align: middle;
  margin-left: 14px; padding: 3px 8px; border: 1px solid var(--cp-yellow); color: var(--cp-yellow);
  border-radius: 3px; text-shadow: none; box-shadow: 0 0 10px rgba(243, 255, 58, .25);
}

/* scrollbars */
* { scrollbar-color: #2a2f45 transparent; }
::selection { background: rgba(255, 43, 214, .35); color: #fff; }

/* The Index: star marker and compact directory tables */
.page td:first-child { white-space: normal; }
body[data-page-path="the-index"] .page table td, body[data-page-path="the index"] .page table td { font-size: 14px; }
.page table td:not(:first-child) { white-space: nowrap; }
.page h3 { margin-top: 1.4em; }