/* ══════════════════════════════════════════
   BFLOLateNight — Color System
   Background:  #121212  Moody Charcoal
   Container:   #002244  Deep Navy Blue
   Accent:      #69BE28  Neon Green
   Text:        #E0E0E0  Off-White / #FFFFFF White
   ══════════════════════════════════════════ */
:root {
  --ln-bg:          #121212;
  --ln-navy:        #002244;
  --ln-navy-deep:   #001833;
  --ln-card:        #002244;
  --ln-border:      #0a3060;
  --ln-green:       #69BE28;
  --ln-green-dim:   #57a020;
  --ln-green-glow:  rgba(105, 190, 40, 0.30);
  --ln-text:        #E0E0E0;
  --ln-heading:     #FFFFFF;

  /* Bootstrap token overrides */
  --bs-body-bg:      var(--ln-bg);
  --bs-dark:         var(--ln-navy);
  --bs-dark-rgb:     0, 34, 68;
  --bs-warning:      var(--ln-green);
  --bs-warning-rgb:  105, 190, 40;
  --bs-secondary-bg: var(--ln-card);
}

/* ── Fonts ── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--ln-bg) !important;
  color: var(--ln-text);
}

h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
  color: var(--ln-heading);
  letter-spacing: 0.03em;
}

/* ── Navbar ── */
.navbar {
  background-color: var(--ln-navy-deep) !important;
  border-bottom: 1px solid var(--ln-border) !important;
}
.bg-black { background-color: var(--ln-navy-deep) !important; }

.navbar-brand {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
}

/* ── Neon Green accent overrides (replaces amber/warning) ── */
.text-warning                    { color: var(--ln-green) !important; }
.bg-warning                      { background-color: var(--ln-green) !important; color: #000 !important; }
.border-warning                  { border-color: var(--ln-green) !important; }

.btn-warning {
  background-color: var(--ln-green);
  border-color:     var(--ln-green);
  border-radius:    2px;
  color:            #000;
  font-weight:      700;
  font-family:      'Oswald', sans-serif;
  letter-spacing:   0.05em;
  transition:       box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--ln-green-dim);
  border-color:     var(--ln-green-dim);
  color:            #000;
  box-shadow:       0 0 8px var(--ln-green);
}

.btn-outline-warning {
  color:         var(--ln-green);
  border-color:  var(--ln-green);
  border-radius: 2px;
  font-family:   'Oswald', sans-serif;
  letter-spacing: 0.05em;
}
.btn-outline-warning:hover {
  background-color: var(--ln-green);
  border-color:     var(--ln-green);
  color:            #000;
  box-shadow:       0 0 8px var(--ln-green);
}

.btn-outline-light,
.btn-outline-danger,
.btn-outline-secondary,
.btn-outline-success {
  border-radius: 2px;
}

.btn {
  border-radius: 2px;
}

/* ── Venue Cards ── */
.venue-card {
  background-color: var(--ln-card);
  border: 1px solid var(--ln-border);
  border-radius: 2px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.venue-card:hover {
  transform:    translateY(-3px);
  border-color: var(--ln-green);
  box-shadow:   0 4px 20px var(--ln-green-glow);
}

/* ── Cards general ── */
.card {
  border-radius: 2px !important;
}

/* ── Open Now Badge ── */
.open-now-badge {
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(105, 190, 40, 0.7); }
  50%       { box-shadow: 0 0 0 6px rgba(105, 190, 40, 0); }
}

/* ── Past Midnight Badge ── */
.badge.bg-warning {
  background-color: var(--ln-green) !important;
  color:            #000 !important;
}

/* ── Category Badge ── */
.category-badge {
  background-color: var(--ln-navy);
  color:            var(--ln-green);
  border:           1px solid var(--ln-border);
  border-radius:    2px;
  font-weight:      500;
}

/* ── Today row highlight ── */
.today-row td {
  border-left: 3px solid var(--ln-green);
}

/* ── Dark secondary card ── */
.bg-secondary-dark {
  background-color: var(--ln-card) !important;
}

/* ── Map Pins ── */
.map-pin {
  width:  14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.map-pin.open   { background-color: var(--ln-green); }
.map-pin.closed { background-color: #4a5568; }

/* ── Leaflet popup dark theme ── */
.leaflet-popup-content-wrapper {
  background:    var(--ln-card);
  color:         var(--ln-text);
  border:        1px solid var(--ln-border);
  border-radius: 2px;
}
.leaflet-popup-tip { background: var(--ln-card); }

/* ── Nav Tabs ── */
.nav-tabs { border-color: var(--ln-border); }
.nav-tabs .nav-link        { color: #8899aa; border-color: transparent; border-radius: 2px 2px 0 0; }
.nav-tabs .nav-link:hover  { color: var(--ln-green); border-color: transparent; }
.nav-tabs .nav-link.active {
  background-color: var(--ln-card);
  border-color:     var(--ln-border) var(--ln-border) var(--ln-card);
  color:            var(--ln-green);
  border-radius:    2px 2px 0 0;
}

/* ── Form Controls ── */
.form-control,
.form-select {
  background-color: var(--ln-card);
  border-color:     var(--ln-border);
  border-radius:    2px;
  color:            var(--ln-text);
}
.form-control::placeholder { color: #6a7a8a; }
.form-control:focus,
.form-select:focus {
  border-color: var(--ln-green) !important;
  box-shadow:   0 0 0 0.2rem rgba(105, 190, 40, 0.2);
}

/* ── Borders ── */
.border-secondary { border-color: var(--ln-border) !important; }

/* ── Table ── */
.table-dark { --bs-table-bg: var(--ln-card); }
.table-dark.table-hover tbody tr:hover td { background-color: #002e5c; }
.table-active td { background-color: #0a2a0a !important; }

/* ── Muted / secondary text — overrides Bootstrap default (#6c757d) which
   fails WCAG AA on dark backgrounds. #94a3b5 gives ~7.8:1 on #121212. ── */
.text-secondary,
.text-muted {
  color: #94a3b5 !important;
}

/* ── Footer ── */
footer {
  background-color: var(--ln-navy-deep);
  border-color: var(--ln-border) !important;
}

/* ── Responsive Map ── */
#map { min-height: 400px; }
@media (max-width: 576px) {
  #map { min-height: 300px; }
  h1   { font-size: 1.4rem; }
}

/* ── Scroll-to-top button ── */
#scrollTopBtn {
  position:         fixed;
  bottom:           2rem;
  right:            2rem;
  z-index:          1050;
  width:            44px;
  height:           44px;
  border-radius:    2px;
  border:           none;
  background-color: var(--ln-green);
  color:            #000;
  font-size:        1.2rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  opacity:          0;
  pointer-events:   none;
  transition:       opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:       0 3px 12px var(--ln-green-glow);
}
#scrollTopBtn.visible {
  opacity:        1;
  pointer-events: auto;
}
#scrollTopBtn:hover {
  background-color: var(--ln-green-dim);
  transform:        translateY(-2px);
  box-shadow:       0 0 12px var(--ln-green);
}

/* ── Guides ── */
.guide-cat-badge {
  background-color: var(--ln-navy);
  color:            var(--ln-green);
  border:           1px solid var(--ln-border);
  border-radius:    2px;
  font-size:        0.72rem;
  font-weight:      600;
  letter-spacing:   0.05em;
  text-transform:   uppercase;
}

.guide-featured-card {
  background-color: var(--ln-card);
  border:           1px solid var(--ln-border);
  border-radius:    2px;
  min-height:       280px;
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  transition:       border-color 0.2s ease, box-shadow 0.2s ease;
}
.guide-featured-card:hover {
  border-color: var(--ln-green);
  box-shadow:   0 4px 24px var(--ln-green-glow);
}
.guide-featured-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(to bottom, rgba(0,10,30,0.35) 0%, rgba(0,10,30,0.88) 100%);
}

.guide-card {
  background-color: var(--ln-card);
  border:           1px solid var(--ln-border);
  border-radius:    2px;
  transition:       transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration:  none;
}
.guide-card:hover {
  transform:    translateY(-3px);
  border-color: var(--ln-green);
  box-shadow:   0 4px 20px var(--ln-green-glow);
}
.guide-title {
  line-height: 1.4;
}
.guide-summary {
  opacity: 0.88;
  line-height: 1.6;
}

/* ── Hero night-sky pattern ── */
.hero-section {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(105,190,40,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,100,200,0.06) 0%, transparent 50%);
  background-color: var(--ln-bg);
}