/* KnullVoid Custom Brand Stylesheet (Zero-Build CDN compatible) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Racing+Sans+One&display=swap');

:root {
  --knull-yellow: #ffd730;
  --knull-yellow-glow: rgba(255, 215, 48, 0.45);
  --knull-bg: #0a0a0a;
  --knull-surface: #141414;
  --knull-surface-2: #1e1e1e;
  --knull-border: rgba(255, 215, 48, 0.25);
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--knull-bg);
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
}

/* Brand Display Font: Racing Sans One (Normally italic speed font with ExtraBold weight) */
.font-brand {
  font-family: 'Racing Sans One', sans-serif;
  font-style: normal; /* Racing Sans One is naturally slanted; normal avoids excessive artificial double-tilt */
  font-weight: 800;
  -webkit-text-stroke: 0.35px currentColor;
  letter-spacing: 0.04em;
}

.font-ui {
  font-family: 'Manrope', sans-serif;
}

/* Neon Glows */
.glow-yellow {
  box-shadow: 0 0 15px var(--knull-yellow-glow), 0 0 30px rgba(255, 215, 48, 0.15);
}

.glow-yellow-sm {
  box-shadow: 0 0 8px rgba(255, 215, 48, 0.35);
}

.glow-text-yellow {
  text-shadow: 0 0 12px rgba(255, 215, 48, 0.65);
}

.glow-border {
  border: 1px solid var(--knull-border);
}

/* Active Navigation Tab & Button Hover Protection (NEVER turn black on hover) */
.btn-yellow,
.nav-tab-active,
.btn-active-yellow,
.category-btn.active {
  background-color: #ffd730 !important;
  color: #000000 !important;
  border-color: #ffd730 !important;
}

.btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow:active,
.nav-tab-active:hover,
.nav-tab-active:focus,
.nav-tab-active:active,
.btn-active-yellow:hover,
.category-btn.active:hover,
.category-btn.active:focus,
.category-btn.active:active {
  background-color: #ffe160 !important;
  color: #000000 !important;
  border-color: #ffe160 !important;
}

/* Fallback for Tailwind arbitrary classes */
.btn.bg-\[\#ffd730\] {
  background-color: #ffd730 !important;
  color: #000000 !important;
  border-color: #ffd730 !important;
}
.btn.bg-\[\#ffd730\]:hover {
  background-color: #ffe160 !important;
  color: #000000 !important;
  border-color: #ffe160 !important;
}

/* Audio Alert Button Hover Protection */
#audio-toggle-btn {
  background-color: #141414 !important;
  border-color: rgba(255, 215, 48, 0.4) !important;
  color: #ffd730 !important;
  transition: all 0.2s ease;
}

#audio-toggle-btn:hover {
  background-color: rgba(255, 215, 48, 0.18) !important;
  border-color: #ffd730 !important;
  color: #ffd730 !important;
}

/* Badge Text Wrapping Fix - Guarantees '21 Yrs' and status pills never break across lines */
.badge,
.badge-knull,
td .badge,
th .badge,
.station-status-badge,
span[class*="badge"],
div[class*="badge"] {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  width: auto !important;
}

td {
  white-space: nowrap;
}

/* Pulsing alert for 5 minutes remaining */
.glow-amber-pulse {
  animation: pulse-amber 1.4s infinite alternate ease-in-out;
}
@keyframes pulse-amber {
  from {
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
  }
  to {
    border-color: #f97316;
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.85);
  }
}

/* Flashing alert for 00:00:00 Time Up */
.glow-red-flash {
  animation: flash-red 0.75s infinite alternate ease-in-out;
}
@keyframes flash-red {
  from {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
  }
  to {
    border-color: #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.95);
  }
}

/* Mobile Bottom Navigation Dock */
.mobile-bottom-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(13, 13, 13, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 215, 48, 0.25);
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.85);
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  color: #9ca3af;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dock-item:active {
  transform: scale(0.92);
}

.dock-item.active {
  color: #ffd730;
}

.dock-item.active .dock-icon-wrap {
  background: rgba(255, 215, 48, 0.15);
  border: 1px solid rgba(255, 215, 48, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 48, 0.35);
  color: #ffd730;
}

.dock-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  transition: all 0.2s ease;
}

/* Sleek Cyber Dark Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0d0d0d;
}
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 48, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: #ffd730;
}

/* Modals Mobile Bottom Sheet Optimization */
@media (max-width: 640px) {
  .modal {
    align-items: flex-end;
  }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    max-height: 90vh !important;
    padding: 1.25rem !important;
  }
}

.modal-box {
  background-color: #141414 !important;
  border: 1px solid rgba(255, 215, 48, 0.3) !important;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), 0 0 15px rgba(255, 215, 48, 0.2) !important;
}

/* Button & Touch Target Enhancements */
button, .btn, a {
  touch-action: manipulation;
}