/* fanpulse-sngine.css — minimal brand layer on top of Sngine's default theme.
   Loaded from default/_head.tpl. Tokens come from tokens.css.
   Strategy: nudge Bootstrap primary/links/buttons toward FanPulse colors,
   leave the rest of Sngine's layout intact. */

:root {
  --bs-primary: var(--c-lime);
  --bs-primary-rgb: 167, 255, 0;
  --bs-link-color: var(--c-lime);
  --bs-link-hover-color: var(--c-lime);
}

/* Primary buttons / nav active states */
.btn-primary,
.btn-main,
.btn-success {
  background: var(--c-lime) !important;
  border-color: var(--c-lime) !important;
  color: #0A0F1A !important;
  font-weight: 700;
}
.btn-primary:hover,
.btn-main:hover,
.btn-success:hover {
  filter: brightness(1.07);
  background: var(--c-lime) !important;
  border-color: var(--c-lime) !important;
  color: #0A0F1A !important;
}

/* Links throughout Sngine */
a { color: var(--c-lime); }
a:hover { color: var(--c-lime); filter: brightness(1.15); }

/* Sngine top nav brand text */
.navbar-brand,
.app-name,
.logo {
  letter-spacing: 0.02em;
}

/* Badges + active nav items use Lime */
.badge.bg-primary,
.nav-link.active,
.dropdown-item:hover,
.dropdown-item.active,
.btn-outline-primary {
  --bs-btn-color: var(--c-lime);
  --bs-btn-border-color: var(--c-lime);
  --bs-btn-hover-bg: rgba(167, 255, 0, 0.08);
  --bs-btn-hover-color: var(--c-lime);
  --bs-btn-hover-border-color: var(--c-lime);
  color: var(--c-lime);
}

/* Subtle FanPulse accents on cards / forms — keeps Sngine's white-card layout intact */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--c-lime) !important;
  box-shadow: 0 0 0 3px rgba(167, 255, 0, 0.18) !important;
}

/* Sngine sometimes uses Indigo/blue accents — tone toward lime where light */
.text-primary { color: var(--c-lime) !important; }
.bg-primary  { background-color: var(--c-lime) !important; color: #0A0F1A !important; }

/* ══════════════════════════════════════════════════════════════════════════
   VISITOR CHROME (signin / signup / reset — body.visitor).
   Sngine ships these pages on its stock LIGHT theme, which fought the brand:
   near-white logo text on a white bar, white card on white page. Skin the
   whole signed-out chrome dark to match the rest of FanPulse.
   ══════════════════════════════════════════════════════════════════════════ */

body.visitor {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(var(--c-bg-angle), var(--c-bg-a), var(--c-bg-b) 50%, var(--c-bg-c)),
    var(--c-bg-texture);
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--c-bg-texture-size) auto;
  background-position: center, top left;
  background-attachment: fixed, fixed;
  color: #E9EDF4;
}

/* Top bar */
body.visitor .main-header {
  background: rgba(7, 16, 27, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Logo: keep the wordmark and the pulse glyph on ONE line, visible on dark */
body.visitor .logo,
body.visitor .navbar-brand {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

/* Search box in the visitor header */
body.visitor .main-header input,
body.visitor .main-header .form-control {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E9EDF4;
}
body.visitor .main-header input::placeholder { color: rgba(233, 237, 244, 0.45); }

/* Auth card */
body.visitor .fr_auth_form {
  background: linear-gradient(160deg, rgba(15, 26, 44, 0.96), rgba(9, 16, 28, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: 28px 26px;
}
body.visitor .fr_welcome_title { color: #fff; }
body.visitor .fr_auth_form label,
body.visitor .fr_auth_form .form-label,
body.visitor .fr_auth_form .form-check-label { color: rgba(233, 237, 244, 0.8); }

/* Inputs + selects (email, password, birthdate, gender…) */
body.visitor .fr_welcome_field input,
body.visitor .fr_welcome_field .form-select,
body.visitor .fr_auth_form .form-control,
body.visitor .fr_auth_form .form-select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #E9EDF4 !important;
}
body.visitor .fr_welcome_field input::placeholder { color: rgba(233, 237, 244, 0.4); }
body.visitor .fr_welcome_field svg { color: rgba(233, 237, 244, 0.45); }
/* Native dropdown lists render on white — keep their option text dark */
body.visitor .fr_auth_form option { color: #111; }

/* Muted copy + the small DOB warning line */
body.visitor .text-muted,
body.visitor .fr_welcome_switch,
body.visitor small { color: rgba(233, 237, 244, 0.55) !important; }

/* Visitor footer strip */
body.visitor .main-footer,
body.visitor footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(233, 237, 244, 0.55);
}

/* ────────────────────────────────────────────────────────────────
   SIGNED-IN SNGINE CORE PAGES (post / group / profile / watch …).
   Sngine night mode ships a neutral slate; repaint it to the FanPulse
   navy so a post opened from the dark feed feels like the same app.
   ──────────────────────────────────────────────────────────────── */
/* Same wall as the native shell (base.css .bg-grid) so a post opened from the
   dark feed lands on the identical background. Tokens come from tokens.css,
   which this file loads after. Longhand rather than the `background` shorthand:
   the shorthand would reset background-color and lose the fallback. */
body.night-mode {
  background-color: var(--c-bg) !important;
  background-image:
    linear-gradient(var(--c-bg-angle), var(--c-bg-a), var(--c-bg-b) 50%, var(--c-bg-c)),
    var(--c-bg-texture) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: cover, var(--c-bg-texture-size) auto !important;
  background-position: center, top left !important;
  background-attachment: fixed, fixed !important;
  color: #E9EDF4;
}
body.night-mode .main-header {
  background: rgba(7, 16, 27, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
}
/* Cards / panels / publisher / comment box / dropdowns */
body.night-mode .post,
body.night-mode .panel,
body.night-mode .panel-body,
body.night-mode .card,
body.night-mode .well,
body.night-mode .box,
body.night-mode .nav-tabs-content,
body.night-mode .comment.js_comment-form,
body.night-mode .publisher,
body.night-mode .sub-header {
  /* Translucent so the wall reads through, matching the native feed cards. */
  background: rgba(11, 18, 32, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Dropdowns stay OPAQUE — they float over page content, not over the wall, so
   alpha here would show text and images through the menu's own labels. */
body.night-mode .dropdown-menu {
  background: #0B1220 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.night-mode .post .post-box,
body.night-mode .comments,
body.night-mode .comment-box,
body.night-mode .nested-comments {
  background: transparent !important;
}
/* Inputs inside core pages */
body.night-mode .form-control,
body.night-mode .form-select,
body.night-mode .comment-input,
body.night-mode textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #E9EDF4 !important;
}
/* Bottom mobile bar */
body.night-mode .footer,
body.night-mode .bottom-bar,
body.night-mode .mobile-footer {
  background: rgba(7, 16, 27, 0.96) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}