/* Dark mode overrides: apply only when html has class "dark".
   Injected into full-HTML pages and linked from root layout so every student page adapts. */

html.dark body {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

html.dark .bg-white {
  background-color: #1f2937 !important;
}

html.dark [class*="bg-white/"] {
  background-color: rgba(31, 41, 55, 0.95) !important;
}

html.dark .bg-gray-50 {
  background-color: #111827 !important;
}

html.dark .bg-gray-100 {
  background-color: #1f2937 !important;
}

html.dark .bg-gray-200 {
  background-color: #374151 !important;
}

html.dark .bg-green-50,
html.dark .bg-green-100 {
  background-color: #064e3b !important;
}

html.dark .bg-yellow-50,
html.dark .bg-yellow-100 {
  background-color: #422006 !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-100 {
  background-color: #1e3a8a !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-100 {
  background-color: #3b0764 !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-100 {
  background-color: #422006 !important;
}

html.dark .bg-indigo-50,
html.dark .bg-indigo-100 {
  background-color: #1e1b4b !important;
}

html.dark .bg-red-50,
html.dark .bg-red-100 {
  background-color: #450a0a !important;
}

html.dark .text-gray-900 {
  color: #f3f4f6 !important;
}

html.dark .text-gray-800 {
  color: #e5e7eb !important;
}

html.dark .text-gray-700 {
  color: #d1d5db !important;
}

html.dark .text-gray-600 {
  color: #9ca3af !important;
}

html.dark .text-gray-500 {
  color: #9ca3af !important;
}

html.dark .text-black {
  color: #f3f4f6 !important;
}

html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800 {
  color: #34d399 !important;
}

html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700 {
  color: #f87171 !important;
}

html.dark .text-blue-600,
html.dark .text-blue-700 {
  color: #60a5fa !important;
}

html.dark .text-amber-800,
html.dark .text-amber-900 {
  color: #fcd34d !important;
}

html.dark .text-yellow-700,
html.dark .text-yellow-800 {
  color: #fde047 !important;
}

html.dark .text-indigo-600 {
  color: #818cf8 !important;
}

html.dark .text-purple-700,
html.dark .text-purple-800 {
  color: #c4b5fd !important;
}

html.dark nav,
html.dark header {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

html.dark nav a,
html.dark header a {
  color: #e5e7eb !important;
}

html.dark nav a:hover,
html.dark header a:hover {
  color: #f9fafb !important;
}

html.dark nav .text-red-500,
html.dark nav .text-green-600,
html.dark header .text-red-500,
html.dark header .text-green-600 {
  color: #f87171 !important;
}

html.dark nav .text-green-600.font-bold,
html.dark header .text-green-600.font-bold {
  color: #34d399 !important;
}

html.dark header .text-green-100,
html.dark header .text-green-50,
html.dark header .text-blue-100,
html.dark header .text-purple-100,
html.dark header .text-purple-50 {
  color: #d1fae5 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #9ca3af !important;
}

html.dark .border-gray-200,
html.dark .border-gray-100,
html.dark .border-gray-300 {
  border-color: #374151 !important;
}

html.dark .border-green-500,
html.dark .border-green-600,
html.dark .border-green-700 {
  border-color: #047857 !important;
}

html.dark .border-blue-500,
html.dark .border-blue-600,
html.dark .border-blue-700 {
  border-color: #1d4ed8 !important;
}

html.dark .border-amber-500,
html.dark .border-amber-600 {
  border-color: #b45309 !important;
}

html.dark .border-yellow-500 {
  border-color: #a16207 !important;
}

html.dark .border-red-200,
html.dark .border-red-500,
html.dark .border-red-700 {
  border-color: #b91c1c !important;
}

html.dark .border-indigo-100,
html.dark .border-indigo-500 {
  border-color: #3730a3 !important;
}

html.dark .border-purple-200,
html.dark .border-purple-500 {
  border-color: #6d28d9 !important;
}

html.dark .border-orange-500 {
  border-color: #c2410c !important;
}

html.dark .divide-gray-200 > * {
  border-color: #374151 !important;
}

html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
}

html.dark a.text-gray-700,
html.dark a.text-gray-600 {
  color: #d1d5db !important;
}

html.dark a:hover.text-gray-700,
html.dark a:hover.text-gray-600 {
  color: #f3f4f6 !important;
}

/* Cards and panels */
html.dark [class*="rounded-xl"],
html.dark [class*="rounded-lg"] {
  border-color: #374151 !important;
}

/* Darker gradients for heroes and cards (Tailwind from-/to- stop overrides) */
html.dark .from-green-600 {
  --tw-gradient-from: #047857 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark .to-emerald-600 {
  --tw-gradient-to: #065f46 !important;
}
html.dark .from-red-500 {
  --tw-gradient-from: #b91c1c !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark .to-pink-600 {
  --tw-gradient-to: #831843 !important;
}
html.dark .from-blue-600 {
  --tw-gradient-from: #1d4ed8 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark .to-cyan-600 {
  --tw-gradient-to: #0e7490 !important;
}
html.dark .from-purple-600 {
  --tw-gradient-from: #5b21b6 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark .to-indigo-600 {
  --tw-gradient-to: #3730a3 !important;
}

/* Semi-transparent white overlays (e.g. "From R15" card on header) */
html.dark [class*="bg-opacity-20"],
html.dark [class*="bg-white/20"] {
  background-color: rgba(31, 41, 55, 0.25) !important;
}

/* Ensure toggle switch track stays visible in dark mode; no green ring/sliver */
html.dark .theme-switch-track {
  background-color: #4b5563 !important;
  overflow: hidden;
}
html.dark .theme-switch-track:focus {
  --tw-ring-color: #4b5563 !important;
  box-shadow: 0 0 0 2px #4b5563 !important;
}

/* Disabled form controls */
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
  background-color: #1f2937 !important;
  color: #6b7280 !important;
  opacity: 0.8;
}

/* Custom dashboard colors (mirage, wild-sand) when present */
html.dark .bg-wild-sand {
  background-color: #1f2937 !important;
}
html.dark .text-mirage {
  color: #e5e7eb !important;
}

/* Login & landing: gradient wrapper (from-wild-sand via-white to-wild-sand) → solid dark */
html.dark [class*="from-wild-sand"][class*="to-wild-sand"] {
  background-image: none !important;
  background-color: #111827 !important;
}

/* Signup form pages: light gradient backgrounds → solid dark */
html.dark [class*="from-blue-50"][class*="to-indigo-50"],
html.dark body.bg-gradient-to-br.from-blue-50 {
  background-image: none !important;
  background-color: #111827 !important;
}
html.dark [class*="from-purple-50"][class*="to-indigo-50"] {
  background-image: none !important;
  background-color: #111827 !important;
}

/* Signup (role choice) page: header gradient (from-blaze-orange to-deep-sea-green) → dark header */
html.dark .bg-gradient-to-r.from-blaze-orange.to-deep-sea-green {
  background-image: none !important;
  background-color: #1f2937 !important;
}
html.dark .bg-gradient-to-r.from-blaze-orange.to-deep-sea-green .text-white\/90,
html.dark .bg-gradient-to-r.from-blaze-orange.to-deep-sea-green .text-white\/80 {
  color: rgba(229, 231, 235, 0.9) !important;
}

/* Custom brand text (deep-sea-green) readable in dark mode */
html.dark .text-deep-sea-green {
  color: #5eead4 !important;
}

/* Custom brand border (deep-sea-green) visible in dark mode */
html.dark .border-deep-sea-green {
  border-color: #0d9488 !important;
}
html.dark .hover\:bg-deep-sea-green:hover {
  background-color: #0f766e !important;
}
html.dark .hover\:text-white:hover {
  color: #fff !important;
}

/* Blaze-orange (brand accent) – keep links/buttons visible in dark mode */
html.dark .text-blaze-orange {
  color: #f87171 !important;
}
html.dark .hover\:text-blaze-orange:hover {
  color: #fca5a5 !important;
}

/* ---------------------------------------------------------------------------
   Ride request (and similar) – components styled by inline <style>, not Tailwind
   --------------------------------------------------------------------------- */
html.dark .bottom-sheet {
  background-color: #1f2937 !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
html.dark .bottom-sheet .sheet-strip {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
html.dark .bottom-sheet .sheet-form-body {
  background-color: transparent;
}
html.dark .bottom-sheet-handle {
  background-color: #6b7280 !important;
}
html.dark .bottom-sheet-handle:active {
  background-color: #9ca3af !important;
}
html.dark .sheet-step-dot:not(.active) {
  background-color: #4b5563 !important;
}
/* Location cards (pickup/dropoff) – inline style sets background: white */
html.dark .location-card {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}
html.dark .location-card.pickup {
  border-left-color: #10b981 !important;
}
html.dark .location-card.dropoff {
  border-left-color: #ef4444 !important;
}
html.dark .location-card:hover {
  border-color: #10b981 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
/* Ride type cards (Standard / Shared) – inline style sets background: white */
html.dark .ride-type-card {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}
html.dark .ride-type-card.selected {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}
html.dark .ride-type-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
/* Trip option rows (Campus run, Casual, Safe After Dark, Moving) – no inline bg; inherit sheet. Border/text handled by global overrides. Selected state often toggled by JS with green bg */
html.dark .trip-option-row {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}
html.dark .trip-option-row:hover {
  border-color: #10b981 !important;
}
html.dark .trip-option-row.selected {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
}
/* Who's travelling / passenger options */
html.dark .travel-companions-option,
html.dark .passenger-option {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}
html.dark .travel-companions-option:hover,
html.dark .passenger-option:hover {
  border-color: #10b981 !important;
}
html.dark .travel-companions-option.selected,
html.dark .passenger-option:has(input:checked) {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
}
/* Map FABs and route loading strip on request page */
html.dark .map-option-btn.fab,
html.dark .w-12.rounded-xl.bg-white {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}
html.dark #routeLoading [class*="bg-white/"] {
  background-color: rgba(31, 41, 55, 0.95) !important;
  border-color: #4b5563 !important;
}

/* Ride + Assist – premium black glow in dark mode */
html.dark .ride-assist-premium {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 24px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.3) !important;
}
html.dark .ride-assist-premium.selected,
html.dark .ride-assist-premium.errands-expanded {
  border-color: #6b7280 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 28px rgba(0,0,0,0.6), 0 4px 24px rgba(0,0,0,0.4) !important;
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important;
}
html.dark #errandsSubOptions,
html.dark .errands-sub-option {
  background-color: #111827 !important;
  border-color: #374151 !important;
}
html.dark .errands-sub-option:hover {
  background-color: #1f2937 !important;
}
html.dark .errands-sub-option.bg-green-50 {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
}