Fix mobile bottom nav dark mode, always-on widgets, hero stats, atlas scrollbar

- BottomNav respects dark mode via settingsStore (matching Navbar pattern)
- Currency/Timezone widgets always visible on mobile regardless of desktop setting
- Hero trip stats simplified to 3 columns (Days, Places, Buddies) — removed Starts date
- Atlas page uses h-screen overflow-hidden to prevent double scrollbar

client/src/components/Layout/BottomNav.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { NavLink, useNavigate } from 'react-router-dom'
 import { useAddonStore } from '../../store/addonStore'
 import { useAuthStore } from '../../store/authStore'
+import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
 import { Plane, CalendarDays, Globe, Compass, User, Settings, Shield, LogOut, X } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
@@ -18,6 +19,8 @@ const ADDON_NAV: Record<string, { to: string; label: string; icon: LucideIcon }>
 
 export default function BottomNav() {
   const { t } = useTranslation()
+  const darkMode = useSettingsStore(s => s.settings.dark_mode)
+  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const addons = useAddonStore(s => s.addons)
   const globalAddons = addons.filter(a => a.type === 'global' && a.enabled)
   const [showProfile, setShowProfile] = useState(false)
@@ -35,7 +38,7 @@ export default function BottomNav() {
         style={{
           height: 'calc(84px + env(safe-area-inset-bottom, 0px))',
           paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-          background: 'rgba(255,255,255,0.96)',
+          background: dark ? 'rgba(9,9,11,0.96)' : 'rgba(255,255,255,0.96)',
           backdropFilter: 'blur(20px)',
           WebkitBackdropFilter: 'blur(20px)',
         }}

client/src/pages/AtlasPage.tsx

@@ -759,7 +759,7 @@ export default function AtlasPage(): React.ReactElement {
   }
 
   return (
-    <div className="min-h-screen" style={{ background: 'var(--bg-primary)' }}>
+    <div className="h-screen overflow-hidden" style={{ background: 'var(--bg-primary)' }}>
       <Navbar />
       <div style={{ position: 'fixed', top: 'var(--nav-h)', left: 0, right: 0, bottom: 'env(safe-area-inset-bottom, 0px)' }}>
         {/* Map */}

client/src/pages/DashboardPage.tsx

@@ -240,19 +240,11 @@ function SpotlightCard({ trip, onEdit, onCopy, onDelete, onArchive, onClick, t,
         )}
 
         {/* Stats */}
-        <div className="grid grid-cols-4 gap-2.5 p-3.5 bg-black/25 backdrop-blur-sm border border-white/10 rounded-2xl">
+        <div className="grid grid-cols-3 gap-2.5 p-3.5 bg-black/25 backdrop-blur-sm border border-white/10 rounded-2xl">
-          {trip.start_date && !isLive && (
+          <div className="text-center">
-            <div className="text-center">
+            <p className="text-[22px] font-extrabold tracking-[-0.02em] leading-none">{trip.day_count || totalDays}</p>
-              <p className="text-[18px] font-extrabold tracking-[-0.02em] leading-none">{formatDateShort(trip.start_date, locale)}</p>
+            <p className="text-[9px] uppercase tracking-[0.1em] opacity-70 font-semibold mt-1">{t('dashboard.mobile.days')}</p>
-              <p className="text-[9px] uppercase tracking-[0.1em] opacity-70 font-semibold mt-1">{t('dashboard.mobile.starts')}</p>
+          </div>
-            </div>
-          )}
-          {isLive && (
-            <div className="text-center">
-              <p className="text-[22px] font-extrabold tracking-[-0.02em] leading-none">{totalDays}</p>
-              <p className="text-[9px] uppercase tracking-[0.1em] opacity-70 font-semibold mt-1">{t('dashboard.mobile.duration')}</p>
-            </div>
-          )}
           <div className="text-center">
             <p className="text-[22px] font-extrabold tracking-[-0.02em] leading-none">{trip.place_count || 0}</p>
             <p className="text-[9px] uppercase tracking-[0.1em] opacity-70 font-semibold mt-1">{t('dashboard.mobile.places')}</p>
@@ -261,12 +253,6 @@ function SpotlightCard({ trip, onEdit, onCopy, onDelete, onArchive, onClick, t,
             <p className="text-[22px] font-extrabold tracking-[-0.02em] leading-none">{trip.shared_count || 0}</p>
             <p className="text-[9px] uppercase tracking-[0.1em] opacity-70 font-semibold mt-1">{t('dashboard.mobile.buddies')}</p>
           </div>
-          {!isLive && (
-            <div className="text-center">
-              <p className="text-[22px] font-extrabold tracking-[-0.02em] leading-none">{trip.day_count || totalDays}</p>
-              <p className="text-[9px] uppercase tracking-[0.1em] opacity-70 font-semibold mt-1">{t('dashboard.mobile.days')}</p>
-            </div>
-          )}
         </div>
       </div>
     </div>
@@ -883,30 +869,26 @@ export default function DashboardPage(): React.ReactElement {
                 <span className="text-[10px] font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard.mobile.newTrip')}</span>
               </button>
             )}
-            {showCurrency && (
+            <button
-              <button
+              onClick={() => setShowWidgetSettings('mobile-currency')}
-                onClick={() => setShowWidgetSettings('mobile-currency')}
+              className="flex flex-col items-center gap-2 py-3.5 rounded-2xl border border-zinc-200 dark:border-zinc-700"
-                className="flex flex-col items-center gap-2 py-3.5 rounded-2xl border border-zinc-200 dark:border-zinc-700"
+              style={{ background: 'var(--bg-card)' }}
-                style={{ background: 'var(--bg-card)' }}
+            >
-              >
+              <div className="w-9 h-9 rounded-[11px] flex items-center justify-center" style={{ background: '#DBEAFE', color: '#1E40AF' }}>
-                <div className="w-9 h-9 rounded-[11px] flex items-center justify-center" style={{ background: '#DBEAFE', color: '#1E40AF' }}>
+                <ArrowRightLeft size={16} />
-                  <ArrowRightLeft size={16} />
+              </div>
-                </div>
+              <span className="text-[10px] font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard.mobile.currency')}</span>
-                <span className="text-[10px] font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard.mobile.currency')}</span>
+            </button>
-              </button>
+            <button
-            )}
+              onClick={() => setShowWidgetSettings('mobile-timezone')}
-            {showTimezone && (
+              className="flex flex-col items-center gap-2 py-3.5 rounded-2xl border border-zinc-200 dark:border-zinc-700"
-              <button
+              style={{ background: 'var(--bg-card)' }}
-                onClick={() => setShowWidgetSettings('mobile-timezone')}
+            >
-                className="flex flex-col items-center gap-2 py-3.5 rounded-2xl border border-zinc-200 dark:border-zinc-700"
+              <div className="w-9 h-9 rounded-[11px] flex items-center justify-center" style={{ background: '#DCFCE7', color: '#15803D' }}>
-                style={{ background: 'var(--bg-card)' }}
+                <Clock size={16} />
-              >
+              </div>
-                <div className="w-9 h-9 rounded-[11px] flex items-center justify-center" style={{ background: '#DCFCE7', color: '#15803D' }}>
+              <span className="text-[10px] font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard.mobile.timezone')}</span>
-                  <Clock size={16} />
+            </button>
-                </div>
-                <span className="text-[10px] font-semibold" style={{ color: 'var(--text-primary)' }}>{t('dashboard.mobile.timezone')}</span>
-              </button>
-            )}
           </div>
 
           {/* Desktop header */}
@@ -1161,8 +1143,8 @@ export default function DashboardPage(): React.ReactElement {
               </button>
             </div>
             <div className="flex-1 overflow-auto p-4 space-y-4" style={{ borderTop: '1px solid var(--border-secondary)' }}>
-              {(showWidgetSettings === 'mobile' || showWidgetSettings === 'mobile-currency') && showCurrency && <CurrencyWidget />}
+              {(showWidgetSettings === 'mobile' || showWidgetSettings === 'mobile-currency') && <CurrencyWidget />}
-              {(showWidgetSettings === 'mobile' || showWidgetSettings === 'mobile-timezone') && showTimezone && <TimezoneWidget />}
+              {(showWidgetSettings === 'mobile' || showWidgetSettings === 'mobile-timezone') && <TimezoneWidget />}
             </div>
           </div>
         </div>