/*
 * NYC COMMANDO 2027 - ULTIMATE EDITION
 * OLED Dark Mode "NYC Midnight" Stylesheet
 */

:root {
  --color-bg-base: #090d16;
  --color-bg-surface: #111827;
  --color-bg-card: #161f33;
  --color-taxi-yellow: #facc15;
  --color-rangers-blue: #3b82f6;
  --color-knicks-orange: #f97316;
  --color-dollar-green: #10b981;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg-base);
  color: #f3f4f6;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Allow text selection in inputs and notes */
input, textarea, .selectable-text {
  user-select: text;
  -webkit-user-select: text;
}

/* Header & Bottom Bar Safe Areas */
.header-safe {
  padding-top: calc(var(--safe-top) + 8px);
}

.bottom-bar-safe {
  padding-bottom: calc(var(--safe-bottom) + 8px);
}

/* Blur & Glassmorphism */
.glass-header {
  background: rgba(9, 13, 22, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(250, 204, 21, 0.15);
}

.glass-nav {
  background: rgba(11, 17, 32, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: linear-gradient(145deg, #131b2e 0%, #0d1424 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
}

.glass-card-accent {
  background: linear-gradient(145deg, #18223a 0%, #0e1627 100%);
  border: 1px solid rgba(250, 204, 21, 0.25);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.6);
}

/* Custom Scrollbars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Leaflet Styling & Zero-Key OLED Dark Filter */
#map-container.dark-tiles .leaflet-tile {
  filter: brightness(0.65) invert(1) contrast(2.6) hue-rotate(200deg) saturate(0.25) brightness(0.75);
}

#map-container.light-tiles .leaflet-tile {
  filter: none;
}

#map-container.sat-tiles .leaflet-tile {
  filter: contrast(1.1) brightness(0.9);
}

.leaflet-popup-content-wrapper {
  background: #111827 !important;
  color: #f3f4f6 !important;
  border-radius: 12px !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 8px !important;
  line-height: 1.4 !important;
}

.leaflet-popup-tip {
  background: #111827 !important;
}

.leaflet-container {
  font-family: inherit !important;
  background-color: #090d16 !important;
}

/* Keyframes & Animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.pulse-glow {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* 🔋 MODE 10% BATTERY SAVER (OLED Pure Black & Monospaced High-Contrast) */
body.battery-saver-active {
  --color-bg-base: #000000 !important;
  --color-bg-surface: #000000 !important;
  --color-bg-card: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.battery-saver-active * {
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.battery-saver-active .glass-header,
body.battery-saver-active .glass-nav,
body.battery-saver-active .glass-card,
body.battery-saver-active .glass-card-accent {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 4px !important;
}

body.battery-saver-active .bg-amber-400,
body.battery-saver-active .bg-blue-600,
body.battery-saver-active .bg-emerald-600,
body.battery-saver-active .bg-rose-600,
body.battery-saver-active .bg-teal-600 {
  background: #ffffff !important;
  color: #000000 !important;
}

body.battery-saver-active .text-amber-400,
body.battery-saver-active .text-blue-400,
body.battery-saver-active .text-emerald-400,
body.battery-saver-active .text-teal-400,
body.battery-saver-active .text-rose-400 {
  color: #ffffff !important;
  font-weight: 900 !important;
}

body.battery-saver-active #map-container {
  filter: grayscale(100%) contrast(150%) brightness(80%);
}

/* Tap state active feedback for mobile */
.btn-tap {
  transition: transform 0.1s ease, filter 0.1s ease;
}
.btn-tap:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}

/* Badge Glows */
.badge-taxi {
  background: rgba(250, 204, 21, 0.15);
  border: 1px solid rgba(250, 204, 21, 0.4);
  color: #facc15;
}

.badge-blue {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.badge-green {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.badge-orange {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #fb923c;
}