/* =============================================================================
   New Frontiers HUD site theme
   -----------------------------------------------------------------------------
   Every theme only sets the --nf-* colour tokens below (and a few fonts); all
   components are styled from those tokens. The theme is chosen in the user menu
   and stored per browser (assets/js/theme.js), which sets data-theme on <html>.
     (none) / nf     New Frontiers, the default
     spooky          switches on by itself in October
     f-*             faction themes
     classic, MY EYES, Dark Mode, Porno Funk   the old themes
     GG2             the easter egg, set by the Konami code script
   ============================================================================= */

@font-face {
  font-family: Airstrike;
  src: url(/assets/fonts/airstrike.ttf);
}

/* ---- New Frontiers (default) --------------------------------------------- */
:root {
  --nf-bg: #0a0f1c;
  --nf-glow: rgba(240, 138, 75, 0.10);
  --nf-panel: #121a2e;
  --nf-panel-2: #1a2238;
  --nf-line: #2a3552;
  --nf-text: #e3e7f1;
  --nf-muted: #8b93ad;
  --nf-accent: #f08a4b;
  --nf-accent-ink: #1f1208;
  --nf-accent-2: #a9a3d6;
  --nf-warn: #fbbf24;
  --nf-danger: #e5484d;
  --nf-success: #4cc38a;
  --nf-track: #232c45;
  --nf-input-bg: #0d1424;
  --nf-input-text: #e3e7f1;
  --nf-radius: 6px;
  --nf-font-brand: "Bruno Ace SC", "Orbitron", system-ui, sans-serif;
  --nf-font-head: "Orbitron", "Sofia Sans Semi Condensed", system-ui, sans-serif;
  --nf-font-body: "Sofia Sans Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --nf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nf-head-case: uppercase;
  --nf-head-spacing: 0.06em;
  --nf-head-weight: 700;

  /* Older names still used by some pages and by the GG2 easter egg */
  --primary: var(--nf-accent);
  --secondary: var(--nf-panel-2);
  --bg-color: var(--nf-panel);
  --heading-color: var(--nf-accent-2);
  --font-color: var(--nf-text);
  --secondary-color: var(--nf-panel-2);
  --extra: var(--nf-accent);
  --navbar: var(--nf-panel);
  --common-font: var(--nf-font-body);
  --common-weight: 400;
  --brand-font: var(--nf-font-brand);
  --anim: none;
  --bg-Image: radial-gradient(1400px 420px at 50% -140px, var(--nf-glow), transparent 70%), var(--nf-bg);
  --logo: url("/assets/img/nf-logo.png");
}

/* ---- Spooky (October) ----------------------------------------------------- */
[data-theme="spooky"] {
  --nf-bg: #0e0b12;
  --nf-glow: rgba(255, 117, 24, 0.12);
  --nf-panel: #17121d;
  --nf-panel-2: #211a2a;
  --nf-line: #3a2d45;
  --nf-text: #ece4f2;
  --nf-muted: #9d8fab;
  --nf-accent: #ff7518;
  --nf-accent-ink: #1a0a00;
  --nf-accent-2: #9be15d;
  --nf-warn: #ffc857;
  --nf-danger: #ff4d5e;
  --nf-track: #2b2135;
  --nf-input-bg: #120e17;
  --nf-input-text: #ece4f2;
  --nf-font-brand: "Creepster", "Orbitron", system-ui, sans-serif;
  --nf-font-head: "Creepster", "Sofia Sans Semi Condensed", system-ui, sans-serif;
  --nf-head-spacing: 0.08em;
  --nf-head-weight: 400;
}

/* ---- Faction themes: each sets its own colours, the rest is derived ------- */
[data-theme^="f-"] {
  --nf-panel-2: color-mix(in srgb, var(--nf-accent) 7%, var(--nf-panel));
  --nf-line: color-mix(in srgb, var(--nf-accent) 22%, var(--nf-panel));
  --nf-text: #e9e9ec;
  --nf-muted: color-mix(in srgb, #e9e9ec 58%, var(--nf-panel));
  --nf-track: color-mix(in srgb, var(--nf-accent) 14%, var(--nf-bg));
  --nf-input-bg: var(--nf-bg);
  --nf-input-text: #e9e9ec;
}
[data-theme="f-64th"] { --nf-bg: #0f0808; --nf-panel: #1a1011; --nf-accent: #e5484d; --nf-accent-2: #d4a73a; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(229, 72, 77, 0.10); }
[data-theme="f-col"] { --nf-bg: #07121f; --nf-panel: #0e1c2e; --nf-accent: #d8b04a; --nf-accent-2: #8fb8de; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(216, 176, 74, 0.10); }
[data-theme="f-dwu"] { --nf-bg: #101214; --nf-panel: #1a1d21; --nf-accent: #d9822b; --nf-accent-2: #b8bcc4; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(217, 130, 43, 0.10); }
[data-theme="f-eris"] { --nf-bg: #051316; --nf-panel: #0b2024; --nf-accent: #1e9aa5; --nf-accent-2: #f89020; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(30, 154, 165, 0.10); }
[data-theme="f-rabbit"] { --nf-bg: #0c0a22; --nf-panel: #161333; --nf-accent: #f5c400; --nf-accent-2: #e04aa8; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(245, 196, 0, 0.10); }
[data-theme="f-ajnoria"] { --nf-bg: #0a1209; --nf-panel: #131e11; --nf-accent: #c9a54e; --nf-accent-2: #8bb062; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(201, 165, 78, 0.10); }
[data-theme="f-osiris"] { --nf-bg: #0d0717; --nf-panel: #181025; --nf-accent: #9a6ae0; --nf-accent-2: #c3a8f0; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(154, 106, 224, 0.10); }
[data-theme="f-reeves"] { --nf-bg: #140f0a; --nf-panel: #1f1812; --nf-accent: #d4a64a; --nf-accent-2: #b3a57e; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(212, 166, 74, 0.10); }
[data-theme="f-reventlov"] { --nf-bg: #0e0e0f; --nf-panel: #19191b; --nf-accent: #e35a5a; --nf-accent-2: #b8b8b8; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(227, 90, 90, 0.10); }
[data-theme="f-pit"] { --nf-bg: #050505; --nf-panel: #111111; --nf-accent: #f2f2f2; --nf-accent-2: #9a9a9a; --nf-accent-ink: #0b0b0b; --nf-glow: rgba(242, 242, 242, 0.06); }

/* ---- Classic themes: the old colours and fonts on the new layout ---------- */
[data-theme="classic"], [data-theme="MY EYES"], [data-theme="Dark Mode"], [data-theme="Porno Funk"] {
  --nf-font-brand: Airstrike, "Lato", system-ui, sans-serif;
  --nf-font-head: "Lato", system-ui, sans-serif;
  --nf-font-body: "Lato", system-ui, sans-serif;
  --nf-head-case: none;
  --nf-head-spacing: 0;
  --nf-head-weight: 700;
  --nf-glow: rgba(0, 0, 0, 0);
  --nf-accent-ink: #1b1411;
}
[data-theme="classic"] {
  --nf-bg: #2b2224; --nf-panel: #372c2e; --nf-panel-2: #433638; --nf-line: #5a4a44;
  --nf-text: #ffddb7; --nf-muted: #d2b395; --nf-accent: #de9e48; --nf-accent-2: #f7ddc6;
  --nf-track: #4a3b3d; --nf-input-bg: #ffddb7; --nf-input-text: #2b2224;
}
[data-theme="MY EYES"] {
  --nf-bg: #171716; --nf-panel: #201f1e; --nf-panel-2: #2a2828; --nf-line: #4a3a55;
  --nf-text: #ffddb7; --nf-muted: #c7b09a; --nf-accent: #bc6ff1; --nf-accent-2: #ffddb7;
  --nf-track: #2e2a33; --nf-input-bg: #ffddb7; --nf-input-text: #171716;
}
[data-theme="Dark Mode"] {
  --nf-bg: #222222; --nf-panel: #2b2b2b; --nf-panel-2: #353535; --nf-line: #515151;
  --nf-text: #bcccdc; --nf-muted: #8e9aa8; --nf-accent: #9aa5b1; --nf-accent-2: #bcccdc;
  --nf-track: #3a3a3a; --nf-input-bg: #1b1b1b; --nf-input-text: #bcccdc;
}
[data-theme="Porno Funk"] {
  --nf-bg: #3d1a01; --nf-panel: #4a2206; --nf-panel-2: #562a0b; --nf-line: #7a4a17;
  --nf-text: #bcccdc; --nf-muted: #a9a79f; --nf-accent: #dbb539; --nf-accent-2: #e6c86a;
  --nf-track: #5e320f; --nf-input-bg: #2c1301; --nf-input-text: #e6d9c2;
  --logo: url("/assets/svgs/GR.png");
}

/* ---- GG2: the Konami code easter egg (see assets/js/a29uYW1p...js) --------- */
[data-theme="GG2"] {
  --nf-bg: #d90d0d; --nf-panel: #d90d0d; --nf-panel-2: #b80b0b; --nf-line: #ffffff;
  --nf-text: #ffffff; --nf-muted: #ffe3e3; --nf-accent: #ffffff; --nf-accent-ink: #d90d0d; --nf-accent-2: #ffffff;
  --bg-Image: white url("/assets/svgs/yaas.jpg") repeat;
  --anim: yaas 3s linear 2s infinite alternate;
}
@keyframes yaas {
  from { transform: scaleX(1); }
  to { transform: scaleX(-1); }
}

/* =============================================================================
   Base
   ============================================================================= */
html { color-scheme: dark; }
body:not(.note-editable) {
  background: var(--bg-Image) !important;
  background-attachment: fixed !important;
  color: var(--nf-text) !important;
  font-family: var(--nf-font-body) !important;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 1.5;
  animation: var(--anim);
}
::selection { background: color-mix(in srgb, var(--nf-accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--nf-accent-2); outline-offset: 2px; }

p { color: inherit !important; }
a { color: var(--nf-accent-2) !important; }
a:hover { color: var(--nf-accent) !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nf-font-head) !important;
  font-weight: var(--nf-head-weight) !important;
  text-transform: var(--nf-head-case);
  letter-spacing: var(--nf-head-spacing);
  color: var(--nf-text) !important;
  text-wrap: balance;
}
/* Two heading sizes site-wide: pages use h1-h4 for their title and h5/h6 for sections, but the
   choice of level varies from page to page, so h1-h4 look the same and h5/h6 look the same. */
h1, h2, h3, h4 { font-size: 1.5rem; margin-bottom: 0.75rem; }
h5, h6 { font-size: 1rem; margin-bottom: 0.5rem; }
[data-theme="spooky"] h1, [data-theme="spooky"] h2, [data-theme="spooky"] h3, [data-theme="spooky"] h4 { color: var(--nf-accent) !important; font-size: 1.9rem; }
[data-theme="spooky"] h5, [data-theme="spooky"] h6 { font-size: 1.25rem; }

hr { border-top: 1px solid var(--nf-line) !important; }
/* Older pages colour status words with <font color="...">; use the theme's readable versions */
font[color="red" i] { color: var(--nf-danger) !important; }
font[color="green" i] { color: var(--nf-success) !important; }
font[color="orange" i] { color: var(--nf-warn) !important; }
font[color="violet" i] { color: var(--nf-accent-2) !important; }
code, pre, kbd, .nf-mono { font-family: var(--nf-font-mono); }
table, .nf-num { font-variant-numeric: tabular-nums; }
small, .text-muted { color: var(--nf-muted) !important; }

/* Page frame: the page scrolls normally, content sits on one panel */
.main {
  background: transparent;
  animation: var(--anim);
  min-height: calc(100vh - 64px);
  padding-block: 1.5rem 4rem;
  padding-inline: 1rem;
}
.container {
  max-width: 1400px !important;
  margin-top: 0;
  padding: 1.5rem;
  background: var(--nf-panel);
  border: 1px solid var(--nf-line);
  border-radius: calc(var(--nf-radius) + 2px);
  animation: var(--anim);
  font-size: 0.9rem;
  scrollbar-width: thin;
  scrollbar-color: var(--nf-line) transparent;
}
[data-theme="spooky"] .container {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233a2d45' stroke-width='1'%3E%3Cpath d='M64 0L20 44M64 0L40 56M64 0L8 24M64 0L30 4'/%3E%3Cpath d='M52 2c-2 6 4 10 10 10M44 3c-4 12 6 20 18 18M34 4c-6 18 8 30 28 28M22 8c-8 24 12 42 40 36'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 72px 72px;
}

/* =============================================================================
   Navigation
   ============================================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: color-mix(in srgb, var(--nf-panel) 90%, transparent) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nf-line) !important;
  color: var(--nf-text) !important;
  padding-block: 0.4rem;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--nf-font-brand) !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.06em;
  color: var(--nf-text) !important;
  text-decoration: none !important;
  padding-block: 0 !important;
}
.navbar-brand:hover { color: var(--nf-accent) !important; }
.nf-logo { width: 40px; height: auto; filter: drop-shadow(0 0 10px var(--nf-glow)); }
.nf-faction-badge { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; }
/* The 64th logo's lettering is black: a thin light outline keeps it readable on the dark bar */
[data-theme="f-64th"] .nf-faction-badge { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)); }
.nf-wordmark small { display: block; font-family: var(--nf-font-body); font-size: 0.65rem; letter-spacing: 0.32em; color: var(--nf-accent-2); }
[data-theme="classic"] .nf-logo, [data-theme="MY EYES"] .nf-logo, [data-theme="Dark Mode"] .nf-logo, [data-theme="Porno Funk"] .nf-logo { display: none; }
[data-theme="classic"] .nf-wordmark small, [data-theme="MY EYES"] .nf-wordmark small, [data-theme="Dark Mode"] .nf-wordmark small, [data-theme="Porno Funk"] .nf-wordmark small { display: none; }

.navbar .nav-link {
  color: var(--nf-muted) !important;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--nf-radius);
  padding-inline: 0.8rem !important;
}
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .show > .nav-link, .navbar .nav-link[aria-expanded="true"] {
  color: var(--nf-text) !important;
  background: var(--nf-panel-2) !important;
}
.navbar-right {
  margin-left: 1rem !important;
  padding-left: 1rem !important;
  border-left: 1px solid var(--nf-line);
}
/* The Admin / ST tools bar. No blur here: backdrop-filter would put its dropdowns in their own
   layer, underneath page content that has a position (DataTables etc.), so their links couldn't
   be clicked. The z-index keeps the dropdowns above the page, below the sticky main bar. */
.second-nav {
  position: relative;
  z-index: 1020;
  backdrop-filter: none;
  background: var(--nf-panel-2) !important;
  border-top: 0 !important;
}
.navbar-toggler { border-color: var(--nf-line) !important; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(227, 231, 241, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.dropdown-menu {
  background: var(--nf-panel) !important;
  color: var(--nf-text) !important;
  border: 1px solid var(--nf-line);
  border-radius: calc(var(--nf-radius) + 4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 0.4rem;
  font-size: 0.95rem;
}
.dropdown-item {
  color: var(--nf-text) !important;
  border-radius: var(--nf-radius);
  padding: 0.35rem 0.7rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--nf-panel-2) !important; color: var(--nf-text) !important; }
.dropdown-divider { border-top-color: var(--nf-line); }
/* Menu entries for pages that don't exist on the site */
.dropdown-item.nf-missing { color: var(--nf-muted) !important; text-decoration: line-through; opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.dropdown-header { color: var(--nf-muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.6rem 0.7rem 0.25rem; }
.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }

/* User menu: avatar, name and the theme list */
.nf-user-toggle { display: flex !important; align-items: center; gap: 0.5rem; text-transform: none !important; letter-spacing: 0.02em !important; }
.nf-user-toggle img, .nf-user-toggle .nf-avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--nf-line);
}
.nf-avatar-fallback {
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--nf-accent), var(--nf-accent-2));
  color: var(--nf-accent-ink); font-weight: 700; font-size: 0.75rem;
}
.nf-user-menu { width: 290px; max-height: calc(100vh - 80px); overflow-y: auto; }
.nf-theme-option {
  display: flex !important; align-items: center; gap: 0.6rem; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.nf-theme-option .nf-check { width: 1rem; color: var(--nf-accent); visibility: hidden; }
.nf-theme-option[aria-checked="true"] .nf-check { visibility: visible; }
.nf-theme-option .nf-theme-name { flex: 1; }
.nf-theme-option .nf-theme-note { display: block; font-size: 0.75rem; color: var(--nf-muted); }
.nf-swatch { display: flex; }
.nf-swatch i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); margin-left: -3px; }
.nf-theme-reset { font-size: 0.8rem; color: var(--nf-accent-2) !important; }

/* Bats in the menu bar, only for Spooky */
.nf-bats { display: none; color: var(--nf-muted); opacity: 0.75; margin-inline: 0.5rem; }
[data-theme="spooky"] .nf-bats { display: block; }
.nf-bats svg { display: block; width: 110px; height: 34px; }
.nf-bats .nf-bat { animation: nf-flap 2.8s ease-in-out infinite; }
.nf-bats .nf-bat:nth-child(2) { animation-delay: 0.6s; }
.nf-bats .nf-bat:nth-child(3) { animation-delay: 1.3s; }
@keyframes nf-flap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* =============================================================================
   Components
   ============================================================================= */
.btn {
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--nf-radius);
  background: var(--nf-accent) !important;
  border: 1px solid var(--nf-accent) !important;
  color: var(--nf-accent-ink) !important;
}
.btn:hover, .btn:focus { filter: brightness(1.08); color: var(--nf-accent-ink) !important; }
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-default {
  background: transparent !important;
  border-color: var(--nf-line) !important;
  color: var(--nf-text) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover, .btn-default:hover {
  border-color: var(--nf-accent) !important;
  color: var(--nf-accent) !important;
  filter: none;
}
.btn-danger, .btn-outline-danger {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--nf-danger) 65%, transparent) !important;
  color: var(--nf-danger) !important;
}
.btn-danger:hover, .btn-outline-danger:hover { background: color-mix(in srgb, var(--nf-danger) 15%, transparent) !important; color: var(--nf-danger) !important; filter: none; }
.btn-success { background: var(--nf-success) !important; border-color: var(--nf-success) !important; color: #06150d !important; }
/* Buttons placed next to each other (outside real button groups) get a gap */
:not(.btn-group):not(.input-group):not(.input-group-append):not(.input-group-prepend) > .btn + .btn,
input[type=submit] + input[type=submit] { margin-left: 0.5rem; }
input[type=submit], input[type=button] {
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.375rem 0.9rem;
  border-radius: var(--nf-radius);
  background: var(--nf-accent);
  border: 1px solid var(--nf-accent);
  color: var(--nf-accent-ink);
  cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover { filter: brightness(1.08); }
/* Panic page: solid alarm colours with readable text */
.btn.nf-btn-alarm, input.nf-btn-alarm { background: var(--nf-danger) !important; border-color: var(--nf-danger) !important; color: #ffffff !important; font-weight: 700; }
.btn.nf-btn-alarm-warn, input.nf-btn-alarm-warn { background: var(--nf-warn) !important; border-color: var(--nf-warn) !important; color: #1b1300 !important; }
.btn.nf-btn-alarm-ok, input.nf-btn-alarm-ok { background: var(--nf-success) !important; border-color: var(--nf-success) !important; color: #06150d !important; }
.btn-link, .btn-link:hover {
  background: none !important;
  border-color: transparent !important;
  color: var(--nf-accent-2) !important;
  font-weight: 500;
  letter-spacing: 0;
}
.btn-link:hover { color: var(--nf-accent) !important; text-decoration: underline; }

/* Form fields */
input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea, .form-control {
  background-color: var(--nf-input-bg) !important;
  color: var(--nf-input-text) !important;
  border: 1px solid var(--nf-line) !important;
  border-radius: var(--nf-radius) !important;
}
input::placeholder, textarea::placeholder, .form-control::placeholder { color: color-mix(in srgb, var(--nf-input-text) 45%, transparent) !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--nf-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 25%, transparent) !important;
  outline: none;
}
input[type=checkbox] { accent-color: var(--nf-accent); }
label { color: var(--nf-text); }
.input-group-prepend, .input-group-append, .input-group-text {
  background: var(--nf-panel-2) !important;
  color: var(--nf-muted) !important;
  border-color: var(--nf-line) !important;
}
fieldset { margin: auto; border: 1px solid var(--nf-line); border-radius: var(--nf-radius); padding: 1rem; }
legend {
  width: auto; margin: auto; padding: 0.2rem 0.8rem;
  border: 1px solid var(--nf-line); border-radius: 999px;
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
}

/* Tables and DataTables */
table { color: var(--nf-text) !important; border-color: var(--nf-line); }
table thead, table thead th, thead { background: transparent !important; }
table thead th, table.dataTable thead th, table.dataTable thead td {
  color: var(--nf-muted) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--nf-line) !important;
  white-space: nowrap;
}
table td, table th, .table td, .table th { border-color: color-mix(in srgb, var(--nf-line) 65%, transparent) !important; }
table.dataTable tbody tr, .tr, .tbody, .odd, .even, table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1 {
  background-color: transparent !important;
}
table.dataTable tbody tr.odd, .odd { background-color: color-mix(in srgb, var(--nf-panel-2) 45%, transparent) !important; }
table.dataTable tbody tr:hover, .odd:hover, .even:hover { background-color: var(--nf-panel-2) !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--nf-line) !important; }
/* DataTables tints the sorted column; keep it the same as the rest of the row */
table.dataTable tbody td.sorting_1, table.dataTable tbody tr > .sorting_1 { background-color: transparent !important; }
/* DataTables 1.13 paints stripes and the sorted column with an inset shadow; the theme sets row colours itself */
table.dataTable tbody tr > * { box-shadow: none !important; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before { color: var(--nf-muted); }
.dataTables_wrapper { padding-bottom: 2rem !important; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, .dataTables_length {
  color: var(--nf-muted) !important;
}
.dataTables_wrapper .dataTables_filter input { color: var(--nf-input-text) !important; margin-left: 0.5rem; padding: 0.3rem 0.6rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button, .paginate_button, .previous {
  color: var(--nf-text) !important;
  border: 1px solid transparent !important;
  border-radius: var(--nf-radius) !important;
  background: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--nf-accent) !important;
  border-color: var(--nf-line) !important;
  background: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: var(--nf-accent-ink) !important;
  background: var(--nf-accent) !important;
  border-color: var(--nf-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--nf-muted) !important;
  opacity: 0.5;
}
div.dt-buttons .dt-button, button.dt-button {
  background: transparent !important;
  border: 1px solid var(--nf-line) !important;
  border-radius: var(--nf-radius) !important;
  color: var(--nf-text) !important;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
div.dt-buttons .dt-button:hover { border-color: var(--nf-accent) !important; color: var(--nf-accent) !important; }

/* Cards, panels, modals, notices */
.card {
  background: var(--nf-panel-2) !important;
  color: var(--nf-text);
  border: 1px solid var(--nf-line);
  border-radius: calc(var(--nf-radius) + 2px);
}
.card-header {
  background: color-mix(in srgb, var(--nf-panel) 70%, var(--nf-panel-2)) !important;
  color: var(--nf-text);
  border-bottom: 1px solid var(--nf-line);
  position: relative;
}
.card-body .row .col-sm p { color: var(--nf-text) !important; margin: 5px !important; }
.modal-content { background: var(--nf-panel) !important; color: var(--nf-text) !important; border: 1px solid var(--nf-line); }
.modal-header, .modal-footer { border-color: var(--nf-line); }
.close { color: var(--nf-text); text-shadow: none; opacity: 0.7; }
.dialog_box {
  background: var(--nf-panel-2);
  border-left: 3px solid var(--nf-accent);
  border-radius: var(--nf-radius);
  padding: 0.6rem 0.9rem;
}
.alert { border-radius: var(--nf-radius); }
.progress { background: var(--nf-track) !important; border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--nf-accent), color-mix(in srgb, var(--nf-accent) 60%, var(--nf-accent-2))) !important; color: var(--nf-accent-ink); }
.badge { border-radius: 999px; font-weight: 600; }
.bordered { border: 1px solid var(--nf-line); border-radius: var(--nf-radius); padding: 10px; margin-bottom: 10px; }
center { padding: 0.33rem; }

/* Summernote editor content stays on a light page, like the text will look elsewhere */
.note-editor .note-editable { background: #ffffff !important; color: #111111 !important; }
.note-editor.note-frame { border-color: var(--nf-line) !important; }
.note-toolbar { background: var(--nf-panel-2) !important; }

/* =============================================================================
   Standalone pages: login and set password, popups
   ============================================================================= */
.nf-login-page { min-height: 100vh; }
.nf-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.nf-login-card {
  width: 100%;
  max-width: 360px;
  display: grid;
  gap: 0.6rem;
  padding: 2rem 1.75rem;
  background: var(--nf-panel);
  border: 1px solid var(--nf-line);
  border-radius: calc(var(--nf-radius) + 6px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 120px var(--nf-glow);
}
.nf-login-card form { display: grid; gap: 0.4rem; }
.nf-login-card label {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nf-muted);
}
.nf-login-card .btn { margin-top: 1rem; padding-block: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; }
.nf-login-logo { width: 96px; height: auto; justify-self: center; filter: drop-shadow(0 0 18px var(--nf-glow)); }
.nf-login-title {
  justify-self: center;
  text-align: center;
  font-family: var(--nf-font-brand) !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.08em;
  margin: 0.2rem 0 0.6rem;
}
.nf-login-card .login-header, .nf-form-message {
  margin: 0;
  font-family: var(--nf-font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--nf-text) !important;
  background: color-mix(in srgb, var(--nf-danger) 14%, var(--nf-panel));
  border-left: 3px solid var(--nf-danger);
  border-radius: var(--nf-radius);
  padding: 0.55rem 0.8rem;
}
.nf-form-message.ok {
  background: color-mix(in srgb, var(--nf-success) 14%, var(--nf-panel));
  border-left-color: var(--nf-success);
}
.nf-hint { font-size: 0.8rem; color: var(--nf-muted); margin: 0; }

/* Section titles on the radar pages and in the ban popup */
.header1 {
  font-family: var(--nf-font-head);
  font-weight: var(--nf-head-weight);
  text-transform: var(--nf-head-case);
  letter-spacing: var(--nf-head-spacing);
  font-size: 1.2rem;
  margin: 0.5rem 0;
}
[data-theme="spooky"] .header1 { color: var(--nf-accent); font-size: 1.5rem; }

.nf-cookie-button {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1000;
  background: var(--nf-panel-2); color: var(--nf-muted);
  border: 1px solid var(--nf-line); border-radius: 999px;
  padding: 0.35rem 0.8rem; font-size: 0.75rem; cursor: pointer;
}
.nf-cookie-button:hover { color: var(--nf-text); border-color: var(--nf-accent); }

/* Popups and small tool pages without the main menu */
.nf-popup { padding: 1.25rem; }
.nf-popup .container { max-width: 900px !important; }

/* =============================================================================
   Page layout pieces (sim traffic and newer pages)
   ============================================================================= */
.nf-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.nf-eyebrow { font: 500 0.72rem/1 var(--nf-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--nf-accent-2); }
.nf-page-head h1 { margin: 0.35rem 0 0.25rem; }
.nf-lede { color: var(--nf-muted) !important; margin: 0; max-width: 65ch; }
.nf-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.nf-filters label { display: grid; gap: 0.25rem; margin: 0; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nf-muted); }
.nf-filters select { min-width: 150px; padding: 0.35rem 0.6rem; font-size: 0.9rem; letter-spacing: 0; text-transform: none; }

.nf-traffic-summary { font-size: 1.05rem; max-width: 80ch; margin: 0.5rem 0 1.25rem; }
.nf-traffic-summary strong { color: var(--nf-accent); font-weight: 600; }

.nf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.nf-tile { display: grid; gap: 0.2rem; padding: 0.9rem 1rem; background: var(--nf-panel-2); border: 1px solid var(--nf-line); border-radius: var(--nf-radius); }
.nf-tile small { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nf-muted); }
.nf-tile b { font: 500 1.6rem/1.2 var(--nf-font-mono); font-variant-numeric: tabular-nums; }
.nf-tile-sep { color: var(--nf-muted); font-size: 1.1rem; }
.nf-trend { font-size: 0.78rem; color: var(--nf-muted); }
.nf-trend.up { color: var(--nf-success); }
.nf-trend.down { color: var(--nf-danger); }

.nf-card { background: var(--nf-panel-2); border: 1px solid var(--nf-line); border-radius: calc(var(--nf-radius) + 2px); padding: 1rem 1.1rem; margin-bottom: 1rem; min-width: 0; }
.nf-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.nf-card-head h2 { font-size: 1rem; margin: 0; }
[data-theme="spooky"] .nf-card-head h2 { font-size: 1.35rem; }
.nf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }
.nf-two > .nf-card { margin-bottom: 1rem; }
@media (max-width: 560px) { .nf-two { grid-template-columns: 1fr; } }
.nf-chart { position: relative; height: 280px; }
.nf-chart-small { height: 190px; }

.nf-heatmap-wrap { overflow-x: auto; }
.nf-heatmap { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 420px; }
.nf-heatmap th { font: 500 0.66rem/1 var(--nf-font-mono) !important; color: var(--nf-muted) !important; text-align: left; padding: 0 4px 0 0 !important; border: 0 !important; letter-spacing: 0 !important; text-transform: none !important; }
.nf-heatmap td {
  height: 20px; border: 0 !important; border-radius: 3px; padding: 0 !important;
  background: color-mix(in srgb, var(--nf-accent) calc(var(--level, 0) * 100%), var(--nf-track));
}
.nf-heat-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.75rem; color: var(--nf-muted); }
.nf-heat-legend i { width: 120px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--nf-track), var(--nf-accent)); }

.nf-sim-split { display: grid; gap: 0.4rem; margin-top: 1rem; }
.nf-sim-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.nf-sim-row .progress { height: 8px; }
.nf-sim-row .nf-num { text-align: right; font-family: var(--nf-font-mono); }
.nf-badge-new { background: var(--nf-accent-2); color: var(--nf-accent-ink); font-size: 0.65rem; vertical-align: middle; }
.nf-regulars td, .nf-regulars th { padding: 0.45rem 0.6rem; }
.nf-num { font-variant-numeric: tabular-nums; }

/* Prims page */
.nf-mono { font-family: var(--nf-font-mono); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.nf-sims { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.nf-sim { display: grid; gap: 0.9rem; }
.nf-sim-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.nf-sim-name { font: var(--nf-head-weight) 1.15rem/1 var(--nf-font-head); text-transform: var(--nf-head-case); letter-spacing: var(--nf-head-spacing); }
[data-theme="spooky"] .nf-sim-name { font-size: 1.5rem; }
.nf-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: 500 0.7rem/1 var(--nf-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.6rem; border-radius: 999px; border: 1px solid var(--nf-line); color: var(--nf-muted);
}
.nf-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nf-pill.ok { color: var(--nf-accent-2); }
.nf-pill.busy { color: var(--nf-warn); }
.nf-pill.bad { color: var(--nf-danger); }
.nf-sim-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.nf-sim-stats small { display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nf-muted); }
.nf-sim-stats b { font: 500 1.35rem/1.2 var(--nf-font-mono); font-variant-numeric: tabular-nums; }
.nf-sim-stats b.nf-unknown { font: 400 0.85rem/1.6 var(--nf-font-body); color: var(--nf-muted); }
.nf-sim-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.85rem; color: var(--nf-muted); }
.nf-row-extra td { color: var(--nf-muted) !important; font-style: italic; }
.nf-bar { display: flex; align-items: center; gap: 0.6rem; min-width: 160px; }
.nf-bar .progress { flex: 1; height: 8px; margin: 0; }
.nf-bar span { width: 3.2rem; text-align: right; font: 500 0.75rem/1 var(--nf-font-mono); color: var(--nf-muted); }
.nf-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.nf-toolbar label { display: grid; gap: 0.25rem; margin: 0; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nf-muted); }
.nf-toolbar input { width: 9rem; padding: 0.35rem 0.6rem; font-family: var(--nf-font-mono); letter-spacing: 0; text-transform: none; }
.nf-spacer { flex: 1; }
.nf-objects .nf-obj-name { font-weight: 600; }
.nf-uuid { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.nf-copy { background: none; border: 1px solid transparent; border-radius: 4px; color: var(--nf-muted); cursor: pointer; padding: 2px; line-height: 0; }
.nf-copy:hover { color: var(--nf-accent); border-color: var(--nf-line); }
.nf-copy.done { color: var(--nf-success); }
.nf-copy svg { width: 14px; height: 14px; }

/* Character creation (usermakechar.php guided, usermakechar2.php quick form) */
.nf-mode-switch { display: flex; gap: 0.4rem; }
.nf-mode-switch span.btn { cursor: default; }
.nf-quick-form { display: grid; gap: 0.4rem; max-width: 760px; }
.nf-quick-form label, .nf-charcreate .nf-step > label { margin: 0.6rem 0 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nf-muted); }
.nf-quick-form label a { text-transform: none; letter-spacing: 0; }
.nf-quick-form .btn { justify-self: start; margin-top: 1.2rem; }
.nf-quick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
.nf-quick-row > div { display: grid; gap: 0.4rem; }
.nf-created { display: grid; gap: 1rem; justify-items: start; }

.nf-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: none; }
.nf-steps button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--nf-panel-2); border: 1px solid var(--nf-line); border-radius: 999px;
  color: var(--nf-muted); padding: 0.3rem 0.85rem 0.3rem 0.35rem; font-size: 0.85rem; cursor: pointer;
}
.nf-steps button span {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--nf-track); font: 600 0.75rem/1 var(--nf-font-mono);
}
.nf-steps button:disabled { opacity: 0.45; cursor: default; }
.nf-steps li.done button { color: var(--nf-text); }
.nf-steps li.done button span { background: var(--nf-accent-2); color: var(--nf-accent-ink); }
.nf-steps li.active button { color: var(--nf-text); border-color: var(--nf-accent); }
.nf-steps li.active button span { background: var(--nf-accent); color: var(--nf-accent-ink); }

.nf-wizard .nf-step { margin-bottom: 2rem; }
.nf-wizard-js .nf-step { display: none; margin-bottom: 0; }
.nf-wizard-js .nf-step.active { display: block; }
.nf-wizard .nf-step > h2 { margin-bottom: 1rem; }
.nf-name-input { max-width: 480px; font-size: 1.15rem; padding: 0.6rem 0.8rem; height: auto; }
.nf-wizard-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.nf-wizard-nav #nfNext { margin-left: auto; }
#nfStepError { margin-top: 1rem; }

.nf-choice-group { font-size: 0.8rem !important; letter-spacing: 0.18em !important; color: var(--nf-accent-2) !important; margin: 1.25rem 0 0.6rem; }
.nf-choice-grid { display: grid; gap: 0.75rem; }
.nf-races { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.nf-subraces { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.nf-backgrounds { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.nf-choice { display: block; margin: 0; cursor: pointer; }
.nf-choice-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--nf-panel-2); border: 1px solid var(--nf-line); border-radius: calc(var(--nf-radius) + 2px);
  overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.nf-choice-card img { width: 100%; height: 190px; object-fit: cover; object-position: center top; background: var(--nf-track); }
.nf-choice-card img.nf-choice-placeholder { object-fit: contain; padding: 2.2rem; opacity: 0.3; }
.nf-choice-small img.nf-choice-placeholder { padding: 1.4rem; }
.nf-choice-body, .nf-choice-text-only { display: grid; gap: 0.35rem; align-content: start; padding: 0.8rem 0.9rem; }
.nf-choice-card strong { font-size: 1rem; }
.nf-choice-text { font-size: 0.85rem; color: var(--nf-muted); line-height: 1.45; }
.nf-races .nf-choice-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.nf-choice-more { font-size: 0.8rem; }
.nf-choice-small { align-items: center; text-align: center; }
.nf-choice-small img { height: 110px; }
.nf-choice-small strong { padding: 0.5rem; font-size: 0.9rem; }
.nf-choice:hover .nf-choice-card { border-color: color-mix(in srgb, var(--nf-accent) 55%, var(--nf-line)); transform: translateY(-2px); }
.nf-choice input:focus-visible + .nf-choice-card { outline: 2px solid var(--nf-accent-2); outline-offset: 2px; }
.nf-choice input:checked + .nf-choice-card {
  border-color: var(--nf-accent);
  box-shadow: 0 0 0 1px var(--nf-accent), 0 0 24px var(--nf-glow);
}
.nf-choice input:checked + .nf-choice-card strong { color: var(--nf-accent); }
.nf-choice-unavailable { display: none; font-size: 0.75rem; color: var(--nf-danger); }
.nf-choice input:disabled + .nf-choice-card { opacity: 0.4; cursor: not-allowed; transform: none; }
.nf-choice input:disabled + .nf-choice-card .nf-choice-unavailable { display: block; }
.nf-review { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; max-width: 560px; margin: 0 0 1.5rem; }
.nf-review dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nf-muted); font-weight: 500; align-self: center; }
.nf-review dd { margin: 0; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .nf-choice-card { transition: none; } .nf-choice:hover .nf-choice-card { transform: none; } }

/* =============================================================================
   Page helpers kept from the old stylesheet (item details, character creation)
   ============================================================================= */
.logo {
  height: 50px !important;
  width: 50px !important;
  background-image: var(--logo);
  background-size: contain;
  background-repeat: no-repeat;
}
.pre-tab {
  display: inline-block;
  width: 25px;
  height: 90%;
  margin-right: 5px;
  background-color: var(--nf-accent);
  position: absolute;
  left: 0;
  top: 2px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.hiddenRow { padding: 0 !important; }
.chevy { color: var(--nf-text) !important; }
.chevron.down { transform: rotate(90deg); }
.itemDetailHeaders { text-transform: uppercase !important; font-weight: 700 !important; font-size: 0.8rem !important; letter-spacing: 0.1em; color: var(--nf-muted); }
.accordian-body { padding: 10px; }
.collapseOne .show { border: 1px solid var(--nf-line) !important; }
.displayItemHeadings {
  color: var(--nf-accent-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em;
  padding: 10px !important;
  margin: 10px !important;
  font-size: 1rem !important;
}

/* Radio buttons are hidden; the element after them is what players click (character creation cards) */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nf-bats .nf-bat { animation: none; }
}