/* Passenger navigation-style tracking page extra styles */

html, body {
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

/* Bottom sheet: compact by default, expands upward when toggled */
#bottom-nav-bar {
  transition: max-height 0.28s ease;
}

#bottom-bar-expanded.expanded {
  display: block;
}

#recenter-btn {
  right: 12px;
  /* positioned above the bottom sheet's compact height; JS also nudges this on expand */
  bottom: 128px;
  transition: bottom 0.28s ease;
}

#compass-btn {
  right: 12px;
  /* sits directly above the recenter FAB */
  bottom: 184px;
  transition: bottom 0.28s ease;
}

/* Stop list timeline (used inside the expanded bottom sheet) */
.stop-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 20px;
}
.stop-item:last-child {
  padding-bottom: 4px;
}
.stop-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: -2px;
  width: 2px;
  background: #e2e8f0;
}
.stop-item:last-child::before {
  display: none;
}
.stop-dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  z-index: 1;
}
.stop-dot.passed { background: #00b86b; }
.stop-dot.next {
  background: #ffb020;
  box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.25);
}
.stop-dot.upcoming { background: #cbd5e1; }
/* Bus is currently within the 100m geofence of this stop (arrived, not yet departed) */
.stop-dot.arrived {
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
  animation: geofence-pulse 1.6s ease-in-out infinite;
}
@keyframes geofence-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28); }
  50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.12); }
}

.stop-item.passed .stop-name { color: #94a3b8; text-decoration: line-through; text-decoration-color: #cbd5e1; }
.stop-item.next .stop-name { color: #0a2a6b; font-weight: 700; }
.stop-item.arrived .stop-name { color: #1d4ed8; font-weight: 700; }

#map .gm-style-iw-c {
  border-radius: 10px !important;
}

/* Delay pill color variants */
.delay-late { background: #fee2e2; color: #b91c1c; }
.delay-early { background: #dcfce7; color: #15803d; }
.delay-ontime { background: #e0f2fe; color: #0369a1; }

/* Bus marker pulse ring (drawn as a plain DOM overlay is complex with Advanced Markers,
   so instead we lean on marker icon design; this class is reserved for future use) */

/* ==========================================================================
   Dark mode — applied automatically after 6 PM / before 6 AM local time
   (or forced via the theme toggle). Only overrides chrome/UI colors; the
   map's own dark styling comes from Google's colorScheme:DARK + a dark-mode
   Map ID (see passenger.js / README).
   ========================================================================== */
body.dark-mode {
  background-color: #0b1220;
  color: #e2e8f0;
}

body.dark-mode #app-header {
  background: linear-gradient(to right, #060d1f, #0a1530);
}

body.dark-mode #route-select-bar {
  background-color: #0f172a;
  border-color: #1e293b;
}
body.dark-mode #route-select {
  background-color: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

body.dark-mode #empty-state h2 { color: #cbd5e1; }
body.dark-mode #empty-state p { color: #64748b; }
body.dark-mode #empty-state .bg-kpn-navy\/5 { background-color: rgba(148, 163, 184, 0.08); }

body.dark-mode #status-pill,
body.dark-mode #location-label,
body.dark-mode #speed-pill,
body.dark-mode #route-pill {
  background-color: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
}
body.dark-mode #location-label-text { color: #cbd5e1; }

body.dark-mode #compass-btn,
body.dark-mode #recenter-btn,
body.dark-mode #theme-toggle-btn {
  background-color: #1e293b;
  border-color: #334155;
  color: #93c5fd;
}

body.dark-mode #bottom-nav-bar {
  background-color: #0f172a;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
}
body.dark-mode #bottom-bar-handle span { background-color: #334155; }
body.dark-mode #next-stop-name { color: #f1f5f9; }
body.dark-mode #next-stop-distance,
body.dark-mode #next-stop-clock,
body.dark-mode #last-updated { color: #94a3b8; }
body.dark-mode #next-stop-eta { color: #7dd3fc; }
body.dark-mode .progress-track,
body.dark-mode #bottom-bar-compact .bg-slate-100 { background-color: #1e293b; }
body.dark-mode #origin-label,
body.dark-mode #destination-label { color: #64748b; }
body.dark-mode #bottom-bar-expanded { border-color: #1e293b; }
body.dark-mode #route-name-title { color: #f1f5f9; }

body.dark-mode .stop-item::before { background: #1e293b; }
body.dark-mode .stop-name { color: #cbd5e1; }
body.dark-mode .stop-item.passed .stop-name { color: #475569; text-decoration-color: #334155; }
body.dark-mode .stop-item.next .stop-name { color: #7dd3fc; }
body.dark-mode .stop-item.arrived .stop-name { color: #93c5fd; }
body.dark-mode .stop-item .text-slate-400 { color: #64748b; }
body.dark-mode .text-blue-500,
body.dark-mode .text-blue-600 { color: #93c5fd !important; }

body.dark-mode .delay-late { background: #450a0a; color: #fca5a5; }
body.dark-mode .delay-early { background: #052e16; color: #86efac; }
body.dark-mode .delay-ontime { background: #082f49; color: #7dd3fc; }

body.dark-mode #map .gm-style-iw-c {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}
body.dark-mode #map .gm-style-iw-d { color: #e2e8f0 !important; }

/* Theme toggle FAB (sun/moon) sits above the compass button */
#theme-toggle-btn {
  right: 12px;
  bottom: 240px;
  transition: bottom 0.28s ease;
}