Fix a batch of reported bugs (#1145)

* fix(maps): fall back to OSM/Wikipedia for place photos and normalize non-standard language codes (#1137)

* fix(auth): refuse password reset for OIDC/SSO-linked accounts (#1129)

* fix(docker): ship server/assets (airports + atlas geo) in the runtime image (#1133, #1119)

* fix(unraid): point the template at a PNG icon Unraid can render (#1073)

* fix(offline): serve cached file blobs when offline or on network failure (#1046, #1069)

* fix(map): centre the selected pin in the visible map area above the bottom panel (#1125)

* fix(pdf): render persisted place-photo proxy URLs as images (#1130)

* fix(planner): show the selected place category in the edit form (#1134)

* fix(dashboard): collapse list-view trip cards to a compact row on mobile (#1132)

.github/workflows/test.yml

@@ -13,6 +13,20 @@ on:
       - '.github/workflows/test.yml'
 
 jobs:
+  i18n-parity:
+    name: i18n Key Parity
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Check i18n key parity
+        run: node shared/scripts/i18n-parity.mjs --strict
+
   shared-contracts:
     name: Shared Contracts (Zod)
     runs-on: ubuntu-latest

Dockerfile

@@ -31,7 +31,7 @@ COPY server/ ./server/
 RUN npm run build --workspace=server
 
 # ── Stage 4: production runtime ──────────────────────────────────────────────
-FROM node:24-alpine
+FROM node:24-trixie-slim
 WORKDIR /app
 
 # Workspace manifests only — source never enters this stage.
@@ -39,13 +39,40 @@ COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY server/package.json ./server/
 
-# better-sqlite3 native addon requires build tools; purged after install.
-RUN apk add --no-cache tzdata dumb-init su-exec python3 make g++ && \
+# better-sqlite3 native addon requires build tools (purged after compile).
+# kitinerary-extractor for booking-confirmation import:
+#   amd64 — static binary from KDE CDN (glibc 2.17+; wget stays for healthcheck)
+#   arm64 — apt package (KDE publishes no arm64 static binary)
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends tzdata dumb-init gosu wget ca-certificates python3 build-essential && \
     npm ci --workspace=server --omit=dev && \
-    apk del python3 make g++ && \
-    rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
+    ARCH=$(dpkg --print-architecture) && \
+    if [ "$ARCH" = "amd64" ]; then \
+        wget -qO /tmp/ki.tgz https://cdn.kde.org/ci-builds/pim/kitinerary/release-26.04/linux/kitinerary-extractor-x86_64-26.04.2.tgz && \
+        echo "ba5cfb4a2353157c8f54cbeaea0097c5bf2c3a810e0342f63d6e524826176628 /tmp/ki.tgz" | sha256sum -c && \
+        tar -xz -C /usr/local -f /tmp/ki.tgz bin/kitinerary-extractor share/locale && \
+        rm /tmp/ki.tgz; \
+    else \
+        apt-get install -y --no-install-recommends libkitinerary-bin && \
+        ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
+    fi && \
+    apt-get purge -y python3 build-essential && \
+    apt-get autoremove -y && \
+    rm -rf /var/lib/apt/lists/* /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
+
+ENV XDG_CACHE_HOME=/tmp/kf6-cache
+# Prevent Qt from probing for a display in headless containers.
+ENV QT_QPA_PLATFORM=offscreen
+# Fixed path for both amd64 (static binary) and arm64 (symlink to apt binary).
+# Override with KITINERARY_EXTRACTOR_PATH if you install it elsewhere.
+ENV KITINERARY_EXTRACTOR_PATH=/usr/local/bin/kitinerary-extractor
 
 COPY --from=server-builder /app/server/dist ./server/dist
+# Runtime data assets read from server/assets at runtime: airports.json (flight
+# transport search) and atlas/*.geojson.gz (Atlas country/region map). The build
+# only emits dist, so these must be copied explicitly or the features silently
+# degrade to empty in the image.
+COPY --from=server-builder /app/server/assets ./server/assets
 # tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
 COPY server/tsconfig.json ./server/
 COPY --from=shared-builder /app/shared/dist ./shared/dist
@@ -69,4 +96,4 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
 
 ENTRYPOINT ["dumb-init", "--"]
 # cd into server/ so tsconfig-paths/register finds tsconfig.json and ../node_modules resolves correctly.
-CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec su-exec node node --require tsconfig-paths/register dist/index.js"]
+CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec gosu node node --require tsconfig-paths/register dist/index.js"]

NOTICE.md

@@ -0,0 +1,33 @@
+# Third-party data & attributions
+
+TREK bundles and uses third-party data that requires attribution.
+
+## geoBoundaries — country & sub-national boundaries
+
+The Atlas map's administrative boundaries (admin-0 countries and admin-1
+provinces/counties), shipped at `server/assets/atlas/admin0.geojson.gz` and
+`server/assets/atlas/admin1.geojson.gz` and generated by
+`server/scripts/build-atlas-geo.mjs`, are derived from **geoBoundaries**.
+
+> Runfola, D. et al. (2020) geoBoundaries: A global database of political
+> administrative boundaries. PLoS ONE 15(4): e0231866.
+> https://doi.org/10.1371/journal.pone.0231866
+
+geoBoundaries is licensed under **CC BY 4.0**
+(https://creativecommons.org/licenses/by/4.0/). Source: https://www.geoboundaries.org/
+
+The bundled files are simplified (coordinate-quantized) and re-tagged with the
+property names TREK consumes. Country borders (`admin0`) derive from the geoBoundaries
+CGAZ composite; sub-national regions (`admin1`) derive from the per-country open
+(gbOpen) release.
+
+## OpenStreetMap — geocoding
+
+Atlas reverse-geocodes places via the **Nominatim** service. Geocoding data is
+© OpenStreetMap contributors, licensed under the Open Database License (ODbL).
+https://www.openstreetmap.org/copyright
+
+## OurAirports — airport reference data
+
+`server/assets/airports.json` is built from **OurAirports**
+(https://ourairports.com/data/), released into the public domain.

README.md

@@ -89,7 +89,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 #### 🧳 Travel management
 
-- **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files
+- **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files; import from booking confirmation emails and PDFs ([KDE Itinerary](https://invent.kde.org/pim/kitinerary))
 - **Budget tracking** — category-based expenses with pie chart, per-person / per-day splits, multi-currency
 - **Packing lists** — categories, templates, user assignment, progress tracking
 - **Bag tracking** — optional weight tracking with iOS-style distribution
@@ -437,6 +437,13 @@ Caddy handles TLS and WebSockets automatically.
 
 <br />
 
+## Data sources
+
+The Atlas map's country and sub-national (province/county) boundaries come from
+[**geoBoundaries**](https://www.geoboundaries.org/) (Runfola et al., 2020), licensed
+[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). See [NOTICE.md](NOTICE.md)
+for full third-party attributions.
+
 ## License
 
 TREK is [AGPL v3](LICENSE). Self-host freely for personal or internal company use. If you modify and offer TREK as a network service to third parties, your modifications must be open-sourced under the same licence.

client/index.html

@@ -19,7 +19,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 
     <!-- Leaflet -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"

client/package.json

@@ -23,7 +23,10 @@
     "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
   },
   "dependencies": {
+    "@fontsource/geist-sans": "^5.2.5",
+    "@fontsource/poppins": "^5.2.7",
     "@react-pdf/renderer": "^4.5.1",
+    "@simplewebauthn/browser": "^13.1.2",
     "@trek/shared": "*",
     "axios": "^1.6.7",
     "dexie": "^4.4.2",

client/src/api/client.ts

@@ -38,6 +38,9 @@ import {
   type CreateTagRequest, type UpdateTagRequest,
   type CreateCategoryRequest, type UpdateCategoryRequest,
   type PlaceImportListRequest,
+  type BookingImportPreviewItem,
+  type BookingImportPreviewResponse,
+  type BookingImportConfirmResponse,
 } from '@trek/shared'
 import { getSocketId } from './websocket'
 import { isReachable, probeNow } from '../sync/connectivity'
@@ -258,6 +261,24 @@ export const authApi = {
     create: (name: string) => apiClient.post('/auth/mcp-tokens', { name } satisfies McpTokenCreateRequest).then(r => r.data),
     delete: (id: number) => apiClient.delete(`/auth/mcp-tokens/${id}`).then(r => r.data),
   },
+  passkey: {
+    registerOptions: (password: string) => apiClient.post('/auth/passkey/register/options', { password }).then(r => r.data),
+    registerVerify: (attestationResponse: unknown, name?: string) => apiClient.post('/auth/passkey/register/verify', { attestationResponse, name }).then(r => r.data),
+    loginOptions: () => apiClient.post('/auth/passkey/login/options', {}).then(r => r.data),
+    loginVerify: (assertionResponse: unknown) => apiClient.post('/auth/passkey/login/verify', { assertionResponse }).then(r => r.data as { token: string; user: Record<string, unknown> }),
+    list: () => apiClient.get('/auth/passkey/credentials').then(r => r.data as { credentials: PasskeyCredential[] }),
+    rename: (id: number, name: string) => apiClient.patch(`/auth/passkey/credentials/${id}`, { name }).then(r => r.data),
+    delete: (id: number, password: string) => apiClient.delete(`/auth/passkey/credentials/${id}`, { data: { password } }).then(r => r.data),
+  },
+}
+
+export interface PasskeyCredential {
+  id: number
+  name: string | null
+  device_type: string | null
+  backed_up: boolean
+  created_at: string
+  last_used_at: string | null
 }
 
 export const oauthApi = {
@@ -373,6 +394,7 @@ export const packingApi = {
   reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds } satisfies PackingReorderRequest).then(r => r.data),
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
   setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
+  listTemplates: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/templates`).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
   saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
   setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
@@ -411,6 +433,7 @@ export const adminApi = {
   createUser: (data: Record<string, unknown>) => apiClient.post('/admin/users', data).then(r => r.data),
   updateUser: (id: number, data: Record<string, unknown>) => apiClient.put(`/admin/users/${id}`, data).then(r => r.data),
   deleteUser: (id: number) => apiClient.delete(`/admin/users/${id}`).then(r => r.data),
+  resetUserPasskeys: (id: number) => apiClient.delete(`/admin/users/${id}/passkeys`).then(r => r.data),
   stats: () => apiClient.get('/admin/stats').then(r => r.data),
   saveDemoBaseline: () => apiClient.post('/admin/save-demo-baseline').then(r => r.data),
   getOidc: () => apiClient.get('/admin/oidc').then(r => r.data),
@@ -548,8 +571,11 @@ export const budgetApi = {
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/budget/${id}`).then(r => r.data),
   setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds } satisfies BudgetUpdateMembersRequest).then(r => r.data),
   togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid } satisfies BudgetToggleMemberPaidRequest).then(r => r.data),
+  setPayers: (tripId: number | string, id: number, payers: { user_id: number; amount: number }[]) => apiClient.put(`/trips/${tripId}/budget/${id}/payers`, { payers }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
-  settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
+  settlement: (tripId: number | string, base?: string) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base } } : undefined).then(r => r.data),
+  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
+  deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).then(r => r.data),
   reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
   reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
 }
@@ -577,6 +603,17 @@ export const reservationsApi = {
   update: (tripId: number | string, id: number, data: ReservationUpdateRequest) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
   updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[], dayId?: number) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions, day_id: dayId }).then(r => r.data),
+  importBookingPreview: (tripId: number | string, files: File[]): Promise<BookingImportPreviewResponse> => {
+    const fd = new FormData()
+    for (const f of files) fd.append('files', f)
+    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+  },
+  importBookingConfirm: (tripId: number | string, items: BookingImportPreviewItem[]): Promise<BookingImportConfirmResponse> =>
+    apiClient.post(`/trips/${tripId}/reservations/import/booking/confirm`, { items }).then(r => r.data),
+}
+
+export const healthApi = {
+  features: (): Promise<{ bookingImport: boolean }> => apiClient.get('/health/features').then(r => r.data),
 }
 
 export const weatherApi = {

client/src/components/Budget/CostsPanel.tsx

@@ -0,0 +1,814 @@
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, Check, RotateCcw, History, Pencil, Trash2 } from 'lucide-react'
+import { useTripStore } from '../../store/tripStore'
+import { useAuthStore } from '../../store/authStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useCanDo } from '../../store/permissionsStore'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+import { budgetApi } from '../../api/client'
+import { useExchangeRates } from '../../hooks/useExchangeRates'
+import { useIsMobile } from '../../hooks/useIsMobile'
+import { formatMoney, currencyDecimals, currencyLocale } from '../../utils/formatters'
+import Modal from '../shared/Modal'
+import CustomSelect from '../shared/CustomSelect'
+import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import { SYMBOLS, CURRENCIES, SPLIT_COLORS } from './BudgetPanel.constants'
+import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
+import type { BudgetItem } from '../../types'
+import type { TripMember } from './BudgetPanelMemberChips'
+
+interface CostsPanelProps {
+  tripId: number
+  tripMembers?: TripMember[]
+}
+
+interface Settlement {
+  id: number
+  from_user_id: number
+  to_user_id: number
+  amount: number
+  created_at?: string
+  from_username?: string
+  to_username?: string
+}
+interface SettlementData {
+  balances: { user_id: number; username: string; avatar_url: string | null; balance: number }[]
+  flows: { from: { user_id: number; username: string }; to: { user_id: number; username: string }; amount: number }[]
+  settlements: Settlement[]
+}
+
+const round2 = (n: number) => Math.round(n * 100) / 100
+const FIELD_H = 40 // shared height for the amount / currency / day row in the modal
+
+export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps) {
+  const { trip, budgetItems, deleteBudgetItem, loadBudgetItems } = useTripStore()
+  const me = useAuthStore(s => s.user?.id ?? -1)
+  const can = useCanDo()
+  const canEdit = can('budget_edit', trip)
+  const toast = useToast()
+  const { t, locale } = useTranslation()
+  const isMobile = useIsMobile()
+
+  // Display/base currency = the user's preferred currency (Settings), falling back
+  // to the trip's own currency. Everything in Costs is converted to and shown in it.
+  const displayCurrency = useSettingsStore(s => s.settings.default_currency)
+  const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
+  // Pre-rework rows stored currency = NULL, meaning "the trip's own currency".
+  const tripCurrency = (trip?.currency || base).toUpperCase()
+  const { convert } = useExchangeRates(base)
+  const curOf = useCallback((e: BudgetItem) => (e.currency || tripCurrency), [tripCurrency])
+  const [settlement, setSettlement] = useState<SettlementData | null>(null)
+  const [filter, setFilter] = useState<'all' | 'mine' | 'owed'>('all')
+  const [search, setSearch] = useState('')
+  const [histOpen, setHistOpen] = useState(false)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editing, setEditing] = useState<BudgetItem | null>(null)
+
+  const people = tripMembers
+  const personById = useCallback((id: number) => people.find(p => p.id === id), [people])
+  const personName = useCallback((id: number) => id === me ? t('costs.you') : (personById(id)?.username || '?'), [me, personById, t])
+  const colorFor = useCallback((id: number) => {
+    const idx = people.findIndex(p => p.id === id)
+    return SPLIT_COLORS[(idx >= 0 ? idx : 0) % SPLIT_COLORS.length].gradient
+  }, [people])
+  const initial = useCallback((id: number) => id === me ? t('costs.youShort') : (personById(id)?.username || '?').charAt(0).toUpperCase(), [me, personById, t])
+
+  const fmt = useCallback((v: number, c = base) => formatMoney(v, c, locale), [base, locale])
+  const fmt0 = useCallback((v: number, c = base) => formatMoney(v, c, locale, { decimals: 0 }), [base, locale])
+
+  const loadSettlement = useCallback(() => {
+    budgetApi.settlement(tripId, base).then(setSettlement).catch(() => {})
+  }, [tripId, base])
+
+  useEffect(() => { loadBudgetItems(tripId); loadSettlement() }, [tripId])
+  useEffect(() => { loadSettlement() }, [budgetItems.length, base])
+
+  // The bottom-nav "+" on the Costs tab opens the add-expense modal via ?create=expense.
+  const [searchParams, setSearchParams] = useSearchParams()
+  useEffect(() => {
+    if (searchParams.get('create') === 'expense') {
+      setEditing(null); setModalOpen(true)
+      setSearchParams(p => { p.delete('create'); return p }, { replace: true })
+    }
+  }, [searchParams])
+
+  // ── derived expense maths (everything converted to the base currency) ────
+  const baseTotal = (e: BudgetItem) => convert(e.total_price || 0, curOf(e))
+  const myPaidOf = (e: BudgetItem) => (e.payers || []).filter(p => p.user_id === me).reduce((a, p) => a + convert(p.amount, curOf(e)), 0)
+  const myShareOf = (e: BudgetItem) => {
+    const n = (e.members || []).length
+    if (!n || !(e.members || []).some(m => m.user_id === me)) return 0
+    return baseTotal(e) / n
+  }
+
+  const totals = useMemo(() => {
+    const totalSpend = budgetItems.reduce((a, e) => a + baseTotal(e), 0)
+    const myPaid = budgetItems.reduce((a, e) => a + myPaidOf(e), 0)
+    const myShare = budgetItems.reduce((a, e) => a + myShareOf(e), 0)
+    const owe = (settlement?.flows || []).filter(f => f.from.user_id === me).reduce((a, f) => a + f.amount, 0)
+    const owed = (settlement?.flows || []).filter(f => f.to.user_id === me).reduce((a, f) => a + f.amount, 0)
+    return { totalSpend, myPaid, myShare, owe, owed }
+  }, [budgetItems, settlement, me])
+
+  // ── filtering + day grouping ────────────────────────────────────────────
+  const filtered = useMemo(() => {
+    let list = budgetItems.slice()
+    if (filter === 'mine') list = list.filter(e => myPaidOf(e) > 0)
+    if (filter === 'owed') list = list.filter(e => round2(myPaidOf(e) - myShareOf(e)) > 0)
+    const q = search.trim().toLowerCase()
+    if (q) list = list.filter(e => e.name.toLowerCase().includes(q))
+    return list
+  }, [budgetItems, filter, search, me])
+
+  const dayGroups = useMemo(() => {
+    const groups: { day: string; items: BudgetItem[] }[] = []
+    const labelOf = (e: BudgetItem) => {
+      if (!e.expense_date) return t('costs.noDate')
+      try { return new Date(e.expense_date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' }) } catch { return e.expense_date }
+    }
+    const sorted = filtered.slice().sort((a, b) => (b.expense_date || '').localeCompare(a.expense_date || ''))
+    for (const e of sorted) {
+      const day = labelOf(e)
+      let g = groups.find(x => x.day === day)
+      if (!g) { g = { day, items: [] }; groups.push(g) }
+      g.items.push(e)
+    }
+    return groups
+  }, [filtered, locale, t])
+
+  // ── settle actions ──────────────────────────────────────────────────────
+  const settleFlow = async (fromId: number, toId: number, amount: number) => {
+    try {
+      await budgetApi.createSettlement(tripId, { from_user_id: fromId, to_user_id: toId, amount })
+      loadSettlement()
+    } catch { toast.error(t('common.unknownError')) }
+  }
+  const undoSettlement = async (id: number) => {
+    try { await budgetApi.deleteSettlement(tripId, id); loadSettlement() } catch { toast.error(t('common.unknownError')) }
+  }
+  const settleAll = async () => {
+    const flows = settlement?.flows || []
+    if (!flows.length) return
+    try {
+      for (const f of flows) await budgetApi.createSettlement(tripId, { from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount })
+      loadSettlement()
+    } catch { toast.error(t('common.unknownError')) }
+  }
+
+  const dateMeta = useMemo(() => {
+    if (!trip?.start_date || !trip?.end_date) return null
+    try {
+      const s = new Date(trip.start_date + 'T00:00:00Z'), e = new Date(trip.end_date + 'T00:00:00Z')
+      const days = Math.round((e.getTime() - s.getTime()) / 86400000) + 1
+      const opt = { day: 'numeric', month: 'short', timeZone: 'UTC' } as const
+      return { range: `${s.toLocaleDateString(locale, opt)} – ${e.toLocaleDateString(locale, opt)}`, days }
+    } catch { return null }
+  }, [trip?.start_date, trip?.end_date, locale])
+
+  const handleDelete = async (id: number) => {
+    try { await deleteBudgetItem(tripId, id); loadSettlement() } catch { toast.error(t('common.unknownError')) }
+  }
+
+  // ── small presentational helpers ────────────────────────────────────────
+  const Avatar = ({ id, size = 24 }: { id: number; size?: number }) => {
+    const url = personById(id)?.avatar_url
+    if (url) return <img src={url} alt="" style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0, display: 'block' }} />
+    return <span style={{ width: size, height: size, borderRadius: '50%', background: colorFor(id), color: '#fff', display: 'grid', placeItems: 'center', fontSize: size * 0.4, fontWeight: 700, flexShrink: 0 }}>{initial(id)}</span>
+  }
+
+  const cardCls = 'bg-surface-card border border-edge'
+  const labelCls = 'text-[11px] font-semibold uppercase tracking-[0.12em] text-content-faint'
+
+  // Big money number with the design's muted symbol/decimals, locale-correct via Intl.
+  const bigMoney = (amount: number, smallSize: number, mutedColor: string) => {
+    let parts: Intl.NumberFormatPart[] | null = null
+    try {
+      const d = currencyDecimals(base)
+      parts = new Intl.NumberFormat(currencyLocale(base), { style: 'currency', currency: base, minimumFractionDigits: d, maximumFractionDigits: d }).formatToParts(amount || 0)
+    } catch { return <>{formatMoney(amount, base, locale)}</> }
+    const isBig = (p: Intl.NumberFormatPart) => p.type === 'integer' || p.type === 'group' || p.type === 'minusSign'
+    return <>{parts.map((p, i) => <span key={i} style={isBig(p) ? undefined : { fontSize: smallSize, fontWeight: 500, color: mutedColor }}>{p.value}</span>)}</>
+  }
+
+  return (
+    <div className="costs-root" style={{ minHeight: '100%', background: 'var(--c-bg)', padding: isMobile ? '6px 14px 28px' : '40px 24px 48px' }}>
+     {isMobile ? <MobileBody /> : (
+     <div style={{ maxWidth: '100%', margin: '0 auto' }}>
+      {/* ── Header bar ── */}
+      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 28, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+          {dateMeta && (
+            <span className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap' }}>
+              {dateMeta.range} · <b className="text-content">{t('costs.daysCount', { count: dateMeta.days })}</b>
+            </span>
+          )}
+          <span className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 14px 8px 10px', borderRadius: 999, fontSize: 13, fontWeight: 500 }}>
+            <span style={{ display: 'inline-flex' }}>
+              {people.slice(0, 4).map((p, i) => {
+                const common = { width: 22, height: 22, borderRadius: '50%', border: '2px solid var(--bg-card)', marginLeft: i ? -8 : 0, flexShrink: 0 } as const
+                return p.avatar_url
+                  ? <img key={p.id} src={p.avatar_url} alt="" style={{ ...common, objectFit: 'cover', display: 'block' }} />
+                  : <span key={p.id} style={{ ...common, background: colorFor(p.id), color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>
+              })}
+            </span>
+            <b className="text-content">{t('costs.travelers', { count: people.length })}</b>
+          </span>
+        </div>
+        {canEdit && (
+          <div style={{ display: 'flex', gap: 10 }}>
+            <button onClick={settleAll} disabled={!(settlement?.flows || []).length}
+              className="bg-surface-card border border-edge text-content disabled:opacity-40"
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '10px 16px', borderRadius: 12, fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
+              <Check size={16} /> {t('costs.settleUp')}
+            </button>
+            <button onClick={() => { setEditing(null); setModalOpen(true) }}
+              className="bg-[var(--text-primary)] text-[var(--bg-primary)]"
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '10px 18px', borderRadius: 12, fontSize: 14, fontWeight: 600, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>
+              <Plus size={16} /> {t('costs.addExpense')}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* ── Summary cards ── */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.15fr', gap: 16, marginBottom: 36 }} className="costs-summary">
+        <SummaryCard label={t('costs.youOwe')} sub={t('costs.youOweSub')} amount={totals.owe} currency={base} locale={locale}
+          icon={<ArrowDown size={18} />} tone="owe"
+          foot={totals.owe > 0.01
+            ? <FlowPills ids={(settlement?.flows || []).filter(f => f.from.user_id === me).map(f => f.to.user_id)} lead={t('costs.to')} Avatar={Avatar} name={personName} />
+            : <span className="text-content-faint">{t('costs.allSettled')}</span>} />
+        <SummaryCard label={t('costs.youreOwed')} sub={t('costs.youreOwedSub')} amount={totals.owed} currency={base} locale={locale}
+          icon={<ArrowUp size={18} />} tone="owed"
+          foot={totals.owed > 0.01
+            ? <FlowPills ids={(settlement?.flows || []).filter(f => f.to.user_id === me).map(f => f.from.user_id)} lead={t('costs.from')} Avatar={Avatar} name={personName} />
+            : <span className="text-content-faint">{t('costs.nothingOwed')}</span>} />
+        <SummaryCard label={t('costs.totalSpend')} sub={t('costs.totalSpendSub')} amount={totals.totalSpend} currency={base} locale={locale}
+          icon={<BarChart3 size={18} />} tone="total"
+          foot={<span style={{ display: 'flex', gap: 16 }}><span>{t('costs.yourShare')} · <b>{fmt0(totals.myShare)}</b></span><span>{t('costs.youPaid')} · <b>{fmt0(totals.myPaid)}</b></span></span>} />
+      </div>
+
+      {/* ── Main grid ── */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 32, alignItems: 'start' }} className="costs-grid">
+        {/* expenses */}
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, gap: 12, flexWrap: 'wrap' }}>
+            <h3 className="text-content" style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', margin: 0 }}>
+              {t('costs.expenses')}
+            </h3>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 10, padding: '0 10px', height: 34 }}>
+                <Search size={15} className="text-content-faint" />
+                <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')}
+                  className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 13, width: 150, fontFamily: 'inherit' }} />
+              </div>
+              <div className="bg-surface-secondary" style={{ display: 'flex', borderRadius: 9, padding: 3 }}>
+                {(['all', 'mine', 'owed'] as const).map(f => (
+                  <button key={f} onClick={() => setFilter(f)}
+                    className={filter === f ? 'bg-surface-card text-content' : 'text-content-muted'}
+                    style={{ padding: '6px 11px', fontSize: 12, borderRadius: 7, fontWeight: 500, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>
+                    {t('costs.filter.' + f)}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {dayGroups.length === 0 ? (
+            <div className="text-content-faint" style={{ textAlign: 'center', padding: '60px 20px' }}>
+              {search ? t('costs.noMatch') : t('costs.emptyText')}
+            </div>
+          ) : dayGroups.map(g => {
+            const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
+            return (
+              <div key={g.day} style={{ marginBottom: 22 }}>
+                <div className={labelCls} style={{ display: 'flex', alignItems: 'center', margin: '0 0 10px 4px' }}>
+                  {g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 12 }}>{t('costs.spent', { amount: fmt(dtot) })}</span>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  {g.items.map(e => <ExpenseRow key={e.id} e={e} />)}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* sidebar */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          {/* settle up */}
+          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
+              <div className={labelCls}>{t('costs.settleUp')} · <span className="text-content">{(settlement?.flows || []).length}</span></div>
+              <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)}
+                className="text-content-muted bg-surface-secondary border border-edge disabled:opacity-40"
+                style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+                <History size={13} /> {t('costs.history')}{(settlement?.settlements || []).length ? ` (${settlement!.settlements.length})` : ''}
+              </button>
+            </div>
+            <SettleFlows />
+          </div>
+
+          {/* balances */}
+          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
+            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.balances')}</div>
+            <BalancesList balances={settlement?.balances || []} />
+          </div>
+
+          {/* by category */}
+          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
+            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
+            <CategoryBreakdown />
+          </div>
+        </div>
+      </div>
+      </div>)}
+
+      {modalOpen && (
+        <ExpenseModal tripId={tripId} base={base} people={people} me={me} editing={editing}
+          onClose={() => setModalOpen(false)}
+          onSaved={() => { setModalOpen(false); loadBudgetItems(tripId); loadSettlement() }} />
+      )}
+
+      <Modal isOpen={histOpen} onClose={() => setHistOpen(false)} title={t('costs.settleHistory')} size="md">
+        <SettleHistory settlements={settlement?.settlements || []} fmt={fmt} Avatar={Avatar} name={personName} onUndo={undoSettlement} canEdit={canEdit} />
+      </Modal>
+
+      <style>{`
+        .costs-root {
+          --c-bg: #f8fafc; --c-bg2: oklch(0.965 0.01 70);
+          --c-surface: #ffffff; --c-surface2: oklch(0.985 0.006 78);
+          --c-ink: oklch(0.22 0.012 65); --c-ink2: oklch(0.42 0.012 65); --c-ink3: oklch(0.62 0.01 65);
+          --c-line: oklch(0.92 0.008 70);
+        }
+        html.dark .costs-root {
+          --c-bg: #121215; --c-bg2: #18181c;
+          --c-surface: #1a1a1e; --c-surface2: #202027;
+          --c-ink: #f4f4f5; --c-ink2: #a1a1aa; --c-ink3: #71717a;
+          --c-line: #2a2a31;
+        }
+        .costs-root .bg-surface-card { background: var(--c-surface) !important; }
+        .costs-root .bg-surface-secondary, .costs-root .bg-surface-input { background: var(--c-surface2) !important; }
+        .costs-root .border-edge { border-color: var(--c-line) !important; }
+        /* dark = neutral zinc + a touch of liquid glass, matching the dashboard */
+        html.dark .costs-root .bg-surface-card {
+          background: rgba(255,255,255,0.035) !important;
+          border-color: rgba(255,255,255,0.08) !important;
+          backdrop-filter: blur(20px) saturate(1.4);
+          -webkit-backdrop-filter: blur(20px) saturate(1.4);
+        }
+        html.dark .costs-root .bg-surface-secondary,
+        html.dark .costs-root .bg-surface-input { background: rgba(255,255,255,0.05) !important; }
+        html.dark .costs-root .border-edge { border-color: rgba(255,255,255,0.08) !important; }
+        .costs-root .text-content { color: var(--c-ink) !important; }
+        .costs-root .text-content-muted { color: var(--c-ink2) !important; }
+        .costs-root .text-content-faint { color: var(--c-ink3) !important; }
+        .costs-root .exp-actions { opacity: 1; }
+        @media (max-width: 1100px) {
+          .costs-root .costs-summary { grid-template-columns: 1fr !important; }
+          .costs-root .costs-grid { grid-template-columns: 1fr !important; }
+        }
+      `}</style>
+    </div>
+  )
+
+  // ── shared settle-flow list ──────────────────────────────────────────────
+  function SettleFlows() {
+    const flows = settlement?.flows || []
+    if (flows.length === 0) return (
+      <div style={{ textAlign: 'center', padding: '14px 8px' }}>
+        <div style={{ width: 46, height: 46, borderRadius: '50%', margin: '0 auto 10px', display: 'grid', placeItems: 'center', background: 'rgba(22,163,74,0.12)', color: '#16a34a' }}><Check size={22} /></div>
+        <div className="text-content" style={{ fontSize: 14.5, fontWeight: 600 }}>{t('costs.everyoneSquare')}</div>
+        <div className="text-content-faint" style={{ fontSize: 12, marginTop: 2 }}>{t('costs.nothingOutstanding')}</div>
+      </div>
+    )
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {flows.map((f, i) => (
+          <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`${personName(f.from.user_id)} → ${f.to.user_id === me ? t('costs.youLower') : personName(f.to.user_id)}`}>
+              <Avatar id={f.from.user_id} size={32} /><ArrowRight size={15} className="text-content-faint" /><Avatar id={f.to.user_id} size={32} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+              <span className="text-content" style={{ fontSize: 14, fontWeight: 700 }}>{fmt(f.amount)}</span>
+              {canEdit && <button onClick={() => settleFlow(f.from.user_id, f.to.user_id, f.amount)} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '7px 12px', borderRadius: 9, fontSize: 12, fontWeight: 600, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>{t('costs.settle')}</button>}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  // ── mobile layout (Budget1Mobile.html): single flat column, total card on top ──
+  function MobileBody() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8 }}>
+        {/* Total card */}
+        <section style={{ background: 'linear-gradient(135deg,#1f2937,#111827)', color: '#fff', borderRadius: 22, padding: '20px 20px 16px', boxShadow: '0 8px 24px -8px rgba(0,0,0,0.28)' }}>
+          <div style={{ fontSize: 11.5, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>{t('costs.totalSpend')}</div>
+          <div style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 8, display: 'flex', alignItems: 'baseline' }}>{bigMoney(totals.totalSpend, 24, 'rgba(255,255,255,0.6)')}</div>
+          <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 12, color: 'rgba(255,255,255,0.6)', flexWrap: 'wrap' }}>
+            <span>{t('costs.yourShare')} · <b style={{ color: '#fff', fontWeight: 600 }}>{fmt0(totals.myShare)}</b></span>
+            <span>{t('costs.youPaid')} · <b style={{ color: '#fff', fontWeight: 600 }}>{fmt0(totals.myPaid)}</b></span>
+          </div>
+          {canEdit && (
+            <button onClick={() => { setEditing(null); setModalOpen(true) }} style={{ marginTop: 16, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.16)', color: '#fff', padding: 13, borderRadius: 14, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+              <Plus size={17} /> {t('costs.addExpense')}
+            </button>
+          )}
+        </section>
+
+        {/* Owe / Owed */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+          <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+            <div style={{ width: 34, height: 34, borderRadius: 10, display: 'grid', placeItems: 'center', marginBottom: 10, background: '#dc262622', color: '#dc2626' }}><ArrowDown size={17} /></div>
+            <div className="text-content" style={{ fontSize: 12.5, fontWeight: 600 }}>{t('costs.youOwe')}</div>
+            <div className="text-content-faint" style={{ fontSize: 10.5 }}>{t('costs.youOweSub')}</div>
+            <div style={{ fontSize: 27, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 12, display: 'flex', alignItems: 'baseline', color: '#dc2626' }}>{bigMoney(totals.owe, 16, 'var(--c-ink3)')}</div>
+          </div>
+          <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+            <div style={{ width: 34, height: 34, borderRadius: 10, display: 'grid', placeItems: 'center', marginBottom: 10, background: '#16a34a22', color: '#16a34a' }}><ArrowUp size={17} /></div>
+            <div className="text-content" style={{ fontSize: 12.5, fontWeight: 600 }}>{t('costs.youreOwed')}</div>
+            <div className="text-content-faint" style={{ fontSize: 10.5 }}>{t('costs.youreOwedSub')}</div>
+            <div style={{ fontSize: 27, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 12, display: 'flex', alignItems: 'baseline', color: '#16a34a' }}>{bigMoney(totals.owed, 16, 'var(--c-ink3)')}</div>
+          </div>
+        </div>
+
+        {/* Settle up */}
+        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, gap: 8 }}>
+            <div className="text-content" style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', display: 'flex', alignItems: 'baseline', gap: 8 }}>{t('costs.settleUp')} <span className="text-content-faint" style={{ fontSize: 12, fontWeight: 500 }}>{(settlement?.flows || []).length}</span></div>
+            <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)} className="text-content-muted bg-surface-card border border-edge disabled:opacity-40" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 9, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><History size={13} /> {t('costs.history')}</button>
+          </div>
+          <SettleFlows />
+        </div>
+
+        {/* Expenses */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <div className="text-content" style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em' }}>{t('costs.expenses')}</div>
+          <div className="bg-surface-card border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 12, padding: '0 12px', height: 42 }}>
+            <Search size={16} className="text-content-faint" />
+            <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')} className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 14, width: '100%', fontFamily: 'inherit' }} />
+          </div>
+          <div className="bg-surface-secondary" style={{ display: 'flex', borderRadius: 11, padding: 3, gap: 2 }}>
+            {(['all', 'mine', 'owed'] as const).map(f => (
+              <button key={f} onClick={() => setFilter(f)} className={filter === f ? 'bg-surface-card text-content' : 'text-content-muted'} style={{ flex: 1, padding: '8px 6px', fontSize: 12.5, fontWeight: 500, borderRadius: 8, border: 0, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>{t('costs.filter.' + f)}</button>
+            ))}
+          </div>
+          {dayGroups.length === 0
+            ? <div className="text-content-faint" style={{ textAlign: 'center', padding: '36px 16px', fontSize: 13 }}>{search ? t('costs.noMatch') : t('costs.emptyText')}</div>
+            : dayGroups.map(g => {
+                const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
+                return (
+                  <div key={g.day} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    <div className={labelCls} style={{ display: 'flex', alignItems: 'center', padding: '0 2px' }}>{g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 11.5 }}>{t('costs.spent', { amount: fmt(dtot) })}</span></div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{g.items.map(e => <ExpenseRow key={e.id} e={e} />)}</div>
+                  </div>
+                )
+              })}
+        </div>
+
+        {/* Balances */}
+        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+          <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.balances')}</div>
+          <BalancesList balances={settlement?.balances || []} />
+        </div>
+
+        {/* By category */}
+        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+          <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
+          <CategoryBreakdown />
+        </div>
+      </div>
+    )
+  }
+
+  // ── inline subcomponents (close over helpers) ────────────────────────────
+  function ExpenseRow({ e }: { e: BudgetItem }) {
+    const c = catMeta(e.category)
+    const Icon = c.Icon
+    const cur = curOf(e)
+    const payers = (e.payers || []).filter(p => p.amount > 0)
+    const net = round2(myPaidOf(e) - myShareOf(e))
+    return (
+      <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
+        <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}><Icon size={21} /></span>
+        <div style={{ minWidth: 0 }}>
+          <div className="text-content" style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{e.name}</div>
+          {payers.length > 0 && (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 5 }}>
+              {payers.map(p => (
+                <span key={p.user_id} className="bg-surface-secondary border border-edge" title={personName(p.user_id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px 3px 3px', borderRadius: 999, fontSize: 11.5 }}>
+                  <Avatar id={p.user_id} size={18} />
+                  <span className="text-content" style={{ fontWeight: 700 }}>{fmt(convert(p.amount, cur))}</span>
+                </span>
+              ))}
+            </div>
+          )}
+          {!isMobile && (
+            <div className="text-content-faint" style={{ fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {t(c.labelKey)}{cur !== base ? ` · ${fmt(e.total_price, cur)} → ${fmt(baseTotal(e))}` : ''}
+            </div>
+          )}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
+          <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+            <div className="text-content" style={{ fontSize: 18, fontWeight: 600 }}>{fmt(baseTotal(e))}</div>
+            {(e.members || []).length > 0 && Math.abs(net) > 0.01 && (
+              <div style={{ fontSize: 12, marginTop: 2, fontWeight: 500, whiteSpace: 'nowrap', color: net > 0 ? '#16a34a' : '#dc2626' }}>
+                {net > 0 ? t('costs.youLent', { amount: fmt(net) }) : t('costs.youBorrowed', { amount: fmt(-net) })}
+              </div>
+            )}
+          </div>
+          {canEdit && (
+            <div className="exp-actions" style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
+              <button title={t('common.edit')} onClick={() => { setEditing(e); setModalOpen(true) }} className="bg-surface-secondary border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer' }}><Pencil size={13} /></button>
+              <button title={t('common.delete')} onClick={() => handleDelete(e.id)} className="bg-surface-secondary border border-edge" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer', color: '#dc2626' }}><Trash2 size={13} /></button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  function BalancesList({ balances }: { balances: SettlementData['balances'] }) {
+    const rows = people.map(p => balances.find(b => b.user_id === p.id) || { user_id: p.id, username: p.username, avatar_url: null, balance: 0 })
+    const max = Math.max(1, ...rows.map(r => Math.abs(r.balance)))
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+        {rows.map(r => {
+          const pct = Math.min(100, Math.abs(r.balance) / max * 100)
+          const pos = r.balance > 0.01, neg = r.balance < -0.01
+          return (
+            <div key={r.user_id} style={{ display: 'grid', gridTemplateColumns: '28px 1fr auto', gap: 10, alignItems: 'center' }}>
+              <Avatar id={r.user_id} size={28} />
+              <div>
+                <div className="text-content" style={{ fontSize: 13, fontWeight: 600 }}>{personName(r.user_id)}</div>
+                <div className="bg-surface-secondary" style={{ height: 5, borderRadius: 3, marginTop: 5, position: 'relative', overflow: 'hidden' }}>
+                  <span style={{ position: 'absolute', left: '50%', top: -1, bottom: -1, width: 1, background: 'var(--border-primary)' }} />
+                  {pos && <span style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: pct / 2 + '%', background: '#16a34a', borderRadius: 3 }} />}
+                  {neg && <span style={{ position: 'absolute', right: '50%', top: 0, bottom: 0, width: pct / 2 + '%', background: '#dc2626', borderRadius: 3 }} />}
+                </div>
+              </div>
+              <div style={{ fontSize: 13, fontWeight: 600, textAlign: 'right', color: pos ? '#16a34a' : neg ? '#dc2626' : 'var(--text-faint)' }}>
+                {pos ? '+' + fmt(r.balance) : neg ? '−' + fmt(-r.balance) : fmt(0)}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  function CategoryBreakdown() {
+    const tot: Record<string, number> = {}
+    let grand = 0
+    for (const e of budgetItems) { const k = catMeta(e.category).key; tot[k] = (tot[k] || 0) + baseTotal(e); grand += baseTotal(e) }
+    const rows = COST_CATEGORY_LIST.filter(c => (tot[c.key] || 0) > 0).sort((a, b) => (tot[b.key] || 0) - (tot[a.key] || 0))
+    if (rows.length === 0) return <div className="text-content-faint" style={{ fontSize: 12.5 }}>{t('costs.noCategories')}</div>
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        {rows.map(c => {
+          const v = tot[c.key]; const pct = grand ? v / grand * 100 : 0
+          return (
+            <div key={c.key} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 10, alignItems: 'center' }}>
+              <span style={{ width: 10, height: 10, borderRadius: 3, background: c.color }} />
+              <span className="text-content" style={{ fontSize: 13, fontWeight: 500 }}>{t(c.labelKey)}</span>
+              <span className="text-content-muted" style={{ fontSize: 13, fontWeight: 600 }}>{fmt0(v)}</span>
+              <div className="bg-surface-secondary" style={{ gridColumn: '1 / -1', height: 5, borderRadius: 3, overflow: 'hidden', marginTop: -2 }}>
+                <span style={{ display: 'block', height: '100%', width: pct + '%', background: c.color, borderRadius: 3 }} />
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+// ── pure subcomponents ─────────────────────────────────────────────────────
+function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }: { label: string; sub: string; amount: number; currency: string; locale: string; icon: React.ReactNode; foot: React.ReactNode; tone: 'owe' | 'owed' | 'total' }) {
+  const total = tone === 'total'
+  const accent = tone === 'owe' ? '#dc2626' : tone === 'owed' ? '#16a34a' : undefined
+  const muted = total ? 'rgba(255,255,255,0.55)' : 'var(--text-faint)'
+  // formatToParts keeps the design's "big integer + muted symbol/decimals" styling
+  // while letting Intl place the symbol and pick separators per locale + currency.
+  let parts: Intl.NumberFormatPart[] | null = null
+  try {
+    const d = currencyDecimals(currency)
+    parts = new Intl.NumberFormat(currencyLocale(currency), { style: 'currency', currency: (currency || 'EUR').toUpperCase(), minimumFractionDigits: d, maximumFractionDigits: d }).formatToParts(amount || 0)
+  } catch { parts = null }
+  const big = (p: Intl.NumberFormatPart) => p.type === 'integer' || p.type === 'group' || p.type === 'minusSign'
+  return (
+    <div className={total ? '' : 'bg-surface-card border border-edge'}
+      style={{ borderRadius: 22, padding: '26px 28px', position: 'relative', overflow: 'hidden', ...(total ? { background: 'linear-gradient(135deg,#1f2937,#111827)', color: '#fff' } : {}) }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
+        <span style={{ width: 36, height: 36, borderRadius: 11, display: 'grid', placeItems: 'center', background: total ? 'rgba(255,255,255,0.12)' : (accent + '22'), color: total ? '#fff' : accent }}>{icon}</span>
+        <div>
+          <div style={{ fontSize: 13, fontWeight: 600 }} className={total ? '' : 'text-content'}>{label}</div>
+          <div style={{ fontSize: 12, opacity: total ? 0.6 : 1 }} className={total ? '' : 'text-content-faint'}>{sub}</div>
+        </div>
+      </div>
+      <div style={{ fontSize: 46, fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1, marginTop: 20, display: 'flex', alignItems: 'baseline', color: total ? '#fff' : accent }}>
+        {parts
+          ? parts.map((p, i) => <span key={i} style={big(p) ? undefined : { fontSize: 26, fontWeight: 500, color: muted }}>{p.value}</span>)
+          : <span>{formatMoney(amount, currency, locale)}</span>}
+      </div>
+      <div style={{ marginTop: 16, fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', opacity: total ? 0.85 : 1 }}>{foot}</div>
+    </div>
+  )
+}
+
+function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; Avatar: (p: { id: number; size?: number }) => React.JSX.Element; name: (id: number) => string }) {
+  const uniq = Array.from(new Set(ids))
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+      <span className="text-content-faint">{lead}</span>
+      {uniq.map(id => (
+        <span key={id} className="bg-surface-secondary border border-edge text-content" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 10px 3px 3px', borderRadius: 999, fontSize: 12, fontWeight: 600 }}>
+          <Avatar id={id} size={18} />{name(id)}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+function SettleHistory({ settlements, fmt, Avatar, name, onUndo, canEdit }: {
+  settlements: Settlement[]; fmt: (v: number) => string; Avatar: (p: { id: number; size?: number }) => React.JSX.Element; name: (id: number) => string; onUndo: (id: number) => void; canEdit: boolean
+}) {
+  const { t } = useTranslation()
+  if (settlements.length === 0) return <div className="text-content-faint" style={{ textAlign: 'center', padding: 30, fontSize: 13 }}>{t('costs.noSettlements')}</div>
+  const total = settlements.reduce((a, s) => a + s.amount, 0)
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 14px', borderRadius: 12, marginBottom: 14, background: 'rgba(22,163,74,0.1)', color: '#16a34a', fontWeight: 600, fontSize: 13 }}>
+        <span>{t('costs.paymentsSettled', { count: settlements.length })}</span><span>{fmt(total)}</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {settlements.map(s => (
+          <div key={s.id} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '12px 14px', borderRadius: 12 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`${name(s.from_user_id)} → ${name(s.to_user_id)}`}>
+              <Avatar id={s.from_user_id} size={30} /><ArrowRight size={15} className="text-content-faint" /><Avatar id={s.to_user_id} size={30} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <span className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>{fmt(s.amount)}</span>
+              {canEdit && <button onClick={() => onUndo(s.id)} className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><RotateCcw size={12} /> {t('costs.undo')}</button>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ── Add / edit expense modal ───────────────────────────────────────────────
+function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
+  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; onClose: () => void; onSaved: () => void
+}) {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const { addBudgetItem, updateBudgetItem } = useTripStore()
+  const { convert } = useExchangeRates(base)
+  const sym = (c: string) => SYMBOLS[c] || (c + ' ')
+
+  const [name, setName] = useState(editing?.name || '')
+  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : 'food')
+  const [currency, setCurrency] = useState((editing?.currency || base).toUpperCase())
+  const [day, setDay] = useState(editing?.expense_date || new Date().toISOString().slice(0, 10))
+  const [payers, setPayers] = useState<Record<number, string>>(() => {
+    const m: Record<number, string> = {}
+    for (const p of editing?.payers || []) m[p.user_id] = String(p.amount)
+    return m
+  })
+  const [split, setSplit] = useState<Set<number>>(() =>
+    editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
+  const [saving, setSaving] = useState(false)
+
+  const payersTotal = Object.values(payers).reduce((a, v) => a + (parseFloat(v) || 0), 0)
+  const each = split.size > 0 ? payersTotal / split.size : 0
+  const valid = name.trim().length > 0 && split.size > 0 && payersTotal > 0
+
+  const save = async () => {
+    if (!valid) return
+    setSaving(true)
+    const payerList = Object.entries(payers).map(([uid, v]) => ({ user_id: Number(uid), amount: parseFloat(v) || 0 })).filter(p => p.amount > 0)
+    const data = {
+      name: name.trim(), category: cat,
+      // Store the actual currency the amounts were entered in; conversion to the
+      // viewer's display currency happens live (real rates), no manual rate.
+      currency,
+      payers: payerList, member_ids: [...split],
+      expense_date: day || null,
+    }
+    try {
+      if (editing) await updateBudgetItem(tripId, editing.id, data)
+      else await addBudgetItem(tripId, data)
+      onSaved()
+    } catch { toast.error(t('common.unknownError')) } finally { setSaving(false) }
+  }
+
+  const inputCls = 'w-full bg-surface-input border border-edge text-content'
+  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+
+  return (
+    <Modal isOpen onClose={onClose} title={editing ? t('costs.editExpense') : t('costs.addExpense')} size="2xl"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button onClick={onClose} className="text-content-muted border border-edge" style={{ padding: '8px 16px', borderRadius: 10, background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
+          <button onClick={save} disabled={!valid || saving} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: !valid || saving ? 0.5 : 1 }}>{editing ? t('common.save') : t('costs.addExpense')}</button>
+        </div>
+      }>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+        <div>
+          <label className={labelCls}>{t('costs.whatFor')}</label>
+          <input value={name} onChange={e => setName(e.target.value)} placeholder={t('costs.namePlaceholder')} className={inputCls} style={{ borderRadius: 10, padding: '11px 13px', fontSize: 14, outline: 'none' }} />
+        </div>
+
+        <div>
+          <label className={labelCls}>{t('costs.totalAmount')}</label>
+          <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px' }}>
+            <span className="text-content-faint" style={{ fontSize: 15 }}>{sym(currency)}</span>
+            <span className="text-content" style={{ flex: 1, fontSize: 15, fontWeight: 600, paddingLeft: 6 }}>{payersTotal.toFixed(2)}</span>
+          </div>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+          <div style={{ minWidth: 0 }}>
+            <label className={labelCls}>{t('costs.currency')}</label>
+            <CustomSelect value={currency} onChange={v => setCurrency(String(v))} searchable
+              options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+              style={{ width: '100%' }} />
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <label className={labelCls}>{t('costs.day')}</label>
+            <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
+          </div>
+        </div>
+
+        {currency !== base && payersTotal > 0 && (
+          <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+            <span>{formatMoney(payersTotal, currency, locale)}</span>
+            <span className="text-content-faint">≈</span>
+            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(payersTotal, currency), base, locale)}</span>
+            <span className="text-content-faint">· {t('costs.liveRate')}</span>
+          </div>
+        )}
+
+        <div>
+          <label className={labelCls}>{t('costs.category')}</label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
+            {COST_CATEGORY_LIST.map(c => {
+              const Icon = c.Icon; const on = cat === c.key
+              return (
+                <button key={c.key} onClick={() => setCat(c.key)}
+                  className={on ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-muted border border-edge'}
+                  style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px 6px 7px', borderRadius: 999, fontSize: 12.5, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', borderColor: on ? 'var(--text-primary)' : undefined }}>
+                  <span style={{ width: 20, height: 20, borderRadius: 6, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}><Icon size={12} /></span>
+                  {t(c.labelKey)}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        <div>
+          <label className={labelCls}>{t('costs.whoPaid')}</label>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
+            {people.map(p => (
+              <div key={p.id} className="bg-surface-secondary border border-edge" style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10 }}>
+                <span className="text-content" style={{ fontSize: 14, fontWeight: 500 }}>{p.id === me ? t('costs.you') : p.username}</span>
+                <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
+                  <span className="text-content-faint" style={{ fontSize: 13 }}>{sym(currency)}</span>
+                  <input type="number" inputMode="decimal" min="0" step="0.01" placeholder="0.00" value={payers[p.id] || ''}
+                    onChange={e => setPayers(prev => ({ ...prev, [p.id]: e.target.value }))}
+                    className="text-content" style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <label className={labelCls}>{t('costs.splitBetween')}</label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
+            {people.map(p => {
+              const on = split.has(p.id)
+              return (
+                <button key={p.id} onClick={() => setSplit(prev => { const n = new Set(prev); n.has(p.id) ? n.delete(p.id) : n.add(p.id); return n })}
+                  className={on ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-faint border border-edge'}
+                  style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 13px 6px 7px', borderRadius: 999, fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', borderColor: on ? 'var(--text-primary)' : undefined }}>
+                  {p.avatar_url
+                    ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', opacity: on ? 1 : 0.45 }} />
+                    : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[people.findIndex(x => x.id === p.id) % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, opacity: on ? 1 : 0.45 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
+                  {p.id === me ? t('costs.you') : p.username}
+                </button>
+              )
+            })}
+          </div>
+          <div className="text-content-faint" style={{ marginTop: 10, fontSize: 12.5 }}>
+            {split.size === 0 ? t('costs.pickSomeone') : t('costs.splitSummary', { count: split.size, amount: sym(currency) + each.toFixed(2) })}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

client/src/components/Budget/costsCategories.tsx

@@ -0,0 +1,39 @@
+import { Hotel, Utensils, ShoppingCart, Bus, Plane, Ticket, Camera, ShoppingBag, FileText, HeartPulse, Coins, MoreHorizontal } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { COST_CATEGORIES, type CostCategory } from '@trek/shared'
+
+/**
+ * The fixed Costs categories. Users can't add their own — every expense maps to
+ * one of these. Category colour is the one place an accent is allowed (it
+ * visualises the category); everything else stays black/white. The label comes
+ * from i18n (`costs.cat.*`).
+ */
+export interface CostCategoryMeta {
+  key: CostCategory
+  labelKey: string
+  Icon: LucideIcon
+  color: string
+}
+
+export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {
+  accommodation: { key: 'accommodation', labelKey: 'costs.cat.accommodation', Icon: Hotel, color: '#16a34a' },
+  food:          { key: 'food',          labelKey: 'costs.cat.food',          Icon: Utensils, color: '#ea580c' },
+  groceries:     { key: 'groceries',     labelKey: 'costs.cat.groceries',     Icon: ShoppingCart, color: '#65a30d' },
+  transport:     { key: 'transport',     labelKey: 'costs.cat.transport',     Icon: Bus, color: '#2563eb' },
+  flights:       { key: 'flights',       labelKey: 'costs.cat.flights',       Icon: Plane, color: '#0ea5e9' },
+  activities:    { key: 'activities',    labelKey: 'costs.cat.activities',    Icon: Ticket, color: '#9333ea' },
+  sightseeing:   { key: 'sightseeing',   labelKey: 'costs.cat.sightseeing',   Icon: Camera, color: '#db2777' },
+  shopping:      { key: 'shopping',      labelKey: 'costs.cat.shopping',      Icon: ShoppingBag, color: '#e11d48' },
+  fees:          { key: 'fees',          labelKey: 'costs.cat.fees',          Icon: FileText, color: '#475569' },
+  health:        { key: 'health',        labelKey: 'costs.cat.health',        Icon: HeartPulse, color: '#dc2626' },
+  tips:          { key: 'tips',          labelKey: 'costs.cat.tips',          Icon: Coins, color: '#d97706' },
+  other:         { key: 'other',         labelKey: 'costs.cat.other',         Icon: MoreHorizontal, color: '#6b7280' },
+}
+
+export const COST_CATEGORY_LIST: CostCategoryMeta[] = COST_CATEGORIES.map(k => COST_CAT_META[k])
+
+/** Map any stored category (incl. legacy free-text values) to a known meta. */
+export function catMeta(cat: string | null | undefined): CostCategoryMeta {
+  if (cat && cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
+  return COST_CAT_META.other
+}

client/src/components/Collab/CollabChatMessages.tsx

@@ -12,10 +12,10 @@ export function ChatMessages(props: any) {
     <>
       {/* Messages */}
       {messages.length === 0 ? (
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32 }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32, textAlign: 'center' }}>
           <MessageCircle size={40} strokeWidth={1.2} style={{ opacity: 0.4 }} />
           <span style={{ fontSize: 14, fontWeight: 600 }}>{t('collab.chat.empty')}</span>
-          <span style={{ fontSize: 12, opacity: 0.6 }}>{t('collab.chat.emptyDesc') || ''}</span>
+          <span style={{ fontSize: 12, opacity: 0.6, fontFamily: 'var(--font-subtext)' }}>{t('collab.chat.emptyDesc') || ''}</span>
         </div>
       ) : (
         <div ref={scrollRef} onScroll={checkAtBottom} className="chat-scroll" style={{

client/src/components/Collab/CollabNotes.constants.ts

@@ -1,4 +1,4 @@
-export const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
+export const FONT = "var(--font-system)"
 
 export const NOTE_COLORS = [
   { value: '#6366f1', label: 'Indigo' },

client/src/components/Collab/CollabNotes.test.tsx

@@ -175,7 +175,7 @@ describe('CollabNotes', () => {
     expect(document.body).toBeInTheDocument();
   });
 
-  it('FE-COMP-NOTES-013: delete note calls DELETE API and removes it from grid', async () => {
+  it('FE-COMP-NOTES-013: deleting a note asks for confirmation, then calls DELETE API and removes it', async () => {
     const user = userEvent.setup();
     server.use(
       http.get('/api/trips/1/collab/notes', () =>
@@ -193,8 +193,11 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Remove Me');
-    const deleteBtn = screen.getByTitle('Delete');
-    await user.click(deleteBtn);
+    await user.click(screen.getByTitle('Delete'));
+    // Deleting now asks for confirmation first — the note stays until confirmed.
+    expect(screen.getByText('Delete note?')).toBeInTheDocument();
+    expect(screen.getByText('Remove Me')).toBeInTheDocument();
+    await user.click(document.querySelector('button.bg-red-600') as HTMLElement);
     await waitFor(() => expect(screen.queryByText('Remove Me')).not.toBeInTheDocument());
   });
 

client/src/components/Collab/CollabNotes.tsx

@@ -10,6 +10,7 @@ import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
+import ConfirmDialog from '../shared/ConfirmDialog'
 import type { User } from '../../types'
 import type { CollabNote } from './CollabNotes.types'
 import { FONT, NOTE_COLORS } from './CollabNotes.constants'
@@ -44,6 +45,7 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
   const [previewFile, setPreviewFile] = useState(null)
   const [showSettings, setShowSettings] = useState(false)
   const [activeCategory, setActiveCategory] = useState(null)
+  const [pendingDeleteNoteId, setPendingDeleteNoteId] = useState<number | null>(null)
 
   // Empty categories (no notes yet) stored in localStorage
   const [emptyCategories, setEmptyCategories] = useState(() => {
@@ -231,6 +233,7 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
     activeCategory, setActiveCategory, categoryColors, getCategoryColor,
     handleCreateNote, handleUpdateNote, saveCategoryColors, handleEditSubmit,
     handleDeleteNoteFile, handleDeleteNote, categories, sortedNotes,
+    pendingDeleteNoteId, setPendingDeleteNoteId,
   }
 }
 
@@ -319,7 +322,7 @@ function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t
 
 function CollabNotesGrid(S: NotesState) {
   const {
-    sortedNotes, currentUser, canEdit, handleUpdateNote, handleDeleteNote,
+    sortedNotes, currentUser, canEdit, handleUpdateNote, setPendingDeleteNoteId,
     setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
   } = S
   return (
@@ -352,7 +355,7 @@ function CollabNotesGrid(S: NotesState) {
               currentUser={currentUser}
               canEdit={canEdit}
               onUpdate={handleUpdateNote}
-              onDelete={handleDeleteNote}
+              onDelete={setPendingDeleteNoteId}
               onEdit={setEditingNote}
               onView={setViewingNote}
               onPreviewFile={setPreviewFile}
@@ -470,6 +473,7 @@ export default function CollabNotes(props: CollabNotesProps) {
     viewingNote, showNewModal, editingNote, previewFile, showSettings,
     setShowNewModal, setEditingNote, setPreviewFile, setShowSettings,
     handleCreateNote, handleEditSubmit, handleDeleteNoteFile, saveCategoryColors, handleUpdateNote,
+    handleDeleteNote, pendingDeleteNoteId, setPendingDeleteNoteId,
   } = S
 
   if (loading) return <CollabNotesLoading {...S} />
@@ -527,6 +531,15 @@ export default function CollabNotes(props: CollabNotesProps) {
           t={t}
         />
       )}
+
+      {/* Confirm: delete a collab note — guards against accidental deletion */}
+      <ConfirmDialog
+        isOpen={pendingDeleteNoteId !== null}
+        onClose={() => setPendingDeleteNoteId(null)}
+        onConfirm={() => { if (pendingDeleteNoteId !== null) handleDeleteNote(pendingDeleteNoteId) }}
+        title={t('collab.notes.confirmDeleteTitle')}
+        message={t('collab.notes.confirmDeleteBody')}
+      />
     </div>
   )
 }

client/src/components/Collab/CollabNotesCard.tsx

@@ -16,7 +16,7 @@ interface NoteCardProps {
   currentUser: User
   canEdit: boolean
   onUpdate: (noteId: number, data: Partial<CollabNote>) => Promise<void>
-  onDelete: (noteId: number) => Promise<void>
+  onDelete: (noteId: number) => void
   onEdit: (note: CollabNote) => void
   onView: (note: CollabNote) => void
   onPreviewFile: (file: NoteFile) => void

client/src/components/Collab/CollabPolls.tsx

@@ -32,7 +32,7 @@ interface Poll {
   created_at: string
 }
 
-const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
+const FONT = "var(--font-system)"
 
 function timeRemaining(deadline) {
   if (!deadline) return null

client/src/components/Files/FileManager.constants.ts

@@ -1 +1 @@
-export const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise'])
+export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])

client/src/components/Files/FileManager.helpers.ts

@@ -1,4 +1,4 @@
-import { FileText, FileImage, File, Plane, Train, Car, Ship } from 'lucide-react'
+import { FileText, FileImage, File, Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
 import { downloadFile } from '../../utils/fileDownload'
 
 export function isImage(mimeType?: string | null) {
@@ -33,7 +33,12 @@ export function formatDateWithLocale(dateStr?: string | null, locale?: string) {
 
 export function transportIcon(type: string) {
   if (type === 'train') return Train
+  if (type === 'bus') return Bus
   if (type === 'car') return Car
+  if (type === 'taxi') return CarTaxiFront
+  if (type === 'bicycle') return Bike
   if (type === 'cruise') return Ship
+  if (type === 'ferry') return Sailboat
+  if (type === 'transport_other') return Route
   return Plane
 }

client/src/components/Files/FileManager.tsx

@@ -10,7 +10,7 @@ export default function FileManager(props: FileManagerProps) {
   const S = useFileManager(props)
   const { lightboxIndex, setLightboxIndex, imageFiles, assignFileId, previewFile, handlePaste, showTrash } = S
   return (
-    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
+    <div className="flex flex-col h-full" style={{ fontFamily: "var(--font-system)" }} onPaste={handlePaste} tabIndex={-1}>
       {/* Lightbox */}
       {lightboxIndex !== null && <ImageLightbox files={imageFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}
 

client/src/components/Journey/JourneyDetailPageDatePicker.tsx

@@ -15,7 +15,8 @@ export function DatePicker({ value, onChange, tripDates }: {
   })
 
   const daysInMonth = new Date(viewMonth.year, viewMonth.month + 1, 0).getDate()
-  const firstDow = new Date(viewMonth.year, viewMonth.month, 1).getDay()
+  // Monday-first, matching CustomDateTimePicker / VacayCalendar (getDay() is Sunday=0).
+  const firstDow = (new Date(viewMonth.year, viewMonth.month, 1).getDay() + 6) % 7
   const monthName = new Date(viewMonth.year, viewMonth.month).toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
 
   const prevMonth = () => {
@@ -68,7 +69,7 @@ export function DatePicker({ value, onChange, tripDates }: {
 
             {/* Weekday headers */}
             <div className="grid grid-cols-7 mb-1">
-              {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d, i) => (
+              {['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map((d, i) => (
                 <div key={i} className="text-center text-[10px] font-medium text-zinc-400 py-1">{d}</div>
               ))}
             </div>

client/src/components/Journey/JourneyDetailPageSettingsDialog.tsx

@@ -10,6 +10,7 @@ import JourneyShareSection from './JourneyShareSection'
 import type { JourneyDetail } from '../../store/journeyStore'
 import { pickGradient } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
 import { AddTripDialog } from './JourneyDetailPageAddTripDialog'
+import { normalizeImageFile } from '../../utils/convertHeic'
 
 export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite, onRefresh }: {
   journey: JourneyDetail
@@ -49,7 +50,7 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
     const file = e.target.files?.[0]
     if (!file) return
     const formData = new FormData()
-    formData.append('cover', file)
+    formData.append('cover', await normalizeImageFile(file))
     try {
       await journeyApi.uploadCover(journey.id, formData)
       toast.success(t('journey.settings.coverUpdated'))

client/src/components/Journey/JourneyMap.tsx

@@ -77,7 +77,7 @@ function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): st
     <svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${dayColor}" stroke="${stroke}" stroke-width="1.5"/>
       <circle cx="14" cy="13" r="8" fill="${dayColor}"/>
-      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
     </svg>
   </div>`
 }

client/src/components/Journey/JourneyMapGL.tsx

@@ -104,7 +104,7 @@ function ensureJourneyPopupStyle() {
       -webkit-backdrop-filter: blur(16px) saturate(180%);
       border: 1px solid rgba(0, 0, 0, 0.06);
       box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
-      font-family: -apple-system, system-ui, sans-serif;
+      font-family:var(--font-system);
       min-width: 160px;
       max-width: 280px;
     }
@@ -185,7 +185,7 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
   inner.innerHTML = `<svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
     <circle cx="14" cy="13" r="8" fill="${fill}"/>
-    <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+    <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
   </svg>`
   wrap.appendChild(inner)
   return wrap

client/src/components/Journey/PhotoLightbox.tsx

@@ -66,7 +66,7 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose }: Props
   return (
     <div
       style={{
-        position: 'fixed', inset: 0, zIndex: 500,
+        position: 'fixed', inset: 0, zIndex: 10000,
         background: 'rgba(0,0,0,0.92)', backdropFilter: 'blur(20px)',
         display: 'flex', flexDirection: 'column',
         paddingBottom: 'var(--bottom-nav-h)',

client/src/components/Layout/BottomNav.tsx

@@ -25,6 +25,11 @@ function useCreateAction(): { label: string; run: () => void } {
   const onJourneyList = useMatch('/journey')
 
   if (inTrip) {
+    // On the Costs tab the "+" adds an expense; otherwise it adds a place.
+    const tripTab = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem(`trip-tab-${inTrip.params.id}`) : null
+    if (tripTab === 'finanzplan') {
+      return { label: t('costs.addExpense'), run: () => navigate(`/trips/${inTrip.params.id}?create=expense`) }
+    }
     return { label: t('places.addPlace'), run: () => navigate(`/trips/${inTrip.params.id}?create=place`) }
   }
   if (inJourney) {

client/src/components/Layout/DemoBanner.tsx

@@ -273,7 +273,7 @@ export default function DemoBanner(): React.ReactElement | null {
       paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
       paddingLeft: 16, paddingRight: 16,
       overflow: 'auto',
-      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+      fontFamily: "var(--font-system)",
     }} onClick={() => setDismissed(true)}>
       <div style={{
         background: 'white', borderRadius: 20, padding: '28px 24px 0',

client/src/components/Map/MapView.tsx

@@ -64,7 +64,7 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
       box-shadow:0 1px 4px rgba(0,0,0,0.18);
       display:flex;align-items:center;justify-content:center;
       font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
-      font-family:-apple-system,system-ui,sans-serif;line-height:1;
+      font-family:var(--font-system);line-height:1;
       box-sizing:border-box;white-space:nowrap;
     ">${label}</span>`
   }
@@ -131,10 +131,21 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
 
   useEffect(() => {
     if (selectedPlaceId && selectedPlaceId !== prev.current) {
-      // Pan to the selected place without changing zoom
+      // Pan to the selected place without changing zoom. Offset the centre by the
+      // side-panel + bottom-inspector padding so the pin lands in the middle of the
+      // *visible* map area rather than the geometric centre (where the bottom panel
+      // would cover it). Reuses the same paddingOpts the fit-bounds path uses.
       const selected = places.find(p => p.id === selectedPlaceId)
-      if (selected?.lat && selected?.lng) {
-        map.panTo([selected.lat, selected.lng], { animate: true })
+      if (selected?.lat != null && selected?.lng != null) {
+        const latlng: [number, number] = [selected.lat, selected.lng]
+        const tl = paddingOpts.paddingTopLeft as [number, number] | undefined
+        const br = paddingOpts.paddingBottomRight as [number, number] | undefined
+        if (tl && br && typeof map.project === 'function' && typeof map.unproject === 'function') {
+          const point = map.project(latlng).add([(br[0] - tl[0]) / 2, (br[1] - tl[1]) / 2])
+          map.panTo(map.unproject(point), { animate: true })
+        } else {
+          map.panTo(latlng, { animate: true })
+        }
       }
     }
     prev.current = selectedPlaceId
@@ -592,7 +603,7 @@ export const MapView = memo(function MapView({
         borderRadius: 8,
         boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
         padding: '6px 10px',
-        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+        fontFamily: "var(--font-system)",
         maxWidth: 220,
         whiteSpace: 'nowrap',
       }}>

client/src/components/Map/MapViewGL.tsx

@@ -79,7 +79,7 @@ function createMarkerElement(place: Place & { category_color?: string; category_
       box-shadow:0 1px 4px rgba(0,0,0,0.18);
       display:flex;align-items:center;justify-content:center;
       font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
-      font-family:-apple-system,system-ui,sans-serif;line-height:1;
+      font-family:var(--font-system);line-height:1;
       box-sizing:border-box;white-space:nowrap;
     ">${label}</span>`
   }
@@ -447,7 +447,7 @@ export function MapViewGL({
       geometry: { type: 'LineString' as const, coordinates: seg.map(([lat, lng]) => [lng, lat]) },
     }))
     src.setData({ type: 'FeatureCollection', features })
-  }, [route])
+  }, [route, mapReady])
 
   // Travel times now live in the day sidebar (per-segment connectors), not on the map.
 
@@ -470,7 +470,7 @@ export function MapViewGL({
       } catch { return [] }
     })
     src.setData({ type: 'FeatureCollection', features })
-  }, [places])
+  }, [places, mapReady])
 
   // Reservation overlay — mirrors the Leaflet ReservationOverlay: great-
   // circle arcs for flights/cruises, straight lines for trains/cars,
@@ -553,6 +553,10 @@ export function MapViewGL({
         zoom: Math.max(map.getZoom(), 14),
         pitch: mapbox3d ? 45 : 0,
         duration: 400,
+        // Account for the side panels and the bottom inspector / day-detail panel
+        // so the selected pin lands in the centre of the *visible* map area rather
+        // than the geometric centre (where the bottom panel would cover it).
+        padding: paddingOpts,
       })
     } catch { /* noop */ }
   }, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps

client/src/components/Map/ReservationOverlay.tsx

@@ -2,7 +2,8 @@ import { createElement, useEffect, useMemo, useRef, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
-import { Plane, Train, Ship, Car } from 'lucide-react'
+import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { escapeHtml } from '@trek/shared'
 import { useSettingsStore } from '../../store/settingsStore'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
@@ -10,8 +11,8 @@ const ENDPOINT_PANE = 'reservation-endpoints'
 const AIRPORT_BADGE_HALF_PX = 16
 const BADGE_GAP_PX = 5
 
-type TransportType = 'flight' | 'train' | 'cruise' | 'car'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
+type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transport_other'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transport_other']
 
 const TRANSPORT_COLOR = '#3b82f6'
 
@@ -20,6 +21,11 @@ const TYPE_META: Record<TransportType, { color: string; icon: typeof Plane; geod
   train: { color: TRANSPORT_COLOR, icon: Train, geodesic: false },
   cruise: { color: TRANSPORT_COLOR, icon: Ship, geodesic: true },
   car: { color: TRANSPORT_COLOR, icon: Car, geodesic: false },
+  bus: { color: TRANSPORT_COLOR, icon: Bus, geodesic: false },
+  taxi: { color: TRANSPORT_COLOR, icon: CarTaxiFront, geodesic: false },
+  bicycle: { color: TRANSPORT_COLOR, icon: Bike, geodesic: false },
+  ferry: { color: TRANSPORT_COLOR, icon: Sailboat, geodesic: true },
+  transport_other: { color: TRANSPORT_COLOR, icon: Route, geodesic: false },
 }
 
 function useEndpointPane() {
@@ -37,7 +43,7 @@ function useEndpointPane() {
 function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
   const { icon: IconCmp, color } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span>${label}</span>` : ''
+  const labelHtml = label ? `<span>${escapeHtml(label)}</span>` : ''
   const estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
   return L.divIcon({
     className: 'trek-endpoint-marker',
@@ -46,9 +52,9 @@ function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
       padding:0 8px;border-radius:999px;
       background:${color};box-shadow:0 2px 6px rgba(0,0,0,0.25);
       border:1.5px solid #fff;color:#fff;
-      font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
+      font-family:var(--font-system);font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
       box-sizing:border-box;height:22px;white-space:nowrap;
-    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''}</div>`,
+    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''}</div>`,
     iconSize: [estWidth, 22],
     iconAnchor: [estWidth / 2, 11],
     popupAnchor: [0, -11],
@@ -167,8 +173,8 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -176,7 +182,7 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
     background:rgba(17,24,39,0.92);color:#fff;
     box-shadow:0 2px 6px rgba(0,0,0,0.25);
     border:1px solid ${color}aa;
-    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
+    font-family:var(--font-system);
     white-space:nowrap;box-sizing:border-box;
     transform-origin:center;
     will-change:transform;

client/src/components/Map/RouteCalculator.test.ts

@@ -161,6 +161,62 @@ describe('optimizeRoute', () => {
     expect(result[1]).toEqual(c)
     expect(result[2]).toEqual(b)
   })
+
+  it('FE-COMP-ROUTECALCULATOR-016: start anchor begins the chain at the anchor-nearest stop', () => {
+    const a = { lat: 10, lng: 1 }
+    const b = { lat: 2, lng: 1 }
+    const c = { lat: 5, lng: 1 }
+    // From the accommodation anchor (1,1): nearest is b(2,1), then c(5,1), then a(10,1)
+    const result = optimizeRoute([a, b, c], { start: { lat: 1, lng: 1 } })
+    expect(result).toEqual([b, c, a])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-017: start + end anchors reorder a shuffled day and keep the end-nearest stop last', () => {
+    const a = { lat: 2, lng: 1 }
+    const b = { lat: 5, lng: 1 }
+    const c = { lat: 8, lng: 1 }
+    // Transfer day: start at hotel A (1,1), end at hotel B (9,1). c is nearest B, so it must be last.
+    const result = optimizeRoute([c, a, b], { start: { lat: 1, lng: 1 }, end: { lat: 9, lng: 1 } })
+    expect(result).toEqual([a, b, c])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-018: an anchor makes even a two-stop day sortable', () => {
+    const a = { lat: 10, lng: 1 }
+    const b = { lat: 2, lng: 1 }
+    // Without anchors two stops are returned unchanged; the start anchor orders them by proximity.
+    const result = optimizeRoute([a, b], { start: { lat: 1, lng: 1 } })
+    expect(result).toEqual([b, a])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-019: 2-opt untangles a round-trip into a clean loop around the hotel', () => {
+    const hotel = { lat: 48.8668, lng: 2.3013 } // Rue Marbeuf
+    const stops = [
+      { id: 1, lat: 48.8565, lng: 2.3324 },
+      { id: 2, lat: 48.8813, lng: 2.3151 },
+      { id: 3, lat: 48.8796, lng: 2.308 },
+      { id: 4, lat: 48.8723, lng: 2.2926 },
+      { id: 5, lat: 48.866, lng: 2.3102 }, // nearest the hotel
+    ]
+    const d = (a: { lat: number; lng: number }, b: { lat: number; lng: number }) =>
+      Math.hypot(a.lat - b.lat, a.lng - b.lng)
+    const loop = (order: typeof stops) =>
+      d(hotel, order[0]) + order.slice(1).reduce((s, p, i) => s + d(order[i], p), 0) + d(order[order.length - 1], hotel)
+
+    const result = optimizeRoute(stops, { start: hotel, end: hotel })
+    // The optimized loop is no longer than the original order…
+    expect(loop(result)).toBeLessThanOrEqual(loop(stops) + 1e-9)
+    // …and the hotel-adjacent stop sits at one end of the loop, right next to the hotel.
+    expect([result[0].id, result[result.length - 1].id]).toContain(5)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-020: an end anchor without a start finishes at the stop nearest it', () => {
+    const a = { lat: 2, lng: 1 }
+    const b = { lat: 5, lng: 1 }
+    const c = { lat: 9, lng: 1 }
+    // a is nearest the end anchor, so the route must finish at a rather than start there.
+    const result = optimizeRoute([a, b, c], { end: { lat: 1, lng: 1 } })
+    expect(result[result.length - 1]).toEqual(a)
+  })
 })
 
 // ── generateGoogleMapsUrl ──────────────────────────────────────────────────────

client/src/components/Map/RouteCalculator.ts

@@ -1,4 +1,4 @@
-import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint } from '../../types'
+import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
 
@@ -77,35 +77,98 @@ export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
   return `https://www.google.com/maps/dir/${stops}`
 }
 
-/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
-export function optimizeRoute<T extends Waypoint>(places: T[]): T[] {
-  const valid = places.filter((p) => p.lat && p.lng)
-  if (valid.length <= 2) return places
+// Squared planar distance — enough for nearest-neighbor comparisons and cheaper than a full haversine.
+function sqDist(a: Waypoint, b: Waypoint): number {
+  return (a.lat - b.lat) ** 2 + (a.lng - b.lng) ** 2
+}
 
+// Length of visiting `order` in sequence, optionally pinned to a fixed start and/or end anchor.
+// With start === end this is a closed loop back to the anchor (a day out from and back to the hotel).
+function tourLength(order: Waypoint[], start?: Waypoint, end?: Waypoint): number {
+  if (order.length === 0) return 0
+  let total = 0
+  if (start) total += Math.sqrt(sqDist(start, order[0]))
+  for (let i = 0; i < order.length - 1; i++) total += Math.sqrt(sqDist(order[i], order[i + 1]))
+  if (end) total += Math.sqrt(sqDist(order[order.length - 1], end))
+  return total
+}
+
+// Greedy nearest-neighbor ordering, seeded at the start anchor when there is one.
+function nearestNeighborOrder<T extends Waypoint>(valid: T[], start?: Waypoint): T[] {
   const visited = new Set<number>()
   const result: T[] = []
-  let current = valid[0]
-  visited.add(0)
-  result.push(current)
-
+  let current: Waypoint
+  if (start) {
+    current = start
+  } else {
+    current = valid[0]
+    visited.add(0)
+    result.push(valid[0])
+  }
   while (result.length < valid.length) {
     let nearestIdx = -1
     let minDist = Infinity
     for (let i = 0; i < valid.length; i++) {
       if (visited.has(i)) continue
-      const d = Math.sqrt(
-        Math.pow(valid[i].lat - current.lat, 2) + Math.pow(valid[i].lng - current.lng, 2)
-      )
+      const d = sqDist(valid[i], current)
       if (d < minDist) { minDist = d; nearestIdx = i }
     }
     if (nearestIdx === -1) break
     visited.add(nearestIdx)
     current = valid[nearestIdx]
-    result.push(current)
+    result.push(valid[nearestIdx])
   }
   return result
 }
 
+// 2-opt: repeatedly reverse a sub-segment whenever it shortens the tour. This removes the crossings
+// a pure nearest-neighbor pass leaves behind. The start/end anchors stay fixed, so a round trip
+// (start === end) is untangled into a clean loop rather than an open path.
+function twoOptImprove<T extends Waypoint>(order: T[], start?: Waypoint, end?: Waypoint): T[] {
+  if (order.length < 3) return order
+  let best = order
+  let bestLen = tourLength(best, start, end)
+  let improved = true
+  while (improved) {
+    improved = false
+    for (let i = 0; i < best.length - 1; i++) {
+      for (let j = i + 1; j < best.length; j++) {
+        const candidate = best.slice(0, i).concat(best.slice(i, j + 1).reverse(), best.slice(j + 1))
+        const len = tourLength(candidate, start, end)
+        if (len < bestLen - 1e-12) {
+          best = candidate
+          bestLen = len
+          improved = true
+        }
+      }
+    }
+  }
+  return best
+}
+
+/**
+ * Reorders waypoints to minimize travel distance: a nearest-neighbor pass for a good starting order,
+ * then 2-opt to untangle crossings. Optional anchors (e.g. the day's accommodation) pin the route's
+ * ends — start === end makes it a loop out from and back to the hotel; a transfer day runs start → end.
+ */
+export function optimizeRoute<T extends Waypoint>(places: T[], anchors: RouteAnchors = {}): T[] {
+  const { start, end } = anchors
+  const valid = places.filter((p) => p.lat && p.lng)
+  if (valid.length <= 1) return places
+  // Two unanchored stops have no meaningful order to optimize; anchors can still flip them.
+  if (valid.length === 2 && !start && !end) return places
+
+  const order = twoOptImprove(nearestNeighborOrder(valid, start), start, end)
+
+  // A round trip's loop direction is arbitrary, so orient it to begin at the stop nearest the hotel —
+  // that reads naturally as "leave the hotel, head to the closest place, …, come back".
+  if (start && end && start.lat === end.lat && start.lng === end.lng && order.length > 1) {
+    if (sqDist(order[order.length - 1], start) < sqDist(order[0], start)) order.reverse()
+  }
+
+  return order
+}
+
 /** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
 export async function calculateSegments(
   waypoints: Waypoint[],

client/src/components/Map/reservationsMapbox.ts

@@ -9,14 +9,15 @@
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import mapboxgl from 'mapbox-gl'
-import { Plane, Train, Ship, Car } from 'lucide-react'
+import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { escapeHtml } from '@trek/shared'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
 export const RESERVATION_SOURCE_ID = 'trek-reservations'
 export const RESERVATION_LINE_LAYER_ID = 'trek-reservations-lines'
 
-type TransportType = 'flight' | 'train' | 'cruise' | 'car'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
+type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transport_other'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transport_other']
 const TRANSPORT_COLOR = '#3b82f6'
 
 const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }> = {
@@ -24,6 +25,11 @@ const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }
   train: { icon: Train, geodesic: false },
   cruise: { icon: Ship, geodesic: true },
   car: { icon: Car, geodesic: false },
+  bus: { icon: Bus, geodesic: false },
+  taxi: { icon: CarTaxiFront, geodesic: false },
+  bicycle: { icon: Bike, geodesic: false },
+  ferry: { icon: Sailboat, geodesic: true },
+  transport_other: { icon: Route, geodesic: false },
 }
 
 // ── geometry helpers (ported from ReservationOverlay.tsx) ────────────────
@@ -156,13 +162,13 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
 function endpointMarkerHtml(type: TransportType, label: string | null): string {
   const { icon: IconCmp } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''
+  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''
   return `<div style="
     display:inline-flex;align-items:center;justify-content:center;gap:4px;
     padding:0 8px;border-radius:999px;
     background:${TRANSPORT_COLOR};box-shadow:0 2px 6px rgba(0,0,0,0.25);
     border:1.5px solid #fff;color:#fff;
-    font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
+    font-family:var(--font-system);font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
     box-sizing:border-box;height:22px;white-space:nowrap;cursor:pointer;
   "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml}</div>`
 }
@@ -174,8 +180,8 @@ function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { ht
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -183,7 +189,7 @@ function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { ht
     background:rgba(17,24,39,0.92);color:#fff;
     box-shadow:0 2px 6px rgba(0,0,0,0.25);
     border:1px solid ${TRANSPORT_COLOR}aa;
-    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
+    font-family:var(--font-system);
     white-space:nowrap;box-sizing:border-box;pointer-events:none;
     transform-origin:center;will-change:transform;
   ">${main}${sub}</div>`

client/src/components/PDF/JourneyBookPDF.test.tsx

@@ -146,4 +146,20 @@ describe('downloadJourneyBookPDF', () => {
     expect(html).toContain('Journey Book');
     expect(html).toContain('The End');
   });
+
+  it('FE-COMP-JOURNEYPDF-007: sanitises HTML injected via an entry story and keeps the iframe script-free', async () => {
+    const journey = buildJourney();
+    journey.entries[0].story = 'Hello <script>alert(1)</script> <img src=x onerror="alert(2)"> world';
+    await downloadJourneyBookPDF(journey);
+    const iframe = getIframe()!;
+    const html = iframe.srcdoc;
+
+    // The script tag, image beacon and event handler are stripped from the story.
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('onerror');
+    expect(html).not.toContain('alert(2)');
+    // Benign prose survives.
+    expect(html).toContain('Hello');
+    expect(html).toContain('world');
+  });
 });

client/src/components/PDF/JourneyBookPDF.tsx

@@ -1,5 +1,6 @@
 // Journey Photo Book PDF — Polarsteps-inspired, magazine-density
 import { marked } from 'marked'
+import { sanitizeRichTextHtml } from '@trek/shared'
 import type { JourneyDetail, JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 function esc(str: string | null | undefined): string {
@@ -9,7 +10,9 @@ function esc(str: string | null | undefined): string {
 
 function md(str: string | null | undefined): string {
   if (!str) return ''
-  return marked.parse(str, { async: false, breaks: true }) as string
+  // marked passes embedded raw HTML through by default, so sanitise the result
+  // before it goes into the srcdoc iframe (keeps prose markup, drops scripts).
+  return sanitizeRichTextHtml(marked.parse(str, { async: false, breaks: true }) as string)
 }
 
 function abs(url: string | null | undefined): string {
@@ -308,7 +311,9 @@ export async function downloadJourneyBookPDF(journey: JourneyDetail) {
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
+  // No script runs inside the document (print is triggered from the parent via
+  // contentWindow.print()), so withhold allow-scripts to keep the sandbox tight.
+  iframe.sandbox = 'allow-same-origin allow-modals'
   iframe.srcdoc = html
 
   card.appendChild(header)

client/src/components/PDF/TripPDF.test.ts

@@ -259,6 +259,23 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('colosseum.jpg')
   })
 
+  it('FE-COMP-TRIPPDF-018b: renders a persisted place-photo proxy image_url as an <img>, not the category icon (#1130)', async () => {
+    const args = {
+      ...richArgs,
+      assignments: {
+        '10': [{
+          ...assignmentForDay,
+          place: { ...placeWithDetails, image_url: '/api/maps/place-photo/ChIJabc/bytes' },
+        }],
+      } as any,
+    }
+    await downloadTripPDF(args)
+    const iframe = getIframe()
+    // The proxy path (no file extension) must still embed as an absolute <img>.
+    expect(iframe!.srcdoc).toContain('http://localhost:3000/api/maps/place-photo/ChIJabc/bytes')
+    expect(iframe!.srcdoc).toContain('class="place-thumb"')
+  })
+
   it('FE-COMP-TRIPPDF-019: fetches google place photos for places with google_place_id', async () => {
     let photoCalled = false
     server.use(

client/src/components/PDF/TripPDF.tsx

@@ -1,7 +1,7 @@
 // Trip PDF via browser print window
 import { createElement } from 'react'
 import { getCategoryIcon } from '../shared/categoryIcons'
-import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, Utensils, Users, LucideIcon } from 'lucide-react'
+import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Sailboat, Bike, CarTaxiFront, Route, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, Utensils, Users, LucideIcon } from 'lucide-react'
 import { accommodationsApi, mapsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNote } from '../../types'
 import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
@@ -20,8 +20,8 @@ function noteIconSvg(iconId) {
   return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' })
 }
 
-const RESERVATION_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship, restaurant: Utensils, event: Ticket, tour: Users, other: FileText }
-const RESERVATION_COLOR_MAP = { flight: '#3b82f6', train: '#06b6d4', bus: '#6b7280', car: '#6b7280', cruise: '#0ea5e9', restaurant: '#ef4444', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
+const RESERVATION_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, taxi: CarTaxiFront, bicycle: Bike, cruise: Ship, ferry: Sailboat, transport_other: Route, restaurant: Utensils, event: Ticket, tour: Users, other: FileText }
+const RESERVATION_COLOR_MAP = { flight: '#3b82f6', train: '#06b6d4', bus: '#059669', car: '#6b7280', taxi: '#ca8a04', bicycle: '#84cc16', cruise: '#0ea5e9', ferry: '#0d9488', transport_other: '#6b7280', restaurant: '#ef4444', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
 function reservationIconSvg(type) {
   const Icon = RESERVATION_ICON_MAP[type] || Ticket
   const color = RESERVATION_COLOR_MAP[type] || '#3b82f6'
@@ -55,6 +55,10 @@ function absUrl(url) {
 function safeImg(url) {
   if (!url) return null
   if (url.startsWith('https://') || url.startsWith('http://')) return url
+  // The in-app place-photo proxy always streams a JPEG but has no file extension
+  // (it ends in …/bytes), so the extension check below would wrongly reject it —
+  // which is why persisted place photos showed as category icons in the PDF.
+  if (url.startsWith('/api/maps/place-photo/')) return absUrl(url)
   return /\.(jpe?g|png|webp|bmp|tiff?)(\?.*)?$/i.test(url) ? absUrl(url) : null
 }
 
@@ -254,9 +258,10 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
           const cat = categories.find(c => c.id === place.category_id)
           const color = cat?.color || '#6366f1'
 
-          // Image: direct > google photo > fallback icon
+          // Image: direct > google photo > fallback icon. Both go through safeImg
+          // so the proxy path is resolved to an absolute URL the PDF can load.
           const directImg = safeImg(place.image_url)
-          const googleImg = photoMap[place.id] || null
+          const googleImg = safeImg(photoMap[place.id])
           const img = directImg || googleImg
 
           const iconSvg = categoryIconSvg(cat?.icon, color, 24)
@@ -569,7 +574,9 @@ ${daysHtml}
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
+  // No script runs inside the document (print is parent-initiated), so withhold
+  // allow-scripts to keep the sandbox tight.
+  iframe.sandbox = 'allow-same-origin allow-modals'
   iframe.srcdoc = html
 
   card.appendChild(header)

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Package } from 'lucide-react'
-import { adminApi, packingApi } from '../../api/client'
+import { packingApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -28,7 +28,7 @@ export default function ApplyTemplateButton({ tripId, style, className }: ApplyT
   const { t } = useTranslation()
 
   useEffect(() => {
-    adminApi.packingTemplates().then(d => setTemplates(d.templates || [])).catch(() => {})
+    packingApi.listTemplates(tripId).then(d => setTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {

client/src/components/Packing/PackingListPanel.test.tsx

@@ -7,7 +7,7 @@ import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { buildUser, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
+import { buildUser, buildAdmin, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
 import PackingListPanel, { itemWeight } from './PackingListPanel';
 
 describe('itemWeight (bag total weight calc)', () => {
@@ -34,10 +34,10 @@ beforeEach(() => {
     http.get('/api/trips/:id/packing/category-assignees', () =>
       HttpResponse.json({ assignees: {} })
     ),
-    http.get('/api/admin/bag-tracking', () =>
-      HttpResponse.json({ enabled: false })
+    http.get('/api/addons', () =>
+      HttpResponse.json({ bagTracking: false, addons: [] })
     ),
-    http.get('/api/admin/packing-templates', () =>
+    http.get('/api/trips/:id/packing/templates', () =>
       HttpResponse.json({ templates: [] })
     ),
   );
@@ -381,7 +381,7 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-030: packing template button present when templates available', async () => {
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 1, name: 'Beach Trip', item_count: 5 }] })
       )
     );
@@ -457,8 +457,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-034: bag tracking enabled shows Bags button and bag sidebar', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Carry-on', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -556,8 +556,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-039: bag modal opens when Bags button clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -585,8 +585,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-040: bag sidebar renders BagCard with bag name when enabled and bags exist', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'Backpack', color: '#10b981', weight_limit_grams: 10000, members: [] }] })
@@ -601,26 +601,36 @@ describe('PackingListPanel', () => {
     });
   });
 
-  it('FE-COMP-PACKING-041: save-as-template button present when items exist', async () => {
+  it('FE-COMP-PACKING-041: save-as-template button present for admins when items exist', async () => {
+    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     const user = userEvent.setup();
     const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
-    const { container } = render(<PackingListPanel tripId={1} items={items} />);
+    render(<PackingListPanel tripId={1} items={items} />);
 
-    // Save-as-template button uses FolderPlus icon and "Save as template" text
-    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
-    expect(folderPlusBtn).toBeTruthy();
+    // Save-as-template button shows its label "Save as template"
+    const saveBtn = screen.getByText('Save as template').closest('button');
+    expect(saveBtn).toBeTruthy();
 
     // Click to show the name input
-    await user.click(folderPlusBtn!);
+    await user.click(saveBtn!);
 
     // Template name input appears
     expect(await screen.findByPlaceholderText('Template name')).toBeInTheDocument();
   });
 
+  it('FE-COMP-PACKING-041b: save-as-template button hidden for non-admins', () => {
+    // Default seeded user (beforeEach) is a non-admin trip owner with edit rights.
+    const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
+    render(<PackingListPanel tripId={1} items={items} />);
+
+    // The "Save as template" action must not be available to normal users.
+    expect(screen.queryByText('Save as template')).not.toBeInTheDocument();
+  });
+
   it('FE-COMP-PACKING-042: apply template dropdown opens when template button clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 2, name: 'Summer Packing', item_count: 10 }] })
       )
     );
@@ -658,8 +668,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-044: bag item row shows weight input and bag button when bag tracking enabled', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -706,6 +716,7 @@ describe('PackingListPanel', () => {
   });
 
   it('FE-COMP-PACKING-046: save-as-template form submission calls saveAsTemplate API', async () => {
+    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     const user = userEvent.setup();
     let savedTemplateName = '';
     server.use(
@@ -714,16 +725,16 @@ describe('PackingListPanel', () => {
         savedTemplateName = String(body.name);
         return HttpResponse.json({ success: true });
       }),
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [] })
       )
     );
     const items = [buildPackingItem({ name: 'Item', category: 'Test' })];
-    const { container } = render(<PackingListPanel tripId={1} items={items} />);
+    render(<PackingListPanel tripId={1} items={items} />);
 
-    // Click the FolderPlus "Save as template" button
-    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
-    await user.click(folderPlusBtn!);
+    // Click the "Save as template" button
+    const saveBtn = screen.getByText('Save as template').closest('button');
+    await user.click(saveBtn!);
 
     // Type template name
     const nameInput = await screen.findByPlaceholderText('Template name');
@@ -736,8 +747,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-047: bag picker in item row opens when clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 3, name: 'Carry-on', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -765,8 +776,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-048: add bag in bag modal opens form when "Add bag" clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -805,8 +816,8 @@ describe('PackingListPanel', () => {
     let putBody: Record<string, unknown> | null = null;
     const itemId = 120;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -861,8 +872,8 @@ describe('PackingListPanel', () => {
     const itemId = 130;
     let putBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 7, name: 'Trolley', color: '#10b981', weight_limit_grams: null, members: [] }] })
@@ -930,8 +941,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-054: item with assigned bag shows "Unassigned" option in bag picker', async () => {
     const itemId = 140;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'MyBag', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -957,7 +968,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-055: apply template button click opens template dropdown and shows template', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 3, name: 'Weekend Pack', item_count: 8 }] })
       )
     );
@@ -1124,7 +1135,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let applyCalled = false;
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
       ),
       http.post('/api/trips/1/packing/apply-template/5', () => {
@@ -1177,7 +1188,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       // Start with one bag so the sidebar renders (sidebar requires bags.length > 0)
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Existing Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -1207,7 +1218,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let deleteCalled = false;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 9, name: 'Old Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
       ),
@@ -1235,7 +1246,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let updateBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 11, name: 'Carry-on', color: '#10b981', weight_limit_grams: null, members: [] }] })
       ),
@@ -1273,7 +1284,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 12, name: 'Day Pack', color: '#ec4899', weight_limit_grams: null, members: [] }] })
       )
@@ -1314,7 +1325,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 13, name: 'Weekend Bag', color: '#f97316', weight_limit_grams: null, members: [] }] })
       ),
@@ -1352,7 +1363,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-068: inline bag create in item row picker creates bag and assigns it', async () => {
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () => HttpResponse.json({ bags: [] })),
       http.post('/api/trips/1/packing/bags', async ({ request }) => {
         createBody = await request.json() as Record<string, unknown>;

client/src/components/Packing/PackingListPanelHeader.tsx

@@ -5,7 +5,7 @@ import type { PackingState } from './usePackingListPanel'
 
 export function PackingHeader(S: PackingState) {
   const {
-    inlineHeader, t, items, abgehakt, fortschritt, canEdit,
+    inlineHeader, t, items, abgehakt, fortschritt, canEdit, isAdmin,
     showSaveTemplate, saveTemplateName, setSaveTemplateName, handleSaveAsTemplate, setShowSaveTemplate,
     setShowImportModal, handleClearChecked, availableTemplates, templateDropdownRef,
     showTemplateDropdown, setShowTemplateDropdown, applyingTemplate, handleApplyTemplate,
@@ -26,7 +26,7 @@ export function PackingHeader(S: PackingState) {
           </div>
         ) : <span />}
         <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
-          {canEdit && items.length > 0 && showSaveTemplate && (
+          {canEdit && isAdmin && items.length > 0 && showSaveTemplate && (
             <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
               <input
                 type="text" autoFocus
@@ -97,7 +97,7 @@ export function PackingHeader(S: PackingState) {
               )}
             </div>
           )}
-          {inlineHeader && canEdit && items.length > 0 && !showSaveTemplate && (
+          {inlineHeader && canEdit && isAdmin && items.length > 0 && !showSaveTemplate && (
             <button onClick={() => setShowSaveTemplate(true)} style={{
               display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
               border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',

client/src/components/Packing/usePackingListPanel.ts

@@ -2,9 +2,11 @@ import { useState, useMemo, useRef, useEffect } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
+import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
-import { packingApi, tripsApi, adminApi } from '../../api/client'
+import { packingApi, tripsApi } from '../../api/client'
+import { useAddonStore } from '../../store/addonStore'
 import type { PackingItem, PackingBag } from '../../types'
 import { BAG_COLORS } from './packingListPanel.constants'
 import { parseImportLines } from './packingListPanel.helpers'
@@ -46,6 +48,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
   const canEdit = can('packing_edit', trip)
+  const isAdmin = useAuthStore((s) => s.user?.role === 'admin')
   const toast = useToast()
   const { t } = useTranslation()
 
@@ -145,19 +148,24 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
     if (failed) toast.error(t('packing.toast.deleteError'))
   }
 
-  // Bag tracking
-  const [bagTrackingEnabled, setBagTrackingEnabled] = useState(false)
+  // Bag tracking — the global toggle is a packing sub-flag surfaced to every
+  // authenticated user via the addon store (loaded on app start), not the
+  // admin-only endpoint, so non-admin members see weights/bags too.
+  const bagTrackingEnabled = useAddonStore(s => s.bagTracking)
+  const addonsLoaded = useAddonStore(s => s.loaded)
+  const loadAddons = useAddonStore(s => s.loadAddons)
   const [bags, setBags] = useState<PackingBag[]>([])
   const [newBagName, setNewBagName] = useState('')
   const [showAddBag, setShowAddBag] = useState(false)
   const [showBagModal, setShowBagModal] = useState(false)
 
   useEffect(() => {
-    adminApi.getBagTracking().then(d => {
-      setBagTrackingEnabled(d.enabled)
-      if (d.enabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
-    }).catch(() => {})
-  }, [tripId])
+    if (!addonsLoaded) loadAddons()
+  }, [addonsLoaded, loadAddons])
+
+  useEffect(() => {
+    if (bagTrackingEnabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
+  }, [tripId, bagTrackingEnabled])
 
   const handleCreateBag = async () => {
     if (!newBagName.trim()) return
@@ -234,7 +242,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const templateDropdownRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+    packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {
@@ -267,7 +275,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
       toast.success(t('packing.templateSaved'))
       setShowSaveTemplate(false)
       setSaveTemplateName('')
-      adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+      packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
     } catch {
       toast.error(t('common.error'))
     }
@@ -294,10 +302,10 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
     reader.readAsText(file)
   }
 
-  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
+  const font = { fontFamily: "var(--font-system)" }
 
   return {
-    tripId, items, inlineHeader, t, canEdit, font,
+    tripId, items, inlineHeader, t, canEdit, isAdmin, font,
     filter, setFilter, addingCategory, setAddingCategory, newCatName, setNewCatName,
     tripMembers, categoryAssignees, handleSetAssignees, allCategories, gruppiert, abgehakt, fortschritt,
     handleAddItemToCategory, handleAddNewCategory, handleRenameCategory, handleDeleteCategory, handleClearChecked,

client/src/components/Planner/BookingImportModal.tsx

@@ -0,0 +1,382 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useState, useRef, useEffect } from 'react'
+import { Upload, Plane, Train, Hotel, UtensilsCrossed, Car, Anchor, Calendar, ArrowLeft, X } from 'lucide-react'
+import type { BookingImportPreviewItem } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { reservationsApi } from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
+
+interface BookingImportModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tripId: number
+  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
+}
+
+const ACCEPTED_EXTS = ['.eml', '.pdf', '.pkpass', '.html', '.htm', '.txt']
+const MAX_FILE_BYTES = 10 * 1024 * 1024
+const MAX_FILES = 5
+
+const TYPE_ICONS: Record<string, React.FC<{ size: number; color?: string }>> = {
+  flight: Plane,
+  train: Train,
+  hotel: Hotel,
+  restaurant: UtensilsCrossed,
+  car: Car,
+  cruise: Anchor,
+  event: Calendar,
+}
+
+function typeColor(type: string): string {
+  const map: Record<string, string> = {
+    flight: '#3b82f6',
+    train: '#10b981',
+    hotel: '#8b5cf6',
+    restaurant: '#f59e0b',
+    car: '#6b7280',
+    cruise: '#06b6d4',
+    event: '#ec4899',
+  }
+  return map[type] ?? 'var(--text-faint)'
+}
+
+function formatDateTime(iso: unknown): string {
+  if (!iso) return ''
+  const str = typeof iso === 'string' ? iso : typeof iso === 'object' ? JSON.stringify(iso) : String(iso)
+  const date = str.slice(0, 10)
+  const time = str.length > 10 ? str.slice(11, 16) : ''
+  return [date, time].filter(Boolean).join(' ')
+}
+
+export default function BookingImportModal({ isOpen, onClose, tripId, pushUndo }: BookingImportModalProps) {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const loadTrip = useTripStore((s) => s.loadTrip)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const mouseDownTarget = useRef<EventTarget | null>(null)
+
+  type Phase = 'upload' | 'preview' | 'confirming'
+  const [phase, setPhase] = useState<Phase>('upload')
+  const [files, setFiles] = useState<File[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [previewItems, setPreviewItems] = useState<BookingImportPreviewItem[]>([])
+  const [warnings, setWarnings] = useState<string[]>([])
+  const [excluded, setExcluded] = useState<Set<number>>(() => new Set())
+
+  const reset = () => {
+    setPhase('upload')
+    setFiles([])
+    setIsDragOver(false)
+    setLoading(false)
+    setError('')
+    setPreviewItems([])
+    setWarnings([])
+    setExcluded(new Set())
+  }
+
+  useEffect(() => {
+    if (isOpen) reset()
+    // reset is stable — intentional
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen])
+
+  const handleClose = () => { reset(); onClose() }
+
+  const validateFile = (f: File): string | null => {
+    const ext = ('.' + f.name.toLowerCase().split('.').pop()) as string
+    if (!ACCEPTED_EXTS.includes(ext)) return t('reservations.import.unsupportedFormat')
+    if (f.size > MAX_FILE_BYTES) return t('reservations.import.fileTooLarge', { name: f.name })
+    return null
+  }
+
+  const selectFiles = (incoming: File[]) => {
+    const valid: File[] = []
+    let firstErr: string | null = null
+    for (const f of incoming.slice(0, MAX_FILES)) {
+      const err = validateFile(f)
+      if (err) { firstErr = firstErr ?? err; continue }
+      valid.push(f)
+    }
+    if (valid.length === 0) { setError(firstErr ?? ''); return }
+    setFiles(valid)
+    setError(firstErr ?? '')
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const list = e.target.files ? Array.from(e.target.files) : []
+    e.target.value = ''
+    if (list.length) selectFiles(list)
+  }
+
+  const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragOver(true) }
+  const handleDragLeave = (e: React.DragEvent) => { if (e.target === e.currentTarget) setIsDragOver(false) }
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+    const list = Array.from(e.dataTransfer.files)
+    if (list.length) selectFiles(list)
+  }
+
+  const handleParse = async () => {
+    if (files.length === 0 || loading) return
+    setLoading(true)
+    setError('')
+    try {
+      const result = await reservationsApi.importBookingPreview(tripId, files)
+      setPreviewItems(result.items ?? [])
+      setWarnings(result.warnings ?? [])
+      setExcluded(new Set())
+      setPhase('preview')
+    } catch (err: any) {
+      const msg = err?.response?.data?.error ?? t('reservations.import.error')
+      setError(msg)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleConfirm = async () => {
+    const toImport = previewItems.filter((_, i) => !excluded.has(i))
+    if (toImport.length === 0) return
+    setPhase('confirming')
+    setError('')
+    try {
+      const result = await reservationsApi.importBookingConfirm(tripId, toImport)
+      const created = result.created ?? []
+      await loadTrip(tripId)
+
+      if (created.length > 0) {
+        pushUndo?.(t('undo.importBooking'), async () => {
+          try {
+            const { reservationsApi: rApi } = await import('../../api/client')
+            await Promise.all(created.map((r) => rApi.delete(tripId, r.id).catch(() => {})))
+          } catch {}
+          await loadTrip(tripId)
+        })
+        toast.success(t('reservations.import.success', { count: created.length }))
+      } else {
+        toast.warning(t('reservations.import.previewEmpty'))
+      }
+
+      handleClose()
+    } catch (err: any) {
+      setError(err?.response?.data?.error ?? t('reservations.import.error'))
+      setPhase('preview')
+    }
+  }
+
+  const toggleExclude = (idx: number) => {
+    setExcluded(prev => {
+      const next = new Set(prev)
+      if (next.has(idx)) next.delete(idx); else next.add(idx)
+      return next
+    })
+  }
+
+  const activeCount = previewItems.filter((_, i) => !excluded.has(i)).length
+
+  if (!isOpen) return null
+
+  return ReactDOM.createPortal(
+    <div
+      className="bg-[rgba(0,0,0,0.4)]"
+      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+      onMouseDown={e => { mouseDownTarget.current = e.target }}
+      onClick={e => {
+        if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) handleClose()
+        mouseDownTarget.current = null
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        className="bg-surface-card"
+        style={{ borderRadius: 16, width: '100%', maxWidth: 540, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "var(--font-system)", maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
+      >
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
+          {phase === 'preview' && (
+            <button onClick={() => setPhase('upload')} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
+              <ArrowLeft size={16} />
+            </button>
+          )}
+          <div style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
+            {t('reservations.import.title')}
+          </div>
+          <button onClick={handleClose} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+          {/* Upload phase */}
+          {phase === 'upload' && (
+            <>
+              <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 14, lineHeight: 1.45 }}>
+                {t('reservations.import.acceptedFormats')}
+              </div>
+
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={ACCEPTED_EXTS.join(',')}
+                multiple
+                style={{ display: 'none' }}
+                onChange={handleInputChange}
+              />
+
+              <div
+                onClick={() => fileInputRef.current?.click()}
+                onDragOver={handleDragOver}
+                onDragEnter={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                className={isDragOver ? 'bg-surface-tertiary' : 'bg-transparent'}
+                style={{
+                  width: '100%', minHeight: 100, borderRadius: 12,
+                  border: `2px dashed ${isDragOver ? 'var(--accent)' : 'var(--border-primary)'}`,
+                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+                  gap: 6, fontSize: 13, fontWeight: 500, cursor: 'pointer',
+                  marginBottom: 12, padding: 16, boxSizing: 'border-box',
+                  transition: 'border-color 0.15s, background 0.15s',
+                }}
+              >
+                <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
+                {isDragOver ? (
+                  <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('reservations.import.dropActive')}</span>
+                ) : files.length > 0 ? (
+                  <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{files.map(f => f.name).join(', ')}</span>
+                ) : (
+                  <span style={{ color: 'var(--text-faint)', textAlign: 'center', pointerEvents: 'none' }}>{t('reservations.import.dropHere')}</span>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* Preview phase */}
+          {(phase === 'preview' || phase === 'confirming') && (
+            <>
+              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 10 }}>
+                {t('reservations.import.previewHeading', { count: previewItems.length })}
+              </div>
+
+              {previewItems.length === 0 && (
+                <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
+                  {t('reservations.import.previewEmpty')}
+                </div>
+              )}
+
+              {previewItems.map((item, idx) => {
+                const Icon = TYPE_ICONS[item.type] ?? Calendar
+                const isExcluded = excluded.has(idx)
+                const fromEp = item.endpoints?.find(e => e.role === 'from')
+                const toEp = item.endpoints?.find(e => e.role === 'to')
+
+                return (
+                  <div
+                    key={`${item.source.fileName}-${idx}`}
+                    className={isExcluded ? 'bg-surface-tertiary' : 'bg-surface-secondary'}
+                    style={{
+                      borderRadius: 10, padding: '10px 12px', marginBottom: 8,
+                      border: `1px solid ${isExcluded ? 'var(--border-faint)' : 'var(--border-primary)'}`,
+                      opacity: isExcluded ? 0.5 : 1, transition: 'opacity 0.15s',
+                      display: 'flex', gap: 10, alignItems: 'flex-start',
+                    }}
+                  >
+                    <div style={{ flexShrink: 0, marginTop: 2 }}>
+                      <Icon size={15} color={typeColor(item.type)} />
+                    </div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {item.title}
+                      </div>
+                      {fromEp && toEp && (
+                        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>
+                          {fromEp.code ?? fromEp.name} → {toEp.code ?? toEp.name}
+                        </div>
+                      )}
+                      {item.reservation_time && (
+                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
+                          {formatDateTime(item.reservation_time)}
+                          {item.reservation_end_time && ` – ${formatDateTime(item.reservation_end_time)}`}
+                        </div>
+                      )}
+                      {item._accommodation?.check_in && (
+                        <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>
+                          {formatDateTime(item._accommodation.check_in)} – {formatDateTime(item._accommodation.check_out)}
+                        </div>
+                      )}
+                      {item.confirmation_number && (
+                        <div style={{ fontSize: 11, color: 'var(--text-faint)', fontFamily: 'monospace' }}>
+                          {item.confirmation_number}
+                        </div>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => toggleExclude(idx)}
+                      className="bg-transparent text-content-faint"
+                      style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, flexShrink: 0, fontSize: 11, fontFamily: 'inherit', fontWeight: 500 }}
+                      title={t('reservations.import.removeItem')}
+                    >
+                      {isExcluded ? '＋' : <X size={12} />}
+                    </button>
+                  </div>
+                )
+              })}
+            </>
+          )}
+
+          {/* Warnings */}
+          {warnings.length > 0 && (
+            <div className="bg-[rgba(245,158,11,0.08)] text-[#92400e]" style={{ border: '1px solid rgba(245,158,11,0.3)', borderRadius: 10, padding: '8px 10px', fontSize: 12, marginTop: 8, whiteSpace: 'pre-wrap' }}>
+              {warnings.join('\n')}
+            </div>
+          )}
+
+          {/* Error */}
+          {error && (
+            <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{ border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10, padding: '8px 10px', fontSize: 12, whiteSpace: 'pre-wrap', marginTop: 8 }}>
+              {error}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-faint)' }}>
+          <button
+            onClick={handleClose}
+            style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}
+          >
+            {t('common.cancel')}
+          </button>
+
+          {phase === 'upload' && (
+            <button
+              onClick={handleParse}
+              disabled={files.length === 0 || loading}
+              className={files.length > 0 && !loading ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
+              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: files.length > 0 && !loading ? 'pointer' : 'default', fontFamily: 'inherit' }}
+            >
+              {loading ? t('reservations.import.parsing') : t('common.import')}
+            </button>
+          )}
+
+          {(phase === 'preview' || phase === 'confirming') && (
+            <button
+              onClick={handleConfirm}
+              disabled={activeCount === 0 || phase === 'confirming'}
+              className={activeCount > 0 && phase !== 'confirming' ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
+              style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: activeCount > 0 && phase !== 'confirming' ? 'pointer' : 'default', fontFamily: 'inherit' }}
+            >
+              {phase === 'confirming' ? t('common.loading') : t('reservations.import.confirm', { count: activeCount })}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

client/src/components/Planner/DayDetailPanel.tsx

@@ -94,7 +94,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   ) : null
 
   const placesWithCoords = places.filter(p => p.lat && p.lng)
-  const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
+  const font = { fontFamily: "var(--font-system)" }
 
   return (
     <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), ...font }}>

client/src/components/Planner/DayPlanSidebar.constants.ts

@@ -1,10 +1,10 @@
 import {
   FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship,
   Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle,
-  ShoppingBag, Bookmark, Hotel, Utensils, Users,
+  ShoppingBag, Bookmark, Hotel, Utensils, Users, Sailboat, Bike, CarTaxiFront, Route,
 } from 'lucide-react'
 
-export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
+export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, bus: Bus, ferry: Sailboat, bicycle: Bike, taxi: CarTaxiFront, transport_other: Route, event: Ticket, tour: Users, other: FileText }
 
 export const NOTE_ICONS = [
   { id: 'FileText', Icon: FileText },
@@ -33,7 +33,8 @@ export function getNoteIcon(iconId) { return NOTE_ICON_MAP[iconId] || FileText }
 
 export const TYPE_ICONS = {
   flight: '✈️', hotel: '🏨', restaurant: '🍽️', train: '🚆',
-  car: '🚗', cruise: '🚢', event: '🎫', other: '📋',
+  car: '🚗', cruise: '🚢', bus: '🚌', ferry: '⛴️', bicycle: '🚲', taxi: '🚕',
+  transport_other: '🧭', event: '🎫', other: '📋',
 }
 
-export const TRANSPORT_DETAIL_COLORS = { flight: '#3b82f6', train: '#06b6d4', bus: '#f59e0b', car: '#6b7280', cruise: '#0ea5e9' }
+export const TRANSPORT_DETAIL_COLORS = { flight: '#3b82f6', train: '#06b6d4', bus: '#059669', ferry: '#0d9488', bicycle: '#84cc16', taxi: '#ca8a04', car: '#6b7280', cruise: '#0ea5e9', transport_other: '#6b7280' }

client/src/components/Planner/DayPlanSidebar.test.tsx

@@ -982,7 +982,7 @@ describe('DayPlanSidebar', () => {
     }
   })
 
-  it('FE-PLANNER-DAYPLAN-065: note card delete button calls deleteNote', async () => {
+  it('FE-PLANNER-DAYPLAN-065: deleting a note asks for confirmation before calling deleteNote', async () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     const note = buildDayNote({ id: 55, day_id: 10, text: 'My note' })
@@ -992,6 +992,11 @@ describe('DayPlanSidebar', () => {
     const noteEditBtns = document.querySelectorAll('.note-edit-buttons button')
     if (noteEditBtns.length > 1) {
       await user.click(noteEditBtns[1] as HTMLElement)
+      // Clicking delete opens a confirmation dialog rather than deleting immediately.
+      expect(mockDayNotesState.deleteNote).not.toHaveBeenCalled()
+      expect(screen.getByText('Delete note?')).toBeInTheDocument()
+      // Confirming triggers the actual delete.
+      await user.click(screen.getByRole('button', { name: /^delete$/i }))
       expect(mockDayNotesState.deleteNote).toHaveBeenCalled()
     }
   })

client/src/components/Planner/DayPlanSidebar.tsx

@@ -7,6 +7,7 @@ import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLi
 import { assignmentsApi, reservationsApi } from '../../api/client'
 import { calculateRoute, calculateRouteWithLegs, optimizeRoute } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
+import ConfirmDialog from '../shared/ConfirmDialog'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -17,7 +18,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { isDayInAccommodationRange } from '../../utils/dayOrder'
+import { isDayInAccommodationRange, getAccommodationAnchors } from '../../utils/dayOrder'
 import {
   TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay,
   getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
@@ -451,6 +452,10 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     _openEditNote(dayId, note)
   }
 
+  // Deleting a note asks for confirmation first — the edit/delete icons sit close together and are
+  // easy to mis-tap on touch devices, where an accidental delete was previously unrecoverable.
+  const [pendingDeleteNote, setPendingDeleteNote] = useState<{ dayId: number; noteId: number } | null>(null)
+
   const deleteNote = async (dayId: number, noteId: number, e?: React.MouseEvent) => {
     e?.stopPropagation()
     await _deleteNote(dayId, noteId)
@@ -703,8 +708,14 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     // Optimize only unlocked assignments (work on assignments, not places)
     const unlockedWithCoords = unlocked.filter(a => a.place?.lat && a.place?.lng)
     const unlockedNoCoords = unlocked.filter(a => !a.place?.lat || !a.place?.lng)
+    // Anchor the route on the day's accommodation (when enabled): a loop out from and back to the
+    // hotel, or — on a transfer day — a run from the hotel you leave to the one you arrive at.
+    const day = days.find(d => d.id === selectedDayId)
+    const anchors = day && useSettingsStore.getState().settings.optimize_from_accommodation !== false
+      ? getAccommodationAnchors(day, days, accommodations)
+      : {}
     const optimizedAssignments = unlockedWithCoords.length >= 2
-      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id }))).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
+      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id })), anchors).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
       : unlockedWithCoords
     const optimizedQueue = [...optimizedAssignments, ...unlockedNoCoords]
 
@@ -717,7 +728,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     }
 
     await onReorder(selectedDayId, result.map(a => a.id))
-    toast.success(t('dayplan.toast.routeOptimized'))
+    const usedHotel = !!(anchors.start || anchors.end)
+    toast.success(usedHotel ? t('dayplan.toast.routeOptimizedFromHotel') : t('dayplan.toast.routeOptimized'))
     const capturedDayId = selectedDayId
     pushUndo?.(t('undo.optimize'), async () => {
       await tripActions.reorderAssignments(tripId, capturedDayId, prevIds)
@@ -851,6 +863,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     cancelNote,
     saveNote,
     deleteNote,
+    pendingDeleteNote,
+    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -993,6 +1007,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     cancelNote,
     saveNote,
     deleteNote,
+    pendingDeleteNote,
+    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -1068,7 +1084,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     anyGeoPlace,
   } = S
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "var(--font-system)" }}>
       {/* Toolbar */}
       <DayPlanSidebarToolbar
         tripId={tripId}
@@ -1608,7 +1624,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                       </button>
                                     )}
                                     {canEditDays && (() => {
-                                      const isTransport = ['flight','train','car','cruise','bus'].includes(res.type)
+                                      const isTransport = TRANSPORT_TYPES.has(res.type)
                                       const handler = isTransport ? onEditTransport : onEditReservation
                                       if (!handler) return null
                                       return (
@@ -1908,7 +1924,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           onContextMenu={canEditDays ? e => ctxMenu.open(e, [
                             { label: t('common.edit'), icon: Pencil, onClick: () => openEditNote(day.id, note) },
                             { divider: true },
-                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => deleteNote(day.id, note.id) },
+                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => setPendingDeleteNote({ dayId: day.id, noteId: note.id }) },
                           ]) : undefined}
                           onMouseEnter={e => {
                             const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
@@ -1950,7 +1966,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           </div>
                           {canEditDays && <div className="note-edit-buttons" style={{ display: 'flex', gap: 1, flexShrink: 0, opacity: 0, transition: 'opacity 0.15s' }}>
                             <button onClick={e => openEditNote(day.id, note, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Pencil size={10} /></button>
-                            <button onClick={e => deleteNote(day.id, note.id, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
+                            <button onClick={e => { e.stopPropagation(); setPendingDeleteNote({ dayId: day.id, noteId: note.id }) }} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
                           </div>}
                           {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
                             <button onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'up') }} disabled={noteIdx === 0} className={noteIdx === 0 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === 0 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}><ChevronUp size={12} strokeWidth={2} /></button>
@@ -2093,6 +2109,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         t={t}
       />
 
+      {/* Confirm: delete a day note — guards against accidental taps on touch devices */}
+      <ConfirmDialog
+        isOpen={!!pendingDeleteNote}
+        onClose={() => setPendingDeleteNote(null)}
+        onConfirm={() => { if (pendingDeleteNote) deleteNote(pendingDeleteNote.dayId, pendingDeleteNote.noteId) }}
+        title={t('dayplan.confirmDeleteNoteTitle')}
+        message={t('dayplan.confirmDeleteNoteBody')}
+      />
+
       {/* Transport-Detail-Modal */}
       <DayPlanSidebarTransportDetailModal
         transportDetail={transportDetail}

client/src/components/Planner/FileImportModal.tsx

@@ -31,7 +31,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
   const loadTrip = useTripStore((s) => s.loadTrip)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  const [file, setFile] = useState<File | null>(null)
+  const [files, setFiles] = useState<File[]>([])
   const [isDragOver, setIsDragOver] = useState(false)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
@@ -51,7 +51,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
   }
 
   const reset = () => {
-    setFile(null)
+    setFiles([])
     setIsDragOver(false)
     setLoading(false)
     setError('')
@@ -67,14 +67,14 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
     if (initialFile) {
       const err = validateFile(initialFile)
       if (err) {
-        setFile(null)
+        setFiles([])
         setError(err)
       } else {
-        setFile(initialFile)
+        setFiles([initialFile])
         setError('')
       }
     } else {
-      setFile(null)
+      setFiles([])
       setError('')
     }
   // validateFile uses t() which is stable — intentionally omitted from deps
@@ -86,22 +86,32 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
     onClose()
   }
 
-  const selectFile = (f: File) => {
-    const validationError = validateFile(f)
-    if (validationError) {
-      setError(validationError)
-      setFile(null)
+  const selectFiles = (incoming: File[]) => {
+    if (incoming.length === 0) return
+    const valid: File[] = []
+    let firstError: string | null = null
+    for (const f of incoming) {
+      const validationError = validateFile(f)
+      if (validationError) {
+        firstError = firstError ?? validationError
+        continue
+      }
+      valid.push(f)
+    }
+    if (valid.length === 0) {
+      setError(firstError ?? '')
+      setFiles([])
       return
     }
-    setFile(f)
-    setError('')
+    setFiles(valid)
+    setError(firstError ?? '')
     setSummary(null)
   }
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const f = e.target.files?.[0]
+    const list = e.target.files ? Array.from(e.target.files) : []
     e.target.value = ''
-    if (f) selectFile(f)
+    if (list.length) selectFiles(list)
   }
 
   const handleDragOver = (e: React.DragEvent) => {
@@ -116,71 +126,92 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault()
     setIsDragOver(false)
-    const f = e.dataTransfer.files[0]
-    if (f) selectFile(f)
+    const list = Array.from(e.dataTransfer.files)
+    if (list.length) selectFiles(list)
   }
 
   const handleImport = async () => {
-    if (!file || loading) return
-    const ext = file.name.toLowerCase().split('.').pop()
+    if (files.length === 0 || loading) return
     setLoading(true)
     setError('')
     setSummary(null)
 
-    try {
-      if (ext === 'gpx') {
-        const result = await placesApi.importGpx(tripId, file, gpxOpts)
-        await loadTrip(tripId)
-        if (result.count === 0 && result.skipped > 0) {
-          toast.warning(t('places.importAllSkipped'))
+    let totalCreated = 0
+    let totalSkipped = 0
+    const createdIds: number[] = []
+    const errors: string[] = []
+    let mergedSummary: PlacesImportSummary | null = null
+    let importedGpx = false
+    let importedKml = false
+
+    for (const f of files) {
+      const ext = f.name.toLowerCase().split('.').pop()
+      try {
+        if (ext === 'gpx') {
+          importedGpx = true
+          const result = await placesApi.importGpx(tripId, f, gpxOpts)
+          totalCreated += result.count ?? 0
+          totalSkipped += result.skipped ?? 0
+          if (result.places?.length > 0) createdIds.push(...result.places.map((p: { id: number }) => p.id))
         } else {
-          toast.success(t('places.gpxImported', { count: result.count }))
-        }
-        if (result.places?.length > 0) {
-          const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
-          pushUndo?.(t('undo.importGpx'), async () => {
-            try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
-            await loadTrip(tripId)
-          })
-        }
-        handleClose()
-      } else {
-        const result = await placesApi.importMapFile(tripId, file, kmlOpts)
-        await loadTrip(tripId)
-        setSummary(result.summary || null)
-        if (result.count === 0 && (result.summary?.skippedCount ?? 0) > 0) {
-          toast.warning(t('places.importAllSkipped'))
-        } else {
-          toast.success(t('places.kmlKmzImported', { count: result.count }))
-        }
-        if (result.summary?.errors?.length > 0) {
-          setError(result.summary.errors.join('\n'))
-        }
-        if (result.places?.length > 0) {
-          const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
-          pushUndo?.(t('undo.importKeyholeMarkup'), async () => {
-            try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
-            await loadTrip(tripId)
-          })
+          importedKml = true
+          const result = await placesApi.importMapFile(tripId, f, kmlOpts)
+          totalCreated += result.count ?? 0
+          if (result.places?.length > 0) createdIds.push(...result.places.map((p: { id: number }) => p.id))
+          const s = result.summary as PlacesImportSummary | undefined
+          if (s) {
+            mergedSummary = mergedSummary
+              ? {
+                  totalPlacemarks: mergedSummary.totalPlacemarks + s.totalPlacemarks,
+                  createdCount: mergedSummary.createdCount + s.createdCount,
+                  skippedCount: mergedSummary.skippedCount + s.skippedCount,
+                  warnings: [...mergedSummary.warnings, ...(s.warnings ?? [])],
+                  errors: [...mergedSummary.errors, ...(s.errors ?? [])],
+                }
+              : s
+            totalSkipped += s.skippedCount ?? 0
+          }
         }
+      } catch (err: any) {
+        const message = err?.response?.data?.error || t('places.importFileError')
+        errors.push(files.length > 1 ? `${f.name}: ${message}` : message)
       }
-    } catch (err: any) {
-      const responseSummary = err?.response?.data?.summary as PlacesImportSummary | undefined
-      if (responseSummary) setSummary(responseSummary)
-      const message = err?.response?.data?.error || t('places.importFileError')
-      setError(message)
-      toast.error(message)
-    } finally {
-      setLoading(false)
     }
+
+    await loadTrip(tripId)
+
+    if (createdIds.length > 0) {
+      pushUndo?.(importedGpx && !importedKml ? t('undo.importGpx') : t('undo.importKeyholeMarkup'), async () => {
+        try { await placesApi.bulkDelete(tripId, createdIds) } catch {}
+        await loadTrip(tripId)
+      })
+    }
+
+    if (totalCreated > 0) {
+      const key = importedKml && !importedGpx ? 'places.kmlKmzImported' : 'places.gpxImported'
+      toast.success(t(key, { count: totalCreated }))
+    } else if (totalSkipped > 0 && errors.length === 0) {
+      toast.warning(t('places.importAllSkipped'))
+    }
+
+    if (mergedSummary) setSummary(mergedSummary)
+    if (errors.length > 0) {
+      setError(errors.join('\n'))
+      toast.error(errors[0])
+    }
+
+    setLoading(false)
+
+    // Close once everything succeeded and there's no KML summary left to surface.
+    if (errors.length === 0 && !mergedSummary) handleClose()
   }
 
-  const fileExt = file?.name.toLowerCase().split('.').pop() ?? ''
-  const isGpx = fileExt === 'gpx'
-  const isKml = fileExt === 'kml' || fileExt === 'kmz'
+  const exts = files.map(f => f.name.toLowerCase().split('.').pop() ?? '')
+  const isGpx = exts.includes('gpx')
+  const isKml = exts.some(e => e === 'kml' || e === 'kmz')
   const gpxNoneSelected = isGpx && !gpxOpts.waypoints && !gpxOpts.routes && !gpxOpts.tracks
   const kmlNoneSelected = isKml && !kmlOpts.points && !kmlOpts.paths
-  const canImport = !!file && !loading && !gpxNoneSelected && !kmlNoneSelected
+  const canImport = files.length > 0 && !loading && !gpxNoneSelected && !kmlNoneSelected
 
   if (!isOpen) return null
 
@@ -193,7 +224,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
       <div
         onClick={e => e.stopPropagation()}
         className="bg-surface-card"
-        style={{ borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}
+        style={{ borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "var(--font-system)" }}
       >
         <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 6 }}>
           {t('places.importFile')}
@@ -206,6 +237,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
           ref={fileInputRef}
           type="file"
           accept=".gpx,.kml,.kmz"
+          multiple
           style={{ display: 'none' }}
           onChange={handleInputChange}
         />
@@ -240,8 +272,8 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
           <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
           {isDragOver ? (
             <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('places.importFileDropActive')}</span>
-          ) : file ? (
-            <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{file.name}</span>
+          ) : files.length > 0 ? (
+            <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{files.map(f => f.name).join(', ')}</span>
           ) : (
             <span style={{ color: 'var(--text-faint)', textAlign: 'center', pointerEvents: 'none' }}>{t('places.importFileDropHere')}</span>
           )}

client/src/components/Planner/PlaceFormModal.test.tsx

@@ -225,13 +225,16 @@ describe('PlaceFormModal', () => {
     expect(screen.getByDisplayValue('48.8584')).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-PLACEFORM-021: maps search error shows toast', async () => {
+  it('FE-PLANNER-PLACEFORM-021: maps search error surfaces the server-provided reason', async () => {
     const addToast = vi.fn();
     window.__addToast = addToast;
 
     const user = userEvent.setup();
+    // The backend forwards the real upstream error (e.g. a Google Places API message);
+    // the modal must show it instead of a generic "search failed" so the cause is visible.
     server.use(
-      http.post('/api/maps/search', () => HttpResponse.json({ error: 'fail' }, { status: 500 })),
+      http.post('/api/maps/search', () =>
+        HttpResponse.json({ error: 'Places API (New) has not been used in project 123 or it is disabled' }, { status: 403 })),
     );
 
     render(<PlaceFormModal {...defaultProps} />);
@@ -241,7 +244,7 @@ describe('PlaceFormModal', () => {
 
     await waitFor(() => {
       expect(addToast).toHaveBeenCalledWith(
-        expect.stringMatching(/search failed/i),
+        expect.stringMatching(/Places API \(New\) has not been used/i),
         'error',
         undefined,
       );
@@ -267,6 +270,18 @@ describe('PlaceFormModal', () => {
     expect(screen.getByText(/No category/i)).toBeInTheDocument();
   });
 
+  it('FE-PLANNER-PLACEFORM-023b: editing a place shows its assigned category, not the placeholder (#1134)', () => {
+    // Regression: form.category_id is a string but the option values were numbers,
+    // so CustomSelect's strict-equality match failed and the trigger fell back to
+    // "No category". With string option values the chosen category renders.
+    const cat = buildCategory({ name: 'Museums' });
+    const place = buildPlace({ name: 'Louvre', category_id: cat.id });
+    render(<PlaceFormModal {...defaultProps} place={place} categories={[cat]} />);
+    // Dropdown is closed, so the only place the category name can appear is the trigger.
+    expect(screen.getByText('Museums')).toBeInTheDocument();
+    expect(screen.queryByText(/No category/i)).not.toBeInTheDocument();
+  });
+
   it('FE-PLANNER-PLACEFORM-024: onCategoryCreated is called when creating a category', async () => {
     const onCategoryCreated = vi.fn().mockResolvedValue({ id: 99, name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
     // Directly invoke handleCreateCategory by setting showNewCategory via the category name input

client/src/components/Planner/PlaceFormModal.tsx

@@ -10,6 +10,7 @@ import { Search, Paperclip, X, AlertTriangle, Loader2 } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import { DEFAULT_FORM, isGoogleMapsUrl, type PlaceFormData } from './PlaceFormModal.helpers'
+import { getApiErrorMessage } from '../../utils/apiError'
 import type { Place, Category, Assignment } from '../../types'
 
 // The submit payload mirrors the form, but lat/lng are parsed to numbers and
@@ -188,7 +189,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
       const result = await mapsApi.search(mapsSearch, language)
       setMapsResults(result.places || [])
     } catch (err: unknown) {
-      toast.error(t('places.mapsSearchError'))
+      toast.error(getApiErrorMessage(err, t('places.mapsSearchError')))
     } finally {
       setIsSearchingMaps(false)
     }
@@ -228,7 +229,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     } catch (err) {
       console.error('Failed to fetch place details:', err)
       setMapsSearch(previousSearch)
-      toast.error(t('places.mapsSearchError'))
+      toast.error(getApiErrorMessage(err, t('places.mapsSearchError')))
     } finally {
       setIsSearchingMaps(false)
     }
@@ -635,7 +636,10 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
                 options={[
                   { value: '', label: t('places.noCategory') },
                   ...(categories || []).map(c => ({
-                    value: c.id,
+                    // form.category_id is a string; CustomSelect matches options by
+                    // strict equality, so the option value must be a string too —
+                    // otherwise the chosen category never renders in the trigger.
+                    value: String(c.id),
                     label: c.name,
                   })),
                 ]}

client/src/components/Planner/PlaceInspector.tsx

@@ -197,7 +197,7 @@ export default function PlaceInspector({
         transform: 'translateX(-50%)',
         width: `min(800px, calc(100% - ${leftWidth}px - ${rightWidth}px - 32px))`,
         zIndex: 50,
-        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+        fontFamily: "var(--font-system)",
       }}
     >
       <div className="bg-surface-elevated" style={{

client/src/components/Planner/PlacesSidebar.tsx

@@ -23,7 +23,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar(props: PlacesSidebarProp
       onDragOver={handleSidebarDragOver}
       onDragLeave={handleSidebarDragLeave}
       onDrop={handleSidebarDrop}
-      style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", position: 'relative' }}
+      style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "var(--font-system)", position: 'relative' }}
     >
       {sidebarDragOver && <PlacesDropOverlay {...S} />}
       {/* Kopfbereich */}

client/src/components/Planner/ReservationsPanel.tsx

@@ -6,9 +6,9 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import {
-  Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, MapPin,
+  Plane, Hotel, Utensils, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Ticket, FileText, MapPin,
   Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
-  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle,
+  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle, Download,
 } from 'lucide-react'
 import { openFile } from '../../utils/fileDownload'
 import Markdown from 'react-markdown'
@@ -31,8 +31,13 @@ const TYPE_OPTIONS = [
   { value: 'hotel',       labelKey: 'reservations.type.hotel',       Icon: Hotel, color: '#8b5cf6' },
   { value: 'restaurant',  labelKey: 'reservations.type.restaurant',  Icon: Utensils, color: '#ef4444' },
   { value: 'train',       labelKey: 'reservations.type.train',       Icon: Train, color: '#06b6d4' },
+  { value: 'bus',         labelKey: 'reservations.type.bus',         Icon: Bus, color: '#059669' },
   { value: 'car',         labelKey: 'reservations.type.car',         Icon: Car, color: '#6b7280' },
+  { value: 'taxi',        labelKey: 'reservations.type.taxi',        Icon: CarTaxiFront, color: '#ca8a04' },
+  { value: 'bicycle',     labelKey: 'reservations.type.bicycle',     Icon: Bike, color: '#84cc16' },
   { value: 'cruise',      labelKey: 'reservations.type.cruise',      Icon: Ship, color: '#0ea5e9' },
+  { value: 'ferry',       labelKey: 'reservations.type.ferry',       Icon: Sailboat, color: '#0d9488' },
+  { value: 'transport_other', labelKey: 'reservations.type.transport_other', Icon: Route, color: '#6b7280' },
   { value: 'event',       labelKey: 'reservations.type.event',       Icon: Ticket, color: '#f59e0b' },
   { value: 'tour',        labelKey: 'reservations.type.tour',        Icon: Users, color: '#10b981' },
   { value: 'other',       labelKey: 'reservations.type.other',       Icon: FileText, color: '#6b7280' },
@@ -104,7 +109,7 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
   const hasCode = !!r.confirmation_number
   const dateCols = [hasDate, hasTime, hasCode].filter(Boolean).length
 
-  const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
+  const TRANSPORT_TYPES_SET = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
   const isTransportType = TRANSPORT_TYPES_SET.has(r.type)
   const isHotel = r.type === 'hotel'
   const startDay = r.day_id ? days.find(d => d.id === r.day_id)
@@ -463,6 +468,8 @@ interface ReservationsPanelProps {
   assignments: AssignmentsMap
   files?: TripFile[]
   onAdd: () => void
+  onImport?: () => void
+  bookingImportAvailable?: boolean
   onEdit: (reservation: Reservation) => void
   onDelete: (id: number) => void
   onNavigateToFiles: () => void
@@ -470,7 +477,7 @@ interface ReservationsPanelProps {
   addManualKey?: string
 }
 
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
@@ -512,7 +519,7 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
   }, [reservations])
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: "var(--font-system)" }}>
       {/* Unified toolbar */}
       <div style={{ padding: '24px 28px 0' }} className="max-md:!px-4 max-md:!pt-4">
         <div className="bg-surface-tertiary" style={{
@@ -577,20 +584,35 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
           )}
 
           {canEdit && (
-            <button onClick={onAdd} className="bg-accent text-accent-text" style={{
-              appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
-              display: 'inline-flex', alignItems: 'center', gap: 6,
-              padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
-              flexShrink: 0,
-              marginLeft: 'auto',
-              transition: 'opacity 0.15s ease',
-            }}
-              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
-              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
-            >
-              <Plus size={14} strokeWidth={2.5} />
-              <span className="hidden sm:inline">{t(addManualKey)}</span>
-            </button>
+            <div style={{ display: 'flex', gap: 6, marginLeft: 'auto', flexShrink: 0 }}>
+              {onImport && bookingImportAvailable && (
+                <button onClick={onImport} className="bg-surface-card text-content" style={{
+                  appearance: 'none', border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
+                  display: 'inline-flex', alignItems: 'center', gap: 6,
+                  padding: '8px 13px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                  transition: 'opacity 0.15s ease',
+                }}
+                  onMouseEnter={e => e.currentTarget.style.opacity = '0.75'}
+                  onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+                  title={t('reservations.import.title')}
+                >
+                  <Download size={14} strokeWidth={2} />
+                  <span className="hidden sm:inline">{t('reservations.import.cta')}</span>
+                </button>
+              )}
+              <button onClick={onAdd} className="bg-accent text-accent-text" style={{
+                appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                display: 'inline-flex', alignItems: 'center', gap: 6,
+                padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                transition: 'opacity 0.15s ease',
+              }}
+                onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+                onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+              >
+                <Plus size={14} strokeWidth={2.5} />
+                <span className="hidden sm:inline">{t(addManualKey)}</span>
+              </button>
+            </div>
           )}
         </div>
       </div>

client/src/components/Planner/TransportModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react'
 import { useParams } from 'react-router-dom'
-import { Plane, Train, Car, Ship, Paperclip, FileText, X, ExternalLink, Link2 } from 'lucide-react'
+import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Paperclip, FileText, X, ExternalLink, Link2 } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
@@ -15,7 +15,7 @@ import { openFile } from '../../utils/fileDownload'
 import apiClient from '../../api/client'
 import type { Day, Reservation, ReservationEndpoint, TripFile } from '../../types'
 
-const TRANSPORT_TYPES = ['flight', 'train', 'car', 'cruise'] as const
+const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
 
 interface EndpointPick {
@@ -64,10 +64,15 @@ function locationFromEndpoint(e: ReservationEndpoint | undefined): LocationPoint
 }
 
 const TYPE_OPTIONS = [
-  { value: 'flight', labelKey: 'reservations.type.flight', Icon: Plane },
-  { value: 'train',  labelKey: 'reservations.type.train',  Icon: Train },
-  { value: 'car',    labelKey: 'reservations.type.car',    Icon: Car },
-  { value: 'cruise', labelKey: 'reservations.type.cruise', Icon: Ship },
+  { value: 'flight',          labelKey: 'reservations.type.flight',          Icon: Plane },
+  { value: 'train',           labelKey: 'reservations.type.train',           Icon: Train },
+  { value: 'bus',             labelKey: 'reservations.type.bus',             Icon: Bus },
+  { value: 'car',             labelKey: 'reservations.type.car',             Icon: Car },
+  { value: 'taxi',            labelKey: 'reservations.type.taxi',            Icon: CarTaxiFront },
+  { value: 'bicycle',         labelKey: 'reservations.type.bicycle',         Icon: Bike },
+  { value: 'cruise',          labelKey: 'reservations.type.cruise',          Icon: Ship },
+  { value: 'ferry',           labelKey: 'reservations.type.ferry',           Icon: Sailboat },
+  { value: 'transport_other', labelKey: 'reservations.type.transport_other', Icon: Route },
 ]
 
 const defaultForm = {

client/src/components/Settings/AccountTab.tsx

@@ -8,6 +8,7 @@ import { authApi, adminApi } from '../../api/client'
 import { getApiErrorMessage } from '../../types'
 import type { UserWithOidc } from '../../types'
 import Section from './Section'
+import PasskeysSection from './PasskeysSection'
 
 const MFA_BACKUP_SESSION_KEY = 'trek_mfa_backup_codes_pending'
 
@@ -395,6 +396,9 @@ export default function AccountTab(): React.ReactElement {
           </div>
         </div>
 
+        {/* Passkeys */}
+        <PasskeysSection demoMode={demoMode} />
+
         {/* Avatar */}
         <div className="flex items-center gap-4">
           <div style={{ position: 'relative', flexShrink: 0 }}>

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -3,6 +3,8 @@ import { Palette, Sun, Moon, Monitor, ChevronDown, Check } from 'lucide-react'
 import { SUPPORTED_LANGUAGES, useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
+import CustomSelect from '../shared/CustomSelect'
+import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
 import Section from './Section'
 
 export default function DisplaySettingsTab(): React.ReactElement {
@@ -28,6 +30,21 @@ export default function DisplaySettingsTab(): React.ReactElement {
 
   return (
     <Section title={t('settings.display')} icon={Palette}>
+      {/* Display currency */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.currency')}</label>
+        <CustomSelect
+          value={settings.default_currency || 'EUR'}
+          onChange={async v => {
+            try { await updateSetting('default_currency', String(v)) }
+            catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+          }}
+          options={CURRENCIES.map(c => ({ value: c, label: `${c} — ${SYMBOLS[c] || c}` }))}
+          searchable
+        />
+        <p className="text-xs text-content-faint mt-2">{t('settings.currencyHint')}</p>
+      </div>
+
       {/* Color Mode */}
       <div>
         <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.colorMode')}</label>
@@ -274,6 +291,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
           ))}
         </div>
       </div>
+
+      {/* Optimize route from accommodation */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.optimizeFromAccommodation')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('optimize_from_accommodation', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.optimize_from_accommodation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.optimize_from_accommodation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+        <p className="text-xs mt-1 text-content-faint">{t('settings.optimizeFromAccommodationHint')}</p>
+      </div>
     </Section>
   )
 }

client/src/components/Settings/PasskeysSection.tsx

@@ -0,0 +1,271 @@
+import React, { useEffect, useState } from 'react'
+import { Fingerprint, Plus, Trash2, Pencil, Check, X } from 'lucide-react'
+import { startRegistration } from '@simplewebauthn/browser'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { authApi, type PasskeyCredential } from '../../api/client'
+import { getApiErrorMessage } from '../../types'
+
+/** Parse a SQLite UTC timestamp ("YYYY-MM-DD HH:MM:SS") into a local date string. */
+function fmtDate(ts: string | null): string | null {
+  if (!ts) return null
+  const iso = ts.includes('T') ? ts : ts.replace(' ', 'T')
+  const d = new Date(iso.endsWith('Z') ? iso : iso + 'Z')
+  return Number.isNaN(d.getTime()) ? null : d.toLocaleDateString()
+}
+
+/** True when the browser cancellation / no-matching-credential DOMExceptions fire. */
+function isWebauthnAbort(err: unknown): boolean {
+  const name = (err as { name?: string })?.name
+  return name === 'NotAllowedError' || name === 'AbortError'
+}
+
+/**
+ * Passkey enrolment + management. Mirrors the MFA block: list / add (with a
+ * password step-up + the WebAuthn ceremony) / rename / delete (password step-up).
+ * The "Add a passkey" action only appears when the instance toggle is on AND a
+ * usable RP ID resolves; the existing-credential list stays reachable even when
+ * the feature is later disabled so users can always clean up.
+ */
+export default function PasskeysSection({ demoMode }: { demoMode?: boolean }): React.ReactElement | null {
+  const { t } = useTranslation()
+  const toast = useToast()
+
+  const [enabled, setEnabled] = useState(false)
+  const [configured, setConfigured] = useState(false)
+  const [creds, setCreds] = useState<PasskeyCredential[]>([])
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+
+  const [addOpen, setAddOpen] = useState(false)
+  const [addPwd, setAddPwd] = useState('')
+  const [addName, setAddName] = useState('')
+
+  const [renamingId, setRenamingId] = useState<number | null>(null)
+  const [renameVal, setRenameVal] = useState('')
+
+  const [deletingId, setDeletingId] = useState<number | null>(null)
+  const [deletePwd, setDeletePwd] = useState('')
+
+  const refresh = () => {
+    authApi.passkey.list()
+      .then(r => setCreds(r.credentials))
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    authApi.getAppConfig?.()
+      .then(c => { setEnabled(!!c?.passkey_login); setConfigured(!!c?.passkey_configured) })
+      .catch(() => {})
+    refresh()
+  }, [])
+
+  const canAdd = enabled && configured
+
+  const handleAdd = async () => {
+    if (!addPwd) { toast.error(t('settings.passkey.passwordRequired')); return }
+    setBusy(true)
+    try {
+      const options = await authApi.passkey.registerOptions(addPwd)
+      const attResp = await startRegistration({ optionsJSON: options })
+      await authApi.passkey.registerVerify(attResp, addName.trim() || undefined)
+      toast.success(t('settings.passkey.addedToast'))
+      setAddOpen(false); setAddPwd(''); setAddName('')
+      refresh()
+    } catch (err: unknown) {
+      if (isWebauthnAbort(err)) toast.error(t('settings.passkey.cancelled'))
+      else toast.error(getApiErrorMessage(err, t('settings.passkey.addError')))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleRename = async (id: number) => {
+    const name = renameVal.trim()
+    if (!name) { setRenamingId(null); return }
+    try {
+      await authApi.passkey.rename(id, name)
+      setRenamingId(null)
+      refresh()
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    }
+  }
+
+  const handleDelete = async (id: number) => {
+    if (!deletePwd) { toast.error(t('settings.passkey.passwordRequired')); return }
+    setBusy(true)
+    try {
+      await authApi.passkey.delete(id, deletePwd)
+      toast.success(t('settings.passkey.deleted'))
+      setDeletingId(null); setDeletePwd('')
+      refresh()
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (demoMode) return null
+  // Nothing to show: feature off and the user has no credentials to manage.
+  if (!loading && !enabled && creds.length === 0) return null
+
+  return (
+    <div className="pt-4 mt-4 border-t border-edge-secondary">
+      <div className="flex items-center gap-2 mb-3">
+        <Fingerprint className="w-5 h-5 text-content-secondary" />
+        <h3 className="font-semibold text-base m-0 text-content">{t('settings.passkey.title')}</h3>
+      </div>
+      <div className="space-y-3">
+        <p className="text-sm m-0 text-content-muted" style={{ lineHeight: 1.5 }}>{t('settings.passkey.description')}</p>
+
+        {enabled && !configured && (
+          <p className="text-sm m-0 text-amber-700">{t('settings.passkey.notConfigured')}</p>
+        )}
+
+        {creds.length > 0 && (
+          <ul className="space-y-2 list-none p-0 m-0">
+            {creds.map(c => (
+              <li key={c.id} className="flex items-center gap-3 p-3 rounded-lg border border-edge bg-surface-card">
+                <Fingerprint className="w-4 h-4 flex-shrink-0 text-content-secondary" />
+                <div className="flex-1 min-w-0">
+                  {renamingId === c.id ? (
+                    <div className="flex items-center gap-2">
+                      <input
+                        autoFocus
+                        type="text"
+                        value={renameVal}
+                        onChange={e => setRenameVal(e.target.value)}
+                        onKeyDown={e => { if (e.key === 'Enter') handleRename(c.id); if (e.key === 'Escape') setRenamingId(null) }}
+                        className="flex-1 px-2 py-1 border border-slate-300 rounded text-sm"
+                      />
+                      <button type="button" onClick={() => handleRename(c.id)} className="p-1 text-emerald-600" aria-label={t('common.save')}><Check size={16} /></button>
+                      <button type="button" onClick={() => setRenamingId(null)} className="p-1 text-content-muted" aria-label={t('common.cancel')}><X size={16} /></button>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium text-content truncate">{c.name || t('settings.passkey.defaultName')}</span>
+                        <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-surface-hover text-content-secondary">
+                          {c.backed_up ? t('settings.passkey.synced') : t('settings.passkey.deviceBound')}
+                        </span>
+                      </div>
+                      <p className="text-xs m-0 mt-0.5 text-content-faint">
+                        {t('settings.passkey.added')}: {fmtDate(c.created_at) || '—'}
+                        {' · '}
+                        {c.last_used_at
+                          ? `${t('settings.passkey.lastUsed')}: ${fmtDate(c.last_used_at)}`
+                          : t('settings.passkey.neverUsed')}
+                      </p>
+                    </>
+                  )}
+                </div>
+                {renamingId !== c.id && (
+                  <div className="flex items-center gap-1 flex-shrink-0">
+                    <button
+                      type="button"
+                      onClick={() => { setRenamingId(c.id); setRenameVal(c.name || '') }}
+                      className="p-1.5 rounded text-content-muted hover:text-content"
+                      aria-label={t('settings.passkey.rename')}
+                    >
+                      <Pencil size={14} />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => { setDeletingId(c.id); setDeletePwd('') }}
+                      className="p-1.5 rounded text-red-500 hover:bg-red-50"
+                      aria-label={t('common.delete')}
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/* Delete confirmation (password step-up) */}
+        {deletingId !== null && (
+          <div className="space-y-2 p-3 rounded-lg border border-red-200 bg-red-50/40">
+            <p className="text-sm font-medium m-0 text-content">{t('settings.passkey.deleteConfirm')}</p>
+            <input
+              type="password"
+              value={deletePwd}
+              onChange={e => setDeletePwd(e.target.value)}
+              placeholder={t('settings.currentPassword')}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+            />
+            <div className="flex gap-2">
+              <button
+                type="button"
+                disabled={busy || !deletePwd}
+                onClick={() => handleDelete(deletingId)}
+                className="px-4 py-2 rounded-lg text-sm font-medium text-red-600 border border-red-200 hover:bg-red-50 disabled:opacity-50"
+              >
+                {t('common.delete')}
+              </button>
+              <button
+                type="button"
+                onClick={() => { setDeletingId(null); setDeletePwd('') }}
+                className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary"
+              >
+                {t('common.cancel')}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Add a passkey */}
+        {canAdd && (addOpen ? (
+          <div className="space-y-2 p-3 rounded-lg border border-edge bg-surface-hover">
+            <p className="text-sm font-medium m-0 text-content">{t('settings.passkey.addTitle')}</p>
+            <p className="text-xs m-0 text-content-muted">{t('settings.passkey.passwordPrompt')}</p>
+            <input
+              type="password"
+              value={addPwd}
+              onChange={e => setAddPwd(e.target.value)}
+              placeholder={t('settings.currentPassword')}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+            />
+            <input
+              type="text"
+              value={addName}
+              onChange={e => setAddName(e.target.value)}
+              placeholder={t('settings.passkey.namePlaceholder')}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
+            />
+            <div className="flex gap-2">
+              <button
+                type="button"
+                disabled={busy || !addPwd}
+                onClick={handleAdd}
+                className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
+              >
+                {busy ? <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> : t('settings.passkey.add')}
+              </button>
+              <button
+                type="button"
+                onClick={() => { setAddOpen(false); setAddPwd(''); setAddName('') }}
+                className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary"
+              >
+                {t('common.cancel')}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setAddOpen(true)}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors border border-edge bg-surface-card text-content"
+          >
+            <Plus size={14} />
+            {t('settings.passkey.add')}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

client/src/components/Todo/TodoListPanel.tsx

@@ -222,7 +222,7 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
       )}
       {isAddingNew && !selectedItem && !isMobile && ReactDOM.createPortal(
         <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
-          className="modal-backdrop"
+          className="trek-modal-backdrop"
           style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(15,23,42,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'flex-start', paddingTop: 'calc(var(--nav-h) + 60px)', paddingBottom: 40 }}>
           <div style={{ width: 'min(520px, 92vw)', maxHeight: 'calc(100vh - var(--nav-h) - 120px)', overflow: 'auto', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.25)' }}
             ref={el => { if (el) { const child = el.firstElementChild as HTMLElement; if (child) { child.style.width = '100%'; child.style.borderLeft = 'none'; child.style.borderRadius = '16px' } } }}>
@@ -240,7 +240,7 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
       )}
       {isAddingNew && !selectedItem && isMobile && ReactDOM.createPortal(
         <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
-          className="modal-backdrop"
+          className="trek-modal-backdrop"
           style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end', paddingBottom: 'var(--bottom-nav-h)' }}>
           <div style={{ width: '100%', maxHeight: '85vh', borderRadius: '16px 16px 0 0', overflow: 'auto' }}
             ref={el => { if (el) { const child = el.firstElementChild as HTMLElement; if (child) { child.style.width = '100%'; child.style.borderLeft = 'none'; child.style.borderRadius = '16px 16px 0 0' } } }}>

client/src/components/Trips/TripFormModal.test.tsx

@@ -260,7 +260,9 @@ describe('TripFormModal', () => {
         items: [{ type: 'image/png', getAsFile: () => file }],
       },
     });
-    expect(mockCreateObjectURL).toHaveBeenCalledWith(file);
+    // Cover selection now normalizes the file (HEIC -> JPEG) before previewing, so the
+    // createObjectURL call lands a microtask later; a non-HEIC file passes through unchanged.
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(file));
 
     Object.defineProperty(URL, 'createObjectURL', { writable: true, configurable: true, value: original });
   });

client/src/components/Trips/TripFormModal.tsx

@@ -8,6 +8,7 @@ import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
+import { normalizeImageFile } from '../../utils/convertHeic'
 import type { Trip } from '../../types'
 import type { TripCreateRequest } from '@trek/shared'
 
@@ -141,15 +142,17 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
     }
   }
 
-  const handleCoverSelect = (file) => {
+  const handleCoverSelect = async (file) => {
     if (!file) return
+    // HEIC/HEIF from iOS can't be rendered or stored as-is — convert to JPEG first
+    const normalized = await normalizeImageFile(file)
     if (isEditing && trip?.id) {
       // Existing trip: upload immediately
-      uploadCoverNow(file)
+      uploadCoverNow(normalized)
     } else {
       // New trip: stage for upload after creation
-      setPendingCoverFile(file)
-      setCoverPreview(URL.createObjectURL(file))
+      setPendingCoverFile(normalized)
+      setCoverPreview(URL.createObjectURL(normalized))
     }
   }
 

client/src/components/Trips/TripMembersModal.tsx

@@ -259,7 +259,7 @@ export default function TripMembersModal({ isOpen, onClose, tripId, tripTitle }:
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={t('members.shareTrip')} size="3xl">
-      <div style={{ display: 'grid', gridTemplateColumns: canManageShare ? '1fr 1fr' : '1fr', gap: 24, fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} className="share-modal-grid">
+      <div style={{ display: 'grid', gridTemplateColumns: canManageShare ? '1fr 1fr' : '1fr', gap: 24, fontFamily: "var(--font-system)" }} className="share-modal-grid">
         <style>{`@media (max-width: 640px) { .share-modal-grid { grid-template-columns: 1fr !important; } }`}</style>
 
         {/* Left column: Members */}

client/src/components/Weather/WeatherWidget.tsx

@@ -94,7 +94,7 @@ export default function WeatherWidget({ lat, lng, date, compact = false, stacked
 
   if (!lat || !lng) return null
 
-  const fontStyle = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
+  const fontStyle = { fontFamily: "var(--font-system)" }
 
   if (loading) {
     return (

client/src/components/shared/ContextMenu.tsx

@@ -72,7 +72,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
       boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
       backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
       minWidth: 160,
-      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+      fontFamily: "var(--font-system)",
       transformOrigin: 'top left',
     }}>
       {menu.items.filter(Boolean).map((item, i) => {

client/src/components/shared/Modal.test.tsx

@@ -56,7 +56,7 @@ describe('Modal', () => {
 
   it('FE-COMP-MODAL-008: clicking the backdrop calls onClose', () => {
     render(<Modal isOpen={true} onClose={onClose}><p>inner</p></Modal>);
-    const backdrop = document.querySelector('.modal-backdrop') as HTMLElement;
+    const backdrop = document.querySelector('.trek-modal-backdrop') as HTMLElement;
     // Simulate mousedown then click on the backdrop itself
     fireEvent.mouseDown(backdrop, { target: backdrop });
     fireEvent.click(backdrop);

client/src/components/shared/Modal.tsx

@@ -51,7 +51,7 @@ export default function Modal({
 
   return ReactDOM.createPortal(
     <div
-      className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop trek-backdrop-enter bg-[rgba(15,23,42,0.5)]"
+      className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 trek-modal-backdrop trek-backdrop-enter bg-[rgba(15,23,42,0.5)]"
       style={{ paddingTop: 70, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflow: 'hidden' }}
       onMouseDown={e => { mouseDownTarget.current = e.target }}
       onClick={e => {

client/src/components/shared/Toast.tsx

@@ -123,7 +123,7 @@ export function ToastContainer() {
             <span style={{
               flex: 1, fontSize: 13, fontWeight: 500, color: 'rgba(255, 255, 255, 0.9)',
               lineHeight: 1.4,
-              fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+              fontFamily: "var(--font-system)",
             }}>
               {toast.message}
             </span>

client/src/components/shared/Tooltip.tsx

@@ -92,7 +92,7 @@ export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, ch
             borderRadius: 8,
             whiteSpace: 'nowrap',
             boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-            fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+            fontFamily: "var(--font-system)",
             transformOrigin: placement === 'top' ? 'bottom center' : placement === 'bottom' ? 'top center' : placement === 'left' ? 'center right' : 'center left',
           }}
         >

client/src/db/offlineDb.ts

@@ -148,6 +148,24 @@ export async function upsertSyncMeta(meta: SyncMeta): Promise<void> {
   await offlineDb.syncMeta.put(meta);
 }
 
+/**
+ * Read a pre-downloaded file blob for offline use. Returns null when the file
+ * was never cached (or on any read error). The stored MIME is reapplied so the
+ * caller's inline-vs-download decision stays correct even if the persisted Blob
+ * lost its type.
+ */
+export async function getCachedBlob(url: string): Promise<Blob | null> {
+  try {
+    const entry = await offlineDb.blobCache.get(url);
+    if (!entry) return null;
+    return entry.blob.type
+      ? entry.blob
+      : new Blob([entry.blob], { type: entry.mime || 'application/octet-stream' });
+  } catch {
+    return null;
+  }
+}
+
 // ── Eviction / cleanup ────────────────────────────────────────────────────────
 
 /** Delete all cached data for one trip (eviction or explicit clear). */

client/src/hooks/useExchangeRates.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from 'react'
+
+/**
+ * Live FX rates for the Costs panel, used to convert every amount into the user's
+ * display currency. Fetches exchangerate-api.com (no key, already CSP-allowlisted
+ * for the dashboard widget) for the given base and caches per base in memory +
+ * localStorage for a few hours. rates[X] = units of X per 1 base, so an amount in
+ * currency C converts to base as `amount / rates[C]`.
+ */
+
+const TTL_MS = 6 * 60 * 60 * 1000 // 6h
+const mem = new Map<string, { rates: Record<string, number>; ts: number }>()
+
+function readCache(base: string): { rates: Record<string, number>; ts: number } | null {
+  const m = mem.get(base)
+  if (m) return m
+  try {
+    const raw = localStorage.getItem('trek_fx_' + base)
+    if (raw) {
+      const parsed = JSON.parse(raw) as { rates: Record<string, number>; ts: number }
+      if (parsed?.rates) { mem.set(base, parsed); return parsed }
+    }
+  } catch { /* ignore */ }
+  return null
+}
+
+export function useExchangeRates(base: string) {
+  const upper = (base || 'EUR').toUpperCase()
+  const [rates, setRates] = useState<Record<string, number> | null>(() => readCache(upper)?.rates ?? null)
+
+  useEffect(() => {
+    const cached = readCache(upper)
+    if (cached) setRates(cached.rates)
+    if (cached && Date.now() - cached.ts < TTL_MS) return
+    let cancelled = false
+    fetch(`https://api.exchangerate-api.com/v4/latest/${encodeURIComponent(upper)}`)
+      .then(r => r.json())
+      .then((d: { rates?: Record<string, number> }) => {
+        if (cancelled || !d?.rates) return
+        const entry = { rates: d.rates, ts: Date.now() }
+        mem.set(upper, entry)
+        try { localStorage.setItem('trek_fx_' + upper, JSON.stringify(entry)) } catch { /* ignore */ }
+        setRates(d.rates)
+      })
+      .catch(() => { /* offline → keep cached/identity */ })
+    return () => { cancelled = true }
+  }, [upper])
+
+  const convert = useCallback(
+    (amount: number, from: string | null | undefined): number => {
+      const f = (from || upper).toUpperCase()
+      if (f === upper || !rates) return amount
+      const r = rates[f]
+      return r && r > 0 ? amount / r : amount
+    },
+    [rates, upper],
+  )
+
+  return { rates, convert }
+}

client/src/hooks/useRouteCalculation.ts

@@ -4,7 +4,7 @@ import { calculateRouteWithLegs } from '../components/Map/RouteCalculator'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'
 
-const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'cruise']
+const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other']
 
 /**
  * Manages route calculation state for a selected day. Extracts geo-coded waypoints from

client/src/index.css

@@ -431,7 +431,9 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
   --safe-top: env(safe-area-inset-top, 0px);
   --nav-h: 0px;
   --bottom-nav-h: 0px;
-  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+  --font-system: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+  /* Secondary "subtext"/caption tier renders in Geist; primary text + headings stay Poppins. */
+  --font-subtext: 'Geist Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --sp-1: 4px;
   --sp-2: 8px;
   --sp-3: 12px;
@@ -539,6 +541,11 @@ body {
   transition: background-color 0.2s, color 0.2s;
 }
 
+/* Subtext tier in Geist. The faint text token is TREK's caption/secondary tier;
+   a direct rule on the element beats the Poppins inherited from wrapper styles,
+   giving the design's "Geist text · Poppins numbers" hierarchy. */
+.text-content-faint { font-family: var(--font-subtext); }
+
 /* ── Marker cluster custom styling ────────────── */
 .marker-cluster-wrapper {
   background: transparent !important;
@@ -563,7 +570,7 @@ body {
 }
 
 .marker-cluster-custom span {
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+  font-family:var(--font-system);
   font-size: 12px;
   font-weight: 700;
   color: #ffffff;
@@ -734,7 +741,7 @@ img[alt="TREK"] {
 .dark .min-h-screen { background-color: var(--bg-primary) !important; }
 
 /* Modal-Hintergrund */
-.dark .modal-backdrop { background: rgba(0,0,0,0.6); }
+.dark .trek-modal-backdrop { background: rgba(0,0,0,0.6); }
 
 /* ── Dark: Fallback für Komponenten die noch nicht auf CSS-Variablen umgestellt sind ── */
 .dark {
@@ -766,8 +773,8 @@ img[alt="TREK"] {
   animation: slide-out-right 0.3s ease-in forwards;
 }
 
-/* Modal-Hintergrund */
-.modal-backdrop {
+/* Modal-Hintergrund (eigener Namespace, sonst blenden Content-Blocker .modal-backdrop aus) */
+.trek-modal-backdrop {
   backdrop-filter: blur(4px);
 }
 

client/src/main.tsx

@@ -2,6 +2,17 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
+// Self-hosted Poppins (bundled, same-origin) so the app font can't be blocked by
+// ad/tracker blockers the way the Google Fonts CDN can.
+import '@fontsource/poppins/300.css'
+import '@fontsource/poppins/400.css'
+import '@fontsource/poppins/500.css'
+import '@fontsource/poppins/600.css'
+import '@fontsource/poppins/700.css'
+// Geist Sans (self-hosted too) — used only for secondary "subtext" via --font-subtext.
+import '@fontsource/geist-sans/400.css'
+import '@fontsource/geist-sans/500.css'
+import '@fontsource/geist-sans/600.css'
 import './index.css'
 import { startConnectivityProbe } from './sync/connectivity'
 

client/src/pages/AtlasPage.test.tsx

@@ -175,6 +175,9 @@ function useDefaultAtlasHandlers() {
     http.get('/api/addons/atlas/stats', () => HttpResponse.json(atlasStatsResponse)),
     http.get('/api/addons/atlas/bucket-list', () => HttpResponse.json({ items: [] })),
     http.get('/api/addons/atlas/regions', () => HttpResponse.json({ regions: {} })),
+    // Country-border GeoJSON (admin-0) — served by the API now. Tests that need real
+    // country features override this handler via server.use(...).
+    http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json({ type: 'FeatureCollection', features: [] })),
     // Handler for region GeoJSON fetch (triggered by loadRegionsForViewport when intersects=true)
     http.get('/api/addons/atlas/regions/geo', () => HttpResponse.json({ features: [] })),
   );
@@ -187,18 +190,6 @@ beforeEach(() => {
   seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
   seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }) });
 
-  // Stub the external GeoJSON fetch (GitHub raw URL) to avoid real network calls
-  vi.spyOn(global, 'fetch').mockImplementation((url) => {
-    const urlStr = String(url);
-    if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-      return Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve({ type: 'FeatureCollection', features: [] }),
-      } as Response);
-    }
-    return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-  });
-
   useDefaultAtlasHandlers();
 });
 
@@ -469,16 +460,9 @@ describe('AtlasPage', () => {
   describe('FE-PAGE-ATLAS-017: country search filters options from GeoJSON', () => {
     it('typing in search updates the input value', async () => {
       // Override fetch to return GeoJSON with FR feature
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -519,16 +503,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-019: confirm popup shows via Enter on search with GeoJSON', () => {
     it('pressing Enter in search with matching GeoJSON result triggers confirm popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -600,16 +577,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-022: confirm popup for bucket type shows month/year selects', () => {
     it('selecting Add to bucket list in confirm popup shows month/year pickers', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -642,16 +612,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-031: confirm popup opens and mark-visited action works', () => {
     it('opens confirm popup via search and clicking Mark as visited closes it', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -710,16 +673,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-032: confirm popup Add to Bucket opens bucket type', () => {
     it('clicking Add to bucket list in choose popup switches to bucket type', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -851,16 +807,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-029: confirm popup opens via search dropdown click', () => {
     it('clicking a country in the search dropdown opens the confirm action popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -914,16 +863,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-030: confirm popup overlay click closes it', () => {
     it('clicking the overlay backdrop closes the confirm popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1000,13 +942,9 @@ describe('AtlasPage', () => {
           { type: 'Feature', properties: { ISO_A2: 'DE', ADM0_A3: 'DEU', ISO_A3: 'DEU', NAME: 'Germany', ADMIN: 'Germany' }, geometry: null },
         ],
       };
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonFRandDE) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonFRandDE)),
+      );
 
       render(<AtlasPage />);
 
@@ -1023,13 +961,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-034: dropdown button click + mouse events', () => {
     it('clicking France dropdown button covers onClick and mouse event handlers', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -1100,13 +1034,9 @@ describe('AtlasPage', () => {
         http.get('/api/addons/atlas/stats', () => HttpResponse.json(emptyAtlasResponse)),
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
       );
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1158,13 +1088,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-036: bucket popup submit action', () => {
     it('submits a bucket list item from the confirm popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/bucket-list', () =>
@@ -1321,13 +1247,9 @@ describe('AtlasPage', () => {
           },
         ],
       };
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithXK) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithXK)),
+      );
 
       render(<AtlasPage />);
 
@@ -1345,13 +1267,9 @@ describe('AtlasPage', () => {
       { a3: 'FRA', name: 'France', query: 'france' },
       { a3: 'NOR', name: 'Norway', query: 'norway' },
     ])('returns $name in search results when GeoJSON provides ADM0_A3=$a3 but ISO_A2 is -99', async ({ a3, name, query }) => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(makeGeoJsonWithA3Fallback(a3, name)) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(makeGeoJsonWithA3Fallback(a3, name))),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1459,13 +1377,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-044: direct France dropdown button click', () => {
     it('directly finds and clicks the France button in the dropdown to cover onClick', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -1517,13 +1431,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-045: dark mode toggle covers map re-init + loadRegionsForViewport', () => {
     it('switching to dark mode re-initializes map and covers region loading code path', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.get('/api/addons/atlas/regions/geo', () => HttpResponse.json({ features: [] })),
@@ -1636,13 +1546,9 @@ describe('AtlasPage', () => {
           { type: 'Feature', properties: { ISO_A2: 'IT', ADM0_A3: 'ITA', ISO_A3: 'ITA', NAME: 'Italy', ADMIN: 'Italy' }, geometry: null },
         ],
       };
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonFRandIT) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonFRandIT)),
+      );
 
       render(<AtlasPage />);
 

client/src/pages/DashboardPage.tsx

@@ -90,7 +90,7 @@ export default function DashboardPage(): React.ReactElement {
   return (
     <>
       {/* Navbar lives outside .trek-dash so it keeps the app-wide font + button
-          styling instead of inheriting the dashboard scope's Geist font and the
+          styling instead of inheriting the dashboard scope's font and the
           `.trek-dash button` reset (which shifted the bell icon + menu items). */}
       <Navbar />
       <div className="trek-dash trek-dash-shell">

client/src/pages/LoginPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n'
-import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield, KeyRound, ChevronDown } from 'lucide-react'
+import { Plane, Eye, EyeOff, Mail, Lock, MapPin, Calendar, Package, User, Globe, Zap, Users, Wallet, Map, CheckSquare, BookMarked, FolderOpen, Route, Shield, KeyRound, ChevronDown, Fingerprint } from 'lucide-react'
 import { useLogin } from './login/useLogin'
 
 export default function LoginPage(): React.ReactElement {
@@ -15,9 +15,13 @@ export default function LoginPage(): React.ReactElement {
     showTakeoff, mfaStep, setMfaStep, mfaToken, setMfaToken, mfaCode, setMfaCode,
     passwordChangeStep, newPassword, setNewPassword, confirmPassword, setConfirmPassword,
     noRedirect, showRegisterOption, oidcOnly,
-    handleDemoLogin, handleSubmit,
+    handleDemoLogin, handleSubmit, handlePasskeyLogin,
   } = useLogin()
 
+  const oidcButtonShown = !!(appConfig?.oidc_configured && appConfig?.oidc_login && !oidcOnly)
+  const passkeyAvailable = !!(appConfig?.passkey_login && appConfig?.passkey_configured && !oidcOnly
+    && mode === 'login' && !mfaStep && !passwordChangeStep)
+
   const inputBase: React.CSSProperties = {
     width: '100%', padding: '11px 12px 11px 40px', border: '1px solid #e5e7eb',
     borderRadius: 12, fontSize: 14, fontFamily: 'inherit', outline: 'none',
@@ -176,7 +180,7 @@ export default function LoginPage(): React.ReactElement {
   }
 
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", position: 'relative' }}>
+    <div style={{ minHeight: '100vh', display: 'flex', fontFamily: "var(--font-system)", position: 'relative' }}>
 
       {/* Language dropdown */}
       <div style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }}>
@@ -636,6 +640,36 @@ export default function LoginPage(): React.ReactElement {
             </>
           )}
 
+          {/* Passkey login button (instance toggle on + a usable RP ID resolves) */}
+          {passkeyAvailable && (
+            <>
+              {!oidcButtonShown && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 }}>
+                  <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
+                  <span style={{ fontSize: 12, color: '#9ca3af' }}>{t('common.or')}</span>
+                  <div style={{ flex: 1, height: 1, background: '#e5e7eb' }} />
+                </div>
+              )}
+              <button type="button" onClick={handlePasskeyLogin} disabled={isLoading}
+                style={{
+                  marginTop: 12, width: '100%', padding: '12px',
+                  background: 'white', color: '#374151',
+                  border: '1px solid #d1d5db', borderRadius: 12,
+                  fontSize: 14, fontWeight: 600, cursor: isLoading ? 'default' : 'pointer',
+                  fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+                  opacity: isLoading ? 0.7 : 1,
+                  transition: 'background 180ms cubic-bezier(0.23,1,0.32,1), border-color 180ms cubic-bezier(0.23,1,0.32,1)',
+                  boxSizing: 'border-box',
+                }}
+                onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => { if (!isLoading) { e.currentTarget.style.background = '#f9fafb'; e.currentTarget.style.borderColor = '#9ca3af' } }}
+                onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = 'white'; e.currentTarget.style.borderColor = '#d1d5db' }}
+              >
+                <Fingerprint size={16} />
+                {t('login.passkey.signIn')}
+              </button>
+            </>
+          )}
+
           {/* Demo login button */}
           {appConfig?.demo_mode && (
             <button onClick={handleDemoLogin} disabled={isLoading}

client/src/pages/SharedTripPage.tsx

@@ -71,7 +71,7 @@ export default function SharedTripPage() {
   const center = mapPlaces.length > 0 ? [mapPlaces[0].lat, mapPlaces[0].lng] : [48.85, 2.35]
 
   return (
-    <div className="bg-surface-secondary" style={{ minHeight: '100vh', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+    <div className="bg-surface-secondary" style={{ minHeight: '100vh', fontFamily: "var(--font-system)" }}>
       {/* Header */}
       <div className="text-white" style={{ background: 'linear-gradient(135deg, #000 0%, #0f172a 50%, #1e293b 100%)', padding: '32px 20px 28px', textAlign: 'center', position: 'relative' }}>
         {/* Cover image background */}

client/src/pages/TripPlannerPage.test.tsx

@@ -97,8 +97,8 @@ vi.mock('../components/Files/FileManager', () => ({
   },
 }));
 
-vi.mock('../components/Budget/BudgetPanel', () => ({
-  default: () => React.createElement('div', { 'data-testid': 'budget-panel' }),
+vi.mock('../components/Budget/CostsPanel', () => ({
+  default: () => React.createElement('div', { 'data-testid': 'costs-panel' }),
 }));
 
 vi.mock('../components/Packing/PackingListPanel', () => ({
@@ -436,8 +436,8 @@ describe('TripPlannerPage', () => {
     });
   });
 
-  describe('FE-PAGE-PLANNER-012: Budget tab renders BudgetPanel', () => {
-    it('shows BudgetPanel after clicking the Budget tab with budget addon enabled', async () => {
+  describe('FE-PAGE-PLANNER-012: Costs tab renders CostsPanel', () => {
+    it('shows CostsPanel after clicking the Costs tab with budget addon enabled', async () => {
       server.use(
         http.get('/api/addons', () =>
           HttpResponse.json({ addons: [{ id: 'budget', type: 'budget' }] })
@@ -454,11 +454,11 @@ describe('TripPlannerPage', () => {
 
       vi.useRealTimers();
 
-      const budgetTab = await screen.findByTitle('Budget');
-      fireEvent.click(budgetTab);
+      const costsTab = await screen.findByTitle('Costs');
+      fireEvent.click(costsTab);
 
       await waitFor(() => {
-        expect(screen.getByTestId('budget-panel')).toBeInTheDocument();
+        expect(screen.getByTestId('costs-panel')).toBeInTheDocument();
       });
     });
   });

client/src/pages/TripPlannerPage.tsx

@@ -16,13 +16,14 @@ import SlidingTabs from '../components/shared/SlidingTabs'
 import TripMembersModal from '../components/Trips/TripMembersModal'
 import { ReservationModal } from '../components/Planner/ReservationModal'
 import { TransportModal } from '../components/Planner/TransportModal'
+import BookingImportModal from '../components/Planner/BookingImportModal'
 // MemoriesPanel moved to Journey addon
 import ReservationsPanel from '../components/Planner/ReservationsPanel'
 import PackingListPanel from '../components/Packing/PackingListPanel'
 import ApplyTemplateButton from '../components/Packing/ApplyTemplateButton'
 import TodoListPanel from '../components/Todo/TodoListPanel'
 import FileManager from '../components/Files/FileManager'
-import BudgetPanel from '../components/Budget/BudgetPanel'
+import CostsPanel from '../components/Budget/CostsPanel'
 import CollabPanel from '../components/Collab/CollabPanel'
 import Navbar from '../components/Layout/Navbar'
 import { useToast } from '../components/shared/Toast'
@@ -52,6 +53,7 @@ function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; p
   const [saveTemplateSignal, setSaveTemplateSignal] = useState(0)
   const [addTodoSignal, setAddTodoSignal] = useState(0)
   const { t } = useTranslation()
+  const isAdmin = useAuthStore(s => s.user?.role === 'admin')
 
   const tabs = [
     { id: 'packing' as const, label: t('todo.subtab.packing'), icon: PackageCheck, count: packingItems.length },
@@ -120,7 +122,7 @@ function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; p
                   className={`${sharedBtnClass} bg-accent text-accent-text`}
                   style={sharedBtnStyle}
                 />
-                {packingItems.length > 0 && (
+                {isAdmin && packingItems.length > 0 && (
                   <button onClick={() => setSaveTemplateSignal(s => s + 1)}
                     className={`${sharedBtnClass} bg-accent text-accent-text`}
                     style={sharedBtnStyle}
@@ -182,6 +184,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
     prefillCoords, setPrefillCoords, editingAssignmentId, setEditingAssignmentId,
     showTripForm, setShowTripForm, showMembersModal, setShowMembersModal,
     showReservationModal, setShowReservationModal, editingReservation, setEditingReservation,
+    showBookingImport, setShowBookingImport, bookingImportAvailable,
     bookingForAssignmentId, setBookingForAssignmentId,
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,
@@ -628,6 +631,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
               assignments={assignments}
               files={files}
               onAdd={() => { setEditingReservation(null); setShowReservationModal(true) }}
+              onImport={() => setShowBookingImport(true)}
+              bookingImportAvailable={bookingImportAvailable}
               onEdit={(r) => { setEditingReservation(r); setShowReservationModal(true) }}
               onDelete={handleDeleteReservation}
               onNavigateToFiles={() => handleTabChange('dateien')}
@@ -643,7 +648,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
         {activeTab === 'finanzplan' && (
           <div style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', width: '100%', paddingBottom: 'var(--bottom-nav-h)' }}>
-            <BudgetPanel tripId={tripId} tripMembers={tripMembers} />
+            <CostsPanel tripId={tripId} tripMembers={tripMembers} />
           </div>
         )}
 
@@ -676,6 +681,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
       <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
       <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} />
       {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} />}
+      <BookingImportModal isOpen={showBookingImport} onClose={() => setShowBookingImport(false)} tripId={tripId} pushUndo={pushUndo} />
       <ConfirmDialog
         isOpen={!!deletePlaceId}
         onClose={() => setDeletePlaceId(null)}

client/src/pages/admin/AdminSettingsTab.tsx

@@ -23,6 +23,8 @@ export default function AdminSettingsTab({ admin, t }: AdminSettingsTabProps): R
     passwordLogin, setPasswordLogin, passwordRegistration, setPasswordRegistration,
     oidcLogin, setOidcLogin, oidcRegistration, setOidcRegistration,
     envOverrideOidcOnly, oidcConfigured, requireMfa,
+    passkeyLogin, setPasskeyLogin, passkeyConfigured,
+    webauthnRpId, setWebauthnRpId, webauthnOrigins, setWebauthnOrigins, savingWebauthn, handleSaveWebauthn,
     allowedFileTypes, setAllowedFileTypes, savingFileTypes, setSavingFileTypes,
     mapsKey, setMapsKey, showKeys, savingKeys, validating, validation,
     setShowRotateJwtModal,
@@ -119,6 +121,71 @@ export default function AdminSettingsTab({ admin, t }: AdminSettingsTabProps): R
         </div>
       </div>
 
+      {/* Passkey (WebAuthn) login */}
+      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-100">
+          <h2 className="font-semibold text-slate-900">{t('admin.passkey.title')}</h2>
+          <p className="text-xs text-slate-400 mt-1">{t('admin.passkey.cardHint')}</p>
+        </div>
+        <div className="p-6 space-y-5">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-slate-700">{t('admin.passkey.login')}</p>
+              <p className="text-xs text-slate-400 mt-0.5">{t('admin.passkey.loginHint')}</p>
+            </div>
+            <button
+              type="button"
+              onClick={() => handleToggleAuthSetting('passkey_login', !passkeyLogin, setPasskeyLogin)}
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors ${passkeyLogin ? 'bg-content' : 'bg-edge'}`}
+            >
+              <span
+                className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                style={{ transform: passkeyLogin ? 'translateX(20px)' : 'translateX(0)' }}
+              />
+            </button>
+          </div>
+
+          {passkeyLogin && !passkeyConfigured && (
+            <p className="flex items-start gap-2 text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
+              <AlertTriangle size={14} className="flex-shrink-0 mt-0.5" />
+              {t('admin.passkey.notConfigured')}
+            </p>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">{t('admin.passkey.rpId')}</label>
+            <p className="text-xs text-slate-400 mb-1.5">{t('admin.passkey.rpIdHint')}</p>
+            <input
+              type="text"
+              value={webauthnRpId}
+              onChange={e => setWebauthnRpId(e.target.value)}
+              placeholder="trek.example.org"
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">{t('admin.passkey.origins')}</label>
+            <p className="text-xs text-slate-400 mb-1.5">{t('admin.passkey.originsHint')}</p>
+            <input
+              type="text"
+              value={webauthnOrigins}
+              onChange={e => setWebauthnOrigins(e.target.value)}
+              placeholder="https://trek.example.org"
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+            />
+          </div>
+          <button
+            type="button"
+            onClick={handleSaveWebauthn}
+            disabled={savingWebauthn}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:opacity-50"
+          >
+            {savingWebauthn ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+            {t('common.save')}
+          </button>
+        </div>
+      </div>
+
       {/* Require 2FA for all users */}
       <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
         <div className="px-6 py-4 border-b border-slate-100">

client/src/pages/admin/AdminUserModals.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { adminApi } from '../../api/client'
 import Modal from '../../components/shared/Modal'
 import CustomSelect from '../../components/shared/CustomSelect'
-import { CheckCircle, ArrowUpCircle, ExternalLink, RefreshCw, AlertTriangle } from 'lucide-react'
+import { CheckCircle, ArrowUpCircle, ExternalLink, RefreshCw, AlertTriangle, Fingerprint } from 'lucide-react'
 import type { TranslationFn } from '../../types'
 import type { useAdmin } from './useAdmin'
 
@@ -157,6 +157,25 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
                 ]}
               />
             </div>
+            <div className="pt-3 border-t border-slate-100">
+              <p className="text-xs text-slate-400 mb-2">{t('admin.passkey.resetHint')}</p>
+              <button
+                type="button"
+                onClick={async () => {
+                  if (!editingUser) return
+                  if (!confirm(t('admin.passkey.resetConfirm', { name: editingUser.username }))) return
+                  try {
+                    const r = await adminApi.resetUserPasskeys(editingUser.id)
+                    toast.success(t('admin.passkey.resetDone', { count: r.deleted ?? 0 }))
+                  } catch {
+                    toast.error(t('common.error'))
+                  }
+                }}
+                className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 border border-red-200 rounded-lg hover:bg-red-50"
+              >
+                <Fingerprint size={14} /> {t('admin.passkey.reset')}
+              </button>
+            </div>
           </div>
         )}
       </Modal>

client/src/pages/admin/useAdmin.ts

@@ -65,6 +65,13 @@ export function useAdmin() {
   const [oidcConfigured, setOidcConfigured] = useState<boolean>(false)
   const [requireMfa, setRequireMfa] = useState<boolean>(false)
 
+  // Passkey (WebAuthn) login
+  const [passkeyLogin, setPasskeyLogin] = useState<boolean>(false)
+  const [passkeyConfigured, setPasskeyConfigured] = useState<boolean>(false)
+  const [webauthnRpId, setWebauthnRpId] = useState<string>('')
+  const [webauthnOrigins, setWebauthnOrigins] = useState<string>('')
+  const [savingWebauthn, setSavingWebauthn] = useState<boolean>(false)
+
   // Invite links
   const [invites, setInvites] = useState<any[]>([])
   const [showCreateInvite, setShowCreateInvite] = useState<boolean>(false)
@@ -80,6 +87,8 @@ export function useAdmin() {
   useEffect(() => {
     apiClient.get('/auth/app-settings').then(r => {
       setSmtpValues(r.data || {})
+      if (r.data?.webauthn_rp_id) setWebauthnRpId(r.data.webauthn_rp_id)
+      if (r.data?.webauthn_origins) setWebauthnOrigins(r.data.webauthn_origins)
       setSmtpLoaded(true)
     }).catch(() => setSmtpLoaded(true))
   }, [])
@@ -141,6 +150,8 @@ export function useAdmin() {
       setEnvOverrideOidcOnly(config.env_override_oidc_only ?? false)
       setOidcConfigured(config.oidc_configured ?? false)
       if (config.require_mfa !== undefined) setRequireMfa(!!config.require_mfa)
+      setPasskeyLogin(!!config.passkey_login)
+      setPasskeyConfigured(!!config.passkey_configured)
       if (config.allowed_file_types) setAllowedFileTypes(config.allowed_file_types)
     } catch (err: unknown) {
       // ignore
@@ -179,6 +190,23 @@ export function useAdmin() {
     }
   }
 
+  const handleSaveWebauthn = async () => {
+    setSavingWebauthn(true)
+    try {
+      await authApi.updateAppSettings({
+        webauthn_rp_id: webauthnRpId.trim(),
+        webauthn_origins: webauthnOrigins.trim(),
+      })
+      // Re-read app-config so passkey_configured reflects the new RP ID.
+      await loadAppConfig()
+      toast.success(t('common.saved'))
+    } catch (err: unknown) {
+      toast.error(getApiErrorMessage(err, t('common.error')))
+    } finally {
+      setSavingWebauthn(false)
+    }
+  }
+
   const toggleKey = (key) => {
     setShowKeys(prev => ({ ...prev, [key]: !prev[key] }))
   }
@@ -341,6 +369,8 @@ export function useAdmin() {
     oidcLogin, setOidcLogin, oidcRegistration, setOidcRegistration,
     envOverrideOidcOnly, setEnvOverrideOidcOnly, oidcConfigured, setOidcConfigured,
     requireMfa, setRequireMfa,
+    passkeyLogin, setPasskeyLogin, passkeyConfigured,
+    webauthnRpId, setWebauthnRpId, webauthnOrigins, setWebauthnOrigins, savingWebauthn, handleSaveWebauthn,
     invites, setInvites, showCreateInvite, setShowCreateInvite, inviteForm, setInviteForm,
     allowedFileTypes, setAllowedFileTypes, savingFileTypes, setSavingFileTypes,
     smtpValues, setSmtpValues, smtpLoaded,

client/src/pages/atlas/useAtlas.ts

@@ -132,16 +132,20 @@ export function useAtlas() {
     }).catch(() => setLoading(false))
   }, [])
 
-  // Load GeoJSON world data (direct GeoJSON, no conversion needed)
+  // Load country-border GeoJSON from our API (geoBoundaries, served server-side —
+  // no third-party fetch from the browser).
   useEffect(() => {
-    fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson')
-      .then(r => r.json())
-      .then(geo => {
+    apiClient.get('/addons/atlas/countries/geo')
+      .then(res => {
+        const geo = res.data
         // Dynamically build A2→A3 mapping from GeoJSON
         for (const f of geo.features) {
           const a2 = f.properties?.ISO_A2
           const a3 = f.properties?.ADM0_A3 || f.properties?.ISO_A3
-          if (a2 && a3 && a2 !== '-99' && a3 !== '-99' && !A2_TO_A3[a2]) {
+          // Only accept clean 2-letter ISO codes and never overwrite an existing
+          // mapping: some datasets carry subdivision-style values like "CN-TW" for
+          // Taiwan, which would clobber the legitimate TWN->TW entry (#1049).
+          if (a2 && a3 && a2.length === 2 && a2 !== '-99' && a3 !== '-99' && !A2_TO_A3[a2]) {
             A2_TO_A3[a2] = a3
           }
         }
@@ -619,7 +623,7 @@ export function useAtlas() {
     try {
       const result = await mapsApi.search(bucketSearch, language)
       setBucketSearchResults(result.places || [])
-    } catch {} finally { setBucketSearching(false) }
+    } catch (err) { console.error('Bucket-list place search failed:', err) } finally { setBucketSearching(false) }
   }
 
   const handleSelectBucketPoi = (result: any) => {

client/src/pages/login/useLogin.ts

@@ -3,6 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore, hasStoredLanguage } from '../../store/settingsStore'
 import { useTranslation, detectBrowserLanguage } from '../../i18n'
+import { startAuthentication } from '@simplewebauthn/browser'
 import { authApi, configApi } from '../../api/client'
 import { getApiErrorMessage } from '../../types'
 
@@ -18,6 +19,8 @@ interface AppConfig {
   password_registration: boolean
   oidc_login: boolean
   oidc_registration: boolean
+  passkey_login?: boolean
+  passkey_configured?: boolean
   env_override_oidc_only: boolean
 }
 
@@ -196,6 +199,28 @@ export function useLogin() {
     }
   }
 
+  const handlePasskeyLogin = async (): Promise<void> => {
+    setError('')
+    setIsLoading(true)
+    try {
+      const options = await authApi.passkey.loginOptions()
+      const assertion = await startAuthentication({ optionsJSON: options })
+      await authApi.passkey.loginVerify(assertion)
+      await loadUser({ silent: true })
+      setShowTakeoff(true)
+      setTimeout(() => navigate(redirectTarget), 2600)
+    } catch (err: unknown) {
+      // The user dismissing the native prompt isn't an error worth surfacing.
+      const name = (err as { name?: string })?.name
+      if (name === 'NotAllowedError' || name === 'AbortError') {
+        setIsLoading(false)
+        return
+      }
+      setError(getApiErrorMessage(err, t('login.passkey.failed')))
+      setIsLoading(false)
+    }
+  }
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault()
     setError('')
@@ -270,6 +295,6 @@ export function useLogin() {
     showTakeoff, mfaStep, setMfaStep, mfaToken, setMfaToken, mfaCode, setMfaCode,
     passwordChangeStep, newPassword, setNewPassword, confirmPassword, setConfirmPassword,
     noRedirect, showRegisterOption, oidcOnly,
-    handleDemoLogin, handleSubmit,
+    handleDemoLogin, handleSubmit, handlePasskeyLogin,
   }
 }

client/src/pages/tripPlanner/useTripPlanner.ts

@@ -7,7 +7,7 @@ import { getCached, fetchPhoto } from '../../services/photoService'
 import { useToast } from '../../components/shared/Toast'
 import { Map, Ticket, PackageCheck, Wallet, FolderOpen, Users, Train } from 'lucide-react'
 import { useTranslation } from '../../i18n'
-import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi } from '../../api/client'
+import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, healthApi } from '../../api/client'
 import { accommodationRepo } from '../../repo/accommodationRepo'
 import { offlineDb } from '../../db/offlineDb'
 import { useAuthStore } from '../../store/authStore'
@@ -86,7 +86,7 @@ export function useTripPlanner() {
     }).catch(() => {})
   }, [])
 
-  const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise', 'bus'])
+  const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
 
   const TRIP_TABS = [
     { id: 'plan', label: t('trip.tabs.plan'), icon: Map },
@@ -138,6 +138,8 @@ export function useTripPlanner() {
   const [showMembersModal, setShowMembersModal] = useState<boolean>(false)
   const [showReservationModal, setShowReservationModal] = useState<boolean>(false)
   const [editingReservation, setEditingReservation] = useState<Reservation | null>(null)
+  const [showBookingImport, setShowBookingImport] = useState<boolean>(false)
+  const [bookingImportAvailable, setBookingImportAvailable] = useState<boolean>(false)
   const [bookingForAssignmentId, setBookingForAssignmentId] = useState<number | null>(null)
   const [showTransportModal, setShowTransportModal] = useState<boolean>(false)
   const [editingTransport, setEditingTransport] = useState<Reservation | null>(null)
@@ -163,6 +165,10 @@ export function useTripPlanner() {
     setFitKey(k => k + 1)
   }, [trip, places])
 
+  useEffect(() => {
+    healthApi.features().then(f => setBookingImportAvailable(f.bookingImport)).catch(() => {})
+  }, [])
+
   const connectionsStorageKey = tripId ? `trek:visible-connections:${tripId}` : null
   const [visibleConnections, setVisibleConnections] = useState<number[]>(() => {
     if (typeof window === 'undefined' || !connectionsStorageKey) return []
@@ -598,7 +604,7 @@ export function useTripPlanner() {
   const defaultCenter = [settings.default_lat || 48.8566, settings.default_lng || 2.3522]
   const defaultZoom = settings.default_zoom || 10
 
-  const fontStyle = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif" }
+  const fontStyle = { fontFamily: "var(--font-system)" }
 
   // Splash screen — show for initial load + a brief moment for photos to start loading
   const [splashDone, setSplashDone] = useState(false)
@@ -624,6 +630,7 @@ export function useTripPlanner() {
     prefillCoords, setPrefillCoords, editingAssignmentId, setEditingAssignmentId,
     showTripForm, setShowTripForm, showMembersModal, setShowMembersModal,
     showReservationModal, setShowReservationModal, editingReservation, setEditingReservation,
+    showBookingImport, setShowBookingImport, bookingImportAvailable,
     bookingForAssignmentId, setBookingForAssignmentId,
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,

client/src/store/addonStore.ts

@@ -24,6 +24,7 @@ interface Addon {
 
 interface AddonState {
   addons: Addon[]
+  bagTracking: boolean
   loaded: boolean
   loadAddons: () => Promise<void>
   isEnabled: (id: string) => boolean
@@ -31,12 +32,13 @@ interface AddonState {
 
 export const useAddonStore = create<AddonState>((set, get) => ({
   addons: [],
+  bagTracking: false,
   loaded: false,
 
   loadAddons: async () => {
     try {
       const data = await addonsApi.enabled()
-      set({ addons: data.addons || [], loaded: true })
+      set({ addons: data.addons || [], bagTracking: !!data.bagTracking, loaded: true })
     } catch {
       set({ loaded: true })
     }

client/src/store/settingsStore.ts

@@ -32,6 +32,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     temperature_unit: 'fahrenheit',
     time_format: '12h',
     show_place_description: false,
+    optimize_from_accommodation: true,
     map_provider: 'leaflet',
     mapbox_access_token: '',
     mapbox_style: 'mapbox://styles/mapbox/standard',

client/src/styles/dashboard.css

@@ -38,7 +38,7 @@
 
   background: var(--bg);
   color: var(--ink);
-  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   font-feature-settings: "ss01", "cv11";
   letter-spacing: -0.005em;
   min-height: 100%;
@@ -580,6 +580,23 @@
   .trek-dash .trips { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
   .trek-dash .add-trip-card { min-height: 180px; }
 
+  /* Compact list row on mobile — keeps the list view distinct from the grid. The
+     desktop list row uses a 520px cover, which overflowed the phone width: the
+     cover was clipped, the body pushed off-screen, and the fixed 100px cover
+     height left a white strip beneath it. Use a fitting cover that stretches to
+     the row, and show just the title + dates (the counts live in grid view and
+     on the trip itself). */
+  .trek-dash .trips.list-view .trip-card { grid-template-columns: 42% 1fr; min-height: 92px; }
+  .trek-dash .trips.list-view .trip-cover { height: auto; aspect-ratio: unset; }
+  .trek-dash .trips.list-view .trip-cover-content { left: 14px; right: 14px; bottom: 12px; }
+  .trek-dash .trips.list-view .trip-name {
+    font-size: 17px; overflow: hidden; text-overflow: ellipsis;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  }
+  .trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: flex-start; padding: 12px 16px; }
+  .trek-dash .trips.list-view .trip-dates { margin-bottom: 0; justify-content: flex-start; }
+  .trek-dash .trips.list-view .trip-meta { display: none; }
+
   /* Tools — stacked full-width cards (mockup) */
   .trek-dash .page-sidebar { flex-direction: column; flex-wrap: nowrap; gap: 14px; margin: 0; padding: 0; }
   .trek-dash .page-sidebar .tool { flex: none; width: auto; }

client/src/types.ts

@@ -113,6 +113,7 @@ export interface Settings {
   show_place_description: boolean
   blur_booking_codes?: boolean
   map_booking_labels?: boolean
+  optimize_from_accommodation?: boolean
   map_provider?: 'leaflet' | 'mapbox-gl'
   mapbox_access_token?: string
   mapbox_style?: string
@@ -162,6 +163,12 @@ export interface Waypoint {
   lng: number
 }
 
+// Optional fixed start/end points for route optimization (e.g. the day's accommodation).
+export interface RouteAnchors {
+  start?: Waypoint
+  end?: Waypoint
+}
+
 // User with optional OIDC fields
 export interface UserWithOidc extends User {
   oidc_issuer?: string | null

client/src/utils/apiError.ts

@@ -0,0 +1,9 @@
+/**
+ * Pulls the server-provided error string out of an axios-style error so the UI can
+ * surface the real reason (e.g. a Google Places API message such as "Places API (New)
+ * has not been used in project … or it is disabled") instead of a generic fallback.
+ */
+export function getApiErrorMessage(err: unknown, fallback: string): string {
+  const message = (err as { response?: { data?: { error?: unknown } } })?.response?.data?.error
+  return typeof message === 'string' && message.trim() ? message : fallback
+}

client/src/utils/dayMerge.ts

@@ -1,4 +1,4 @@
-export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
+export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
 
 export interface MergedItem {
   type: 'place' | 'note' | 'transport'

client/src/utils/dayOrder.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import type { Day, Accommodation } from '../types'
+import { getDayOrder, isDayInAccommodationRange, getAccommodationAnchors } from './dayOrder'
+
+const days = [
+  { id: 10, day_number: 1 },
+  { id: 20, day_number: 2 },
+  { id: 30, day_number: 3 },
+] as unknown as Day[]
+
+const hotel = (over: Partial<Accommodation>): Accommodation =>
+  ({ place_lat: 48.1, place_lng: 11.5, start_day_id: 10, end_day_id: 30, ...over }) as Accommodation
+
+describe('getDayOrder', () => {
+  it('prefers day_number when present', () => {
+    expect(getDayOrder(days[1], days)).toBe(2)
+  })
+  it('falls back to array index when day_number is missing', () => {
+    const noNumber = [{ id: 5 }, { id: 6 }] as unknown as Day[]
+    expect(getDayOrder(noNumber[1], noNumber)).toBe(1)
+  })
+})
+
+describe('isDayInAccommodationRange', () => {
+  it('is inclusive of both the check-in and check-out day', () => {
+    expect(isDayInAccommodationRange(days[0], 10, 30, days)).toBe(true) // check-in morning
+    expect(isDayInAccommodationRange(days[1], 10, 30, days)).toBe(true) // mid-stay
+    expect(isDayInAccommodationRange(days[2], 10, 30, days)).toBe(true) // check-out day
+  })
+  it('excludes days outside the stay', () => {
+    expect(isDayInAccommodationRange(days[0], 20, 30, days)).toBe(false)
+  })
+})
+
+describe('getAccommodationAnchors', () => {
+  it('returns no anchors when the day has no accommodation', () => {
+    expect(getAccommodationAnchors(days[1], days, [])).toEqual({})
+  })
+
+  it('anchors both ends to the same hotel on a mid-stay day (round trip)', () => {
+    const accs = [hotel({ start_day_id: 10, end_day_id: 30, place_lat: 48.1, place_lng: 11.5 })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({
+      start: { lat: 48.1, lng: 11.5 },
+      end: { lat: 48.1, lng: 11.5 },
+    })
+  })
+
+  it('loops a single hotel on its check-out day (home base for the day)', () => {
+    const accs = [hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 2 })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({ start: { lat: 1, lng: 2 }, end: { lat: 1, lng: 2 } })
+  })
+
+  it('loops a single hotel on its check-in day (home base for the day)', () => {
+    const accs = [hotel({ start_day_id: 20, end_day_id: 30, place_lat: 3, place_lng: 4 })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({ start: { lat: 3, lng: 4 }, end: { lat: 3, lng: 4 } })
+  })
+
+  it('uses the checked-out hotel as start and the checked-in hotel as end on a transfer day', () => {
+    const accs = [
+      hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 1 }), // checkout today
+      hotel({ start_day_id: 20, end_day_id: 30, place_lat: 9, place_lng: 9 }), // check-in today
+    ]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({
+      start: { lat: 1, lng: 1 },
+      end: { lat: 9, lng: 9 },
+    })
+  })
+
+  it('ignores accommodations that have no coordinates', () => {
+    const accs = [hotel({ start_day_id: 10, end_day_id: 30, place_lat: null, place_lng: null })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({})
+  })
+})

client/src/utils/dayOrder.ts

@@ -1,8 +1,34 @@
-import type { Day } from '../types'
+import type { Day, Accommodation, RouteAnchors } from '../types'
 
 export const getDayOrder = (day: Day, days: Day[]): number =>
   day.day_number ?? days.indexOf(day)
 
+// Derives route anchors from the accommodation(s) active on a day. A single hotel is the day's home
+// base, so the route is a loop that starts and ends there. A transfer day — checking out of one hotel
+// and into another — instead runs from the morning hotel to the evening one.
+export const getAccommodationAnchors = (
+  day: Day,
+  days: Day[],
+  accommodations: Accommodation[],
+): RouteAnchors => {
+  const located = accommodations.filter(a =>
+    a.place_lat != null && a.place_lng != null &&
+    isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days),
+  )
+  if (located.length === 0) return {}
+
+  const toAnchor = (a: Accommodation) => ({ lat: a.place_lat as number, lng: a.place_lng as number })
+
+  const checkOut = located.find(a => a.end_day_id === day.id) // the hotel you leave this morning
+  const checkIn = located.find(a => a.start_day_id === day.id) // the hotel you arrive at tonight
+  if (checkOut && checkIn && checkOut !== checkIn) {
+    return { start: toAnchor(checkOut), end: toAnchor(checkIn) }
+  }
+
+  const hotel = toAnchor(located[0])
+  return { start: hotel, end: hotel }
+}
+
 export const isDayInAccommodationRange = (
   day: Day,
   startDayId: number,

client/src/utils/fileDownload.ts

@@ -1,3 +1,5 @@
+import { getCachedBlob } from '../db/offlineDb'
+
 // MIME types safe to open inline (will not execute script in any browser).
 // Everything else (text/html, image/svg+xml, text/javascript, …) is forced to
 // download so a maliciously-named upload cannot run code in the TREK origin.
@@ -39,17 +41,46 @@ function isIosStandalone(): boolean {
   return (navigator as any).standalone === true
 }
 
+/**
+ * Resolves a protected file to a Blob, preferring the live server but falling
+ * back to the offline cache (pre-downloaded by the trip sync manager). This is
+ * what lets attachments open in a PWA / airplane mode. When offline we go
+ * straight to the cache; when online we fetch live and only fall back if the
+ * network actually fails — which also covers flaky links where navigator.onLine
+ * still reports true ("sometimes it works, sometimes it doesn't").
+ */
+async function getFileBlob(url: string): Promise<Blob> {
+  assertRelativeUrl(url)
+  if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+    const cached = await getCachedBlob(url)
+    if (cached) return cached
+    throw new Error('File not available offline')
+  }
+  let resp: Response
+  try {
+    resp = await fetch(url, { credentials: 'include' })
+  } catch (err) {
+    // Genuine network failure — the fetch itself rejected (offline, or a flaky
+    // link even though navigator.onLine is true). Serve the pre-downloaded copy.
+    const cached = await getCachedBlob(url)
+    if (cached) return cached
+    throw err
+  }
+  // The server answered: a non-ok status (401/403/404/…) is a real error and must
+  // surface, not be masked by a stale cached copy.
+  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
+  return await resp.blob()
+}
+
 /**
  * Fetches a protected file using cookie auth (credentials: include) and
  * triggers a browser download. Works inside PWA standalone mode because the
  * fetch stays in the PWA's WebView rather than handing off to the system
- * browser (which would lose the session cookie).
+ * browser (which would lose the session cookie). Falls back to the offline
+ * cache when the network is unavailable.
  */
 export async function downloadFile(url: string, filename?: string): Promise<void> {
-  assertRelativeUrl(url)
-  const resp = await fetch(url, { credentials: 'include' })
-  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
-  const blob = await resp.blob()
+  const blob = await getFileBlob(url)
   const blobUrl = URL.createObjectURL(blob)
   triggerAnchorDownload(blobUrl, filename)
 }
@@ -72,10 +103,7 @@ export async function downloadFile(url: string, filename?: string): Promise<void
  * spurious in-page download is triggered.
  */
 export async function openFile(url: string, filename?: string): Promise<void> {
-  assertRelativeUrl(url)
-  const resp = await fetch(url, { credentials: 'include' })
-  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
-  const blob = await resp.blob()
+  const blob = await getFileBlob(url)
   const blobUrl = URL.createObjectURL(blob)
 
   // Force download for MIME types that can execute script when rendered inline

client/src/utils/formatters.ts

@@ -39,6 +39,58 @@ export function currencyDecimals(currency: string): number {
   return ZERO_DECIMAL_CURRENCIES.has(currency.toUpperCase()) ? 0 : 2
 }
 
+// Each currency formats in its own home convention (symbol position, grouping and
+// decimal separators) regardless of the app language — so EUR is always "1.234,56 €"
+// and USD always "$1,234.56". Intl derives all of that from the locale, so we map
+// each supported currency to a representative locale (Latin-digit variants for the
+// Arabic/Bengali ones to avoid non-Latin numerals).
+const CURRENCY_LOCALE: Record<string, string> = {
+  EUR: 'de-DE', USD: 'en-US', GBP: 'en-GB', JPY: 'ja-JP', CHF: 'de-CH',
+  CZK: 'cs-CZ', PLN: 'pl-PL', SEK: 'sv-SE', NOK: 'nb-NO', DKK: 'da-DK',
+  TRY: 'tr-TR', THB: 'th-TH', AUD: 'en-AU', CAD: 'en-CA', NZD: 'en-NZ',
+  BRL: 'pt-BR', MXN: 'es-MX', INR: 'en-IN', IDR: 'id-ID', MYR: 'ms-MY',
+  PHP: 'en-PH', SGD: 'en-SG', KRW: 'ko-KR', CNY: 'zh-CN', HKD: 'en-HK',
+  TWD: 'zh-TW', ZAR: 'en-ZA', AED: 'en-AE', SAR: 'en-SA', ILS: 'he-IL',
+  EGP: 'en-EG', MAD: 'fr-MA', HUF: 'hu-HU', RON: 'ro-RO', BGN: 'bg-BG',
+  HRK: 'hr-HR', ISK: 'is-IS', RUB: 'ru-RU', UAH: 'uk-UA', BDT: 'en-BD',
+  LKR: 'en-LK', VND: 'vi-VN', CLP: 'es-CL', COP: 'es-CO', PEN: 'es-PE',
+  ARS: 'es-AR',
+}
+
+export function currencyLocale(currency: string): string {
+  return CURRENCY_LOCALE[(currency || '').toUpperCase()] || 'en-US'
+}
+
+/**
+ * Locale- and currency-correct money formatting via Intl: the symbol position,
+ * thousands/decimal separators and decimal count all follow the user's locale
+ * and the currency itself (e.g. de-DE EUR → "1.234,56 €", en-US USD → "$1,234.56",
+ * ja-JP JPY → "￥1,235"). Falls back to a "<number> CODE" suffix for unknown codes.
+ */
+export function formatMoney(
+  value: number,
+  currency: string,
+  locale: string,
+  opts?: { decimals?: number },
+): string {
+  const cur = (currency || 'EUR').toUpperCase()
+  const decimals = opts?.decimals ?? currencyDecimals(cur)
+  // Format in the currency's home convention, not the app language, so the symbol
+  // position and separators are always correct for that currency. `locale` stays
+  // as a last-resort fallback for the error path.
+  const fmtLocale = currencyLocale(cur)
+  try {
+    return new Intl.NumberFormat(fmtLocale, {
+      style: 'currency',
+      currency: cur,
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    }).format(value || 0)
+  } catch {
+    return `${(value || 0).toLocaleString(locale || fmtLocale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })} ${cur}`
+  }
+}
+
 export function formatDate(dateStr: string | null | undefined, locale: string, timeZone?: string): string | null {
   if (!dateStr) return null
   const opts: Intl.DateTimeFormatOptions = {

client/tests/helpers/msw/handlers/addons.ts

@@ -3,6 +3,7 @@ import { http, HttpResponse } from 'msw';
 export const addonHandlers = [
   http.get('/api/addons', () => {
     return HttpResponse.json({
+      bagTracking: false,
       addons: [
         { id: 'vacay', name: 'Vacay', type: 'feature', icon: 'calendar', enabled: true },
         { id: 'atlas', name: 'Atlas', type: 'feature', icon: 'map', enabled: true },

client/tests/unit/stores/addonStore.test.ts

@@ -18,6 +18,18 @@ describe('addonStore', () => {
       expect(state.addons.length).toBeGreaterThan(0);
       expect(state.addons[0]).toHaveProperty('id');
       expect(state.addons[0]).toHaveProperty('enabled', true);
+      expect(state.bagTracking).toBe(false);
+    });
+
+    it('captures the global bagTracking flag from the response', async () => {
+      server.use(
+        http.get('/api/addons', () =>
+          HttpResponse.json({ bagTracking: true, addons: [] })
+        )
+      );
+
+      await useAddonStore.getState().loadAddons();
+      expect(useAddonStore.getState().bagTracking).toBe(true);
     });
   });
 

client/tests/unit/utils/fileDownload.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { downloadFile, openFile } from '../../../src/utils/fileDownload'
+import { getCachedBlob } from '../../../src/db/offlineDb'
+
+// Mock the offline DB so these tests never touch Dexie/IndexedDB.
+vi.mock('../../../src/db/offlineDb', () => ({ getCachedBlob: vi.fn() }))
 
 function makeFetchMock(status: number, blob: Blob = new Blob(['data'], { type: 'application/pdf' })) {
   return vi.fn().mockResolvedValue({
@@ -170,3 +174,52 @@ describe('openFile', () => {
     }
   })
 })
+
+describe('offline fallback (#1046)', () => {
+  function setOnline(value: boolean) {
+    Object.defineProperty(navigator, 'onLine', { value, configurable: true })
+  }
+  beforeEach(() => vi.mocked(getCachedBlob).mockReset())
+  afterEach(() => setOnline(true))
+
+  it('serves the cached blob without a network call when offline', async () => {
+    setOnline(false)
+    const blob = new Blob(['x'], { type: 'application/pdf' })
+    vi.mocked(getCachedBlob).mockResolvedValue(blob)
+    const fetchSpy = vi.fn()
+    vi.stubGlobal('fetch', fetchSpy)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+
+    await downloadFile('/uploads/files/cached.pdf')
+
+    expect(fetchSpy).not.toHaveBeenCalled()
+    expect(getCachedBlob).toHaveBeenCalledWith('/uploads/files/cached.pdf')
+    expect(URL.createObjectURL).toHaveBeenCalledWith(blob)
+  })
+
+  it('falls back to the cache when a live fetch rejects (network error) while online', async () => {
+    setOnline(true)
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network down')))
+    const blob = new Blob(['x'], { type: 'application/pdf' })
+    vi.mocked(getCachedBlob).mockResolvedValue(blob)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+
+    await downloadFile('/uploads/files/cached.pdf')
+
+    expect(getCachedBlob).toHaveBeenCalledWith('/uploads/files/cached.pdf')
+    expect(URL.createObjectURL).toHaveBeenCalledWith(blob)
+  })
+
+  it('throws when offline and the file was never cached', async () => {
+    setOnline(false)
+    vi.mocked(getCachedBlob).mockResolvedValue(null)
+    await expect(downloadFile('/uploads/files/missing.pdf')).rejects.toThrow(/offline/i)
+  })
+
+  it('does not consult the cache on an HTTP error — a 401 still surfaces', async () => {
+    setOnline(true)
+    vi.stubGlobal('fetch', makeFetchMock(401))
+    await expect(downloadFile('/uploads/files/secret.pdf')).rejects.toThrow('Unauthorized')
+    expect(getCachedBlob).not.toHaveBeenCalled()
+  })
+})

client/vite.config.js

@@ -76,7 +76,6 @@ export default defineConfig({
         display: 'standalone',
         scope: '/',
         start_url: '/',
-        orientation: 'any',
         categories: ['travel', 'navigation'],
         icons: [
           { src: 'icons/apple-touch-icon-180x180.png', sizes: '180x180', type: 'image/png' },

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   app:
-    image: mauriceboe/trek:latest
+    image: mauriceboe/trek:dev
     container_name: trek
     read_only: true
     security_opt:
@@ -12,7 +12,7 @@ services:
       - SETUID
       - SETGID
     tmpfs:
-      - /tmp:noexec,nosuid,size=64m
+      - /tmp:noexec,nosuid,size=128m
     ports:
       - "3000:3000"
     environment:
@@ -22,6 +22,7 @@ services:
       - TZ=${TZ:-UTC} # Timezone for logs, reminders and scheduled tasks (e.g. Europe/Berlin)
       - LOG_LEVEL=${LOG_LEVEL:-info} # info = concise user actions; debug = verbose admin-level details
 #      - DEFAULT_LANGUAGE=en # Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: de, en, es, fr, hu, nl, br, cs, pl, ru, zh, zh-TW, it, ar
+#      - SESSION_DURATION=30d # How long users stay logged in (trek_session JWT + cookie maxAge). Accepts: 1h | 12h | 7d | 30d | 90d. Default: 24h
       - ALLOWED_ORIGINS=${ALLOWED_ORIGINS:-} # Comma-separated origins for CORS and email notification links
 #      - FORCE_HTTPS=true # Optional. Enables HTTPS redirect, HSTS, CSP upgrade-insecure-requests, and secure cookies behind a TLS proxy
 #      - HSTS_INCLUDE_SUBDOMAINS=false # When true: adds includeSubDomains to the HSTS header. Only effective when HSTS is active. Leave false if sibling subdomains still run over plain HTTP.
@@ -42,6 +43,7 @@ services:
 #      - ADMIN_PASSWORD=changeme      # Initial admin password — only used on first boot when no users exist
 #      - MCP_RATE_LIMIT=300 # Max MCP API requests per user per minute (default: 300)
 #      - MCP_MAX_SESSION_PER_USER=20 # Max concurrent MCP sessions per user (default: 20)
+#      - KITINERARY_EXTRACTOR_PATH= # Optional. Full path to kitinerary-extractor binary. Auto-detected from PATH and /usr/lib/*/libexec/kf6/ when unset.
     volumes:
       - ./data:/app/data
       - ./uploads:/app/uploads

package-lock.json

@@ -26,7 +26,10 @@
       "name": "@trek/client",
       "version": "3.0.22",
       "dependencies": {
+        "@fontsource/geist-sans": "^5.2.5",
+        "@fontsource/poppins": "^5.2.7",
         "@react-pdf/renderer": "^4.5.1",
+        "@simplewebauthn/browser": "^13.1.2",
         "@trek/shared": "*",
         "axios": "^1.6.7",
         "dexie": "^4.4.2",
@@ -2505,6 +2508,30 @@
         }
       }
     },
+    "node_modules/@fontsource/geist-sans": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz",
+      "integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/poppins": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.2.7.tgz",
+      "integrity": "sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@hexagon/base64": {
+      "version": "1.1.28",
+      "resolved": "https://registry.npmjs.org/@hexagon/base64/-/base64-1.1.28.tgz",
+      "integrity": "sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==",
+      "license": "MIT"
+    },
     "node_modules/@hono/node-server": {
       "version": "1.19.14",
       "license": "MIT",
@@ -3636,6 +3663,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@levischuck/tiny-cbor": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@levischuck/tiny-cbor/-/tiny-cbor-0.2.11.tgz",
+      "integrity": "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow==",
+      "license": "MIT"
+    },
     "node_modules/@lukeed/csprng": {
       "version": "1.1.0",
       "license": "MIT",
@@ -4470,6 +4503,174 @@
         "@noble/hashes": "^1.1.5"
       }
     },
+    "node_modules/@peculiar/asn1-android": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-android/-/asn1-android-2.7.0.tgz",
+      "integrity": "sha512-iD3VskhVQnM4nE3PN9cBdPTR7JrqZy3FYk+uD2CeG6DUqKoANqaEfx0f7izPmW+Qm5JBM35ek+viLCmjy18ByQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-cms": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.7.0.tgz",
+      "integrity": "sha512-hew63shtzzvBcSHbhm+cyAmKe6AIfinT9hzEqSPjDC6opTTMKmTkQ0gHuN2KsWlvqiKw1S/fS94fhag/FJkioQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "@peculiar/asn1-x509-attr": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-csr": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-csr/-/asn1-csr-2.7.0.tgz",
+      "integrity": "sha512-VVsAyGqErT9D1SY4aEqozThXMVI+ssVRiv2DDeYuvpBKLIgZ3hYs3Ay3u/VSoKq6ESFi9cf6rf3IOOzfwh7oMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-ecc": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.7.0.tgz",
+      "integrity": "sha512-n7KEs/Q/wrB415cxy4fHOBhegp4NdJ15fkJPwcB/3/8iNBQC2L/N7SChJPKDJPZGYH0jD4Tg4/0vnHmwghnbKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pfx": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pfx/-/asn1-pfx-2.7.0.tgz",
+      "integrity": "sha512-V/nrlQVmhg7lYAsM7E13UDL5erAwFv6kCIVFqNaMIHSVi7dngcT839JkRTkQBqznMG98l2XjxYk74ZztAohZzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.7.0",
+        "@peculiar/asn1-pkcs8": "^2.7.0",
+        "@peculiar/asn1-rsa": "^2.7.0",
+        "@peculiar/asn1-schema": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pkcs8": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.7.0.tgz",
+      "integrity": "sha512-9GTl1nE8Mx1kTZ+7QyYatDyKsm34QcWRBFkY1iPvWC3X4Dona5s/tlLiQsx5WzVdZqiMBZNYT0buyw4/vbhnjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pkcs9": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.7.0.tgz",
+      "integrity": "sha512-Bh7m+OuIaSEllPQcSd9OSp93F4ROWH7sbITWV8MI+8dwsjE5111/87VxiWVvYFKyww3vp39geLv9ENqhwWHcew==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.7.0",
+        "@peculiar/asn1-pfx": "^2.7.0",
+        "@peculiar/asn1-pkcs8": "^2.7.0",
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "@peculiar/asn1-x509-attr": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-rsa": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.7.0.tgz",
+      "integrity": "sha512-/qvENQrXyTZURjMqSeofHul0JJt2sNSzSwk36pl2olkHbaioMQgrASDZAlHXl0xUlnVbHj0uGgOrBMTb5x2aJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-schema": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.7.0.tgz",
+      "integrity": "sha512-W8ZfWzLmQnrcky+eh3tni4IozMdqBDiHWU0N+vve/UGjMaUs8c0L7A2oEdkBXS8rTpWDpK/aoI3DG/L/hxmxPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/utils": "^2.0.2",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-x509": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.7.0.tgz",
+      "integrity": "sha512-mUn9RRrkGDnG4ALfunDmzyRW5dg+sWCj/pfnCCqEHYbkGxEpvUt6iVJv8Yw1cyp6SWZ26ZE5oSmI5SqEaen15g==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/utils": "^2.0.2",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-x509-attr": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.7.0.tgz",
+      "integrity": "sha512-NS8e7SOgXipkzUPLF/sce7ukpMpWjhxYsH0n6Y+bHYo4TTxOb95Zv7hqwSuL212mj5YxovjdOKQOgH1As3E94w==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/utils/-/utils-2.0.3.tgz",
+      "integrity": "sha512-+oL3HPFRIZ1St2K50lWCXiioIgSoxzz7R1J3uF6neO2yl1sgmpgY6XXJH4BdpoDkMWznQTeYF6oWNDZLCdQ4eQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/x509": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/x509/-/x509-1.14.3.tgz",
+      "integrity": "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.6.0",
+        "@peculiar/asn1-csr": "^2.6.0",
+        "@peculiar/asn1-ecc": "^2.6.0",
+        "@peculiar/asn1-pkcs9": "^2.6.0",
+        "@peculiar/asn1-rsa": "^2.6.0",
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.0",
+        "pvtsutils": "^1.3.6",
+        "reflect-metadata": "^0.2.2",
+        "tslib": "^2.8.1",
+        "tsyringe": "^4.10.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "dev": true,
@@ -5159,6 +5360,31 @@
         "win32"
       ]
     },
+    "node_modules/@simplewebauthn/browser": {
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/@simplewebauthn/browser/-/browser-13.3.0.tgz",
+      "integrity": "sha512-BE/UWv6FOToAdVk0EokzkqQQDOWtNydYlY6+OrmiZ5SCNmb41VehttboTetUM3T/fr6EAFYVXjz4My2wg230rQ==",
+      "license": "MIT"
+    },
+    "node_modules/@simplewebauthn/server": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/@simplewebauthn/server/-/server-13.3.1.tgz",
+      "integrity": "sha512-GV/oM/qeycWn8p42JZIMJBsXWQcNFg+nJFzeQTnMA4gN8mXg0+HZFWJerHg8ZN/zlveMS3iV1wzuFpOVWS/46w==",
+      "license": "MIT",
+      "dependencies": {
+        "@hexagon/base64": "^1.1.27",
+        "@levischuck/tiny-cbor": "^0.2.2",
+        "@peculiar/asn1-android": "^2.6.0",
+        "@peculiar/asn1-ecc": "^2.6.1",
+        "@peculiar/asn1-rsa": "^2.6.1",
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "@peculiar/x509": "^1.14.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@swc/core": {
       "version": "1.15.40",
       "dev": true,
@@ -6422,6 +6648,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asn1js": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz",
+      "integrity": "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.5",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "dev": true,
@@ -12745,6 +12985,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/pvtsutils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/pvutils": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.5.tgz",
+      "integrity": "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/qrcode": {
       "version": "1.5.4",
       "license": "MIT",
@@ -15425,6 +15683,24 @@
         "@esbuild/win32-x64": "0.28.0"
       }
     },
+    "node_modules/tsyringe": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/tsyringe/-/tsyringe-4.10.0.tgz",
+      "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/tsyringe/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "license": "Apache-2.0",
@@ -17326,6 +17602,7 @@
         "@nestjs/common": "^11.1.24",
         "@nestjs/core": "^11.1.24",
         "@nestjs/platform-express": "^11.1.24",
+        "@simplewebauthn/server": "^13.1.2",
         "@trek/shared": "*",
         "archiver": "^6.0.1",
         "bcryptjs": "^2.4.3",

server/.env.example

@@ -8,6 +8,7 @@ NODE_ENV=development # development = development mode; production = production m
 # Generate with: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
 TZ=UTC # Timezone for logs, reminders and scheduled tasks (e.g. Europe/Berlin)
 # DEFAULT_LANGUAGE=en # Default language on the login page for users with no saved preference (default: en)
+# SESSION_DURATION=30d # How long users stay logged in — sets the trek_session JWT exp + cookie maxAge. Accepts 1h, 12h, 7d, 30d, 90d. Default: 24h
 # Supported values: de, en, es, fr, hu, nl, br, cs, pl, ru, zh, zh-TW, it, ar
 # Note: browser/OS language is detected automatically first; this is the fallback when no match is found.
 LOG_LEVEL=info # info = concise user actions; debug = verbose admin-level details

server/.gitignore

@@ -0,0 +1 @@
+.atlas-geo-cache/