test(pdf): add missing day_id to transport reservation fixture

Reservations were matched to days by pickup date only, so the end-day
card (e.g. car Return, flight Arrival) was silently dropped from the PDF.
Add span-aware helpers mirroring DayPlanSidebar logic: match by day_id/end_day_id
span, show reservation_end_time on end days, prefix title with phase label
(Return/Arrival/etc.), and use per-day position for sort order.

.dockerignore

@@ -30,3 +30,7 @@ sonar-project.properties
 server/tests/
 server/vitest.config.ts
 server/reset-admin.js
+**/*.test.ts
+wiki/
+scripts/
+charts/

.gitattributes

@@ -1,6 +1,5 @@
 # Normalize line endings to LF on commit
 * text=auto eol=lf
-
 # Explicitly enforce LF for source files
 *.ts   text eol=lf
 *.tsx  text eol=lf
@@ -14,7 +13,6 @@
 *.yaml text eol=lf
 *.py   text eol=lf
 *.sh   text eol=lf
-
 # Binary files — no line ending conversion
 *.png  binary
 *.jpg  binary

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -12,6 +12,8 @@ body:
           required: true
         - label: I am running the latest available version of TREK
           required: true
+        - label: I have read the [Troubleshooting guide](https://github.com/mauriceboe/TREK/wiki/Troubleshooting) and my issue is not covered there
+          required: true
 
   - type: input
     id: version

.github/workflows/docker.yml

@@ -6,6 +6,8 @@ on:
     paths-ignore:
       - 'docs/**'
       - '**/*.md'
+      - 'wiki/**'
+      - '.github/workflows/wiki.yml'
   workflow_dispatch:
     inputs:
       bump:

.github/workflows/wiki.yml

@@ -0,0 +1,26 @@
+name: Deploy Wiki
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'wiki/**'
+      - '.github/workflows/wiki.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+concurrency:
+  group: wiki-deploy
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Publish to GitHub wiki
+        uses: Andrew-Chen-Wang/github-wiki-action@v5
+        with:
+          strategy: clone

.gitignore

@@ -16,7 +16,7 @@ client/public/icons/*.png
 *.sqlite-wal
 
 # User data
-server/data/
+server/data/*
 server/uploads/
 
 # Environment
@@ -58,4 +58,7 @@ coverage
 *.tgz
 
 .scannerwork
-test-data
+test-data
+
+.run
+.full-review

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Thanks for your interest in contributing! Please read these guidelines before op
 
 ## Ground Rules
 
-1. **Ask in Discord first** — Before writing any code, pitch your idea in the `#github-pr` channel on our [Discord server](https://discord.gg/P7TUxHJs). We'll let you know if the PR is wanted and give direction. PRs that show up without prior discussion will be closed
+1. **Ask in Discord first** — Before writing any code, pitch your idea in the `#github-pr` channel on our [Discord server](https://discord.gg/NhZBDSd4qW). We'll let you know if the PR is wanted and give direction. PRs that show up without prior discussion will be closed
 2. **One change per PR** — Keep it focused. Don't bundle unrelated fixes or refactors
 3. **No breaking changes** — Backwards compatibility is non-negotiable
 4. **Target the `dev` branch** — All PRs must be opened against `dev`, not `main`

MCP.md

@@ -16,6 +16,7 @@ structured API.
 - [Limitations & Important Notes](#limitations--important-notes)
 - [Resources (read-only)](#resources-read-only)
 - [Tools (read-write)](#tools-read-write)
+  - [Compound Tools](#compound-tools)
 - [Prompts](#prompts)
 - [Example](#example)
 
@@ -52,10 +53,11 @@ management required — just provide the server URL:
 > The path to `npx` may need to be adjusted for your system (e.g. `C:\PROGRA~1\nodejs\npx.cmd` on Windows).
 
 **What happens automatically:**
-1. The client fetches `/.well-known/oauth-authorization-server` to discover the TREK authorization server.
-2. The client registers itself via [Dynamic Client Registration (RFC 7591)](https://www.rfc-editor.org/rfc/rfc7591).
-3. Your browser opens TREK's consent screen, where you choose which scopes (permissions) to grant.
-4. The client receives a short-lived access token and a rotating refresh token — no re-authorization needed.
+1. The client fetches `/.well-known/oauth-protected-resource` (RFC 9728) to discover the authorization server and bind the `/mcp` endpoint.
+2. The client fetches `/.well-known/oauth-authorization-server` for the full AS metadata.
+3. The client registers itself via [Dynamic Client Registration (RFC 7591)](https://www.rfc-editor.org/rfc/rfc7591).
+4. Your browser opens TREK's consent screen, where you choose which scopes (permissions) to grant.
+5. The client receives a short-lived access token audience-bound to `/mcp` (RFC 8707) and a rotating refresh token — no re-authorization needed.
 
 > **Requirement:** The `APP_URL` environment variable must be set to your TREK instance's public URL for OAuth
 > discovery to work correctly.
@@ -140,13 +142,17 @@ that match your granted scopes for that session.
 | `vacay:write` | Manage vacation plans | Vacation |
 | `geo:read` | Maps & geocoding | Geo |
 | `weather:read` | Weather forecasts | Weather |
+| `journey:read` | View journeys | Journey |
+| `journey:write` | Manage journeys | Journey |
+| `journey:share` | Manage journey share links | Journey |
 
 **Scope rules:**
 - A `:write` scope implies `:read` access for the same group (e.g. `budget:write` also grants budget read access).
 - Any `trips:*` scope (`trips:read`, `trips:write`, `trips:delete`, or `trips:share`) grants trip read access.
+- Any `journey:*` scope (`journey:read`, `journey:write`, or `journey:share`) grants journey read access.
 - `list_trips` and `get_trip_summary` are **always available** regardless of scopes — they are navigation tools.
 - Static tokens and web session JWTs have full access to all tools (equivalent to all scopes).
-- Addon-gated tools (Atlas Extended, Collab, Vacay) require both the relevant scope **and** the addon to be enabled.
+- Addon-gated tools (Atlas, Collab, Vacay, Journey) require both the relevant scope **and** the addon to be enabled.
 
 ---
 
@@ -167,7 +173,7 @@ that match your granted scopes for that session.
 | **OAuth scope enforcement**             | Only tools matching your granted OAuth scopes are registered in the session. Calling an out-of-scope tool returns an error.                      |
 | **Addon toggle invalidation**           | When an admin enables or disables an addon, all active MCP sessions are invalidated and must be re-established.                                  |
 | **Real-time sync**                      | Changes made through MCP are broadcast to all connected clients in real-time via WebSocket, just like changes made through the web UI.           |
-| **Addon-gated features**                | Some resources and tools are only available when the corresponding addon (Atlas, Collab, Vacay) is enabled by an admin.                          |
+| **Addon-gated features**                | Some resources and tools are only available when the corresponding addon (Atlas, Collab, Vacay, Journey) is enabled by an admin.                 |
 
 ---
 
@@ -194,7 +200,6 @@ making changes.
 | Accommodations        | `trek://trips/{tripId}/accommodations`          | Hotels/rentals with check-in/out details                                              |
 | Members               | `trek://trips/{tripId}/members`                 | Owner and collaborators                                                               |
 | Collab Notes          | `trek://trips/{tripId}/collab-notes`            | Shared collaborative notes                                                            |
-| Files                 | `trek://trips/{tripId}/files`                   | Files attached to a trip (excludes trashed files)                                     |
 | To-Dos                | `trek://trips/{tripId}/todos`                   | To-do items ordered by position                                                       |
 | Categories            | `trek://categories`                             | Available place categories (for use when creating places)                             |
 | Bucket List           | `trek://bucket-list`                            | Your personal travel bucket list                                                      |
@@ -214,6 +219,10 @@ These resources are only available when the corresponding addon is enabled by an
 | Vacay Plan            | `trek://vacay/plan`                             | Vacay    | Full snapshot of your active vacation plan (members, years, config) |
 | Vacay Entries         | `trek://vacay/entries/{year}`                   | Vacay    | All vacation day entries for the active plan and a specific year    |
 | Vacay Holidays        | `trek://vacay/holidays/{year}`                  | Vacay    | Public holidays for the plan's configured region and year           |
+| Journeys              | `trek://journeys`                               | Journey  | All journeys owned or contributed to by the current user            |
+| Journey Detail        | `trek://journeys/{journeyId}`                   | Journey  | Single journey with entries, contributors, and linked trips         |
+| Journey Entries       | `trek://journeys/{journeyId}/entries`           | Journey  | All entries in a journey (date, text, mood, linked trip)            |
+| Journey Contributors  | `trek://journeys/{journeyId}/contributors`      | Journey  | Contributors (owner and collaborators) of a journey                 |
 
 ---
 
@@ -226,7 +235,23 @@ trip in a single call.
 
 | Tool               | Description                                                                                                                                                                                                           |
 |--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `get_trip_summary` | Full denormalized snapshot of a trip: metadata, members, days with assignments and notes, accommodations, budget, packing, reservations, collab notes, to-dos, files, and poll/message counts. Use this as your context loader. |
+| `get_trip_summary` | Full denormalized snapshot of a trip: metadata, members, days with assignments and notes, accommodations, budget, packing, reservations, collab notes, to-dos, and poll/message counts. Use this as your context loader. |
+
+### Compound Tools
+
+Compound tools collapse common multi-step workflows into a single atomic call. Each one wraps two sequential operations in a database transaction — if the second step fails, the first is rolled back automatically.
+
+> **When to use:** Only use compound tools when the place or item does not yet exist. If it already exists, call the individual tools (`assign_place_to_day`, `create_accommodation`, `set_budget_item_members`) directly.
+
+| Tool | Wraps | Description |
+|---|---|---|
+| `create_and_assign_place` | `create_place` + `assign_place_to_day` | Create a new place and immediately assign it to a specific day. Accepts all `create_place` fields (`place_notes` instead of `notes`) plus `dayId` and optional `assignment_notes`. Returns `{ place, assignment }`. |
+| `create_place_accommodation` | `create_place` + `create_accommodation` | Create a new place and immediately book it as an accommodation for a date range. Accepts all `create_place` fields (`place_notes` instead of `notes`) plus `start_day_id`, `end_day_id`, `check_in`, `check_out`, `confirmation`, and `accommodation_notes`. Also auto-creates a linked hotel reservation. Returns `{ place, accommodation }`. |
+| `create_budget_item_with_members` | `create_budget_item` + `set_budget_item_members` | Create a budget item and optionally set which members are splitting it. Accepts all `create_budget_item` fields plus an optional `userIds` array. If `userIds` is omitted or empty, behaves identically to `create_budget_item`. Returns `{ item }` with members populated. |
+
+**Scope requirements** match the underlying tools: `places:write` for `create_and_assign_place`, `trips:write` for `create_place_accommodation`, `budget:write` for `create_budget_item_with_members` (Budget addon required).
+
+---
 
 ### Trips
 
@@ -247,14 +272,18 @@ trip in a single call.
 
 ### Places
 
+> To create a place and assign it to a day in one call, use [`create_and_assign_place`](#compound-tools).
+
 | Tool             | Description                                                                                      |
 |------------------|--------------------------------------------------------------------------------------------------|
-| `list_places`    | List places/POIs in a trip, optionally filtered by assignment status, category, tag, or search.  |
-| `create_place`   | Add a place/POI with name, coordinates, address, category, notes, website, phone, and optional `google_place_id` / `osm_id` for opening hours. |
-| `update_place`   | Update any field of an existing place including transport mode, timing, and price.               |
-| `delete_place`   | Remove a place from a trip.                                                                      |
-| `list_categories`| List all available place categories with id, name, icon and color.                              |
-| `search_place`   | Search for a real-world place by name or address. Returns `osm_id` and `google_place_id` for use in `create_place`. |
+| `list_places`              | List places/POIs in a trip, optionally filtered by assignment status, category, tag, or search.  |
+| `create_place`             | Add a place/POI with name, coordinates, address, category, notes, website, phone, and optional `google_place_id` / `osm_id` for opening hours. |
+| `update_place`             | Update any field of an existing place including transport mode, timing, and price.               |
+| `delete_place`             | Remove a place from a trip.                                                                      |
+| `bulk_delete_places`       | Delete multiple places at once by ID. Removes all day assignments as well. **Cannot be undone.** |
+| `import_places_from_url`   | Import all places from a publicly shared Google Maps or Naver Maps list URL.                     |
+| `list_categories`          | List all available place categories with id, name, icon and color.                              |
+| `search_place`             | Search for a real-world place by name or address. Returns `osm_id` and `google_place_id` for use in `create_place`. |
 
 ### Day Planning
 
@@ -273,24 +302,40 @@ trip in a single call.
 
 ### Accommodations
 
+> To create a place and book it as an accommodation in one call, use [`create_place_accommodation`](#compound-tools).
+
 | Tool                   | Description                                                                              |
 |------------------------|------------------------------------------------------------------------------------------|
 | `create_accommodation` | Add an accommodation (hotel, Airbnb, etc.) linked to a place and a check-in/out date range. |
 | `update_accommodation` | Update fields on an existing accommodation (dates, times, confirmation, notes).          |
 | `delete_accommodation` | Delete an accommodation record from a trip.                                              |
 
+### Transport
+
+Transport bookings (flights, trains, cars, cruises) support multi-stop `endpoints[]` — each endpoint has a `role` (`from`/`to`/`stop`), name, optional IATA `code` (for flights), coordinates, timezone, and local time. Use `search_airports` to resolve airport names to IATA codes before creating a flight.
+
+| Tool                   | Description                                                                                                                                           |
+|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `create_transport`     | Create a transport booking (`flight`, `train`, `car`, `cruise`) with optional endpoints, departure/arrival times, and confirmation details. Created as pending. |
+| `update_transport`     | Update an existing transport booking. Pass `endpoints[]` to replace the full stop list. Use `status: "confirmed"` to confirm.                        |
+| `delete_transport`     | Delete a transport booking from a trip.                                                                                                               |
+
 ### Reservations
 
-| Tool                       | Description                                                                                                                                                                                   |
-|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `create_reservation`       | Create a pending reservation. Supports flights, hotels, restaurants, trains, cars, cruises, events, tours, activities, and other types. Hotels can be linked to places and check-in/out days. |
-| `update_reservation`       | Update any field including status (`pending` / `confirmed` / `cancelled`).                                                                                                                    |
-| `delete_reservation`       | Delete a reservation and its linked accommodation record if applicable.                                                                                                                       |
-| `reorder_reservations`     | Update the display order of reservations within a day.                                                                                                                                        |
-| `link_hotel_accommodation` | Set or update a hotel reservation's check-in/out day links and associated place.                                                                                                              |
+For flights, trains, cars, and cruises, use the **Transport** tools above. Reservations cover all other booking types.
+
+| Tool                       | Description                                                                                                                              |
+|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
+| `create_reservation`       | Create a pending reservation. Supports hotels, restaurants, events, tours, activities, and other types. Hotels can be linked to places and check-in/out days. |
+| `update_reservation`       | Update any field including status (`pending` / `confirmed` / `cancelled`).                                                               |
+| `delete_reservation`       | Delete a reservation and its linked accommodation record if applicable.                                                                  |
+| `reorder_reservations`     | Update the display order of reservations (and transports) within a day.                                                                  |
+| `link_hotel_accommodation` | Set or update a hotel reservation's check-in/out day links and associated place.                                                         |
 
 ### Budget
 
+> To create a budget item and set its members in one call, use [`create_budget_item_with_members`](#compound-tools).
+
 | Tool                       | Description                                                                           |
 |----------------------------|---------------------------------------------------------------------------------------|
 | `create_budget_item`       | Add an expense with name, category, and price.                                        |
@@ -370,7 +415,14 @@ trip in a single call.
 | `get_weather`         | Get weather forecast for a location and date.                                                       |
 | `get_detailed_weather`| Get hourly/detailed weather forecast for a location and date.                                       |
 
-### Collab Notes
+### Airports
+
+| Tool              | Description                                                                                                       |
+|-------------------|-------------------------------------------------------------------------------------------------------------------|
+| `search_airports` | Search for airports by name, city, or IATA code. Returns IATA code, name, city, country, coordinates, timezone.  |
+| `get_airport`     | Look up a single airport by IATA code (e.g. `"ZRH"`, `"AMS"`, `"CDG"`).                                         |
+
+### Collab Notes _(Collab addon required)_
 
 | Tool                 | Description                                                                                     |
 |----------------------|-------------------------------------------------------------------------------------------------|
@@ -392,14 +444,14 @@ trip in a single call.
 | `delete_collab_message`| Delete a chat message (own messages only).                                              |
 | `react_collab_message`| Toggle a reaction emoji on a chat message.                                               |
 
-### Bucket List
+### Bucket List _(Atlas addon required)_
 
 | Tool                      | Description                                                                                |
 |---------------------------|--------------------------------------------------------------------------------------------|
 | `create_bucket_list_item` | Add a destination to your personal bucket list with optional coordinates and country code. |
 | `delete_bucket_list_item` | Remove an item from your bucket list.                                                      |
 
-### Atlas
+### Atlas _(Atlas addon required)_
 
 | Tool                     | Description                                                                     |
 |--------------------------|---------------------------------------------------------------------------------|
@@ -444,6 +496,33 @@ trip in a single call.
 | `list_holiday_countries`   | List countries available for public holiday calendars.                                |
 | `list_holidays`            | List public holidays for a country and year.                                          |
 
+### Journey _(Journey addon required)_
+
+| Tool                              | Description                                                                                                |
+|-----------------------------------|------------------------------------------------------------------------------------------------------------|
+| `list_journeys`                   | List all journeys owned or contributed to by the current user.                                             |
+| `get_journey`                     | Get a full snapshot of a journey: metadata, entries, contributors, and linked trips.                       |
+| `create_journey`                  | Create a new journey with title, optional subtitle, and an initial list of trip IDs.                       |
+| `update_journey`                  | Update a journey's title, subtitle, or status.                                                             |
+| `delete_journey`                  | Delete a journey.                                                                                          |
+| `add_journey_trip`                | Link an existing trip to a journey.                                                                        |
+| `remove_journey_trip`             | Remove a trip from a journey.                                                                              |
+| `list_journey_entries`            | List all entries in a journey (date, text, mood, linked trip).                                             |
+| `create_journey_entry`            | Add an entry to a journey with optional title, body text, date, linked trip, and sort order.               |
+| `update_journey_entry`            | Edit a journey entry's title, body, date, or mood.                                                         |
+| `delete_journey_entry`            | Remove an entry from a journey.                                                                            |
+| `reorder_journey_entries`         | Reorder entries in a journey by providing the new ordered list of entry IDs.                               |
+| `list_journey_contributors`       | List the contributors of a journey (owner and invited editors/viewers).                                    |
+| `add_journey_contributor`         | Invite a user to a journey with `editor` or `viewer` role.                                                 |
+| `update_journey_contributor_role` | Change a contributor's role between `editor` and `viewer`.                                                 |
+| `remove_journey_contributor`      | Remove a contributor from a journey.                                                                       |
+| `update_journey_preferences`      | Update display preferences for a journey (e.g. hide skeleton entries).                                     |
+| `get_journey_suggestions`         | Get suggested trips to add to journeys (based on recent trip history).                                     |
+| `list_journey_available_trips`    | List all trips available to the current user for linking to a journey.                                     |
+| `get_journey_share_link`          | Get the current public share link for a journey.                                                           |
+| `create_journey_share_link`       | Create or update the public share link for a journey.                                                      |
+| `delete_journey_share_link`       | Revoke the public share link for a journey.                                                                |
+
 ---
 
 ## Prompts

README.md

@@ -1,121 +1,174 @@
-<p align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="client/public/logo-light.svg" />
-    <source media="(prefers-color-scheme: light)" srcset="client/public/logo-dark.svg" />
-    <img src="client/public/logo-light.svg" alt="TREK" height="60" />
-  </picture>
-  <br />
-  <em>Your Trips. Your Plan.</em>
-</p>
+<div align="center">
 
-<p align="center">
-  <a href="https://discord.gg/NhZBDSd4qW"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Discord" /></a>
-  <a href="LICENSE"><img src="https://img.shields.io/badge/License-AGPL_v3-blue.svg" alt="License: AGPL v3" /></a>
-  <a href="https://hub.docker.com/r/mauriceboe/trek"><img src="https://img.shields.io/docker/pulls/mauriceboe/trek" alt="Docker Pulls" /></a>
-  <a href="https://github.com/mauriceboe/TREK"><img src="https://img.shields.io/github/stars/mauriceboe/TREK" alt="GitHub Stars" /></a>
-  <a href="https://github.com/mauriceboe/TREK/commits"><img src="https://img.shields.io/github/last-commit/mauriceboe/TREK" alt="Last Commit" /></a>
-</p>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/logo-trek-light.gif" />
+  <source media="(prefers-color-scheme: light)" srcset="docs/logo-trek-dark.gif" />
+  <img src="docs/logo-trek-dark.gif" alt="TREK" height="96" />
+</picture>
 
-<p align="center">
-  A self-hosted, real-time collaborative travel planner with interactive maps, budgets, packing lists, and more.
-  <br />
-  <strong><a href="https://demo-nomad.pakulat.org">Live Demo</a></strong> — Try TREK without installing. Resets hourly.
-</p>
+<br />
 
-![TREK Screenshot](docs/screenshot.png)
-![TREK Screenshot 2](docs/screenshot-2.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/subtitle-light.png" />
+  <source media="(prefers-color-scheme: light)" srcset="docs/subtitle-dark.png" />
+  <img src="docs/subtitle-dark.png" alt="Your trips. Your plan. Your server." height="28" />
+</picture>
+
+A self-hosted, real-time collaborative travel planner — with maps, budgets, packing lists, a journal, and AI built in.
+
+<br />
+
+<a href="https://demo-nomad.pakulat.org"><img alt="Demo" src="https://img.shields.io/badge/Demo-try-111827?style=for-the-badge" /></a>
+&nbsp;
+<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge" /></a>
+&nbsp;
+<a href="https://discord.gg/NhZBDSd4qW"><img alt="Discord" src="https://img.shields.io/badge/Discord-join-5865F2?style=for-the-badge" /></a>
+&nbsp;
+<a href="https://kanban.pakulat.org/shared/I4wxF6inOOMB0C6hH6kQm3efyNxFjwyI"><img alt="Roadmap" src="https://img.shields.io/badge/Roadmap-view-0EA5E9?style=for-the-badge" /></a>
+<br />
+<a href="https://ko-fi.com/mauriceboe"><img alt="Ko-fi" src="https://img.shields.io/badge/Ko--fi-support-FF5E5B?style=for-the-badge" /></a>
+&nbsp;
+<a href="https://www.buymeacoffee.com/mauriceboe"><img alt="BMAC" src="https://img.shields.io/badge/BMAC-support-FFDD00?style=for-the-badge" /></a>
+<br />
+<a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPL_v3-6B7280?style=flat-square" /></a>
+<a href="https://github.com/mauriceboe/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/mauriceboe/TREK?include_prereleases&style=flat-square&color=6B7280" /></a>
+<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/mauriceboe/trek?style=flat-square&color=6B7280" /></a>
+<a href="https://github.com/mauriceboe/TREK"><img alt="Stars" src="https://img.shields.io/github/stars/mauriceboe/TREK?style=flat-square&color=6B7280" /></a>
+
+</div>
+
+---
+
+<div align="center">
+
+<img src="https://github.com/mauriceboe/trek-media/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" />
+
+</div>
+
+<br />
+
+<div align="center">
+  <a href="docs/screenshots/dashboard.png"><img src="docs/screenshots/dashboard.png" alt="Dashboard" width="49%" /></a>
+  <a href="docs/screenshots/trip-planner.png"><img src="docs/screenshots/trip-planner.png" alt="Trip planner with 3D map" width="49%" /></a>
+  <a href="docs/screenshots/journey.png"><img src="docs/screenshots/journey.png" alt="Journey journal" width="49%" /></a>
+  <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Budget tracker" width="49%" /></a>
+  <a href="docs/screenshots/atlas.png"><img src="docs/screenshots/atlas.png" alt="Atlas · visited countries" width="49%" /></a>
+  <a href="docs/screenshots/vacay.png"><img src="docs/screenshots/vacay.png" alt="Vacay planner" width="49%" /></a>
+  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Iceland Ring Road" width="49%" /></a>
+  <a href="docs/screenshots/admin.png"><img src="docs/screenshots/admin.png" alt="Admin panel" width="49%" /></a>
+</div>
+
+---
+
+## What you get
+
+<picture>
+  <source media="(max-width: 700px)" srcset="docs/tiles/grid-mobile.svg" />
+  <img src="docs/tiles/grid-desktop.svg" alt="TREK feature tiles" width="100%" />
+</picture>
 
 <details>
-<summary>More Screenshots</summary>
+<summary><b>See all features</b></summary>
 
-| | |
-|---|---|
-| ![Plan Detail](docs/screenshot-plan-detail.png) | ![Bookings](docs/screenshot-bookings.png) |
-| ![Budget](docs/screenshot-budget.png) | ![Packing List](docs/screenshot-packing.png) |
-| ![Collab](docs/screenshot-collab.png) | |
+<table>
+<tr>
+<td width="50%" valign="top">
+
+#### 🧭 Trip planning
+
+- **Drag & drop planner** — organise places into day plans with reordering and cross-day moves
+- **Interactive map** — Leaflet or Mapbox GL with 3D buildings, terrain, photo markers, clustering, route visualization
+- **Place search** — Google Places (photos, ratings, hours) or OpenStreetMap (free, no API key)
+- **Day notes** — timestamped, icon-tagged notes with drag-and-drop reordering
+- **Route optimisation** — auto-sort places and export to Google Maps
+- **Weather forecasts** — 16-day via Open-Meteo (no key) + historical climate fallback
+- **Category filter** — show only matching pins on the map
+
+</td>
+<td width="50%" valign="top">
+
+#### 🧳 Travel management
+
+- **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files
+- **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
+- **Document manager** — attach docs, tickets, PDFs to trips / places / reservations (≤ 50 MB each)
+- **PDF export** — full trip plan as PDF with cover page, images, notes
+
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
+
+#### 👥 Collaboration
+
+- **Real-time sync** — WebSocket. Changes appear instantly across all connected users
+- **Multi-user trips** — invite members with role-based access
+- **Invite links** — one-time or reusable links with expiry
+- **SSO (OIDC)** — Google, Apple, Authentik, Keycloak, or any OIDC provider
+- **2FA** — TOTP + backup codes
+- **Collab suite** — group chat, shared notes, polls, day check-ins
+
+</td>
+<td width="50%" valign="top">
+
+#### 📱 Mobile & PWA
+
+- **Installable** — iOS and Android, straight from the browser, no App Store needed
+- **Offline support** — Service Worker caches tiles, API, uploads via Workbox
+- **Native feel** — fullscreen standalone, themed status bar, splash screen
+- **Touch optimised** — mobile-specific layouts with safe-area handling
+
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
+
+#### 🧩 Addons (admin-toggleable)
+
+- **Lists** — packing lists + to-dos with templates, member assignments, optional bag tracking
+- **Budget** — expense tracker with splits, pie chart, multi-currency
+- **Documents** — file attachments on trips, places, and reservations
+- **Collab** — chat, notes, polls, day-by-day attendance
+- **Vacay** — personal vacation planner with calendar, 100+ country holidays, carry-over tracking
+- **Atlas** — world map of visited countries, bucket list, travel stats, streak tracking, liquid-glass UI
+- **Journey** — magazine-style travel journal with entries, photos (Immich/Synology), maps, moods
+- **Naver List Import** — one-click import from shared Naver Maps lists
+- **MCP** — expose TREK to AI assistants via OAuth 2.1
+
+</td>
+<td width="50%" valign="top">
+
+#### 🤖 AI / MCP
+
+- **Built-in MCP server** — OAuth 2.1 authenticated. 150+ tools, 30 resources
+- **Granular scopes** — 27 OAuth scopes across 13 permission groups
+- **Full automation** — AI can create trips, plan days, build packing lists, manage budgets, mark countries visited
+- **Pre-built prompts** — `trip-summary`, `packing-list`, `budget-overview`
+- **Addon-aware** — exposes Atlas, Collab, Vacay when those addons are on
+
+</td>
+</tr>
+<tr>
+<td colspan="2" valign="top">
+
+#### ⚙️ Admin & customisation
+
+- **Dashboard views** — card grid or compact list · **Dark mode** — full theme with matching status bar
+- **15 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
+- **Admin panel** — users, invites, packing templates, categories, addons, API keys, backups, GitHub history
+- **Auto-backups** — scheduled with configurable retention · **Units** — °C/°F, 12h/24h, map tile sources, default coordinates
+
+</td>
+</tr>
+</table>
 
 </details>
 
-## Features
+<br />
 
-### Trip Planning
-- **Drag & Drop Planner** — Organize places into day plans with reordering and cross-day moves
-- **Interactive Map** — Leaflet map with photo markers, clustering, route visualization, and customizable tile sources
-- **Place Search** — Search via Google Places (with photos, ratings, opening hours) or OpenStreetMap (free, no API key needed)
-- **Day Notes** — Add timestamped, icon-tagged notes to individual days with drag & drop reordering
-- **Route Optimization** — Auto-optimize place order and export to Google Maps
-- **Weather Forecasts** — 16-day forecasts via Open-Meteo (no API key needed) with historical climate averages as fallback
-- **Map Category Filter** — Filter places by category and see only matching pins on the map
-
-### Travel Management
-- **Reservations & Bookings** — Track flights, accommodations, restaurants with status, confirmation numbers, and file attachments
-- **Budget Tracking** — Category-based expenses with pie chart, per-person/per-day splitting, and multi-currency support
-- **Packing Lists** — Category-based checklists with user assignment, packing templates, and progress tracking
-- **Packing Templates** — Create reusable packing templates in the admin panel with categories and items, apply to any trip
-- **Bag Tracking** — Optional weight tracking and bag assignment for packing items with iOS-style weight distribution (admin-toggleable)
-- **Document Manager** — Attach documents, tickets, and PDFs to trips, places, or reservations (up to 50 MB per file)
-- **PDF Export** — Export complete trip plans as PDF with cover page, images, notes, and TREK branding
-
-### Mobile & PWA
-- **Progressive Web App** — Install on iOS and Android directly from the browser, no App Store needed
-- **Offline Support** — Service Worker caches map tiles, API data, uploads, and static assets via Workbox
-- **Native App Feel** — Fullscreen standalone mode, custom app icon, themed status bar, and splash screen
-- **Touch Optimized** — Responsive design with mobile-specific layouts, touch-friendly controls, and safe area handling
-
-### Collaboration
-- **Real-Time Sync** — Plan together via WebSocket — changes appear instantly across all connected users
-- **Multi-User** — Invite members to collaborate on shared trips with role-based access
-- **Invite Links** — Create one-time registration links with configurable max uses and expiry for easy onboarding
-- **Single Sign-On (OIDC)** — Login with Google, Apple, Authentik, Keycloak, or any OIDC provider
-- **Two-Factor Authentication (MFA)** — TOTP-based 2FA with QR code setup, works with Google Authenticator, Authy, etc.
-- **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
-
-### Addons (modular, admin-toggleable)
-- **Vacay** — Personal vacation day planner with calendar view, public holidays (100+ countries), company holidays, user fusion with live sync, and carry-over tracking
-- **Atlas** — Interactive world map with visited countries, bucket list with planned travel dates, travel stats, continent breakdown, streak tracking, and liquid glass UI effects
-- **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
-- **Dashboard Widgets** — Currency converter and timezone clock, toggleable per user
-
-### AI / MCP Integration
-- **MCP Server** — Built-in [Model Context Protocol](MCP.md) server with OAuth 2.1 authentication exposes 80+ tools and 27 resources so AI assistants (Claude, Cursor, etc.) can read and modify your trips
-- **Granular Scopes** — 24 OAuth scopes across 13 permission groups let you control exactly what data your AI client can access
-- **Full Trip Automation** — AI can create trips, plan itineraries, build packing lists, manage budgets, send collab messages, mark countries visited, and more in a single conversation
-- **Prompts** — Pre-built `trip-summary`, `packing-list`, and `budget-overview` prompts give AI clients instant structured context
-- **Addon-Aware** — Atlas, Collab, and Vacay features are exposed automatically when those addons are enabled
-
-### Customization & Admin
-- **Dashboard Views** — Toggle between card grid and compact list view on the My Trips page
-- **Dark Mode** — Full light and dark theme with dynamic status bar color matching
-- **Multilingual** — English, German, Spanish, French, Russian, Chinese (Simplified), Dutch, Indonesian, Arabic (with RTL support)
-- **Admin Panel** — User management, invite links, packing templates, global categories, addon management, API keys, backups, and GitHub release history
-- **Auto-Backups** — Scheduled backups with configurable interval and retention
-- **Customizable** — Temperature units, time format (12h/24h), map tile sources, default coordinates
-
-## Tech Stack
-
-- **Backend**: Node.js 22 + Express + SQLite (`better-sqlite3`)
-- **Frontend**: React 18 + Vite + Tailwind CSS
-- **PWA**: vite-plugin-pwa + Workbox
-- **Real-Time**: WebSocket (`ws`)
-- **State**: Zustand
-- **Auth**: JWT + OAuth 2.1 + OIDC + TOTP (MFA)
-- **Maps**: Leaflet + react-leaflet-cluster + Google Places API (optional)
-- **Weather**: Open-Meteo API (free, no key required)
-- **Icons**: lucide-react
-
-## Helm (Kubernetes)
-
-A hosted Helm repository is available:
-
-```sh
-helm repo add trek https://mauriceboe.github.io/TREK
-helm repo update
-helm install trek trek/trek
-```
-
-See [`charts/README.md`](charts/README.md) for configuration options.
-
-## Quick Start
+## Get started in 30 seconds
 
 ```bash
 ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
@@ -123,19 +176,40 @@ ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
   -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
 ```
 
-The app runs on port `3000`. The first user to register becomes the admin.
+Open `http://localhost:3000`. On first boot TREK seeds an admin account — if you set `ADMIN_EMAIL`/`ADMIN_PASSWORD` those are used, otherwise the credentials are printed to the container log (`docker logs trek`).
 
-### Install as App (PWA)
+<div align="center">
 
-TREK works as a Progressive Web App — no App Store needed:
+&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#docker-compose-production">Docker Compose</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#helm-kubernetes">Helm / Kubernetes</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#install-as-app-pwa">Install as PWA</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="#reverse-proxy">Reverse Proxy</a>&nbsp;&nbsp;·&nbsp;&nbsp;
 
-1. Open your TREK instance in the browser (HTTPS required)
-2. **iOS**: Share button → "Add to Home Screen"
-3. **Android**: Menu → "Install app" or "Add to Home Screen"
-4. TREK launches fullscreen with its own icon, just like a native app
+</div>
+
+<br />
+
+## Tech stack
+
+<div align="center">
+
+![Node.js](https://img.shields.io/badge/Node.js_22-339933?style=flat-square&logo=node.js&logoColor=white)
+![Express](https://img.shields.io/badge/Express-000000?style=flat-square&logo=express&logoColor=white)
+![SQLite](https://img.shields.io/badge/SQLite-003B57?style=flat-square&logo=sqlite&logoColor=white)
+![React](https://img.shields.io/badge/React_18-61DAFB?style=flat-square&logo=react&logoColor=black)
+![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
+![Tailwind](https://img.shields.io/badge/Tailwind-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)
+![Leaflet](https://img.shields.io/badge/Leaflet-199900?style=flat-square&logo=leaflet&logoColor=white)
+![Docker](https://img.shields.io/badge/Docker-2496ED?style=flat-square&logo=docker&logoColor=white)
+
+</div>
+
+Real-time sync via WebSocket (`ws`). State with Zustand. Auth via JWT + OAuth 2.1 + OIDC + TOTP MFA. Weather via Open-Meteo (no key required). Maps with Leaflet and Mapbox GL.
+
+<br />
+
+<h2 id="docker-compose-production">Docker Compose (production)</h2>
 
 <details>
-<summary>Docker Compose (recommended for production)</summary>
+<summary>Full compose example with secure defaults</summary>
 
 ```yaml
 services:
@@ -158,30 +232,19 @@ services:
     environment:
       - NODE_ENV=production
       - PORT=3000
-      - ENCRYPTION_KEY=${ENCRYPTION_KEY:-} # Recommended. Generate with: openssl rand -hex 32. If unset, falls back to data/.jwt_secret (existing installs) or auto-generates a key (fresh installs).
-      - 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
-      - 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
-      # - COOKIE_SECURE=false # Escape hatch: force session cookies over plain HTTP even in production. Not recommended.
-      # - TRUST_PROXY=1 # Trusted proxy count for X-Forwarded-For / X-Forwarded-Proto. Required for FORCE_HTTPS to work.
-      # - ALLOW_INTERNAL_NETWORK=true # Uncomment if Immich or other services are on your local network (RFC-1918 IPs)
-      - APP_URL=${APP_URL:-} # Base URL of this instance — required when OIDC is enabled; must match the redirect URI registered with your IdP; Also used as the base URL for email notifications and other external links
-      # - OIDC_ISSUER=https://auth.example.com # OpenID Connect provider URL
-      # - OIDC_CLIENT_ID=trek # OpenID Connect client ID
-      # - OIDC_CLIENT_SECRET=supersecret # OpenID Connect client secret
-      # - OIDC_DISPLAY_NAME=SSO # Label shown on the SSO login button
-      # - OIDC_ONLY=false # Set to true to force SSO-only login (disables password login and registration). Equivalent to toggling those off in Admin > Settings, but takes priority over any DB setting and cannot be changed at runtime.
-      # - OIDC_ADMIN_CLAIM=groups # OIDC claim used to identify admin users
-      # - OIDC_ADMIN_VALUE=app-trek-admins # Value of the OIDC claim that grants admin role
-      # - OIDC_SCOPE=openid email profile # Fully overrides the default. Add extra scopes as needed (e.g. add groups if using OIDC_ADMIN_CLAIM)
-      # - OIDC_DISCOVERY_URL= # Override the OIDC discovery endpoint for providers with non-standard paths (e.g. Authentik)
-      # - DEMO_MODE=false # Enable demo mode (resets data hourly)
-      # - ADMIN_EMAIL=admin@trek.local # Initial admin e-mail — only used on first boot when no users exist
-      # - 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)
+      - ENCRYPTION_KEY=${ENCRYPTION_KEY:-}   # generate with: openssl rand -hex 32
+      - TZ=${TZ:-UTC}
+      - LOG_LEVEL=${LOG_LEVEL:-info}
+      - ALLOWED_ORIGINS=${ALLOWED_ORIGINS:-}
+      - APP_URL=${APP_URL:-}                 # required for OIDC + email links
+      # - FORCE_HTTPS=true                   # behind a TLS-terminating proxy
+      # - TRUST_PROXY=1
+      # - OIDC_ISSUER=https://auth.example.com
+      # - OIDC_CLIENT_ID=trek
+      # - OIDC_CLIENT_SECRET=supersecret
+      # - OIDC_DISPLAY_NAME=SSO
+      # - OIDC_ADMIN_CLAIM=groups
+      # - OIDC_ADMIN_VALUE=app-trek-admins
     volumes:
       - ./data:/app/data
       - ./uploads:/app/uploads
@@ -194,29 +257,49 @@ services:
       start_period: 15s
 ```
 
-This example is aimed at reverse-proxy deployments where nginx, Caddy, Traefik, or a similar proxy terminates TLS in front of TREK. The three HTTPS-related variables work together:
-
-- **`FORCE_HTTPS`** is 100% optional. When set to `true` it does four things: adds an HTTP-to-HTTPS 301 redirect, sends an HSTS header (`max-age=31536000`), adds the CSP `upgrade-insecure-requests` directive, and forces the session cookie `secure` flag on. It only makes sense behind a TLS-terminating proxy.
-- **`TRUST_PROXY`** tells Express how many proxies sit in front of TREK so it can read the real client IP from `X-Forwarded-For` and the protocol from `X-Forwarded-Proto`. Without it, `FORCE_HTTPS` redirects will loop because Express never sees the request as secure. In production (`NODE_ENV=production`) this defaults to `1` automatically; in development it is off unless explicitly set.
-- **`COOKIE_SECURE`** is normally auto-derived — the session cookie is marked `secure` whenever `NODE_ENV=production` or `FORCE_HTTPS=true`. Setting `COOKIE_SECURE=false` is an escape hatch that disables the `secure` flag even in production (e.g. testing over plain HTTP on a LAN). Do not disable it in real deployments.
-
-If you access TREK directly on `http://<host>:3000` with no reverse proxy, leave `FORCE_HTTPS` unset (or remove it) and remove `TRUST_PROXY` to avoid redirect loops to a non-existent HTTPS endpoint.
+Then:
 
 ```bash
 docker compose up -d
 ```
 
+**HTTPS notes:** `FORCE_HTTPS=true` is optional — it adds a 301 redirect, HSTS, CSP upgrade-insecure-requests, and forces the `secure` cookie flag. Only use it behind a TLS-terminating reverse proxy. `TRUST_PROXY=1` tells Express how many proxies sit in front so real client IPs and `X-Forwarded-Proto` work.
+
 </details>
 
-### Updating
+<br />
 
-**Docker Compose** (recommended):
+<h2 id="helm-kubernetes">Helm (Kubernetes)</h2>
+
+```bash
+helm repo add trek https://mauriceboe.github.io/TREK
+helm repo update
+helm install trek trek/trek
+```
+
+See [`charts/README.md`](https://github.com/mauriceboe/TREK/blob/main/charts/README.md) for values.
+
+<h2 id="install-as-app-pwa">Install as App (PWA)</h2>
+
+TREK works as a Progressive Web App — no App Store needed.
+
+1. Open TREK in the browser (HTTPS required)
+2. **iOS**: Share ▸ *Add to Home Screen*
+3. **Android**: Menu ▸ *Install app* (or *Add to Home Screen*)
+
+TREK then launches fullscreen with its own icon, just like a native app.
+
+<br />
+
+## Updating
+
+**Docker Compose:**
 
 ```bash
 docker compose pull && docker compose up -d
 ```
 
-**Docker Run** — use the same volume paths from your original `docker run` command:
+**Docker run** — reuse the original volume paths:
 
 ```bash
 docker pull mauriceboe/trek
@@ -224,27 +307,23 @@ docker rm -f trek
 docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/trek
 ```
 
-> **Tip:** Not sure which paths you used? Run `docker inspect trek --format '{{json .Mounts}}'` before removing the container.
+> Not sure which paths you used? `docker inspect trek --format '{{json .Mounts}}'` before removing the container.
 
-Your data is persisted in the mounted `data` and `uploads` volumes — updates never touch your existing data.
+Your data stays in the mounted `data` and `uploads` volumes — updates never touch it.
 
-### Rotating the Encryption Key
+<h3>Rotating the Encryption Key</h3>
 
-If you need to rotate `ENCRYPTION_KEY` (e.g. you are upgrading from a version that derived encryption from `JWT_SECRET`), use the migration script to re-encrypt all stored secrets under the new key without starting the app:
+If you need to rotate `ENCRYPTION_KEY` (e.g. upgrading from a version that derived encryption from `JWT_SECRET`):
 
 ```bash
 docker exec -it trek node --import tsx scripts/migrate-encryption.ts
 ```
 
-The script will prompt for your old and new keys interactively (input is not echoed). It creates a timestamped database backup before making any changes and exits with a non-zero code if anything fails.
+The script creates a timestamped DB backup before making changes and prompts for old + new keys (input is not echoed).
 
-**Upgrading from a previous version?** Your old JWT secret is in `./data/.jwt_secret`. Use its contents as the "old key" and your new `ENCRYPTION_KEY` value as the "new key".
+<h2 id="reverse-proxy">Reverse Proxy</h2>
 
-### Reverse Proxy (recommended)
-
-For production, put TREK behind a reverse proxy with HTTPS (e.g. Nginx, Caddy, Traefik).
-
-> **Important:** TREK uses WebSockets for real-time sync. Your reverse proxy must support WebSocket upgrades on the `/ws` path.
+For production, put TREK behind a TLS-terminating reverse proxy. TREK uses WebSockets for real-time sync, so the proxy **must** support WebSocket upgrades on `/ws`.
 
 <details>
 <summary>Nginx</summary>
@@ -260,8 +339,20 @@ server {
     listen 443 ssl http2;
     server_name trek.yourdomain.com;
 
-    ssl_certificate /path/to/fullchain.pem;
-    ssl_certificate_key /path/to/privkey.pem;
+    ssl_certificate     /etc/ssl/fullchain.pem;
+    ssl_certificate_key /etc/ssl/privkey.pem;
+
+    # 500 MB covers backup-restore uploads (capped at 500 MB server-side).
+    client_max_body_size 500m;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
 
     location /ws {
         proxy_pass http://localhost:3000;
@@ -269,21 +360,7 @@ server {
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
         proxy_read_timeout 86400;
-        # File uploads are capped at 50 MB; backup restore ZIPs can include the full
-        # uploads directory and may exceed that — raise this value if restores fail.
-        client_max_body_size 500m;
-    }
-
-    location / {
-        proxy_pass http://localhost:3000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
     }
 }
 ```
@@ -293,17 +370,24 @@ server {
 <details>
 <summary>Caddy</summary>
 
-Caddy handles WebSocket upgrades automatically:
-
-```
+```caddy
 trek.yourdomain.com {
     reverse_proxy localhost:3000
 }
 ```
 
+Caddy handles TLS and WebSockets automatically.
+
 </details>
 
-## Environment Variables
+<br />
+
+## Environment variables
+
+<details>
+<summary><b>Full reference</b></summary>
+
+<br />
 
 | Variable | Description | Default |
 |----------|-------------|---------|
@@ -313,58 +397,46 @@ trek.yourdomain.com {
 | `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
 | `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
 | `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
-| `DEFAULT_LANGUAGE` | Default language shown on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback when no match is found. Supported values: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar` | `en` |
+| `DEFAULT_LANGUAGE` | 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` | `en` |
 | `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
-| `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS (`max-age=31536000`), adds CSP `upgrade-insecure-requests`, and forces the session cookie `secure` flag. Only useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY` to be set so Express can detect the forwarded protocol. | `false` |
-| `COOKIE_SECURE` | Controls the `secure` flag on the `trek_session` cookie. Auto-derived: secure is on when `NODE_ENV=production` **or** `FORCE_HTTPS=true`. Set to `false` as an escape hatch to allow session cookies over plain HTTP (e.g. LAN testing without TLS). **Not recommended to disable in production.** | auto (`true` in production) |
-| `TRUST_PROXY` | Number of trusted reverse proxies. Tells Express to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Activates automatically in production (defaults to `1`); off in development unless explicitly set. Must be set for `FORCE_HTTPS` redirects to work correctly. | `1` (when active) |
-| `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IP addresses. Set to `true` if Immich or other integrated services are hosted on your local network. Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) are always blocked regardless of this setting. | `false` |
-| `APP_URL` | Public base URL of this instance (e.g. `https://trek.example.com`). Required when OIDC is enabled — must match the redirect URI registered with your IdP. Also used as the base URL for external links in email notifications. | — |
+| `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS, adds CSP `upgrade-insecure-requests`, forces the session cookie `secure` flag. Useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY`. | `false` |
+| `COOKIE_SECURE` | Controls the `secure` flag on the `trek_session` cookie. Auto-derived: on when `NODE_ENV=production` or `FORCE_HTTPS=true`. Escape hatch: set `false` to allow session cookies over plain HTTP. Not recommended in production. | auto |
+| `TRUST_PROXY` | Number of trusted reverse proxies. Tells Express to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
+| `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IPs (e.g. Immich on your LAN). Loopback and link-local addresses remain blocked. | `false` |
+| `APP_URL` | Public base URL of this instance (e.g. `https://trek.example.com`). Required when OIDC is enabled; used as base for email notification links. | — |
 | **OIDC / SSO** | | |
 | `OIDC_ISSUER` | OpenID Connect provider URL | — |
 | `OIDC_CLIENT_ID` | OIDC client ID | — |
 | `OIDC_CLIENT_SECRET` | OIDC client secret | — |
 | `OIDC_DISPLAY_NAME` | Label shown on the SSO login button | `SSO` |
-| `OIDC_ONLY` | Force SSO-only mode: disables password login and password registration, regardless of the granular toggles in Admin > Settings. The first SSO login becomes admin. Use when you want this enforced at the infrastructure level and not overridable via the UI. | `false` |
+| `OIDC_ONLY` | Force SSO-only mode: disables password login + registration, regardless of Admin > Settings. The first SSO login becomes admin. | `false` |
 | `OIDC_ADMIN_CLAIM` | OIDC claim used to identify admin users | — |
 | `OIDC_ADMIN_VALUE` | Value of the OIDC claim that grants admin role | — |
-| `OIDC_SCOPE` | Space-separated OIDC scopes to request. **Fully replaces** the default — always include `openid email profile` plus any extra scopes you need (e.g. add `groups` when using `OIDC_ADMIN_CLAIM`) | `openid email profile` |
-| `OIDC_DISCOVERY_URL` | Override the auto-constructed OIDC discovery endpoint. Useful for providers that expose it at a non-standard path (e.g. Authentik: `https://auth.example.com/application/o/trek/.well-known/openid-configuration`) | — |
-| **Initial Setup** | | |
-| `ADMIN_EMAIL` | Email for the first admin account created on initial boot. Must be set together with `ADMIN_PASSWORD`. If either is omitted a random password is generated and printed to the server log. Has no effect once any user exists. | `admin@trek.local` |
-| `ADMIN_PASSWORD` | Password for the first admin account created on initial boot. Must be set together with `ADMIN_EMAIL`. | random |
+| `OIDC_SCOPE` | Space-separated OIDC scopes. **Fully replaces** the default — always include `openid email profile`. | `openid email profile` |
+| `OIDC_DISCOVERY_URL` | Override the auto-constructed OIDC discovery endpoint (e.g. Authentik: `.../application/o/trek/.well-known/openid-configuration`) | — |
+| **Initial setup** | | |
+| `ADMIN_EMAIL` | Email for the first admin on initial boot. Must be set together with `ADMIN_PASSWORD`. If either is omitted a random password is printed to the server log. No effect once a user exists. | `admin@trek.local` |
+| `ADMIN_PASSWORD` | Password for the first admin on initial boot. Pairs with `ADMIN_EMAIL`. | random |
 | **Other** | | |
 | `DEMO_MODE` | Enable demo mode (hourly data resets) | `false` |
 | `MCP_RATE_LIMIT` | Max MCP API requests per user per minute | `300` |
 | `MCP_MAX_SESSION_PER_USER` | Max concurrent MCP sessions per user | `20` |
 
-## Optional API Keys
+</details>
 
-API keys are configured in the **Admin Panel** after login. Keys set by the admin are automatically shared with all users — no per-user configuration needed.
-
-### Google Maps (Place Search & Photos)
-
-1. Go to [Google Cloud Console](https://console.cloud.google.com/)
-2. Create a project and enable the **Places API (New)**
-3. Create an API key under Credentials
-4. In TREK: Admin Panel → Settings → Google Maps
-
-## Building from Source
-
-```bash
-git clone https://github.com/mauriceboe/TREK.git
-cd TREK
-docker build -t trek .
-```
+<br />
 
 ## Data & Backups
 
-- **Database**: SQLite, stored in `./data/travel.db`
-- **Uploads**: Stored in `./uploads/`
-- **Logs**: `./data/logs/trek.log` (auto-rotated)
-- **Backups**: Create and restore via Admin Panel
-- **Auto-Backups**: Configurable schedule and retention in Admin Panel
+- **Database** — SQLite, stored in `./data/travel.db`
+- **Uploads** — stored in `./uploads/`
+- **Logs** — `./data/logs/trek.log` (auto-rotated)
+- **Backups** — create and restore via Admin Panel
+- **Auto-Backups** — configurable schedule and retention in Admin Panel
+
+<br />
 
 ## License
 
-[AGPL-3.0](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.
+

charts/trek/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 2.9.14
+version: 3.0.5
 description: Minimal Helm chart for TREK app
-appVersion: "2.9.14"
+appVersion: "3.0.5"

client/package-lock.json

@@ -1,18 +1,19 @@
 {
   "name": "trek-client",
-  "version": "2.9.14",
+  "version": "3.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "trek-client",
-      "version": "2.9.14",
+      "version": "3.0.5",
       "dependencies": {
         "@react-pdf/renderer": "^4.3.2",
         "axios": "^1.6.7",
         "dexie": "^4.4.2",
         "leaflet": "^1.9.4",
         "lucide-react": "^0.344.0",
+        "mapbox-gl": "^3.22.0",
         "marked": "^18.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2367,9 +2368,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2387,9 +2385,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2407,9 +2402,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2427,9 +2419,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2447,9 +2436,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2467,9 +2453,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -2487,9 +2470,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2513,9 +2493,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2539,9 +2516,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2565,9 +2539,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2591,9 +2562,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2617,9 +2585,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2903,6 +2868,41 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-3.0.0.tgz",
+      "integrity": "sha512-2XghOwu16ZwPJLOFVuIOaLbN0iKMn867evzXFyf0P22dqugezfJwLmdanAgU25ITvz1TvOfVP4jsDImlDJzcWg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+      "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
+      "license": "ISC"
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.1.0.tgz",
+      "integrity": "sha512-uFJhNh36BR4OCuWIEiWaEix9CA2WzT6CAIcqVjWYpnx8+QDtS+oC4QehRrx5cX4mgWs37MmKnwUejeHxVymzNg==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.4.tgz",
+      "integrity": "sha512-AkOLcbgGTdXScosBWwmmD7cDlvOjkg/DetGva26pIRiZPdeJYjYKarIlb4uxVzi6bwHO6EWH82eZ5Nuv4T5DUg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@mapbox/point-geometry": "~1.1.0",
+        "@types/geojson": "^7946.0.16",
+        "pbf": "^4.0.1"
+      }
+    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.41.3",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.41.3.tgz",
@@ -3399,9 +3399,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3416,9 +3413,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3433,9 +3427,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3450,9 +3441,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3467,9 +3455,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3484,9 +3469,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3501,9 +3483,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3518,9 +3497,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3535,9 +3511,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3552,9 +3525,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3569,9 +3539,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3586,9 +3553,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3603,9 +3567,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3917,9 +3878,17 @@
       "version": "7946.0.16",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
       "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson-vt": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
+      "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -3954,6 +3923,12 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
+    "node_modules/@types/pbf": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
+      "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -4004,6 +3979,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -4824,6 +4808,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cheap-ruler": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cheap-ruler/-/cheap-ruler-4.0.0.tgz",
+      "integrity": "sha512-0BJa8f4t141BYKQyn9NSQt1PguFQXMXwZiA5shfoaBYHAb2fFk2RAX+tiWMoQU+Agtzt3mdt0JtuyshAXqZ+Vw==",
+      "license": "ISC"
+    },
     "node_modules/check-error": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
@@ -5141,6 +5131,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5410,6 +5406,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/earcut": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz",
+      "integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
+      "license": "ISC"
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -6057,6 +6059,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson-vt": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
+      "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==",
+      "license": "ISC"
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6129,6 +6137,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+      "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+      "license": "MIT"
+    },
     "node_modules/glob": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
@@ -6243,6 +6257,12 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
+    "node_modules/grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==",
+      "license": "ISC"
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -7268,6 +7288,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
+      "license": "ISC"
+    },
     "node_modules/leaflet": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
@@ -7463,6 +7489,44 @@
         "node": ">=10"
       }
     },
+    "node_modules/mapbox-gl": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.22.0.tgz",
+      "integrity": "sha512-ZIpF+oAMcQoDlvABmiRkHoydyBR9zI6CyDeVRa2/iyua0/B2+rPuIzoCV/CgN14P5F0HVk53GIZw220WSqJPyA==",
+      "license": "SEE LICENSE IN LICENSE.txt",
+      "workspaces": [
+        "src/style-spec",
+        "packages/pmtiles-provider",
+        "test/build/vite",
+        "test/build/webpack",
+        "test/build/typings"
+      ],
+      "dependencies": {
+        "@mapbox/mapbox-gl-supported": "^3.0.0",
+        "@mapbox/point-geometry": "^1.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^2.0.4",
+        "@types/geojson": "^7946.0.16",
+        "@types/geojson-vt": "^3.2.5",
+        "@types/pbf": "^3.0.5",
+        "@types/supercluster": "^7.1.3",
+        "cheap-ruler": "^4.0.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^3.0.1",
+        "geojson-vt": "^4.0.2",
+        "gl-matrix": "^3.4.4",
+        "grid-index": "^1.1.0",
+        "kdbush": "^4.0.2",
+        "martinez-polygon-clipping": "^0.8.1",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^4.0.1",
+        "potpack": "^2.0.0",
+        "quickselect": "^3.0.0",
+        "supercluster": "^8.0.1",
+        "tinyqueue": "^3.0.0"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -7485,6 +7549,17 @@
         "node": ">= 20"
       }
     },
+    "node_modules/martinez-polygon-clipping": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/martinez-polygon-clipping/-/martinez-polygon-clipping-0.8.1.tgz",
+      "integrity": "sha512-9PLLMzMPI6ihHox4Ns6LpVBLpRc7sbhULybZ/wyaY8sY3ECNe2+hxm1hA2/9bEEpRrdpjoeduBuZLg2aq1cSIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "robust-predicates": "^2.0.4",
+        "splaytree": "^0.1.4",
+        "tinyqueue": "3.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -8486,6 +8561,12 @@
         }
       }
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
+      "license": "MIT"
+    },
     "node_modules/mute-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
@@ -8763,6 +8844,18 @@
         "node": ">= 14.16"
       }
     },
+    "node_modules/pbf": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+      "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8975,6 +9068,12 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/potpack": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.1.0.tgz",
+      "integrity": "sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==",
+      "license": "ISC"
+    },
     "node_modules/pretty-bytes": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
@@ -9031,6 +9130,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
+      "integrity": "sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
@@ -9080,6 +9185,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+      "license": "ISC"
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -9532,6 +9643,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/restructure": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
@@ -9556,6 +9676,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-2.0.4.tgz",
+      "integrity": "sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.60.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
@@ -10071,6 +10197,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/splaytree": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-0.1.4.tgz",
+      "integrity": "sha512-D50hKrjZgBzqD3FT2Ek53f2dcDLAQT8SSGrzj3vidNH5ISRgceeGVJ2dQIthKOuayqFXfFjXheHNo4bbt9LhRQ==",
+      "license": "MIT"
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -10422,6 +10554,15 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10696,6 +10837,12 @@
         "node": "^18.0.0 || >=20.0.0"
       }
     },
+    "node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+      "license": "ISC"
+    },
     "node_modules/tinyrainbow": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trek-client",
-  "version": "2.9.14",
+  "version": "3.0.5",
   "private": true,
   "type": "module",
   "scripts": {
@@ -20,6 +20,7 @@
     "dexie": "^4.4.2",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
+    "mapbox-gl": "^3.22.0",
     "marked": "^18.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/App.tsx

@@ -4,6 +4,8 @@ import { useAuthStore } from './store/authStore'
 import { useSettingsStore } from './store/settingsStore'
 import { useAddonStore } from './store/addonStore'
 import LoginPage from './pages/LoginPage'
+import ForgotPasswordPage from './pages/ForgotPasswordPage'
+import ResetPasswordPage from './pages/ResetPasswordPage'
 import DashboardPage from './pages/DashboardPage'
 import TripPlannerPage from './pages/TripPlannerPage'
 import FilesPage from './pages/FilesPage'
@@ -100,7 +102,7 @@ function RootRedirect() {
 }
 
 export default function App() {
-  const { loadUser, isAuthenticated, demoMode, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled } = useAuthStore()
+  const { loadUser, isAuthenticated, demoMode, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled } = useAuthStore()
   const { loadSettings } = useSettingsStore()
   const { loadAddons } = useAddonStore()
 
@@ -116,7 +118,7 @@ export default function App() {
         loadUser()
       }
     }
-    authApi.getAppConfig().then(async (config: { demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
+    authApi.getAppConfig().then(async (config: { demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
       if (config?.demo_mode) setDemoMode(true)
       if (config?.dev_mode) setDevMode(true)
       if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease)
@@ -125,6 +127,9 @@ export default function App() {
       if (config?.timezone) setServerTimezone(config.timezone)
       if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa)
       if (config?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(config.trip_reminders_enabled)
+      if (config?.places_photos_enabled !== undefined) setPlacesPhotosEnabled(config.places_photos_enabled)
+      if (config?.places_autocomplete_enabled !== undefined) setPlacesAutocompleteEnabled(config.places_autocomplete_enabled)
+      if (config?.places_details_enabled !== undefined) setPlacesDetailsEnabled(config.places_details_enabled)
       if (config?.permissions) usePermissionsStore.getState().setPermissions(config.permissions)
 
       if (config?.version) {
@@ -194,7 +199,10 @@ export default function App() {
     applyDark(mode === true || mode === 'dark')
   }, [settings.dark_mode, isSharedPage])
 
-  const isAuthPage = location.pathname.startsWith('/login') || location.pathname.startsWith('/register')
+  const isAuthPage = location.pathname.startsWith('/login')
+    || location.pathname.startsWith('/register')
+    || location.pathname.startsWith('/forgot-password')
+    || location.pathname.startsWith('/reset-password')
 
   return (
     <TranslationProvider>
@@ -207,6 +215,8 @@ export default function App() {
         <Route path="/shared/:token" element={<SharedTripPage />} />
         <Route path="/public/journey/:token" element={<JourneyPublicPage />} />
         <Route path="/register" element={<LoginPage />} />
+        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+        <Route path="/reset-password" element={<ResetPasswordPage />} />
         {/* OAuth 2.1 consent page — intentionally outside ProtectedRoute */}
         <Route path="/oauth/authorize" element={<OAuthAuthorizePage />} />
         <Route

client/src/api/client.ts

@@ -62,13 +62,20 @@ apiClient.interceptors.request.use(
   (error) => Promise.reject(error)
 )
 
+export function isAuthPublicPath(pathname: string): boolean {
+  const publicPaths = ['/login', '/register', '/forgot-password', '/reset-password']
+  const publicPrefixes = ['/shared/', '/public/']
+  return publicPaths.includes(pathname) || publicPrefixes.some((p) => pathname.startsWith(p))
+}
+
 // Response interceptor - handle 401, 403 MFA, 429 rate limit
 apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.response?.status === 401 && (error.response?.data as { code?: string } | undefined)?.code === 'AUTH_REQUIRED') {
-      if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register') && !window.location.pathname.startsWith('/shared/') && !window.location.pathname.startsWith('/public/')) {
-        const currentPath = window.location.pathname + window.location.search
+      const { pathname } = window.location
+      if (!isAuthPublicPath(pathname)) {
+        const currentPath = pathname + window.location.search
         window.location.href = '/login?redirect=' + encodeURIComponent(currentPath)
       }
     }
@@ -114,6 +121,8 @@ export const authApi = {
   validateKeys: () => apiClient.get('/auth/validate-keys').then(r => r.data),
   travelStats: () => apiClient.get('/auth/travel-stats').then(r => r.data),
   changePassword: (data: { current_password: string; new_password: string }) => apiClient.put('/auth/me/password', data).then(r => r.data),
+  forgotPassword: (data: { email: string }) => apiClient.post('/auth/forgot-password', data).then(r => r.data as { ok: true }),
+  resetPassword: (data: { token: string; new_password: string; mfa_code?: string }) => apiClient.post('/auth/reset-password', data).then(r => r.data as { success?: true; mfa_required?: true }),
   deleteOwnAccount: () => apiClient.delete('/auth/me').then(r => r.data),
   demoLogin: () => apiClient.post('/auth/demo-login').then(r => r.data),
   mcpTokens: {
@@ -190,18 +199,27 @@ export const placesApi = {
   update: (tripId: number | string, id: number | string, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/places/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number | string) => apiClient.delete(`/trips/${tripId}/places/${id}`).then(r => r.data),
   searchImage: (tripId: number | string, id: number | string) => apiClient.get(`/trips/${tripId}/places/${id}/image`).then(r => r.data),
-  importGpx: (tripId: number | string, file: File) => {
-    const fd = new FormData(); fd.append('file', file)
+  importGpx: (tripId: number | string, file: File, opts?: { waypoints?: boolean; routes?: boolean; tracks?: boolean }) => {
+    const fd = new FormData()
+    fd.append('file', file)
+    if (opts?.waypoints !== undefined) fd.append('importWaypoints', String(opts.waypoints))
+    if (opts?.routes !== undefined) fd.append('importRoutes', String(opts.routes))
+    if (opts?.tracks !== undefined) fd.append('importTracks', String(opts.tracks))
     return apiClient.post(`/trips/${tripId}/places/import/gpx`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
-  importMapFile: (tripId: number | string, file: File) => {
-    const fd = new FormData(); fd.append('file', file)
+  importMapFile: (tripId: number | string, file: File, opts?: { points?: boolean; paths?: boolean }) => {
+    const fd = new FormData()
+    fd.append('file', file)
+    if (opts?.points !== undefined) fd.append('importPoints', String(opts.points))
+    if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
     return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
   importGoogleList: (tripId: number | string, url: string) =>
     apiClient.post(`/trips/${tripId}/places/import/google-list`, { url }).then(r => r.data),
   importNaverList: (tripId: number | string, url: string) =>
     apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
+  bulkDelete: (tripId: number | string, ids: number[]) =>
+    apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids }).then(r => r.data),
 }
 
 export const assignmentsApi = {
@@ -272,6 +290,12 @@ export const adminApi = {
   checkVersion: () => apiClient.get('/admin/version-check').then(r => r.data),
   getBagTracking: () => apiClient.get('/admin/bag-tracking').then(r => r.data),
   updateBagTracking: (enabled: boolean) => apiClient.put('/admin/bag-tracking', { enabled }).then(r => r.data),
+  getPlacesPhotos: () => apiClient.get('/admin/places-photos').then(r => r.data),
+  updatePlacesPhotos: (enabled: boolean) => apiClient.put('/admin/places-photos', { enabled }).then(r => r.data),
+  getPlacesAutocomplete: () => apiClient.get('/admin/places-autocomplete').then(r => r.data),
+  updatePlacesAutocomplete: (enabled: boolean) => apiClient.put('/admin/places-autocomplete', { enabled }).then(r => r.data),
+  getPlacesDetails: () => apiClient.get('/admin/places-details').then(r => r.data),
+  updatePlacesDetails: (enabled: boolean) => apiClient.put('/admin/places-details', { enabled }).then(r => r.data),
   getCollabFeatures: () => apiClient.get('/admin/collab-features').then(r => r.data),
   updateCollabFeatures: (features: Record<string, boolean>) => apiClient.put('/admin/collab-features', features).then(r => r.data),
   packingTemplates: () => apiClient.get('/admin/packing-templates').then(r => r.data),
@@ -328,12 +352,17 @@ export const journeyApi = {
   createEntry: (id: number, data: Record<string, unknown>) => apiClient.post(`/journeys/${id}/entries`, data).then(r => r.data),
   updateEntry: (entryId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/entries/${entryId}`, data).then(r => r.data),
   deleteEntry: (entryId: number) => apiClient.delete(`/journeys/entries/${entryId}`).then(r => r.data),
+  reorderEntries: (journeyId: number, orderedIds: number[]) => apiClient.put(`/journeys/${journeyId}/entries/reorder`, { orderedIds }).then(r => r.data),
 
   // Photos
   uploadPhotos: (entryId: number, formData: FormData) => apiClient.post(`/journeys/entries/${entryId}/photos`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
-  addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption }).then(r => r.data),
-  addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption }).then(r => r.data),
-  linkPhoto: (entryId: number, photoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { photo_id: photoId }).then(r => r.data),
+  uploadGalleryPhotos: (journeyId: number, formData: FormData) => apiClient.post(`/journeys/${journeyId}/gallery/photos`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
+  addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
+  addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
+  addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
+  linkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { journey_photo_id: journeyPhotoId }).then(r => r.data),
+  unlinkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/entries/${entryId}/photos/${journeyPhotoId}`).then(r => r.data),
+  deleteGalleryPhoto: (journeyId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/${journeyId}/gallery/${journeyPhotoId}`).then(r => r.data),
   updatePhoto: (photoId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/photos/${photoId}`, data).then(r => r.data),
   deletePhoto: (photoId: number) => apiClient.delete(`/journeys/photos/${photoId}`).then(r => r.data),
 
@@ -365,6 +394,11 @@ export const mapsApi = {
   resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => r.data),
 }
 
+export const airportsApi = {
+  search: (q: string, signal?: AbortSignal) => apiClient.get('/airports/search', { params: { q }, signal }).then(r => r.data),
+  byIata: (iata: string) => apiClient.get(`/airports/${encodeURIComponent(iata)}`).then(r => r.data),
+}
+
 export const budgetApi = {
   list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget`).then(r => r.data),
   create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/budget`, data).then(r => r.data),

client/src/api/oauthScopes.test.ts

@@ -32,8 +32,8 @@ describe('SCOPE_GROUPS', () => {
 })
 
 describe('ALL_SCOPES', () => {
-  it('FE-OAUTH-SCOPES-003: contains exactly 24 scopes', () => {
-    expect(ALL_SCOPES).toHaveLength(24)
+  it('FE-OAUTH-SCOPES-003: contains exactly 27 scopes', () => {
+    expect(ALL_SCOPES).toHaveLength(27)
   })
 
   it('FE-OAUTH-SCOPES-004: matches Object.keys(SCOPE_GROUPS)', () => {

client/src/api/oauthScopes.ts

@@ -38,6 +38,9 @@ export const SCOPE_GROUPS: Record<string, ScopeKeys> = {
   'vacay:write':         { labelKey: 'oauth.scope.vacay:write.label',         descriptionKey: 'oauth.scope.vacay:write.description',         groupKey: 'oauth.scope.group.vacay' },
   'geo:read':            { labelKey: 'oauth.scope.geo:read.label',            descriptionKey: 'oauth.scope.geo:read.description',            groupKey: 'oauth.scope.group.geo' },
   'weather:read':        { labelKey: 'oauth.scope.weather:read.label',        descriptionKey: 'oauth.scope.weather:read.description',        groupKey: 'oauth.scope.group.weather' },
+  'journey:read':        { labelKey: 'oauth.scope.journey:read.label',        descriptionKey: 'oauth.scope.journey:read.description',        groupKey: 'oauth.scope.group.journey' },
+  'journey:write':       { labelKey: 'oauth.scope.journey:write.label',       descriptionKey: 'oauth.scope.journey:write.description',       groupKey: 'oauth.scope.group.journey' },
+  'journey:share':       { labelKey: 'oauth.scope.journey:share.label',       descriptionKey: 'oauth.scope.journey:share.description',       groupKey: 'oauth.scope.group.journey' },
 }
 
 export const ALL_SCOPES = Object.keys(SCOPE_GROUPS)

client/src/components/Admin/GitHubPanel.tsx

@@ -130,7 +130,7 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           href="https://ko-fi.com/mauriceboe"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -148,7 +148,7 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           href="https://buymeacoffee.com/mauriceboe"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -166,7 +166,7 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           href="https://discord.gg/NhZBDSd4qW"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -187,7 +187,7 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -205,7 +205,7 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -223,7 +223,7 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           href="https://github.com/mauriceboe/TREK/wiki"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}

client/src/components/Admin/PermissionsPanel.tsx

@@ -107,10 +107,12 @@ export default function PermissionsPanel(): React.ReactElement {
             <button
               onClick={handleReset}
               disabled={saving}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-40 transition-colors"
+              title={t('perm.resetDefaults')}
+              aria-label={t('perm.resetDefaults')}
+              className="flex items-center justify-center gap-1.5 px-0 sm:px-3 py-1.5 text-sm w-8 sm:w-auto border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-40 transition-colors"
             >
               <RotateCcw className="w-3.5 h-3.5" />
-              {t('perm.resetDefaults')}
+              <span className="hidden sm:inline">{t('perm.resetDefaults')}</span>
             </button>
             <button
               onClick={handleSave}

client/src/components/Budget/BudgetPanel.test.tsx

@@ -416,8 +416,8 @@ describe('BudgetPanel', () => {
     render(<BudgetPanel tripId={1} />);
     await screen.findByText('Flight');
     await screen.findByText('Hotel');
-    // Grand total card shows 300.00
-    expect(screen.getByText('300.00')).toBeInTheDocument();
+    // Grand total card shows 300.00 (integer and decimal are rendered in separate spans)
+    expect(document.body.textContent?.replace(/\s+/g, '')).toMatch(/300[,.]00/);
   });
 
   it('FE-COMP-BUDGET-033: read-only mode hides add/delete/edit controls', async () => {

client/src/components/Budget/BudgetPanel.tsx

@@ -4,7 +4,69 @@ import DOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download, GripVertical } from 'lucide-react'
+import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download, GripVertical, TrendingUp, TrendingDown, PieChart as PieChartIcon } from 'lucide-react'
+
+function useIsDark(): boolean {
+  const [dark, setDark] = useState<boolean>(() => typeof document !== 'undefined' && document.documentElement.classList.contains('dark'))
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const mo = new MutationObserver(() => setDark(document.documentElement.classList.contains('dark')))
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => mo.disconnect()
+  }, [])
+  return dark
+}
+
+function widgetTheme(dark: boolean) {
+  if (dark) return {
+    bg: 'linear-gradient(180deg, #17171d 0%, #0d0d12 100%)',
+    border: 'rgba(255,255,255,0.07)',
+    text: '#ffffff',
+    sub: 'rgba(255,255,255,0.6)',
+    faint: 'rgba(255,255,255,0.4)',
+    track: 'rgba(255,255,255,0.04)',
+    divider: 'rgba(255,255,255,0.07)',
+    iconBg: 'rgba(255,255,255,0.08)',
+    iconBorder: 'rgba(255,255,255,0.12)',
+    iconColor: 'rgba(255,255,255,0.9)',
+    centerBg: '#17171d',
+    flowBg: 'rgba(255,255,255,0.05)',
+    flowBorder: 'rgba(255,255,255,0.07)',
+    flowHoverBg: 'rgba(255,255,255,0.08)',
+    flowHoverBorder: 'rgba(255,255,255,0.12)',
+    rowHover: 'rgba(255,255,255,0.03)',
+    shadow: '0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04)',
+    donutShadow: 'drop-shadow(0 0 20px rgba(0,0,0,0.3))',
+  }
+  return {
+    bg: 'linear-gradient(180deg, #ffffff 0%, #f9fafb 100%)',
+    border: 'rgba(15,23,42,0.08)',
+    text: '#111827',
+    sub: 'rgba(17,24,39,0.6)',
+    faint: 'rgba(17,24,39,0.4)',
+    track: 'rgba(15,23,42,0.05)',
+    divider: 'rgba(15,23,42,0.08)',
+    iconBg: 'rgba(15,23,42,0.05)',
+    iconBorder: 'rgba(15,23,42,0.1)',
+    iconColor: 'rgba(17,24,39,0.75)',
+    centerBg: '#ffffff',
+    flowBg: 'rgba(15,23,42,0.03)',
+    flowBorder: 'rgba(15,23,42,0.08)',
+    flowHoverBg: 'rgba(15,23,42,0.06)',
+    flowHoverBorder: 'rgba(15,23,42,0.14)',
+    rowHover: 'rgba(15,23,42,0.04)',
+    shadow: '0 12px 32px rgba(15,23,42,0.08), 0 2px 6px rgba(0,0,0,0.04)',
+    donutShadow: 'drop-shadow(0 4px 18px rgba(15,23,42,0.12))',
+  }
+}
+
+function hexLighten(hex: string, amount: number): string {
+  const m = hex.replace('#', '').match(/.{2}/g)
+  if (!m || m.length !== 3) return hex
+  const mix = (c: number) => Math.min(255, Math.round(c + (255 - c) * amount))
+  const [r, g, b] = m.map(x => parseInt(x, 16))
+  return `#${[mix(r), mix(g), mix(b)].map(v => v.toString(16).padStart(2, '0')).join('')}`
+}
 import CustomSelect from '../shared/CustomSelect'
 import { budgetApi } from '../../api/client'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -361,9 +423,47 @@ interface PerPersonInlineProps {
   locale: string
 }
 
-function PerPersonInline({ tripId, budgetItems, currency, locale }: PerPersonInlineProps) {
-  const [data, setData] = useState(null)
-  const fmt = (v) => fmtNum(v, locale, currency)
+const SPLIT_COLORS = [
+  { solid: '#6366f1', gradient: 'linear-gradient(135deg, #6366f1, #8b5cf6)' },
+  { solid: '#ec4899', gradient: 'linear-gradient(135deg, #ec4899, #f43f5e)' },
+  { solid: '#10b981', gradient: 'linear-gradient(135deg, #10b981, #22c55e)' },
+  { solid: '#f59e0b', gradient: 'linear-gradient(135deg, #f59e0b, #f97316)' },
+  { solid: '#06b6d4', gradient: 'linear-gradient(135deg, #06b6d4, #3b82f6)' },
+  { solid: '#a855f7', gradient: 'linear-gradient(135deg, #a855f7, #d946ef)' },
+]
+
+export function splitColorFor(userId: number, order: number) {
+  return SPLIT_COLORS[order % SPLIT_COLORS.length]
+}
+
+function colorForUserId(userId: number) {
+  return SPLIT_COLORS[((userId | 0) - 1 + SPLIT_COLORS.length * 1000) % SPLIT_COLORS.length]
+}
+
+function RingAvatar({ userId, username, avatarUrl, size = 34, innerBg = '#17171d', textColor = '#fff' }: { userId: number; username?: string; avatarUrl?: string | null; size?: number; innerBg?: string; textColor?: string }) {
+  const color = colorForUserId(userId)
+  return (
+    <div style={{
+      width: size, height: size, borderRadius: '50%', flexShrink: 0,
+      padding: 2, background: color.gradient,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+    }}>
+      <div style={{
+        width: '100%', height: '100%', borderRadius: '50%',
+        background: innerBg,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        overflow: 'hidden',
+        fontSize: size < 28 ? 10 : 12, fontWeight: 600, color: textColor,
+      }}>
+        {avatarUrl ? <img src={avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : username?.[0]?.toUpperCase()}
+      </div>
+    </div>
+  )
+}
+
+function PerPersonInline({ tripId, budgetItems, currency, locale, grandTotal, theme }: PerPersonInlineProps & { grandTotal: number; theme: ReturnType<typeof widgetTheme> }) {
+  const [data, setData] = useState<any[] | null>(null)
+  const fmt = (v: number) => fmtNum(v, locale, currency)
 
   useEffect(() => {
     budgetApi.perPersonSummary(tripId).then(d => setData(d.summary)).catch(() => {})
@@ -371,25 +471,38 @@ function PerPersonInline({ tripId, budgetItems, currency, locale }: PerPersonInl
 
   if (!data || data.length === 0) return null
 
+  const people = data.map((p: any) => ({ ...p, color: colorForUserId(p.user_id) }))
+
   return (
-    <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {data.map(person => (
-        <div key={person.user_id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <div style={{
-            width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.1)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700,
-            color: 'rgba(255,255,255,0.7)', overflow: 'hidden', flexShrink: 0,
-          }}>
-            {person.avatar_url
-              ? <img src={person.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-              : person.username?.[0]?.toUpperCase()
-            }
-          </div>
-          <span style={{ flex: 1, fontSize: 12, fontWeight: 500, color: 'rgba(255,255,255,0.7)' }}>{person.username}</span>
-          <span style={{ fontSize: 12, fontWeight: 600, color: '#fff' }}>{fmt(person.total_assigned)}</span>
+    <>
+      {grandTotal > 0 && (
+        <div style={{ display: 'flex', height: 6, borderRadius: 999, overflow: 'hidden', marginTop: 8, marginBottom: 4, gap: 3 }}>
+          {people.map(p => (
+            <div key={p.user_id} style={{
+              height: '100%', borderRadius: 999,
+              flex: Math.max(p.total_assigned || 0, 0.01),
+              background: p.color.gradient,
+            }} />
+          ))}
         </div>
-      ))}
-    </div>
+      )}
+
+      <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${theme.divider}`, display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {people.map(p => {
+          const percent = grandTotal > 0 ? Math.round((p.total_assigned / grandTotal) * 100) : 0
+          return (
+            <div key={p.user_id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0' }}>
+              <RingAvatar userId={p.user_id} username={p.username} avatarUrl={p.avatar_url} size={34} innerBg={theme.centerBg} textColor={theme.text} />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.01em', color: theme.text }}>{p.username}</div>
+                <div style={{ fontSize: 11, color: theme.faint, marginTop: 1 }}>{percent}%</div>
+              </div>
+              <div style={{ fontSize: 13.5, fontWeight: 600, color: theme.text, letterSpacing: '-0.01em' }}>{fmt(p.total_assigned)}</div>
+            </div>
+          )
+        })}
+      </div>
+    </>
   )
 }
 
@@ -416,11 +529,14 @@ function PieChart({ segments, size = 200, totalLabel }: PieChartProps) {
 
   return (
     <div style={{ position: 'relative', width: size, height: size, margin: '0 auto' }}>
-      <div style={{
-        width: size, height: size, borderRadius: '50%',
-        background: `conic-gradient(${stops})`,
-        boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
-      }} />
+      <div
+        className="trek-pie-reveal"
+        style={{
+          width: size, height: size, borderRadius: '50%',
+          background: `conic-gradient(${stops})`,
+          boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
+        }}
+      />
       <div style={{
         position: 'absolute', top: '50%', left: '50%',
         transform: 'translate(-50%, -50%)',
@@ -446,6 +562,8 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid, reorderBudgetItems, reorderBudgetCategories } = useTripStore()
   const can = useCanDo()
   const { t, locale } = useTranslation()
+  const isDark = useIsDark()
+  const theme = useMemo(() => widgetTheme(isDark), [isDark])
   const [newCategoryName, setNewCategoryName] = useState('')
   const [editingCat, setEditingCat] = useState(null) // { name, value }
   const [settlement, setSettlement] = useState<{ balances: any[]; flows: any[] } | null>(null)
@@ -589,20 +707,69 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   }
 
   // ── Main Layout ──────────────────────────────────────────────────────────
+  const totalBudget = budgetItems.reduce((s, x) => s + (x.total_price || 0), 0)
   return (
-    <div style={{ fontFamily: "'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif" }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 16px 12px', flexWrap: 'wrap', gap: 8 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <Calculator size={20} color="var(--text-primary)" />
-          <h2 style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('budget.title')}</h2>
+    <div>
+      <div style={{ padding: '24px 28px 0' }} className="max-md:!px-4 max-md:!pt-4">
+        <div style={{
+          background: 'var(--bg-tertiary)', borderRadius: 18,
+          padding: '14px 16px 14px 22px',
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
+        }}>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+            {t('budget.title')}
+          </h2>
+          <div className="hidden md:flex" style={{ alignItems: 'center', gap: 8, marginLeft: 'auto', flexShrink: 0 }}>
+            <div style={{ width: 150 }}>
+              <CustomSelect
+                value={currency}
+                onChange={setCurrency}
+                disabled={!canEdit}
+                options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
+                searchable
+              />
+            </div>
+            {canEdit && (
+              <div style={{ display: 'flex', gap: 6, width: 260 }}>
+                <input
+                  value={newCategoryName}
+                  onChange={e => setNewCategoryName(e.target.value)}
+                  onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
+                  placeholder={t('budget.categoryName')}
+                  style={{ flex: 1, minWidth: 0, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                />
+                <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
+                  title={t('budget.addCategory')}
+                  style={{
+                    appearance: 'none', border: 'none', cursor: newCategoryName.trim() ? 'pointer' : 'default', fontFamily: 'inherit',
+                    display: 'inline-flex', alignItems: 'center', gap: 6,
+                    padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
+                    background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+                    opacity: newCategoryName.trim() ? 1 : 0.4,
+                    transition: 'opacity 0.15s ease',
+                  }}>
+                  <Plus size={14} strokeWidth={2.5} />
+                </button>
+              </div>
+            )}
+            <button onClick={handleExportCsv} title={t('budget.exportCsv')}
+              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,
+                background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+                transition: 'opacity 0.15s ease',
+              }}
+              onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+            >
+              <Download size={14} strokeWidth={2.5} /> CSV
+            </button>
+          </div>
         </div>
-        <button onClick={handleExportCsv} title={t('budget.exportCsv')}
-          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-muted)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
-          <Download size={13} /> CSV
-        </button>
       </div>
 
-      <div style={{ display: 'flex', gap: 20, padding: '0 16px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
+      <div style={{ display: 'flex', gap: 20, padding: '24px 28px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }} className="max-md:!px-4">
         <div style={{ flex: 1, minWidth: 0 }}>
           {categoryNames.map((cat, ci) => {
             const items = grouped.get(cat) || []
@@ -733,29 +900,30 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                             }}
                             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
                             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-                            <td style={{ ...td, display: 'flex', alignItems: 'center', gap: 4 }}>
-                              {canEdit && (
-                                <div draggable onDragStart={e => { e.stopPropagation(); e.dataTransfer.effectAllowed = 'move'; setDragItem(item.id); setDragItemCat(cat) }}
-                                  onDragEnd={() => { setDragItem(null); setDragOverItem(null); setDragItemCat(null) }}
-                                  style={{ cursor: 'grab', display: 'flex', alignItems: 'center', color: 'var(--text-faint)', flexShrink: 0 }}>
-                                  <GripVertical size={12} />
+                            <td style={td}>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                                {canEdit && (
+                                  <div draggable onDragStart={e => { e.stopPropagation(); e.dataTransfer.effectAllowed = 'move'; setDragItem(item.id); setDragItemCat(cat) }}
+                                    onDragEnd={() => { setDragItem(null); setDragOverItem(null); setDragItemCat(null) }}
+                                    style={{ cursor: 'grab', display: 'flex', alignItems: 'center', color: 'var(--text-faint)', flexShrink: 0 }}>
+                                    <GripVertical size={12} />
+                                  </div>
+                                )}
+                                <div style={{ flex: 1, minWidth: 0 }}>
+                                  <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={item.reservation_id ? t('budget.linkedToReservation') : t('budget.editTooltip')} readOnly={!canEdit || !!item.reservation_id} />
+                                  {hasMultipleMembers && (
+                                    <div className="sm:hidden" style={{ marginTop: 4 }}>
+                                      <BudgetMemberChips
+                                        members={item.members || []}
+                                        tripMembers={tripMembers}
+                                        onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
+                                        onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
+                                        compact={false}
+                                        readOnly={!canEdit}
+                                      />
+                                    </div>
+                                  )}
                                 </div>
-                              )}
-                              <div style={{ flex: 1, minWidth: 0 }}>
-                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={item.reservation_id ? t('budget.linkedToReservation') : t('budget.editTooltip')} readOnly={!canEdit || !!item.reservation_id} />
-                              {/* Mobile: larger chips under name since Persons column is hidden */}
-                              {hasMultipleMembers && (
-                                <div className="sm:hidden" style={{ marginTop: 4 }}>
-                                  <BudgetMemberChips
-                                    members={item.members || []}
-                                    tripMembers={tripMembers}
-                                    onSetMembers={(userIds) => setBudgetItemMembers(tripId, item.id, userIds)}
-                                    onTogglePaid={(userId, paid) => toggleBudgetMemberPaid(tripId, item.id, userId, paid)}
-                                    compact={false}
-                                    readOnly={!canEdit}
-                                  />
-                                </div>
-                              )}
                               </div>
                             </td>
                             <td style={{ ...td, textAlign: 'center' }}>
@@ -811,61 +979,57 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
           })}
         </div>
 
-        <div className="w-full md:w-[240px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
-          <div style={{ marginBottom: 12 }}>
-            <CustomSelect
-              value={currency}
-              onChange={setCurrency}
-              disabled={!canEdit}
-              options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
-              searchable
-            />
-          </div>
-
-          {canEdit && (
-            <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
-              <input
-                value={newCategoryName}
-                onChange={e => setNewCategoryName(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
-                placeholder={t('budget.categoryName')}
-                style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-input)', color: 'var(--text-primary)' }}
-              />
-              <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
-                style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '9px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.4, flexShrink: 0 }}>
-                <Plus size={16} />
-              </button>
-            </div>
-          )}
+        <div className="w-full md:w-[320px]" style={{ flexShrink: 0, position: 'sticky', top: 16, alignSelf: 'flex-start' }}>
 
           <div style={{
-            background: 'linear-gradient(135deg, #000000 0%, #18181b 100%)',
-            borderRadius: 16, padding: '24px 20px', color: '#fff', marginBottom: 16,
-            boxShadow: '0 8px 32px rgba(15,23,42,0.18)',
+            background: theme.bg,
+            borderRadius: 20, padding: 20, color: theme.text, marginBottom: 16,
+            border: `1px solid ${theme.border}`,
+            boxShadow: theme.shadow,
           }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <Wallet size={18} color="rgba(255,255,255,0.8)" />
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
+              <div style={{
+                width: 40, height: 40, borderRadius: 12,
+                background: theme.iconBg,
+                border: `1px solid ${theme.iconBorder}`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                color: theme.iconColor, flexShrink: 0,
+              }}>
+                <Wallet size={20} strokeWidth={2} />
               </div>
-              <div>
-                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: 0.5 }}>{t('budget.totalBudget')}</div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 11, color: theme.faint, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.09em' }}>{t('budget.totalBudget')}</div>
               </div>
             </div>
-            <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, marginBottom: 4 }}>
-              {Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: currencyDecimals(currency), maximumFractionDigits: currencyDecimals(currency) })}
+
+            {(() => {
+              const decimals = currencyDecimals(currency)
+              const full = Number(grandTotal).toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+              const sep = (0.1).toLocaleString(locale).replace(/\d/g, '')
+              const [integerPart, decimalPart] = decimals > 0 ? full.split(sep) : [full, '']
+              return (
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, letterSpacing: '-0.03em', lineHeight: 1 }}>
+                  <span style={{ fontSize: 38, fontWeight: 700 }}>{integerPart}</span>
+                  {decimalPart && <span style={{ fontSize: 22, fontWeight: 500, color: theme.sub }}>{sep}{decimalPart}</span>}
+                  <span style={{ fontSize: 22, fontWeight: 500, color: theme.sub, marginLeft: 2 }}>{SYMBOLS[currency] || currency}</span>
+                </div>
+              )
+            })()}
+            <div style={{ color: theme.faint, fontSize: 12, marginTop: 8, fontWeight: 500, letterSpacing: '0.04em', display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span>{currency}</span>
             </div>
-            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{SYMBOLS[currency] || currency} {currency}</div>
+
             {hasMultipleMembers && (budgetItems || []).some(i => i.members?.length > 0) && (
-              <PerPersonInline tripId={tripId} budgetItems={budgetItems} currency={currency} locale={locale} />
+              <PerPersonInline tripId={tripId} budgetItems={budgetItems} currency={currency} locale={locale} grandTotal={grandTotal} theme={theme} />
             )}
 
             {/* Settlement dropdown inside the total card */}
             {hasMultipleMembers && settlement && settlement.flows.length > 0 && (
-              <div style={{ marginTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 12 }}>
+              <div style={{ marginTop: 16, borderTop: `1px solid ${theme.divider}`, paddingTop: 12 }}>
                 <button onClick={() => setSettlementOpen(v => !v)} style={{
                   display: 'flex', alignItems: 'center', gap: 6, width: '100%',
                   background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit',
-                  color: 'rgba(255,255,255,0.6)', fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
+                  color: theme.sub, fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
                 }}>
                   {settlementOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
                   {t('budget.settlement')}
@@ -890,53 +1054,60 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                 </button>
 
                 {settlementOpen && (
-                  <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
                     {settlement.flows.map((flow, i) => (
                       <div key={i} style={{
-                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
-                        padding: '8px 10px', borderRadius: 10,
-                        background: 'rgba(255,255,255,0.06)',
-                      }}>
-                        <ChipWithTooltip label={flow.from.username} avatarUrl={flow.from.avatar_url} size={28} />
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
-                          <span style={{ fontSize: 12, fontWeight: 700, color: '#f87171', whiteSpace: 'nowrap' }}>
+                        display: 'flex', alignItems: 'center', gap: 14,
+                        padding: '12px 14px', borderRadius: 14,
+                        background: theme.flowBg,
+                        border: `1px solid ${theme.flowBorder}`,
+                        transition: 'all 0.2s',
+                      }}
+                        onMouseEnter={e => { e.currentTarget.style.background = theme.flowHoverBg; e.currentTarget.style.borderColor = theme.flowHoverBorder }}
+                        onMouseLeave={e => { e.currentTarget.style.background = theme.flowBg; e.currentTarget.style.borderColor = theme.flowBorder }}
+                      >
+                        <RingAvatar userId={flow.from.user_id} username={flow.from.username} avatarUrl={flow.from.avatar_url} size={32} innerBg={theme.centerBg} textColor={theme.text} />
+                        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
+                          <span style={{ fontSize: 13, fontWeight: 700, color: '#ef4444', letterSpacing: '-0.01em' }}>
                             {fmt(flow.amount, currency)}
                           </span>
-                          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>→</span>
+                          <div style={{ width: '100%', height: 2, borderRadius: 2, background: 'linear-gradient(90deg, rgba(239,68,68,0.1), rgba(239,68,68,0.55), rgba(239,68,68,0.3))', position: 'relative' }}>
+                            <div style={{ position: 'absolute', right: -1, top: '50%', transform: 'translateY(-50%)', width: 0, height: 0, borderLeft: '6px solid rgba(239,68,68,0.55)', borderTop: '4px solid transparent', borderBottom: '4px solid transparent' }} />
+                          </div>
                         </div>
-                        <ChipWithTooltip label={flow.to.username} avatarUrl={flow.to.avatar_url} size={28} />
+                        <RingAvatar userId={flow.to.user_id} username={flow.to.username} avatarUrl={flow.to.avatar_url} size={32} innerBg={theme.centerBg} textColor={theme.text} />
                       </div>
                     ))}
 
                     {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).length > 0 && (
-                      <div style={{ marginTop: 4, borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 8 }}>
-                        <div style={{ fontSize: 9, fontWeight: 600, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
+                      <div style={{ marginTop: 8, borderTop: `1px solid ${theme.divider}`, paddingTop: 12 }}>
+                        <div style={{ fontSize: 10, fontWeight: 700, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.11em', marginBottom: 10 }}>
                           {t('budget.netBalances')}
                         </div>
-                        {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).map(b => (
-                          <div key={b.user_id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0' }}>
-                            <div style={{
-                              width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
-                              background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              fontSize: 8, fontWeight: 700, color: 'rgba(255,255,255,0.6)', overflow: 'hidden',
-                            }}>
-                              {b.avatar_url
-                                ? <img src={b.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                                : b.username?.[0]?.toUpperCase()
-                              }
-                            </div>
-                            <span style={{ flex: 1, fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                              {b.username}
-                            </span>
-                            <span style={{
-                              fontSize: 11, fontWeight: 600, flexShrink: 0,
-                              color: b.balance > 0 ? '#4ade80' : '#f87171',
-                            }}>
-                              {b.balance > 0 ? '+' : ''}{fmt(b.balance, currency)}
-                            </span>
-                          </div>
-                        ))}
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                          {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).map(b => {
+                            const positive = b.balance > 0
+                            const Trend = positive ? TrendingUp : TrendingDown
+                            return (
+                              <div key={b.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0' }}>
+                                <RingAvatar userId={b.user_id} username={b.username} avatarUrl={b.avatar_url} size={26} innerBg={theme.centerBg} textColor={theme.text} />
+                                <span style={{ flex: 1, fontSize: 13, color: theme.text, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                  {b.username}
+                                </span>
+                                <span style={{
+                                  display: 'inline-flex', alignItems: 'center', gap: 4,
+                                  padding: '4px 10px', borderRadius: 8,
+                                  fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em',
+                                  background: positive ? 'rgba(16,185,129,0.13)' : 'rgba(239,68,68,0.13)',
+                                  color: positive ? '#10b981' : '#ef4444',
+                                }}>
+                                  <Trend size={11} strokeWidth={3} />
+                                  {positive ? '+' : ''}{fmt(b.balance, currency)}
+                                </span>
+                              </div>
+                            )
+                          })}
+                        </div>
                       </div>
                     )}
                   </div>
@@ -945,36 +1116,115 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
             )}
           </div>
 
-          {pieSegments.length > 0 && (
-            <div style={{
-              background: 'var(--bg-card)', borderRadius: 16, padding: '20px 16px',
-              border: '1px solid var(--border-primary)',
-              boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
-              marginBottom: 16,
-            }}>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 16, textAlign: 'center' }}>{t('budget.byCategory')}</div>
+          {pieSegments.length > 0 && (() => {
+            const decimals = currencyDecimals(currency)
+            const total = pieSegments.reduce((s, x) => s + x.value, 0)
+            const totalFmt = Number(total).toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+            const decimalSep = (0.1).toLocaleString(locale).replace(/\d/g, '')
+            const [totalInt, totalDec] = decimals > 0 ? totalFmt.split(decimalSep) : [totalFmt, '']
+            const R = 80
+            const CIRC = 2 * Math.PI * R
+            let dashOffset = 0
+            return (
+              <div style={{
+                background: theme.bg,
+                borderRadius: 20, padding: 20, color: theme.text, marginBottom: 16,
+                border: `1px solid ${theme.border}`,
+                boxShadow: theme.shadow,
+              }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
+                  <div style={{
+                    width: 38, height: 38, borderRadius: 11,
+                    background: theme.iconBg,
+                    border: `1px solid ${theme.iconBorder}`,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: theme.iconColor, flexShrink: 0,
+                  }}>
+                    <PieChartIcon size={18} strokeWidth={2} />
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 11, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.09em', fontWeight: 600 }}>{t('budget.byCategory')}</div>
+                  </div>
+                </div>
 
-              <PieChart segments={pieSegments} size={180} totalLabel={t('budget.total')} />
-
-              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 0 }}>
-                {pieSegments.map((seg, i) => {
-                  const pct = grandTotal > 0 ? ((seg.value / grandTotal) * 100).toFixed(1) : '0.0'
-                  return (
-                    <div key={seg.name} style={{ padding: '8px 0', borderTop: i > 0 ? '1px solid var(--border-secondary)' : 'none' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                        <div style={{ width: 10, height: 10, borderRadius: 3, background: seg.color, flexShrink: 0 }} />
-                        <span style={{ fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>{seg.name}</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 3, paddingLeft: 18 }}>
-                        <span style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 500 }}>{fmt(seg.value, currency)}</span>
-                        <span style={{ fontSize: 10, color: 'var(--text-faint)', fontWeight: 600, background: 'var(--bg-secondary)', padding: '1px 6px', borderRadius: 99 }}>{pct}%</span>
-                      </div>
+                <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', margin: '4px 0 16px' }}>
+                  <svg width={200} height={200} viewBox="0 0 200 200" style={{ transform: 'rotate(-90deg)', filter: theme.donutShadow }}>
+                    <defs>
+                      {pieSegments.map((seg, i) => {
+                        const c2 = hexLighten(seg.color, 0.2)
+                        return (
+                          <linearGradient key={`grad-${i}`} id={`cat-grad-${i}`} x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stopColor={seg.color} />
+                            <stop offset="100%" stopColor={c2} />
+                          </linearGradient>
+                        )
+                      })}
+                    </defs>
+                    <circle cx={100} cy={100} r={R} fill="none" stroke={theme.track} strokeWidth={22} />
+                    {pieSegments.map((seg, i) => {
+                      const segLen = total > 0 ? (seg.value / total) * CIRC : 0
+                      const circle = (
+                        <circle key={i}
+                          cx={100} cy={100} r={R}
+                          fill="none" strokeLinecap="round" strokeWidth={22}
+                          stroke={`url(#cat-grad-${i})`}
+                          strokeDasharray={`${segLen} ${CIRC}`}
+                          strokeDashoffset={-dashOffset}
+                        />
+                      )
+                      dashOffset += segLen
+                      return circle
+                    })}
+                  </svg>
+                  <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, pointerEvents: 'none' }}>
+                    <div style={{ fontSize: 10.5, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 700 }}>{t('budget.total')}</div>
+                    <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, display: 'flex', alignItems: 'baseline', gap: 2 }}>
+                      <span>{totalInt}</span>
+                      {totalDec && <span style={{ fontSize: 13, fontWeight: 500, color: theme.sub }}>{decimalSep}{totalDec}</span>}
                     </div>
-                  )
-                })}
+                    <div style={{ fontSize: 10.5, color: theme.faint, fontWeight: 500, marginTop: 2 }}>{currency}</div>
+                  </div>
+                </div>
+
+                <div style={{ borderTop: `1px solid ${theme.divider}`, paddingTop: 10, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  {pieSegments.map((seg, i) => {
+                    const pct = total > 0 ? (seg.value / total) * 100 : 0
+                    const pctLabel = pct.toFixed(1).replace('.', decimalSep) + '%'
+                    const c2 = hexLighten(seg.color, 0.2)
+                    const chipColor = isDark ? hexLighten(seg.color, 0.35) : seg.color
+                    return (
+                      <div key={seg.name} style={{
+                        display: 'flex', alignItems: 'center', gap: 12,
+                        padding: '10px 8px', borderRadius: 12,
+                        transition: 'background 0.15s',
+                      }}
+                        onMouseEnter={e => e.currentTarget.style.background = theme.rowHover}
+                        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                      >
+                        <div style={{
+                          width: 10, height: 10, borderRadius: 3, flexShrink: 0,
+                          background: `linear-gradient(135deg, ${seg.color}, ${c2})`,
+                          boxShadow: `0 0 12px ${seg.color}80`,
+                        }} />
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.01em', color: theme.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{seg.name}</div>
+                          <div style={{ fontSize: 11.5, color: theme.sub, fontWeight: 500, marginTop: 1 }}>{fmt(seg.value, currency)}</div>
+                        </div>
+                        <span style={{
+                          flexShrink: 0,
+                          padding: '4px 9px', borderRadius: 7,
+                          fontSize: 11, fontWeight: 700, letterSpacing: '-0.01em',
+                          background: `${seg.color}26`,
+                          border: `1px solid ${seg.color}40`,
+                          color: chipColor,
+                        }}>{pctLabel}</span>
+                      </div>
+                    )
+                  })}
+                </div>
               </div>
-            </div>
-          )}
+            )
+          })()}
 
         </div>
       </div>

client/src/components/Files/FileManager.tsx

@@ -10,7 +10,7 @@ import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 
 import { getAuthUrl } from '../../api/authUrl'
-import { downloadFile, openFile } from '../../utils/fileDownload'
+import { downloadFile, openFile as openFileUrl } from '../../utils/fileDownload'
 
 function isImage(mimeType) {
   if (!mimeType) return false
@@ -94,7 +94,7 @@ function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxProps) {
 
   return (
     <div
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 2000, display: 'flex', flexDirection: 'column' }}
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 2000, display: 'flex', flexDirection: 'column', paddingBottom: 'var(--bottom-nav-h)' }}
       onClick={onClose}
       onTouchStart={e => setTouchStart(e.touches[0].clientX)}
       onTouchEnd={e => {
@@ -113,7 +113,7 @@ function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxProps) {
         </span>
         <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
           <button
-            onClick={() => openFile(file.url).catch(() => {})}
+            onClick={() => openFileUrl(file.url, file.original_name).catch(() => {})}
             style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
             title={t('files.openTab')}>
             <ExternalLink size={16} />
@@ -649,8 +649,17 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                     </div>
                     {dayGroups.map(({ day, dayPlaces }) => (
                       <div key={day.id}>
-                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>
-                          {day.title || `${t('dayplan.dayN', { n: day.day_number })}${day.date ? ` · ${day.date}` : ''}`}
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>
+                          <span>{day.title || t('dayplan.dayN', { n: day.day_number })}</span>
+                          {(() => {
+                            const badge = day.date || (day.title ? t('dayplan.dayN', { n: day.day_number }) : null)
+                            return badge ? (
+                              <span style={{
+                                fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
+                                background: 'var(--bg-tertiary)', padding: '1px 6px', borderRadius: 999,
+                              }}>{badge}</span>
+                            ) : null
+                          })()}
                         </div>
                         {dayPlaces.map(placeBtn)}
                       </div>
@@ -743,7 +752,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
               <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                 <button
-                  onClick={() => openFile(previewFile.url).catch(() => {})}
+                  onClick={() => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))}
                   style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
                   onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
                   onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
@@ -771,7 +780,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
               title={previewFile.original_name}
             >
               <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
-                <button onClick={() => openFile(previewFile.url).catch(() => {})} style={{ color: 'var(--text-primary)', textDecoration: 'underline', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}>{t('files.downloadPdf')}</button>
+                <button onClick={() => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))} style={{ color: 'var(--text-primary)', textDecoration: 'underline', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}>{t('files.downloadPdf')}</button>
               </p>
             </object>
           </div>
@@ -779,25 +788,81 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
         document.body
       )}
 
-      {/* Header */}
-      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
-        <div>
-          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{showTrash ? (t('files.trash') || 'Trash') : t('files.title')}</h2>
-          <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
-            {showTrash
-              ? `${trashFiles.length} ${trashFiles.length === 1 ? 'file' : 'files'}`
-              : (files.length === 1 ? t('files.countSingular') : t('files.count', { count: files.length }))}
-          </p>
-        </div>
-        <button onClick={toggleTrash} style={{
-          padding: '6px 12px', borderRadius: 8, border: '1px solid var(--border-primary)',
-          background: showTrash ? 'var(--accent)' : 'var(--bg-card)',
-          color: showTrash ? 'var(--accent-text)' : 'var(--text-muted)',
-          fontSize: 12, fontWeight: 500, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5,
-          fontFamily: 'inherit',
+      {/* Toolbar */}
+      <div style={{ padding: '24px 28px 0', flexShrink: 0 }} className="max-md:!px-4 max-md:!pt-4">
+        <div style={{
+          background: 'var(--bg-tertiary)', borderRadius: 18,
+          padding: '14px 16px 14px 22px',
+          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
         }}>
-          <Trash2 size={13} /> {t('files.trash') || 'Trash'}
-        </button>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+            {showTrash ? (t('files.trash') || 'Trash') : t('files.title')}
+          </h2>
+
+          {!showTrash && (
+            <>
+              <div className="hidden md:block" style={{ width: 1, height: 22, background: 'var(--border-faint)', flexShrink: 0 }} />
+              <div className="hidden md:inline-flex" style={{ gap: 4, flexWrap: 'wrap', flex: 1, minWidth: 0 }}>
+                {[
+                  { id: 'all', label: t('files.filterAll') },
+                  ...(files.some(f => f.starred) ? [{ id: 'starred', icon: Star } as const] : []),
+                  { id: 'pdf', label: t('files.filterPdf') },
+                  { id: 'image', label: t('files.filterImages') },
+                  { id: 'doc', label: t('files.filterDocs') },
+                  ...(files.some(f => f.note_id) ? [{ id: 'collab', label: t('files.filterCollab') || 'Collab' }] : []),
+                ].map(tab => {
+                  const active = filterType === tab.id
+                  const TabIcon = 'icon' in tab ? tab.icon : null
+                  const count = tab.id === 'all' ? files.length
+                    : tab.id === 'starred' ? files.filter(f => f.starred).length
+                    : tab.id === 'pdf' ? files.filter(f => (f.mime_type || '').includes('pdf') || /\.pdf$/i.test(f.original_name)).length
+                    : tab.id === 'image' ? files.filter(f => (f.mime_type || '').startsWith('image/')).length
+                    : tab.id === 'doc' ? files.filter(f => /\.(docx?|xlsx?|txt|csv)$/i.test(f.original_name)).length
+                    : tab.id === 'collab' ? files.filter(f => f.note_id).length
+                    : 0
+                  return (
+                    <button key={tab.id} onClick={() => setFilterType(tab.id)}
+                      style={{
+                        appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                        display: 'inline-flex', alignItems: 'center', gap: 6,
+                        padding: '6px 12px', borderRadius: 99, fontSize: 13, whiteSpace: 'nowrap',
+                        background: active ? 'var(--bg-card)' : 'transparent',
+                        color: active ? 'var(--text-primary)' : 'var(--text-muted)',
+                        fontWeight: active ? 500 : 400,
+                        boxShadow: active ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
+                        transition: 'all 0.15s ease',
+                      }}
+                    >
+                      {TabIcon ? <TabIcon size={13} fill={active ? '#facc15' : 'none'} color={active ? '#facc15' : 'currentColor'} /> : null}
+                      {'label' in tab && tab.label}
+                      <span style={{
+                        fontSize: 10, fontWeight: 600,
+                        background: active ? 'var(--bg-tertiary)' : 'rgba(0,0,0,0.06)',
+                        color: 'var(--text-faint)',
+                        padding: '1px 6px', borderRadius: 99, minWidth: 16, textAlign: 'center',
+                      }}>{count}</span>
+                    </button>
+                  )
+                })}
+              </div>
+            </>
+          )}
+
+          <button onClick={toggleTrash} 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,
+            background: 'var(--accent)', color: 'var(--accent-text)',
+            flexShrink: 0, marginLeft: 'auto',
+            opacity: showTrash ? 1 : 0.88,
+            transition: 'opacity 0.15s ease',
+          }}
+            onMouseEnter={e => e.currentTarget.style.opacity = '1'}
+            onMouseLeave={e => e.currentTarget.style.opacity = showTrash ? '1' : '0.88'}
+          >
+            <Trash2 size={14} strokeWidth={2.5} /> <span className="hidden sm:inline">{t('files.trash') || 'Trash'}</span>
+          </button>
+        </div>
       </div>
 
       {showTrash ? (
@@ -835,7 +900,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
           {can('file_upload', trip) && <div
             {...getRootProps()}
             style={{
-              margin: '16px 16px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
+              margin: '16px 28px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
               textAlign: 'center', cursor: 'pointer', transition: 'all 0.15s',
               borderColor: isDragActive ? 'var(--text-secondary)' : 'var(--border-primary)',
               background: isDragActive ? 'var(--bg-secondary)' : 'var(--bg-card)',
@@ -860,7 +925,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
           </div>}
 
           {/* Filter tabs */}
-          <div style={{ display: 'flex', gap: 4, padding: '12px 16px 0', flexShrink: 0, flexWrap: 'wrap' }}>
+          <div className="md:!hidden" style={{ display: 'flex', gap: 4, padding: '12px 16px 0', flexShrink: 0, flexWrap: 'wrap' }}>
             {[
               { id: 'all', label: t('files.filterAll') },
               ...(files.some(f => f.starred) ? [{ id: 'starred', icon: Star }] : []),
@@ -883,7 +948,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
           </div>
 
           {/* File list */}
-          <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
+          <div style={{ flex: 1, overflowY: 'auto', padding: '12px 28px 16px' }} className="max-md:!px-4">
             {filteredFiles.length === 0 ? (
               <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
                 <FileText size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />

client/src/components/Journey/JourneyMap.tsx

@@ -9,11 +9,14 @@ export interface MapMarkerItem {
   label: string
   mood?: string | null
   time: string
+  dayColor: string
+  dayLabel: number
 }
 
 export interface JourneyMapHandle {
   highlightMarker: (id: string | null) => void
   focusMarker: (id: string) => void
+  invalidateSize: () => void
 }
 
 interface MapEntry {
@@ -23,6 +26,8 @@ interface MapEntry {
   title?: string | null
   mood?: string | null
   entry_date: string
+  dayColor?: string
+  dayLabel?: number
 }
 
 interface Props {
@@ -33,6 +38,8 @@ interface Props {
   dark?: boolean
   activeMarkerId?: string | null
   onMarkerClick?: (id: string, type?: string) => void
+  fullScreen?: boolean
+  paddingBottom?: number
 }
 
 function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
@@ -46,6 +53,8 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
         label: e.title || 'Entry',
         mood: e.mood,
         time: e.entry_date,
+        dayColor: e.dayColor || '#52525B',
+        dayLabel: e.dayLabel ?? 1,
       })
     }
   }
@@ -56,25 +65,19 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
 const MARKER_W = 28
 const MARKER_H = 36
 
-function markerSvg(index: number, highlighted: boolean, dark: boolean): string {
-  const fill = dark
-    ? (highlighted ? '#FAFAFA' : '#FAFAFA')
-    : (highlighted ? '#18181B' : '#18181B')
-  const textColor = dark
-    ? (highlighted ? '#18181B' : '#18181B')
-    : (highlighted ? '#fff' : '#fff')
-  const stroke = dark ? '#3F3F46' : '#fff'
+function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): string {
+  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
   const shadow = highlighted
-    ? 'filter:drop-shadow(0 0 8px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))'
+    ? 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
     : 'filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-  const label = String(index + 1)
+  const label = String(dayLabel)
   const scale = highlighted ? 1.2 : 1
 
   return `<div style="transform:scale(${scale});transition:transform 0.2s ease;${shadow};transform-origin:bottom center">
     <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="2"/>
-      <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>
+      <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>
     </svg>
   </div>`
 }
@@ -82,7 +85,7 @@ function markerSvg(index: number, highlighted: boolean, dark: boolean): string {
 const EMPTY_TRAIL: { lat: number; lng: number }[] = []
 
 const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
-  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick },
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom },
   ref
 ) {
   const stableTrail = trail || EMPTY_TRAIL
@@ -107,12 +110,11 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(prev)
       const item = itemsRef.current.find(i => i.id === prev)
       if (marker && item) {
-        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(idx, false, isDark),
+          html: markerSvg(item.dayColor, item.dayLabel, false),
         }))
         marker.setZIndexOffset(0)
       }
@@ -122,12 +124,11 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(id)
       const item = itemsRef.current.find(i => i.id === id)
       if (marker && item) {
-        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(idx, true, isDark),
+          html: markerSvg(item.dayColor, item.dayLabel, true),
         }))
         marker.setZIndexOffset(1000)
       }
@@ -138,11 +139,17 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
     highlightMarker(id)
     const marker = markersRef.current.get(id)
     if (marker && mapRef.current) {
-      mapRef.current.flyTo(marker.getLatLng(), Math.max(mapRef.current.getZoom(), 12), { duration: 0.5 })
+      try {
+        mapRef.current.flyTo(marker.getLatLng(), Math.max(mapRef.current.getZoom(), 12), { duration: 0.5 })
+      } catch { /* map not yet initialized */ }
     }
   }, [])
 
-  useImperativeHandle(ref, () => ({ highlightMarker, focusMarker }), [])
+  const invalidateSize = useCallback(() => {
+    try { mapRef.current?.invalidateSize() } catch { /* map not yet initialized */ }
+  }, [])
+
+  useImperativeHandle(ref, () => ({ highlightMarker, focusMarker, invalidateSize }), [])
 
   useEffect(() => {
     if (!containerRef.current) return
@@ -156,7 +163,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
     const map = L.map(containerRef.current, {
       zoomControl: false,
       attributionControl: true,
-      scrollWheelZoom: false,
+      scrollWheelZoom: fullScreen ? true : false,
       dragging: true,
       touchZoom: true,
     })
@@ -169,6 +176,12 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       maxZoom: 18,
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       referrerPolicy: 'strict-origin-when-cross-origin',
+      // Leaflet defaults updateWhenIdle:true on mobile (waits for pan to settle
+      // before loading tiles). On the journey mobile combined view we flyTo
+      // constantly when switching cards, so tiles lag visibly — force eager
+      // updates and keep a larger ring of off-screen tiles ready.
+      updateWhenIdle: false,
+      keepBuffer: 4,
     } as any).addTo(map)
 
     const items = buildMarkerItems(entries)
@@ -185,8 +198,8 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       coords.forEach(c => allCoords.push(c))
     }
 
-    // route polyline — subtle dashed connection
-    if (items.length > 1) {
+    // route polyline — only in non-fullscreen (sidebar map) mode
+    if (!fullScreen && items.length > 1) {
       const routeCoords = items.map(i => [i.lat, i.lng] as L.LatLngTuple)
       L.polyline(routeCoords, {
         color: dark ? '#71717A' : '#A1A1AA',
@@ -206,7 +219,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
         className: '',
         iconSize: [MARKER_W, MARKER_H],
         iconAnchor: [MARKER_W / 2, MARKER_H],
-        html: markerSvg(i, false, !!dark),
+        html: markerSvg(item.dayColor, item.dayLabel, false),
       })
 
       const marker = L.marker(pos, { icon }).addTo(map)
@@ -229,7 +242,8 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       try {
         map.invalidateSize()
         if (allCoords.length > 0) {
-          map.fitBounds(L.latLngBounds(allCoords), { padding: [50, 50], maxZoom: 14 })
+          const pb = paddingBottom || 50
+          map.fitBounds(L.latLngBounds(allCoords), { paddingTopLeft: [50, 50], paddingBottomRight: [50, pb], maxZoom: 16 })
         } else {
           map.setView([30, 0], 2)
         }
@@ -245,7 +259,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       mapRef.current = null
       markersRef.current.clear()
     }
-  }, [entries, stableTrail, dark, mapTileUrl])
+  }, [entries, stableTrail, dark, mapTileUrl, fullScreen, paddingBottom])
 
   // react to activeMarkerId prop changes — runs after map is built
   useEffect(() => {
@@ -254,8 +268,14 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
     const timer = setTimeout(() => {
       highlightMarker(activeMarkerId)
       const marker = markersRef.current.get(activeMarkerId)
-      if (marker && mapRef.current) {
-        mapRef.current.flyTo(marker.getLatLng(), Math.max(mapRef.current.getZoom(), 12), { duration: 0.5 })
+      if (!marker || !mapRef.current) return
+      // fitBounds may still be pending when this fires — getZoom() throws
+      // "Set map center and zoom first" until the map has a view. Guard it.
+      try {
+        const currentZoom = mapRef.current.getZoom()
+        mapRef.current.flyTo(marker.getLatLng(), Math.max(currentZoom, 12), { duration: 0.5 })
+      } catch {
+        mapRef.current.setView(marker.getLatLng(), 12)
       }
     }, 50)
     return () => clearTimeout(timer)

client/src/components/Journey/JourneyMapAuto.tsx

@@ -0,0 +1,57 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { useSettingsStore } from '../../store/settingsStore'
+import JourneyMap, { type JourneyMapHandle } from './JourneyMap'
+import JourneyMapGL, { type JourneyMapGLHandle } from './JourneyMapGL'
+
+// Unified handle — both providers expose the same three methods.
+export type JourneyMapAutoHandle = JourneyMapHandle
+
+interface MapEntry {
+  id: string
+  lat: number
+  lng: number
+  title?: string | null
+  location_name?: string | null
+  mood?: string | null
+  entry_date: string
+  dayColor?: string
+  dayLabel?: number
+}
+
+interface Props {
+  checkins: unknown[]
+  entries: MapEntry[]
+  trail?: { lat: number; lng: number }[]
+  height?: number
+  dark?: boolean
+  activeMarkerId?: string | null
+  onMarkerClick?: (id: string, type?: string) => void
+  fullScreen?: boolean
+  paddingBottom?: number
+}
+
+const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyMapAuto(props, ref) {
+  const provider = useSettingsStore(s => s.settings.map_provider)
+  const token = useSettingsStore(s => s.settings.mapbox_access_token)
+  const leafletRef = useRef<JourneyMapHandle>(null)
+  const glRef = useRef<JourneyMapGLHandle>(null)
+
+  // Fall back to Leaflet when the user selected Mapbox GL but hasn't
+  // supplied a token yet — otherwise the map would just show a stub.
+  const useGL = provider === 'mapbox-gl' && !!token
+
+  useImperativeHandle(ref, () => ({
+    highlightMarker: (id) => (useGL ? glRef.current : leafletRef.current)?.highlightMarker(id),
+    focusMarker: (id) => (useGL ? glRef.current : leafletRef.current)?.focusMarker(id),
+    invalidateSize: () => (useGL ? glRef.current : leafletRef.current)?.invalidateSize(),
+  }), [useGL])
+
+  if (useGL) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return <JourneyMapGL ref={glRef} {...(props as any)} />
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <JourneyMap ref={leafletRef} {...(props as any)} />
+})
+
+export default JourneyMapAuto

client/src/components/Journey/JourneyMapGL.tsx

@@ -0,0 +1,463 @@
+import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
+import mapboxgl from 'mapbox-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
+import { useSettingsStore } from '../../store/settingsStore'
+import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
+
+export interface JourneyMapGLHandle {
+  highlightMarker: (id: string | null) => void
+  focusMarker: (id: string) => void
+  invalidateSize: () => void
+}
+
+interface MapEntry {
+  id: string
+  lat: number
+  lng: number
+  title?: string | null
+  location_name?: string | null
+  mood?: string | null
+  entry_date: string
+  dayColor?: string
+  dayLabel?: number
+}
+
+interface Props {
+  checkins: unknown[]
+  entries: MapEntry[]
+  trail?: { lat: number; lng: number }[]
+  height?: number
+  dark?: boolean
+  activeMarkerId?: string | null
+  onMarkerClick?: (id: string, type?: string) => void
+  fullScreen?: boolean
+  paddingBottom?: number
+}
+
+interface Item {
+  id: string
+  lat: number
+  lng: number
+  label: string
+  locationName: string
+  time: string
+  dayColor: string
+  dayLabel: number
+}
+
+const MARKER_W = 28
+const MARKER_H = 36
+
+function buildItems(entries: MapEntry[]): Item[] {
+  const items: Item[] = []
+  for (const e of entries) {
+    if (e.lat && e.lng) {
+      items.push({
+        id: e.id,
+        lat: e.lat,
+        lng: e.lng,
+        label: e.title || '',
+        locationName: e.location_name || '',
+        time: e.entry_date,
+        dayColor: e.dayColor || '#52525B',
+        dayLabel: e.dayLabel ?? 1,
+      })
+    }
+  }
+  items.sort((a, b) => a.time.localeCompare(b.time))
+  return items
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function formatEntryDate(iso: string): string {
+  if (!iso) return ''
+  try {
+    const d = new Date(iso.includes('T') ? iso : iso + 'T00:00:00')
+    if (Number.isNaN(d.getTime())) return iso
+    return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }).format(d)
+  } catch {
+    return iso
+  }
+}
+
+// Inject the popup styles once per document. Two-line frosted-glass card in
+// the Apple/Google Maps idiom — title on top, location / date subtly below.
+function ensureJourneyPopupStyle() {
+  if (document.getElementById('trek-journey-popup-style')) return
+  const s = document.createElement('style')
+  s.id = 'trek-journey-popup-style'
+  s.textContent = `
+    .mapboxgl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content {
+      padding: 9px 14px 10px;
+      border-radius: 14px;
+      background: rgba(255, 255, 255, 0.94);
+      backdrop-filter: blur(16px) saturate(180%);
+      -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;
+      min-width: 160px;
+      max-width: 280px;
+    }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content {
+      background: rgba(24, 24, 27, 0.88);
+      border-color: rgba(255, 255, 255, 0.08);
+      color: #FAFAFA;
+    }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip {
+      border-top-color: rgba(255, 255, 255, 0.94);
+      border-bottom-color: rgba(255, 255, 255, 0.94);
+    }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip {
+      border-top-color: rgba(24, 24, 27, 0.88);
+      border-bottom-color: rgba(24, 24, 27, 0.88);
+    }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button { display: none; }
+    .trek-journey-popup-title {
+      font-size: 13.5px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      color: #18181B;
+      line-height: 1.3;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
+    .trek-journey-popup-sub {
+      display: flex;
+      align-items: baseline;
+      gap: 7px;
+      margin-top: 3px;
+      font-size: 11.5px;
+      color: #71717A;
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
+    .trek-journey-popup-place {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .trek-journey-popup-sep {
+      flex: 0 0 auto;
+      opacity: 0.55;
+      font-weight: 500;
+    }
+    .trek-journey-popup-date { flex: 0 0 auto; }
+    @keyframes trek-journey-popup-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+  `
+  document.head.appendChild(s)
+}
+
+function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): HTMLDivElement {
+  const fill = dayColor
+  const textColor = '#fff'
+  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
+  const shadow = highlighted
+    ? 'drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
+    : 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+  const scale = highlighted ? 1.2 : 1
+  const label = String(dayLabel)
+
+  // Outer wrap holds the element mapbox positions via `transform: translate(...)`.
+  // Anything animated (scale, filter) has to live on an inner child — otherwise
+  // the CSS transition would catch the map's per-frame translate updates and
+  // the marker smears all over the viewport while scrolling / flying.
+  const wrap = document.createElement('div')
+  wrap.style.cssText = `width:${MARKER_W}px;height:${MARKER_H}px;cursor:pointer;`
+  const inner = document.createElement('div')
+  inner.className = 'trek-journey-marker-inner'
+  inner.style.cssText = `width:100%;height:100%;transform:scale(${scale});transform-origin:bottom center;transition:transform 0.2s ease;filter:${shadow};`
+  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>
+  </svg>`
+  wrap.appendChild(inner)
+  return wrap
+}
+
+const EMPTY_TRAIL: { lat: number; lng: number }[] = []
+
+const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL(
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom },
+  ref
+) {
+  const stableTrail = trail || EMPTY_TRAIL
+  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
+  const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
+  const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<mapboxgl.Map | null>(null)
+  const markersRef = useRef<Map<string, mapboxgl.Marker>>(new Map())
+  const itemsRef = useRef<Item[]>([])
+  const highlightedRef = useRef<string | null>(null)
+  const popupRef = useRef<mapboxgl.Popup | null>(null)
+  const onMarkerClickRef = useRef(onMarkerClick)
+  onMarkerClickRef.current = onMarkerClick
+  const darkRef = useRef(dark)
+  darkRef.current = dark
+
+  const showPopup = useCallback((id: string) => {
+    const item = itemsRef.current.find(i => i.id === id)
+    if (!item || !mapRef.current) return
+    ensureJourneyPopupStyle()
+    // Primary line: user-given title. If none, fall back to the location
+    // name so we always show *something* useful on the top line.
+    const primaryRaw = item.label || item.locationName || 'Entry'
+    const secondaryPlace = item.label ? item.locationName : ''
+    const dateStr = formatEntryDate(item.time)
+    const primary = escapeHtml(primaryRaw)
+    const place = escapeHtml(secondaryPlace)
+    const date = escapeHtml(dateStr)
+
+    const subParts: string[] = []
+    if (place) subParts.push(`<span class="trek-journey-popup-place">${place}</span>`)
+    if (date) subParts.push(`<span class="trek-journey-popup-date">${date}</span>`)
+    const subline = subParts.length === 2
+      ? `${subParts[0]}<span class="trek-journey-popup-sep">\u00B7</span>${subParts[1]}`
+      : subParts.join('')
+
+    const html = `
+      <div class="trek-journey-popup-title">${primary}</div>
+      ${subline ? `<div class="trek-journey-popup-sub">${subline}</div>` : ''}
+    `
+    // Marker is bottom-anchored with a visible height of 36px (1.2× on
+    // highlight ≈ 44px), so -46 keeps the popup just clear of the pin top.
+    const offset: [number, number] = [0, -46]
+    if (popupRef.current) {
+      popupRef.current.setLngLat([item.lng, item.lat])
+      popupRef.current.setHTML(html)
+      popupRef.current.setOffset(offset)
+      const el = popupRef.current.getElement()
+      if (el) el.classList.toggle('trek-dark', !!darkRef.current)
+    } else {
+      popupRef.current = new mapboxgl.Popup({
+        closeButton: false,
+        closeOnClick: false,
+        closeOnMove: false,
+        anchor: 'bottom',
+        offset,
+        className: `trek-journey-popup${darkRef.current ? ' trek-dark' : ''}`,
+        maxWidth: '280px',
+      })
+        .setLngLat([item.lng, item.lat])
+        .setHTML(html)
+        .addTo(mapRef.current)
+    }
+  }, [])
+
+  const hidePopup = useCallback(() => {
+    if (popupRef.current) {
+      try { popupRef.current.remove() } catch { /* noop */ }
+      popupRef.current = null
+    }
+  }, [])
+
+  const setMarkerStyle = useCallback((id: string, highlighted: boolean) => {
+    const item = itemsRef.current.find(i => i.id === id)
+    const marker = markersRef.current.get(id)
+    if (!item || !marker) return
+    const el = marker.getElement()
+    const currentInner = el.querySelector('.trek-journey-marker-inner') as HTMLDivElement | null
+    if (!currentInner) return
+    // Only swap the inner element's styles/HTML. Touching `el.style.cssText`
+    // would wipe mapbox's positional transform and make the marker flicker.
+    const next = markerHtml(item.dayColor, item.dayLabel, highlighted)
+    const nextInner = next.querySelector('.trek-journey-marker-inner') as HTMLDivElement
+    currentInner.style.cssText = nextInner.style.cssText
+    currentInner.innerHTML = nextInner.innerHTML
+    el.style.zIndex = highlighted ? '1000' : '0'
+  }, [])
+
+  const highlightMarker = useCallback((id: string | null) => {
+    const prev = highlightedRef.current
+    highlightedRef.current = id
+    if (prev && prev !== id) setMarkerStyle(prev, false)
+    if (id) {
+      setMarkerStyle(id, true)
+      showPopup(id)
+    } else {
+      hidePopup()
+    }
+  }, [setMarkerStyle, showPopup, hidePopup])
+
+  const focusMarker = useCallback((id: string) => {
+    highlightMarker(id)
+    const marker = markersRef.current.get(id)
+    if (!marker || !mapRef.current) return
+    try {
+      mapRef.current.flyTo({
+        center: marker.getLngLat(),
+        zoom: Math.max(mapRef.current.getZoom(), 14),
+        pitch: mapbox3d ? 45 : 0,
+        duration: 600,
+      })
+    } catch { /* map not yet ready */ }
+  }, [highlightMarker, mapbox3d])
+
+  const invalidateSize = useCallback(() => {
+    try { mapRef.current?.resize() } catch { /* map not yet ready */ }
+  }, [])
+
+  useImperativeHandle(ref, () => ({ highlightMarker, focusMarker, invalidateSize }), [highlightMarker, focusMarker, invalidateSize])
+
+  // Build map once per style/token change. Markers and layers are rebuilt
+  // inside the same effect so they stay in sync with the active style.
+  useEffect(() => {
+    if (!containerRef.current || !mapboxToken) return
+    mapboxgl.accessToken = mapboxToken
+
+    const items = buildItems(entries)
+    itemsRef.current = items
+
+    const bounds = new mapboxgl.LngLatBounds()
+    items.forEach(i => bounds.extend([i.lng, i.lat]))
+    stableTrail.forEach(p => bounds.extend([p.lng, p.lat]))
+    const hasPoints = items.length > 0 || stableTrail.length > 0
+
+    const map = new mapboxgl.Map({
+      container: containerRef.current,
+      style: mapboxStyle,
+      center: hasPoints ? bounds.getCenter() : [0, 30],
+      zoom: hasPoints ? 2 : 1,
+      pitch: mapbox3d && fullScreen ? 45 : 0,
+      attributionControl: true,
+      antialias: mapboxQuality,
+      projection: mapboxQuality ? 'globe' : 'mercator',
+    })
+    mapRef.current = map
+
+    map.on('load', () => {
+      if (mapbox3d) {
+        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(mapboxStyle)) addCustom3dBuildings(map, !!darkRef.current)
+      }
+      // Flatten Mapbox Standard's built-in DEM so HTML markers (at Z=0)
+      // stay pinned to their coordinates at every zoom and pitch.
+      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
+        try { map.setTerrain(null) } catch { /* noop */ }
+      }
+
+      // route trail — dashed line connecting entries in time order
+      if (items.length > 1) {
+        const coords = items.map(i => [i.lng, i.lat])
+        if (map.getSource('journey-route')) (map.getSource('journey-route') as mapboxgl.GeoJSONSource).setData({
+          type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: coords } as GeoJSON.LineString,
+        })
+        else {
+          map.addSource('journey-route', {
+            type: 'geojson',
+            data: { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: coords } as GeoJSON.LineString },
+          })
+          map.addLayer({
+            id: 'journey-route-line',
+            type: 'line',
+            source: 'journey-route',
+            paint: {
+              'line-color': darkRef.current ? '#71717A' : '#A1A1AA',
+              'line-width': 1.5,
+              'line-opacity': 0.5,
+              'line-dasharray': [2, 3],
+            },
+            layout: { 'line-cap': 'round', 'line-join': 'round' },
+          })
+        }
+      }
+
+      // markers
+      items.forEach((item) => {
+        const el = markerHtml(item.dayColor, item.dayLabel, false)
+        const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
+          .setLngLat([item.lng, item.lat])
+          .addTo(map)
+        el.addEventListener('click', (ev) => {
+          ev.stopPropagation()
+          onMarkerClickRef.current?.(item.id)
+        })
+        markersRef.current.set(item.id, marker)
+      })
+
+      // fit bounds to all points
+      if (hasPoints) {
+        const pb = paddingBottom || 50
+        try {
+          map.fitBounds(bounds, {
+            padding: { top: 50, bottom: pb, left: 50, right: 50 },
+            maxZoom: 16,
+            pitch: mapbox3d && fullScreen ? 45 : 0,
+            duration: 0,
+          })
+        } catch { /* empty bounds */ }
+      }
+    })
+
+    return () => {
+      markersRef.current.forEach(m => m.remove())
+      markersRef.current.clear()
+      if (popupRef.current) {
+        try { popupRef.current.remove() } catch { /* noop */ }
+        popupRef.current = null
+      }
+      highlightedRef.current = null
+      try { map.remove() } catch { /* noop */ }
+      mapRef.current = null
+    }
+  }, [entries, stableTrail, mapboxStyle, mapboxToken, mapbox3d, mapboxQuality, fullScreen, paddingBottom])
+
+  // external activeMarkerId → highlight + flyTo
+  useEffect(() => {
+    if (!activeMarkerId || !mapRef.current) return
+    const t = setTimeout(() => {
+      highlightMarker(activeMarkerId)
+      const marker = markersRef.current.get(activeMarkerId)
+      if (!marker || !mapRef.current) return
+      try {
+        mapRef.current.flyTo({
+          center: marker.getLngLat(),
+          zoom: Math.max(mapRef.current.getZoom(), 12),
+          pitch: mapbox3d && fullScreen ? 45 : 0,
+          duration: 500,
+        })
+      } catch { /* map not ready */ }
+    }, 50)
+    return () => clearTimeout(t)
+  }, [activeMarkerId, highlightMarker, mapbox3d, fullScreen])
+
+  if (!mapboxToken) {
+    return (
+      <div
+        style={{ position: 'relative', height: height === 9999 ? '100%' : height, width: '100%', borderRadius: 'inherit', overflow: 'hidden' }}
+        className="flex items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-center px-6"
+      >
+        <div className="text-sm text-zinc-500">
+          No Mapbox access token configured.<br />
+          <span className="text-xs">Settings → Map → Mapbox GL</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ position: 'relative', height: height === 9999 ? '100%' : height, width: '100%', borderRadius: 'inherit', overflow: 'hidden' }}>
+      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
+    </div>
+  )
+})
+
+export default JourneyMapGL

client/src/components/Journey/MobileEntryCard.tsx

@@ -0,0 +1,156 @@
+import { MapPin, Camera, Smile, Laugh, Meh, Frown, Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake } from 'lucide-react'
+import { formatLocationName } from '../../utils/formatters'
+import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
+
+const MOOD_ICONS: Record<string, typeof Smile> = {
+  amazing: Laugh,
+  good: Smile,
+  neutral: Meh,
+  rough: Frown,
+}
+
+const MOOD_COLORS: Record<string, string> = {
+  amazing: 'text-pink-500',
+  good: 'text-amber-500',
+  neutral: 'text-zinc-400',
+  rough: 'text-violet-500',
+}
+
+const WEATHER_ICONS: Record<string, typeof Sun> = {
+  sunny: Sun,
+  partly: CloudSun,
+  cloudy: Cloud,
+  rainy: CloudRain,
+  stormy: CloudLightning,
+  cold: Snowflake,
+}
+
+function photoUrl(p: JourneyPhoto): string {
+  return `/api/photos/${p.photo_id}/thumbnail`
+}
+
+function stripMarkdown(text: string): string {
+  return text
+    .replace(/[#*_~`>\[\]()!|-]/g, '')
+    .replace(/\n+/g, ' ')
+    .trim()
+}
+
+interface Props {
+  entry: JourneyEntry | { id: number; type: string; title?: string | null; location_name?: string | null; location_lat?: number | null; location_lng?: number | null; entry_date: string; entry_time?: string | null; mood?: string | null; weather?: string | null; photos?: { photo_id: number }[]; story?: string | null }
+  dayLabel: number
+  dayColor: string
+  isActive: boolean
+  onClick: () => void
+  publicPhotoUrl?: (photoId: number) => string
+}
+
+export default function MobileEntryCard({ entry, dayLabel, dayColor, isActive, onClick, publicPhotoUrl }: Props) {
+  const hasLocation = !!(entry.location_lat && entry.location_lng)
+  const hasPhotos = entry.photos && entry.photos.length > 0
+  const firstPhoto = hasPhotos ? entry.photos![0] : null
+  const MoodIcon = entry.mood ? MOOD_ICONS[entry.mood] : null
+  const moodColor = entry.mood ? MOOD_COLORS[entry.mood] : ''
+  const WeatherIcon = entry.weather ? WEATHER_ICONS[entry.weather] : null
+
+  const thumbSrc = firstPhoto
+    ? publicPhotoUrl
+      ? publicPhotoUrl((firstPhoto as any).photo_id ?? (firstPhoto as any).id)
+      : photoUrl(firstPhoto as JourneyPhoto)
+    : null
+
+  const date = new Date(entry.entry_date + 'T00:00:00')
+  const dateStr = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+
+  const storyPreview = entry.story ? stripMarkdown(entry.story) : ''
+
+  return (
+    <button
+      onClick={onClick}
+      className={`flex-shrink-0 rounded-xl overflow-hidden text-left transition-all duration-100 ${
+        isActive
+          ? 'w-[320px] sm:w-[340px] bg-white dark:bg-zinc-800 shadow-lg ring-2 ring-zinc-900/70 dark:ring-white/60'
+          : 'w-[240px] sm:w-[260px] bg-white/90 dark:bg-zinc-800/90 shadow-md'
+      } backdrop-blur-lg`}
+    >
+      <div className={`flex ${isActive ? 'h-[140px]' : 'h-[110px]'} transition-all duration-100`}>
+        {/* Photo thumbnail */}
+        {thumbSrc ? (
+          <div className={`${isActive ? 'w-[110px]' : 'w-[90px]'} flex-shrink-0 relative overflow-hidden transition-all duration-100`}>
+            <img
+              src={thumbSrc}
+              alt=""
+              className="w-full h-full object-cover"
+              loading="lazy"
+            />
+            {hasPhotos && entry.photos!.length > 1 && (
+              <div className="absolute bottom-1 right-1 flex items-center gap-0.5 bg-black/60 text-white rounded px-1 py-0.5 text-[10px] font-medium">
+                <Camera size={10} />
+                {entry.photos!.length}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className={`${isActive ? 'w-[110px]' : 'w-[90px]'} flex-shrink-0 bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center transition-all duration-100`}>
+            <MapPin size={20} className="text-zinc-300 dark:text-zinc-500" />
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 p-3 flex flex-col min-w-0">
+          {/* Day number + date + mood/weather */}
+          <div className="flex items-center gap-1.5 mb-1">
+            <span className="w-5 h-5 rounded text-white text-[10px] font-bold flex items-center justify-center flex-shrink-0" style={{ background: dayColor }}>
+              {dayLabel}
+            </span>
+            <span className="text-[11px] text-zinc-400 font-medium">{dateStr}</span>
+            {entry.entry_time && (
+              <span className="text-[11px] text-zinc-400">· {entry.entry_time.slice(0, 5)}</span>
+            )}
+            <div className="flex items-center gap-1.5 ml-auto flex-shrink-0">
+              {MoodIcon && (
+                <span className={`inline-flex items-center justify-center w-5 h-5 rounded-full ${
+                  entry.mood === 'amazing' ? 'bg-pink-100 dark:bg-pink-900/30' :
+                  entry.mood === 'good' ? 'bg-amber-100 dark:bg-amber-900/30' :
+                  entry.mood === 'rough' ? 'bg-violet-100 dark:bg-violet-900/30' :
+                  'bg-zinc-100 dark:bg-zinc-700'
+                }`}>
+                  <MoodIcon size={11} className={moodColor} />
+                </span>
+              )}
+              {WeatherIcon && (
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-zinc-100 dark:bg-zinc-700">
+                  <WeatherIcon size={11} className="text-zinc-500 dark:text-zinc-400" />
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Title */}
+          <h4 className="text-[13px] font-semibold text-zinc-900 dark:text-white leading-tight truncate">
+            {entry.title || (entry.type === 'checkin' ? 'Check-in' : entry.type === 'skeleton' ? 'Add your story…' : 'Untitled')}
+          </h4>
+
+          {/* Story preview (1-2 lines, only on active card) */}
+          {isActive && storyPreview && (
+            <p className="text-[11px] text-zinc-400 dark:text-zinc-500 leading-snug mt-0.5 line-clamp-2">
+              {storyPreview}
+            </p>
+          )}
+
+          {/* Location badge */}
+          <div className="flex items-center gap-1 mt-auto">
+            {hasLocation ? (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-700 text-[10px] font-medium text-zinc-600 dark:text-zinc-300 max-w-full overflow-hidden">
+                <MapPin size={10} className="flex-shrink-0" />
+                <span className="truncate">{formatLocationName(entry.location_name) || 'On the map'}</span>
+              </span>
+            ) : (
+              <span className="text-[10px] text-zinc-400 italic">No location</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </button>
+  )
+}

client/src/components/Journey/MobileEntryView.tsx

@@ -0,0 +1,224 @@
+import { useState } from 'react'
+import {
+  X, Pencil, Trash2, MapPin, Clock, Camera,
+  Laugh, Smile, Meh, Frown,
+  Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake,
+  ThumbsUp, ThumbsDown, ChevronDown,
+} from 'lucide-react'
+import JournalBody from './JournalBody'
+import { formatLocationName } from '../../utils/formatters'
+import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
+
+const MOOD_CONFIG: Record<string, { icon: typeof Smile; label: string; bg: string; text: string }> = {
+  amazing: { icon: Laugh,  label: 'Amazing', bg: 'bg-pink-50 dark:bg-pink-900/20',    text: 'text-pink-600 dark:text-pink-400' },
+  good:    { icon: Smile,  label: 'Good',    bg: 'bg-amber-50 dark:bg-amber-900/20',   text: 'text-amber-600 dark:text-amber-400' },
+  neutral: { icon: Meh,    label: 'Neutral', bg: 'bg-zinc-100 dark:bg-zinc-800',        text: 'text-zinc-500 dark:text-zinc-400' },
+  rough:   { icon: Frown,  label: 'Rough',   bg: 'bg-violet-50 dark:bg-violet-900/20',  text: 'text-violet-600 dark:text-violet-400' },
+}
+
+const WEATHER_CONFIG: Record<string, { icon: typeof Sun; label: string }> = {
+  sunny:  { icon: Sun,            label: 'Sunny' },
+  partly: { icon: CloudSun,      label: 'Partly cloudy' },
+  cloudy: { icon: Cloud,          label: 'Cloudy' },
+  rainy:  { icon: CloudRain,     label: 'Rainy' },
+  stormy: { icon: CloudLightning, label: 'Stormy' },
+  cold:   { icon: Snowflake,     label: 'Cold' },
+}
+
+function photoUrl(p: JourneyPhoto, size: 'thumbnail' | 'original' = 'original', builder?: (id: number) => string): string {
+  if (builder) return builder(p.photo_id)
+  return `/api/photos/${p.photo_id}/${size}`
+}
+
+interface Props {
+  entry: JourneyEntry
+  readOnly?: boolean
+  publicPhotoUrl?: (photoId: number) => string
+  onClose: () => void
+  onEdit: () => void
+  onDelete: () => void
+  onPhotoClick: (photos: JourneyPhoto[], index: number) => void
+}
+
+export default function MobileEntryView({ entry, readOnly, publicPhotoUrl, onClose, onEdit, onDelete, onPhotoClick }: Props) {
+  const photos = entry.photos || []
+  const mood = entry.mood ? MOOD_CONFIG[entry.mood] : null
+  const weather = entry.weather ? WEATHER_CONFIG[entry.weather] : null
+  const prosArr = entry.pros_cons?.pros ?? []
+  const consArr = entry.pros_cons?.cons ?? []
+  const hasProscons = prosArr.length > 0 || consArr.length > 0
+
+  const date = new Date(entry.entry_date + 'T00:00:00')
+  const dateStr = date.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long' })
+
+  return (
+    <div className="fixed inset-0 z-50 bg-white dark:bg-zinc-950 flex flex-col overflow-hidden" style={{ height: '100dvh' }}>
+      {/* Top bar */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-zinc-800 flex-shrink-0">
+        <button
+          onClick={onClose}
+          className="w-9 h-9 rounded-lg flex items-center justify-center text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+        >
+          <X size={20} />
+        </button>
+        {!readOnly && (
+          <div className="flex items-center gap-1.5">
+            <button
+              onClick={() => { onClose(); onEdit(); }}
+              className="h-8 px-3 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-[12px] font-medium flex items-center gap-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
+            >
+              <Pencil size={13} />
+              Edit
+            </button>
+            <button
+              onClick={() => { onClose(); onDelete(); }}
+              className="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20 dark:hover:text-red-400 transition-colors"
+            >
+              <Trash2 size={15} />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain" style={{ WebkitOverflowScrolling: 'touch' }}>
+
+        {/* Hero photo(s) */}
+        {photos.length > 0 && (
+          <div className="relative">
+            <img
+              src={photoUrl(photos[0], 'original', publicPhotoUrl)}
+              alt=""
+              className="w-full max-h-[50vh] object-cover cursor-pointer"
+              onClick={() => onPhotoClick(photos, 0)}
+            />
+            {photos.length > 1 && (
+              <div className="absolute bottom-3 right-3 flex items-center gap-1 bg-black/60 backdrop-blur-sm text-white rounded-full px-2.5 py-1 text-[11px] font-medium">
+                <Camera size={12} />
+                {photos.length} photos
+              </div>
+            )}
+            {/* Photo strip for multiple photos */}
+            {photos.length > 1 && (
+              <div className="flex gap-1 px-4 py-2 overflow-x-auto bg-zinc-50 dark:bg-zinc-900">
+                {photos.map((p, i) => (
+                  <img
+                    key={p.id || i}
+                    src={photoUrl(p, 'thumbnail', publicPhotoUrl)}
+                    alt=""
+                    className="w-16 h-16 rounded-lg object-cover flex-shrink-0 cursor-pointer hover:ring-2 ring-zinc-900/30 dark:ring-white/30 transition-all"
+                    onClick={() => onPhotoClick(photos, i)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="px-5 py-5 pb-32">
+
+          {/* Date + time + location header */}
+          <div className="flex flex-wrap items-center gap-2 mb-3">
+            <span className="text-[12px] font-medium text-zinc-500">{dateStr}</span>
+            {entry.entry_time && (
+              <span className="flex items-center gap-1 text-[12px] text-zinc-400">
+                <Clock size={11} />
+                {entry.entry_time.slice(0, 5)}
+              </span>
+            )}
+          </div>
+
+          {entry.location_name && (
+            <div className="mb-3">
+              <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[12px] font-medium text-zinc-700 dark:text-zinc-300">
+                <MapPin size={12} className="text-zinc-500 dark:text-zinc-400 flex-shrink-0" />
+                {formatLocationName(entry.location_name)}
+              </span>
+            </div>
+          )}
+
+          {/* Title */}
+          {entry.title && (
+            <h1 className="text-[22px] font-bold text-zinc-900 dark:text-white tracking-tight leading-tight mb-4">
+              {entry.title}
+            </h1>
+          )}
+
+          {/* Mood + Weather chips */}
+          {(mood || weather) && (
+            <div className="flex items-center gap-2 mb-4">
+              {mood && (
+                <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold ${mood.bg} ${mood.text}`}>
+                  <mood.icon size={13} />
+                  {mood.label}
+                </span>
+              )}
+              {weather && (
+                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400">
+                  <weather.icon size={13} />
+                  {weather.label}
+                </span>
+              )}
+            </div>
+          )}
+
+          {/* Story */}
+          {entry.story && (
+            <div className="text-[14px] leading-relaxed text-zinc-700 dark:text-zinc-300 mb-5">
+              <JournalBody text={entry.story} />
+            </div>
+          )}
+
+          {/* Tags */}
+          {entry.tags && entry.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-5">
+              {entry.tags.map((tag, i) => (
+                <span key={i} className="text-[11px] font-medium px-2 py-0.5 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* Pros & Cons */}
+          {hasProscons && (
+            <div className="border border-zinc-200 dark:border-zinc-700 rounded-xl overflow-hidden mb-5">
+              {prosArr.length > 0 && (
+                <div className="px-4 py-3">
+                  <div className="flex items-center gap-1.5 text-[11px] font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wide mb-2">
+                    <ThumbsUp size={12} /> Pros
+                  </div>
+                  <ul className="space-y-1">
+                    {prosArr.map((p, i) => (
+                      <li key={i} className="text-[13px] text-zinc-700 dark:text-zinc-300 flex items-start gap-2">
+                        <span className="text-emerald-500 mt-0.5">+</span> {p}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              {prosArr.length > 0 && consArr.length > 0 && (
+                <div className="border-t border-zinc-200 dark:border-zinc-700" />
+              )}
+              {consArr.length > 0 && (
+                <div className="px-4 py-3">
+                  <div className="flex items-center gap-1.5 text-[11px] font-semibold text-red-500 dark:text-red-400 uppercase tracking-wide mb-2">
+                    <ThumbsDown size={12} /> Cons
+                  </div>
+                  <ul className="space-y-1">
+                    {consArr.map((c, i) => (
+                      <li key={i} className="text-[13px] text-zinc-700 dark:text-zinc-300 flex items-start gap-2">
+                        <span className="text-red-500 mt-0.5">−</span> {c}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Journey/MobileMapTimeline.tsx

@@ -0,0 +1,244 @@
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react'
+import { Plus } from 'lucide-react'
+import JourneyMap from './JourneyMap'
+import MobileEntryCard from './MobileEntryCard'
+import type { JourneyMapHandle } from './JourneyMap'
+import type { JourneyEntry } from '../../store/journeyStore'
+import { DAY_COLORS } from './dayColors'
+
+interface MapEntry {
+  id: string
+  lat: number
+  lng: number
+  title?: string | null
+  mood?: string | null
+  entry_date: string
+}
+
+interface Props {
+  entries: JourneyEntry[] | any[]
+  mapEntries: MapEntry[]
+  trail?: { lat: number; lng: number }[]
+  dark?: boolean
+  readOnly?: boolean
+  onEntryClick: (entry: any) => void
+  onAddEntry?: () => void
+  publicPhotoUrl?: (photoId: number) => string
+  carouselBottom?: string
+}
+
+export default function MobileMapTimeline({
+  entries,
+  mapEntries,
+  trail,
+  dark,
+  readOnly,
+  onEntryClick,
+  onAddEntry,
+  publicPhotoUrl,
+  carouselBottom = 'calc(var(--bottom-nav-h, 84px) + 8px)',
+}: Props) {
+  const mapRef = useRef<JourneyMapHandle>(null)
+  const carouselRef = useRef<HTMLDivElement>(null)
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const entryDayMeta = useMemo(() => {
+    const uniqueDates = [...new Set(entries.map((e: any) => e.entry_date).sort())]
+    const counters = new Map<string, number>()
+    return entries.map((e: any) => {
+      const dayIdx = uniqueDates.indexOf(e.entry_date)
+      const dayLabel = (counters.get(e.entry_date) ?? 0) + 1
+      counters.set(e.entry_date, dayLabel)
+      return { dayLabel, dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length] }
+    })
+  }, [entries])
+  const cardRefs = useRef<Map<number, HTMLDivElement>>(new Map())
+  // Sync map focus when carousel scrolls (with guard for uninitialized map)
+  const syncMapToCarousel = useCallback((index: number) => {
+    const entry = entries[index]
+    if (!entry) return
+
+    const mapEntry = mapEntries.find(m => String(m.id) === String(entry.id))
+    if (mapEntry) {
+      try { mapRef.current?.focusMarker(String(mapEntry.id)) } catch {}
+    } else {
+      try { mapRef.current?.highlightMarker(null) } catch {}
+    }
+  }, [entries, mapEntries])
+
+  // Pick the card that's currently closest to the carousel horizontal center.
+  // More stable than IntersectionObserver thresholds when the active card can
+  // drift toward the viewport edge with proximity snapping.
+  const pickNearestCard = useCallback(() => {
+    const el = carouselRef.current
+    if (!el) return
+    const containerCenter = el.getBoundingClientRect().left + el.clientWidth / 2
+    let bestIdx = 0
+    let bestDist = Infinity
+    cardRefs.current.forEach((node, idx) => {
+      const r = node.getBoundingClientRect()
+      const cardCenter = r.left + r.width / 2
+      const d = Math.abs(cardCenter - containerCenter)
+      if (d < bestDist) { bestDist = d; bestIdx = idx }
+    })
+    setActiveIndex(prev => {
+      if (prev !== bestIdx) syncMapToCarousel(bestIdx)
+      return bestIdx
+    })
+  }, [syncMapToCarousel])
+
+  // Defer all state updates until scrolling settles — updating activeIndex
+  // mid-swipe resizes cards (240→320px), causing layout reflow every frame.
+  useEffect(() => {
+    const el = carouselRef.current
+    if (!el || entries.length === 0) return
+    let settleTimer: number | null = null
+    const onScroll = () => {
+      if (settleTimer != null) window.clearTimeout(settleTimer)
+      settleTimer = window.setTimeout(pickNearestCard, 150)
+    }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      el.removeEventListener('scroll', onScroll)
+      if (settleTimer != null) window.clearTimeout(settleTimer)
+    }
+  }, [entries.length, pickNearestCard])
+
+  // Scroll a given card into the horizontal center of the carousel
+  const scrollCardIntoCenter = useCallback((idx: number) => {
+    const card = cardRefs.current.get(idx)
+    card?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+  }, [])
+
+  // Scroll carousel to entry when map marker is clicked
+  const handleMarkerClick = useCallback((id: string) => {
+    const idx = entries.findIndex((e: any) => String(e.id) === id)
+    if (idx === -1) return
+    setActiveIndex(idx)
+    scrollCardIntoCenter(idx)
+  }, [entries, scrollCardIntoCenter])
+
+  // Tap on a card: if it's already active, open the edit view; otherwise
+  // activate + center it first (don't jump straight into the editor).
+  const handleCardTap = useCallback((entry: any, idx: number) => {
+    if (idx === activeIndex) {
+      onEntryClick(entry)
+    } else {
+      setActiveIndex(idx)
+      scrollCardIntoCenter(idx)
+    }
+  }, [activeIndex, onEntryClick, scrollCardIntoCenter])
+
+  // Initial map focus — delay to let Leaflet initialize and fitBounds
+  useEffect(() => {
+    if (entries.length > 0) {
+      const timer = setTimeout(() => syncMapToCarousel(0), 500)
+      return () => clearTimeout(timer)
+    }
+  }, [entries.length])
+
+  const activeEntryId = entries[activeIndex]
+    ? String(entries[activeIndex].id)
+    : null
+
+  if (entries.length === 0) {
+    return (
+      <div
+        className="fixed left-0 right-0 z-10"
+        style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
+      >
+        <JourneyMap
+          ref={mapRef}
+          entries={mapEntries}
+          checkins={[]}
+          trail={trail}
+          height={9999}
+          dark={dark}
+          onMarkerClick={handleMarkerClick}
+          fullScreen
+        />
+        {!readOnly && onAddEntry && (
+          <div className="fixed right-4 z-30" style={{ bottom: 'calc(var(--bottom-nav-h, 84px) + 16px)' }}>
+            <button
+              onClick={onAddEntry}
+              className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform"
+            >
+              <Plus size={20} />
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="fixed left-0 right-0 z-10"
+      style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
+    >
+      {/* Full-screen map */}
+      <JourneyMap
+        ref={mapRef}
+        entries={mapEntries}
+        checkins={[]}
+        trail={trail}
+        height={9999}
+        dark={dark}
+        activeMarkerId={activeEntryId}
+        onMarkerClick={handleMarkerClick}
+        fullScreen
+        paddingBottom={200}
+      />
+
+      {/* Bottom carousel */}
+      <div
+        className="fixed left-0 right-0 z-40"
+        style={{ touchAction: 'pan-x', bottom: carouselBottom }}
+      >
+        <div
+          ref={carouselRef}
+          className="flex gap-3 overflow-x-auto px-4 pb-3 pt-1"
+          style={{
+            scrollSnapType: 'x mandatory',
+            WebkitOverflowScrolling: 'touch',
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+          }}
+        >
+          {entries.map((entry: any, i: number) => (
+            <div
+              key={entry.id}
+              data-idx={i}
+              ref={node => { if (node) cardRefs.current.set(i, node); else cardRefs.current.delete(i); }}
+              style={{ scrollSnapAlign: 'center' }}
+            >
+              <MobileEntryCard
+                entry={entry}
+                dayLabel={entryDayMeta[i]?.dayLabel ?? i + 1}
+                dayColor={entryDayMeta[i]?.dayColor ?? DAY_COLORS[0]}
+                isActive={i === activeIndex}
+                onClick={() => handleCardTap(entry, i)}
+                publicPhotoUrl={publicPhotoUrl}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* FAB: add entry — bottom right, above the timeline carousel */}
+      {!readOnly && onAddEntry && (
+        <div
+          className="fixed right-4 z-30"
+          style={{ bottom: 'calc(var(--bottom-nav-h, 84px) + 168px)' }}
+        >
+          <button
+            onClick={onAddEntry}
+            className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform"
+          >
+            <Plus size={20} />
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Journey/PhotoLightbox.tsx

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

client/src/components/Journey/dayColors.ts

@@ -0,0 +1,32 @@
+export const DAY_COLORS = [
+  '#6366f1', // indigo
+  '#f97316', // orange
+  '#14b8a6', // teal
+  '#ec4899', // pink
+  '#22c55e', // green
+  '#3b82f6', // blue
+  '#a855f7', // purple
+  '#ef4444', // red
+  '#f59e0b', // amber
+  '#06b6d4', // cyan
+  '#84cc16', // lime
+  '#f43f5e', // rose
+  '#8b5cf6', // violet
+  '#10b981', // emerald
+  '#fb923c', // orange-400
+  '#60a5fa', // blue-400
+  '#c084fc', // purple-400
+  '#34d399', // emerald-400
+  '#fbbf24', // amber-400
+  '#e879f9', // fuchsia
+  '#4ade80', // green-400
+  '#f87171', // red-400
+  '#38bdf8', // sky-400
+  '#a3e635', // lime-400
+  '#fb7185', // rose-400
+  '#818cf8', // indigo-400
+  '#2dd4bf', // teal-400
+  '#facc15', // yellow
+  '#c026d3', // fuchsia-600
+  '#0ea5e9', // sky-500
+]

client/src/components/Layout/Navbar.tsx

@@ -34,9 +34,21 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
   const navigate = useNavigate()
   const location = useLocation()
   const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
+  const [scrolled, setScrolled] = useState<boolean>(false)
   const darkMode = settings.dark_mode
   const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
 
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8 || (document.body.scrollTop || 0) > 8)
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    document.body.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      window.removeEventListener('scroll', onScroll)
+      document.body.removeEventListener('scroll', onScroll)
+    }
+  }, [])
+
   // Only show 'global' type addons in the navbar — 'integration' addons have no dedicated page
   const globalAddons = allAddons.filter((a: Addon) => a.type === 'global' && a.enabled)
 
@@ -49,8 +61,26 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
     navigate('/login', { state: { noRedirect: true } })
   }
 
+  // Keep track of the pending theme-transition cleanup so we can cancel it
+  // on unmount. Without this the timer fires after jsdom teardown in unit
+  // tests (document is gone) and triggers an unhandled ReferenceError that
+  // trips vitest's exit code.
+  const themeTransitionTimer = useRef<number | null>(null)
+  useEffect(() => () => {
+    if (themeTransitionTimer.current !== null) {
+      window.clearTimeout(themeTransitionTimer.current)
+      themeTransitionTimer.current = null
+    }
+  }, [])
+
   const toggleDarkMode = () => {
+    document.documentElement.classList.add('trek-theme-transitioning')
     updateSetting('dark_mode', dark ? 'light' : 'dark').catch(() => {})
+    if (themeTransitionTimer.current !== null) window.clearTimeout(themeTransitionTimer.current)
+    themeTransitionTimer.current = window.setTimeout(() => {
+      document.documentElement.classList.remove('trek-theme-transitioning')
+      themeTransitionTimer.current = null
+    }, 360)
   }
 
   const getAddonName = (addon: Addon): string => {
@@ -61,23 +91,29 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
 
   return (
     <nav style={{
-      background: dark ? 'rgba(9,9,11,0.95)' : 'rgba(255,255,255,0.95)',
-      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+      background: dark
+        ? (scrolled ? 'rgba(9,9,11,0.78)' : 'rgba(9,9,11,0.95)')
+        : (scrolled ? 'rgba(255,255,255,0.72)' : 'rgba(255,255,255,0.95)'),
+      backdropFilter: scrolled ? 'blur(28px) saturate(180%)' : 'blur(20px)',
+      WebkitBackdropFilter: scrolled ? 'blur(28px) saturate(180%)' : 'blur(20px)',
       borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.07)'}`,
-      boxShadow: dark ? '0 1px 12px rgba(0,0,0,0.2)' : '0 1px 12px rgba(0,0,0,0.05)',
+      boxShadow: scrolled
+        ? (dark ? '0 4px 24px rgba(0,0,0,0.35)' : '0 4px 24px rgba(0,0,0,0.08)')
+        : (dark ? '0 1px 12px rgba(0,0,0,0.2)' : '0 1px 12px rgba(0,0,0,0.05)'),
       touchAction: 'manipulation',
       paddingTop: 'env(safe-area-inset-top, 0px)',
       height: 'var(--nav-h)',
+      transition: 'background 240ms cubic-bezier(0.23,1,0.32,1), backdrop-filter 240ms cubic-bezier(0.23,1,0.32,1), box-shadow 240ms cubic-bezier(0.23,1,0.32,1)',
     }} className="hidden md:flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
       {/* Left side */}
       <div className="flex items-center gap-3 min-w-0">
         {showBack && (
           <button onClick={onBack}
-            className="p-1.5 rounded-lg transition-colors flex items-center gap-1.5 text-sm flex-shrink-0"
+            className="trek-back-btn p-1.5 rounded-lg transition-colors flex items-center gap-1.5 text-sm flex-shrink-0"
             style={{ color: 'var(--text-muted)' }}
             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeft className="trek-back-icon w-4 h-4" />
             <span className="hidden sm:inline">{t('common.back')}</span>
           </button>
         )}
@@ -161,11 +197,14 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
 
       {/* Dark mode toggle (light ↔ dark, overrides auto) — hidden on mobile */}
       <button onClick={toggleDarkMode} title={dark ? t('nav.lightMode') : t('nav.darkMode')}
-        className="p-2 rounded-lg transition-colors flex-shrink-0 hidden sm:flex"
+        className="p-2 rounded-lg transition-colors flex-shrink-0 hidden sm:flex relative w-8 h-8 items-center justify-center"
         style={{ color: 'var(--text-muted)' }}
         onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
         onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-        {dark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+        <Sun className="w-4 h-4 absolute transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          style={{ opacity: dark ? 1 : 0, transform: dark ? 'rotate(0deg) scale(1)' : 'rotate(-90deg) scale(0.6)' }} />
+        <Moon className="w-4 h-4 absolute transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          style={{ opacity: dark ? 0 : 1, transform: dark ? 'rotate(90deg) scale(0.6)' : 'rotate(0deg) scale(1)' }} />
       </button>
 
       {/* Notification bell — only in trip view on mobile, everywhere on desktop */}
@@ -196,7 +235,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
           {userMenuOpen && ReactDOM.createPortal(
             <>
               <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setUserMenuOpen(false)} />
-              <div className="w-52 rounded-xl shadow-xl border overflow-hidden" style={{ position: 'fixed', top: 'var(--nav-h)', right: 8, zIndex: 9999, background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
+              <div className="trek-menu-enter w-52 rounded-xl shadow-xl border overflow-hidden" style={{ position: 'fixed', top: 'var(--nav-h)', right: 8, zIndex: 9999, background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
                 <div className="px-4 py-3 border-b" style={{ borderColor: 'var(--border-secondary)' }}>
                   <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{user.username}</p>
                   <p className="text-xs truncate" style={{ color: 'var(--text-muted)' }}>{user.email}</p>

client/src/components/Layout/OfflineBanner.tsx

@@ -1,11 +1,15 @@
 /**
- * OfflineBanner — persistent top bar indicating connectivity + sync state.
+ * OfflineBanner — connectivity + sync state indicator.
  *
  * States:
- *   offline + N queued  →  amber bar "Offline — N changes queued"
- *   offline + 0 queued  →  amber bar "Offline"
- *   online  + N pending →  blue bar  "Syncing N changes…"
+ *   offline + N queued  →  amber pill "Offline · N queued"
+ *   offline + 0 queued  →  amber pill "Offline"
+ *   online  + N pending →  blue pill  "Syncing N…"
  *   online  + 0 pending →  hidden
+ *
+ * Rendered as a small floating pill anchored to the bottom-center of the
+ * viewport so it never competes with top navigation or sticky modal
+ * headers. On mobile it hovers just above the bottom tab bar.
  */
 import React, { useState, useEffect } from 'react'
 import { WifiOff, RefreshCw } from 'lucide-react'
@@ -48,9 +52,9 @@ export default function OfflineBanner(): React.ReactElement | null {
 
   const label = offline
     ? pendingCount > 0
-      ? `Offline — ${pendingCount} change${pendingCount !== 1 ? 's' : ''} queued`
+      ? `Offline · ${pendingCount} queued`
       : 'Offline'
-    : `Syncing ${pendingCount} change${pendingCount !== 1 ? 's' : ''}…`
+    : `Syncing ${pendingCount}…`
 
   return (
     <div
@@ -58,27 +62,29 @@ export default function OfflineBanner(): React.ReactElement | null {
       aria-live="polite"
       style={{
         position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
+        // Hover above the mobile bottom nav; on desktop --bottom-nav-h is 0,
+        // so the pill sits 16px from the bottom.
+        bottom: 'calc(var(--bottom-nav-h) + 16px)',
+        left: '50%',
+        transform: 'translateX(-50%)',
         zIndex: 9999,
         background: bg,
         color: text,
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'center',
-        justifyContent: 'center',
-        gap: 8,
-        paddingTop: 'calc(env(safe-area-inset-top, 0px) + 6px)',
-        paddingBottom: '6px',
-        paddingLeft: '16px',
-        paddingRight: '16px',
-        fontSize: 13,
-        fontWeight: 500,
+        gap: 6,
+        padding: '6px 14px',
+        borderRadius: 999,
+        boxShadow: '0 4px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08)',
+        fontSize: 12,
+        fontWeight: 600,
+        whiteSpace: 'nowrap',
+        pointerEvents: 'none',
       }}
     >
       {offline
-        ? <WifiOff size={14} />
-        : <RefreshCw size={14} style={{ animation: 'spin 1s linear infinite' }} />
+        ? <WifiOff size={12} />
+        : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
       }
       {label}
     </div>

client/src/components/Layout/PageSidebar.tsx

@@ -0,0 +1,210 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Menu, X, type LucideIcon } from 'lucide-react'
+
+export interface PageSidebarTab {
+  id: string
+  label: string
+  icon: LucideIcon
+}
+
+interface PageSidebarProps {
+  /** Uppercase label shown above the tab list, e.g. "SETTINGS". */
+  sidebarLabel: string
+  tabs: PageSidebarTab[]
+  activeTab: string
+  onTabChange: (id: string) => void
+  children: React.ReactNode
+  /** Small text at the very bottom of the sidebar (e.g. "v3.0 · self-hosted"). */
+  footer?: React.ReactNode
+}
+
+/**
+ * Left-sidebar + right-panel layout used by the Settings and Admin pages.
+ *
+ * Desktop (>=1024px): sidebar is always visible at 260px; panel fills rest.
+ * Mobile: sidebar collapses behind a hamburger at the top of the panel; tap
+ * the hamburger to slide the sidebar in as an overlay, tap a tab to close.
+ */
+export default function PageSidebar({
+  sidebarLabel,
+  tabs,
+  activeTab,
+  onTabChange,
+  children,
+  footer,
+}: PageSidebarProps): React.ReactElement {
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const activeLabel = tabs.find(t => t.id === activeTab)?.label ?? ''
+
+  // Close the mobile drawer on Escape or on outside click.
+  const drawerRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!mobileOpen) return
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setMobileOpen(false) }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [mobileOpen])
+
+  return (
+    <div
+      className="rounded-2xl overflow-hidden flex flex-col lg:flex-row relative"
+      style={{
+        background: 'var(--bg-card)',
+        border: '1px solid var(--border-primary)',
+        minHeight: 'min(820px, calc(100vh - var(--nav-h) - 120px))',
+      }}
+    >
+      {/* Mobile top bar with hamburger */}
+      <div
+        className="lg:hidden flex items-center justify-between px-4 py-3 border-b"
+        style={{ borderColor: 'var(--border-primary)' }}
+      >
+        <button
+          onClick={() => setMobileOpen(true)}
+          className="w-9 h-9 rounded-lg flex items-center justify-center transition-colors hover:bg-[var(--bg-hover)]"
+          aria-label="Open navigation"
+          style={{ color: 'var(--text-primary)' }}
+        >
+          <Menu size={18} />
+        </button>
+        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>
+          {activeLabel}
+        </div>
+        <div className="w-9" />
+      </div>
+
+      {/* Desktop sidebar (always visible on lg) */}
+      <aside
+        className="hidden lg:flex flex-col shrink-0 relative"
+        style={{
+          width: 260,
+          background: 'var(--bg-secondary)',
+          borderRight: '1px solid var(--border-primary)',
+          padding: '24px 14px',
+        }}
+      >
+        <SidebarInner
+          sidebarLabel={sidebarLabel}
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={onTabChange}
+          footer={footer}
+        />
+      </aside>
+
+      {/* Mobile drawer */}
+      {mobileOpen && (
+        <>
+          <div
+            className="lg:hidden fixed inset-0 z-40"
+            style={{ background: 'rgba(0,0,0,0.35)' }}
+            onClick={() => setMobileOpen(false)}
+          />
+          <aside
+            ref={drawerRef}
+            className="lg:hidden fixed top-0 left-0 bottom-0 z-50 flex flex-col shadow-2xl"
+            style={{
+              width: 280,
+              background: 'var(--bg-secondary)',
+              padding: '18px 14px',
+            }}
+          >
+            <div className="flex items-center justify-between mb-3 px-2">
+              <span
+                className="text-[11px] font-bold tracking-widest uppercase"
+                style={{ color: 'var(--text-muted)' }}
+              >
+                {sidebarLabel}
+              </span>
+              <button
+                onClick={() => setMobileOpen(false)}
+                className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors hover:bg-[var(--bg-hover)]"
+                aria-label="Close navigation"
+                style={{ color: 'var(--text-primary)' }}
+              >
+                <X size={16} />
+              </button>
+            </div>
+            <SidebarInner
+              sidebarLabel={null}
+              tabs={tabs}
+              activeTab={activeTab}
+              onTabChange={(id) => {
+                onTabChange(id)
+                setMobileOpen(false)
+              }}
+              footer={footer}
+            />
+          </aside>
+        </>
+      )}
+
+      {/* Panel */}
+      <div className="flex-1 min-w-0" style={{ padding: '26px 28px' }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function SidebarInner({
+  sidebarLabel,
+  tabs,
+  activeTab,
+  onTabChange,
+  footer,
+}: {
+  sidebarLabel: string | null
+  tabs: PageSidebarTab[]
+  activeTab: string
+  onTabChange: (id: string) => void
+  footer?: React.ReactNode
+}): React.ReactElement {
+  return (
+    <>
+      {sidebarLabel && (
+        <div
+          className="text-[11px] font-bold tracking-widest uppercase mb-3 px-3"
+          style={{ color: 'var(--text-muted)' }}
+        >
+          {sidebarLabel}
+        </div>
+      )}
+      <nav className="flex flex-col gap-1 flex-1">
+        {tabs.map((tab) => {
+          const Icon = tab.icon
+          const active = tab.id === activeTab
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-left transition-colors"
+              style={{
+                background: active ? 'var(--bg-hover)' : 'transparent',
+                color: active ? 'var(--text-primary)' : 'var(--text-secondary)',
+                fontWeight: active ? 600 : 500,
+              }}
+              onMouseEnter={(e) => {
+                if (!active) e.currentTarget.style.background = 'var(--bg-hover)'
+              }}
+              onMouseLeave={(e) => {
+                if (!active) e.currentTarget.style.background = 'transparent'
+              }}
+            >
+              <Icon size={16} className="shrink-0" />
+              <span className="truncate">{tab.label}</span>
+            </button>
+          )
+        })}
+      </nav>
+      {footer && (
+        <div
+          className="mt-4 pt-3 px-3 text-[10px] tracking-wide"
+          style={{ color: 'var(--text-faint)', borderTop: '1px solid var(--border-primary)' }}
+        >
+          {footer}
+        </div>
+      )}
+    </>
+  )
+}

client/src/components/Map/LocationButton.tsx

@@ -0,0 +1,56 @@
+import { Navigation, LocateFixed, Locate } from 'lucide-react'
+import type { TrackingMode } from '../../hooks/useGeolocation'
+
+interface Props {
+  mode: TrackingMode
+  error: string | null
+  onClick: () => void
+  // Offset from the bottom edge — callers push this up above the mobile
+  // bottom nav. Defaults to 20px for desktop.
+  bottomOffset?: number
+}
+
+// Three-state FAB. Matches the Apple/Google Maps pattern:
+//   off    → outline locate icon
+//   show   → filled locate (blue dot is visible on the map)
+//   follow → filled navigation arrow (map follows + rotates with heading)
+export default function LocationButton({ mode, error, onClick, bottomOffset = 20 }: Props) {
+  const Icon = mode === 'follow' ? Navigation : mode === 'show' ? LocateFixed : Locate
+  const isActive = mode !== 'off'
+  const title = error
+    ? error
+    : mode === 'off'
+      ? 'Show my location'
+      : mode === 'show'
+        ? 'Follow my location'
+        : 'Stop following'
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      style={{
+        position: 'absolute',
+        bottom: bottomOffset,
+        right: 12,
+        zIndex: 1000,
+        width: 42,
+        height: 42,
+        borderRadius: '50%',
+        border: 'none',
+        cursor: 'pointer',
+        background: isActive ? '#3b82f6' : 'var(--bg-card, white)',
+        color: isActive ? 'white' : (error ? '#ef4444' : 'var(--text-muted, #6b7280)'),
+        boxShadow: '0 2px 10px rgba(0,0,0,0.25)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background 0.2s, color 0.2s',
+      }}
+    >
+      <Icon size={20} strokeWidth={mode === 'follow' ? 2.5 : 2} />
+    </button>
+  )
+}

client/src/components/Map/MapView.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { render, screen } from '../../../tests/helpers/render'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { resetAllStores } from '../../../tests/helpers/store'
 import { buildPlace } from '../../../tests/helpers/factories'
 import * as photoService from '../../services/photoService'
@@ -16,10 +17,13 @@ vi.mock('react-leaflet', () => ({
       data-lng={position[1]}
       onClick={() => eventHandlers?.click?.()}
     >
+      <button
+        data-testid="marker-hover-trigger"
+        onClick={() => eventHandlers?.mouseover?.({ originalEvent: { clientX: 100, clientY: 100 } })}
+      />
       {children}
     </div>
   ),
-  Tooltip: ({ children }: any) => <div data-testid="tooltip">{children}</div>,
   Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
   CircleMarker: () => <div data-testid="circle-marker" />,
   Circle: () => <div data-testid="circle" />,
@@ -32,6 +36,7 @@ vi.mock('react-leaflet', () => ({
     off: vi.fn(),
     panBy: vi.fn(),
   }),
+  useMapEvents: () => ({}),
 }))
 
 vi.mock('react-leaflet-cluster', () => ({
@@ -100,22 +105,26 @@ describe('MapView', () => {
     expect(onMarkerClick).toHaveBeenCalledWith(42)
   })
 
-  it('FE-COMP-MAPVIEW-004: tooltip shows place name', () => {
+  it('FE-COMP-MAPVIEW-004: tooltip shows place name', async () => {
+    const user = userEvent.setup()
     const places = [buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945 })]
     render(<MapView places={places} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
     expect(screen.getByTestId('tooltip').textContent).toContain('Eiffel Tower')
   })
 
-  it('FE-COMP-MAPVIEW-005: tooltip shows category name when present', () => {
+  it('FE-COMP-MAPVIEW-005: tooltip shows category name when present', async () => {
+    const user = userEvent.setup()
     const places = [
       buildMapPlace({ name: 'Louvre', lat: 48.86, lng: 2.337, category_name: 'Museum', category_icon: null }),
     ]
     render(<MapView places={places} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
     expect(screen.getByTestId('tooltip').textContent).toContain('Museum')
   })
 
   it('FE-COMP-MAPVIEW-006: renders polyline when route has 2+ points', () => {
-    render(<MapView route={[[48.0, 2.0], [49.0, 3.0]]} />)
+    render(<MapView route={[[[48.0, 2.0], [49.0, 3.0]]]} />)
     expect(screen.getByTestId('polyline')).toBeTruthy()
   })
 
@@ -125,7 +134,7 @@ describe('MapView', () => {
   })
 
   it('FE-COMP-MAPVIEW-008: does not render polyline for single-point route', () => {
-    render(<MapView route={[[48.0, 2.0]]} />)
+    render(<MapView route={[[[48.0, 2.0]]]} />)
     expect(screen.queryByTestId('polyline')).toBeNull()
   })
 
@@ -144,7 +153,7 @@ describe('MapView', () => {
   })
 
   it('FE-COMP-MAPVIEW-011: renders RouteLabel marker when routeSegments provided with route', () => {
-    const route = [[48.0, 2.0], [49.0, 3.0]] as [number, number][]
+    const route = [[[48.0, 2.0], [49.0, 3.0]]] as [number, number][][][]
     const routeSegments = [
       { mid: [48.5, 2.5] as [number, number], from: 0, to: 1, walkingText: '10 min', drivingText: '3 min' },
     ]
@@ -190,11 +199,13 @@ describe('MapView', () => {
     vi.mocked(photoService.getCached).mockReturnValue(null)
   })
 
-  it('FE-COMP-MAPVIEW-016: tooltip shows address when present', () => {
+  it('FE-COMP-MAPVIEW-016: tooltip shows address when present', async () => {
+    const user = userEvent.setup()
     const places = [
       buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945, address: '5 Av. Anatole France' }),
     ]
     render(<MapView places={places} />)
+    await user.click(screen.getByTestId('marker-hover-trigger'))
     expect(screen.getByTestId('tooltip').textContent).toContain('5 Av. Anatole France')
   })
 

client/src/components/Map/MapView.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
 import DOM from 'react-dom'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MapContainer, TileLayer, Marker, Tooltip, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
+import ReservationOverlay from './ReservationOverlay'
+import type { Reservation } from '../../types'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -66,9 +68,9 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
     ">${label}</span>`
   }
 
-  // Base64 data URL thumbnails — no external image fetch during zoom
-  // Only use base64 data URLs for markers — external URLs cause zoom lag
-  if (place.image_url && place.image_url.startsWith('data:')) {
+  // Prefer base64 data URLs (no zoom lag); also accept same-origin proxy URLs as a fallback
+  // while the thumb is still being generated in the background
+  if (place.image_url && (place.image_url.startsWith('data:') || place.image_url.startsWith('/api/maps/place-photo/'))) {
     const imgIcon = L.divIcon({
       className: '',
       html: `<div style="
@@ -275,97 +277,110 @@ function RouteLabel({ midpoint, walkingText, drivingText }: RouteLabelProps) {
 
 // Module-level photo cache shared with PlaceAvatar
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
+import { useAuthStore } from '../../store/authStore'
+import { useGeolocation } from '../../hooks/useGeolocation'
+import LocationButton from './LocationButton'
 
-// Live location tracker — blue dot with pulse animation (like Apple/Google Maps)
-function LocationTracker() {
+// Live-location rendering inside the Leaflet map. Subscribes via the
+// shared useGeolocation hook so the Leaflet and Mapbox variants behave
+// identically. Heading is shown as a rotated conic SVG when available.
+import type { GeoPosition, TrackingMode } from '../../hooks/useGeolocation'
+
+function LeafletLocationLayer({ position, mode }: { position: GeoPosition | null; mode: TrackingMode }) {
   const map = useMap()
-  const [position, setPosition] = useState<[number, number] | null>(null)
-  const [accuracy, setAccuracy] = useState(0)
-  const [tracking, setTracking] = useState(false)
-  const watchId = useRef<number | null>(null)
 
-  const startTracking = useCallback(() => {
-    if (!('geolocation' in navigator)) return
-    setTracking(true)
-    watchId.current = navigator.geolocation.watchPosition(
-      (pos) => {
-        const latlng: [number, number] = [pos.coords.latitude, pos.coords.longitude]
-        setPosition(latlng)
-        setAccuracy(pos.coords.accuracy)
-      },
-      () => setTracking(false),
-      { enableHighAccuracy: true, maximumAge: 5000 }
-    )
-  }, [])
-
-  const stopTracking = useCallback(() => {
-    if (watchId.current !== null) navigator.geolocation.clearWatch(watchId.current)
-    watchId.current = null
-    setTracking(false)
-    setPosition(null)
-  }, [])
-
-  const toggleTracking = useCallback(() => {
-    if (tracking) { stopTracking() } else { startTracking() }
-  }, [tracking, startTracking, stopTracking])
-
-  // Center map on position when first acquired
-  const centered = useRef(false)
+  // When the user is in follow mode, keep the map centred on the dot.
+  // setView (no animation) is what Google Maps does during navigation —
+  // it feels responsive and avoids animation jitter at walking speed.
   useEffect(() => {
-    if (position && !centered.current) {
-      map.setView(position, 15)
-      centered.current = true
-    }
-  }, [position, map])
+    if (mode !== 'follow' || !position) return
+    try { map.setView([position.lat, position.lng], Math.max(map.getZoom(), 16), { animate: true, duration: 0.35 }) } catch { /* noop */ }
+  }, [position, mode, map])
 
-  // Cleanup on unmount
-  useEffect(() => () => { if (watchId.current !== null) navigator.geolocation.clearWatch(watchId.current) }, [])
+  // Once, when the user first acquires a fix in "show" mode, pan to it so
+  // they don't have to scroll the map. Subsequent fixes only move the dot.
+  const centeredRef = useRef(false)
+  useEffect(() => {
+    if (mode === 'off') { centeredRef.current = false; return }
+    if (!position || centeredRef.current) return
+    try { map.setView([position.lat, position.lng], Math.max(map.getZoom(), 15)) } catch { /* noop */ }
+    centeredRef.current = true
+  }, [position, mode, map])
+
+  if (!position) return null
+
+  const headingIcon = position.heading === null || Number.isNaN(position.heading) ? null : L.divIcon({
+    className: '',
+    iconSize: [60, 60],
+    iconAnchor: [30, 30],
+    html: `<div style="
+      width:60px;height:60px;
+      transform:rotate(${position.heading}deg);transition:transform 120ms ease-out;
+      background:conic-gradient(from -30deg, rgba(59,130,246,0) 0deg, rgba(59,130,246,0.35) 15deg, rgba(59,130,246,0) 60deg, rgba(59,130,246,0) 360deg);
+      border-radius:50%;
+      -webkit-mask:radial-gradient(circle, transparent 12px, black 13px);
+      mask:radial-gradient(circle, transparent 12px, black 13px);
+      pointer-events:none;
+    "></div>`,
+  })
 
   return (
     <>
-      {/* Location button */}
-      <div style={{
-        position: 'absolute', bottom: 20, right: 10, zIndex: 1000,
-      }}>
-        <button onClick={toggleTracking} style={{
-          width: 36, height: 36, borderRadius: '50%',
-          border: 'none', cursor: 'pointer',
-          background: tracking ? '#3b82f6' : 'var(--bg-card, white)',
-          color: tracking ? 'white' : 'var(--text-muted, #6b7280)',
-          boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          transition: 'background 0.2s, color 0.2s',
-        }}>
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="12" cy="12" r="3" />
-            <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
-          </svg>
-        </button>
-      </div>
-
-      {/* Blue dot + accuracy circle */}
-      {position && (
-        <>
-          {accuracy < 500 && (
-            <Circle center={position} radius={accuracy} pathOptions={{ color: '#3b82f6', fillColor: '#3b82f6', fillOpacity: 0.06, weight: 0.5, opacity: 0.3 }} />
-          )}
-          <CircleMarker center={position} radius={7} pathOptions={{ color: 'white', fillColor: '#3b82f6', fillOpacity: 1, weight: 2.5 }} />
-        </>
+      {position.accuracy < 500 && (
+        <Circle
+          center={[position.lat, position.lng]}
+          radius={position.accuracy}
+          pathOptions={{ color: '#3b82f6', fillColor: '#3b82f6', fillOpacity: 0.12, weight: 1, opacity: 0.35 }}
+          interactive={false}
+        />
       )}
-
-      {/* Pulse animation CSS */}
-      {position && (
-        <style>{`
-          @keyframes location-pulse {
-            0% { transform: scale(1); opacity: 0.6; }
-            100% { transform: scale(2.5); opacity: 0; }
-          }
-        `}</style>
+      {headingIcon && (
+        <Marker
+          position={[position.lat, position.lng]}
+          icon={headingIcon}
+          interactive={false}
+          zIndexOffset={900}
+        />
       )}
+      <CircleMarker
+        center={[position.lat, position.lng]}
+        radius={8}
+        pathOptions={{ color: 'white', fillColor: '#3b82f6', fillOpacity: 1, weight: 3 }}
+        interactive={false}
+      />
     </>
   )
 }
 
+interface MemoMarkerProps {
+  place: any
+  isSelected: boolean
+  orderNumbers: number[] | null
+  photoUrl: string | null
+  onClickPlace: (id: number) => void
+  onHover: (place: any, x: number, y: number) => void
+  onHoverOut: () => void
+}
+
+const MemoMarker = memo(function MemoMarker({
+  place, isSelected, orderNumbers, photoUrl, onClickPlace, onHover, onHoverOut,
+}: MemoMarkerProps) {
+  const icon = createPlaceIcon({ ...place, image_url: photoUrl }, orderNumbers, isSelected)
+  return (
+    <Marker
+      position={[place.lat, place.lng]}
+      icon={icon}
+      eventHandlers={{
+        click: () => onClickPlace(place.id),
+        mouseover: (e: any) => onHover(place, e.originalEvent.clientX, e.originalEvent.clientY),
+        mousemove: (e: any) => onHover(place, e.originalEvent.clientX, e.originalEvent.clientY),
+        mouseout: onHoverOut,
+      }}
+      zIndexOffset={isSelected ? 1000 : 0}
+    />
+  )
+})
+
 export const MapView = memo(function MapView({
   places = [],
   dayPlaces = [],
@@ -384,7 +399,16 @@ export const MapView = memo(function MapView({
   rightWidth = 0,
   hasInspector = false,
   hasDayDetail = false,
-}) {
+  reservations = [] as Reservation[],
+  showReservationStats = false,
+  visibleConnectionIds = [] as number[],
+  onReservationClick,
+}: any) {
+  const visibleReservations = useMemo(() => {
+    if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
+    const set = new Set(visibleConnectionIds)
+    return reservations.filter((r: Reservation) => set.has(r.id))
+  }, [reservations, visibleConnectionIds])
   // Dynamic padding: account for sidebars + bottom inspector + day detail panel
   const paddingOpts = useMemo(() => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
@@ -396,22 +420,51 @@ export const MapView = memo(function MapView({
     return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
   }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
+  // Hover state for the single tooltip overlay (replaces per-marker <Tooltip>)
+  const [hoveredPlace, setHoveredPlace] = useState<any>(null)
+  const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null)
+
+  const handleMarkerHover = useCallback((place: any, x: number, y: number) => {
+    setHoveredPlace(place)
+    setTooltipPos({ x, y })
+  }, [])
+
+  const handleMarkerHoverOut = useCallback(() => {
+    setHoveredPlace(null)
+  }, [])
+
+  const handleMarkerClick = useCallback((id: number) => {
+    onMarkerClick?.(id)
+  }, [onMarkerClick])
+
   // photoUrls: only base64 thumbs for smooth map zoom
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
+  const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
+  // Batch photo state updates through a RAF so N simultaneous photo loads
+  // collapse into a single re-render instead of N separate renders.
+  const pendingThumbsRef = useRef<Record<string, string>>({})
+  const thumbRafRef = useRef<number | null>(null)
 
-  // Fetch photos via shared service — subscribe to thumb (base64) availability
   const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
   useEffect(() => {
-    if (!places || places.length === 0) return
+    if (!places || places.length === 0 || !placesPhotosEnabled) return
     const cleanups: (() => void)[] = []
 
     const setThumb = (cacheKey: string, thumb: string) => {
-      iconCache.clear()
-      setPhotoUrls(prev => prev[cacheKey] === thumb ? prev : { ...prev, [cacheKey]: thumb })
+      pendingThumbsRef.current[cacheKey] = thumb
+      if (thumbRafRef.current !== null) return
+      thumbRafRef.current = requestAnimationFrame(() => {
+        thumbRafRef.current = null
+        const pending = pendingThumbsRef.current
+        pendingThumbsRef.current = {}
+        setPhotoUrls(prev => {
+          const hasChange = Object.entries(pending).some(([k, v]) => prev[k] !== v)
+          return hasChange ? { ...prev, ...pending } : prev
+        })
+      })
     }
 
     for (const place of places) {
-      if (place.image_url && place.image_url.startsWith('data:')) continue
       const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
       if (!cacheKey) continue
 
@@ -421,20 +474,28 @@ export const MapView = memo(function MapView({
         continue
       }
 
-      // Subscribe for when thumb becomes available
       cleanups.push(onThumbReady(cacheKey, thumb => setThumb(cacheKey, thumb)))
 
-      // Always fetch through API — returns fresh URL + converts to base64
       if (!cached && !isLoading(cacheKey)) {
-        const photoId = place.google_place_id || place.osm_id
+        const photoId =
+          (place.image_url?.startsWith('/api/maps/place-photo/') ? place.image_url : null)
+          || place.google_place_id
+          || place.osm_id
+          || place.image_url
         if (photoId || (place.lat && place.lng)) {
           fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
         }
       }
     }
 
-    return () => cleanups.forEach(fn => fn())
-  }, [placeIds])
+    return () => {
+      cleanups.forEach(fn => fn())
+      if (thumbRafRef.current !== null) {
+        cancelAnimationFrame(thumbRafRef.current)
+        thumbRafRef.current = null
+      }
+    }
+  }, [placeIds, placesPhotosEnabled])
 
   const clusterIconCreateFunction = useCallback((cluster) => {
     const count = cluster.getChildCount()
@@ -446,57 +507,56 @@ export const MapView = memo(function MapView({
     })
   }, [])
 
-  const isTouchDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
+  const isTouchDevice = typeof window !== 'undefined' && navigator.maxTouchPoints > 0
 
   const markers = useMemo(() => places.map((place) => {
     const isSelected = place.id === selectedPlaceId
     const pck = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
-    const resolvedPhoto = (pck && photoUrls[pck]) || (place.image_url?.startsWith('data:') ? place.image_url : null) || null
+    const photoUrl = (pck && photoUrls[pck]) || place.image_url || null
     const orderNumbers = dayOrderMap[place.id] ?? null
-    const icon = createPlaceIcon({ ...place, image_url: resolvedPhoto }, orderNumbers, isSelected)
-
     return (
-      <Marker
+      <MemoMarker
         key={place.id}
-        position={[place.lat, place.lng]}
-        icon={icon}
-        eventHandlers={{
-          click: () => onMarkerClick && onMarkerClick(place.id),
-        }}
-        zIndexOffset={isSelected ? 1000 : 0}
-      >
-        <Tooltip
-          direction="right"
-          offset={[0, 0]}
-          opacity={1}
-          className="map-tooltip"
-          permanent={isTouchDevice && isSelected}
-        >
-          <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-            <div style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>
-              {place.name}
-            </div>
-            {place.category_name && (() => {
-              const CatIcon = getCategoryIcon(place.category_icon)
-              return (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
-                  <CatIcon size={10} style={{ color: place.category_color || 'var(--text-muted)', flexShrink: 0 }} />
-                  <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{place.category_name}</span>
-                </div>
-              )
-            })()}
-            {place.address && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2, maxWidth: 180, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                {place.address}
-              </div>
-            )}
-          </div>
-        </Tooltip>
-      </Marker>
+        place={place}
+        isSelected={isSelected}
+        orderNumbers={orderNumbers}
+        photoUrl={photoUrl}
+        onClickPlace={handleMarkerClick}
+        onHover={handleMarkerHover}
+        onHoverOut={handleMarkerHoverOut}
+      />
     )
-  }), [places, selectedPlaceId, dayOrderMap, photoUrls, onMarkerClick, isTouchDevice])
+  }), [places, selectedPlaceId, dayOrderMap, photoUrls, handleMarkerClick, handleMarkerHover, handleMarkerHoverOut])
+
+  const gpxPolylines = useMemo(() => places.flatMap(place => {
+    if (!place.route_geometry) return []
+    try {
+      const coords = JSON.parse(place.route_geometry) as [number, number][]
+      if (!coords || coords.length < 2) return []
+      return [(
+        <Polyline
+          key={`gpx-${place.id}`}
+          positions={coords}
+          color={place.category_color || '#3b82f6'}
+          weight={3.5}
+          opacity={0.75}
+        />
+      )]
+    } catch { return [] }
+  }), [places])
+
+  const TooltipOverlay = hoveredPlace && tooltipPos && !isTouchDevice
+  const CatIcon = TooltipOverlay ? getCategoryIcon(hoveredPlace.category_icon) : null
+
+  const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode } = useGeolocation()
+  // Desktop browsers only get IP-based geolocation (city-level accuracy),
+  // so the button would be misleading. Mobile, where real GPS lives, keeps it.
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+  const locationButtonBottom = 'calc(var(--bottom-nav-h, 84px) + 12px)'
 
   return (
+    <>
+    <div className="w-full h-full relative">
     <MapContainer
       id="trek-map"
       center={center}
@@ -520,7 +580,7 @@ export const MapView = memo(function MapView({
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
-      <LocationTracker />
+      <LeafletLocationLayer position={userPosition} mode={trackingMode} />
 
       <MarkerClusterGroup
         chunkedLoading
@@ -537,15 +597,18 @@ export const MapView = memo(function MapView({
         {markers}
       </MarkerClusterGroup>
 
-      {route && route.length > 1 && (
+      {route && route.length > 0 && (
         <>
-          <Polyline
-            positions={route}
-            color="#111827"
-            weight={3}
-            opacity={0.9}
-            dashArray="6, 5"
-          />
+          {route.map((seg, i) => seg.length > 1 && (
+            <Polyline
+              key={i}
+              positions={seg}
+              color="#111827"
+              weight={3}
+              opacity={0.9}
+              dashArray="6, 5"
+            />
+          ))}
           {routeSegments.map((seg, i) => (
             <RouteLabel key={i} midpoint={seg.mid} from={seg.from} to={seg.to} walkingText={seg.walkingText} drivingText={seg.drivingText} />
           ))}
@@ -553,22 +616,54 @@ export const MapView = memo(function MapView({
       )}
 
       {/* GPX imported route geometries */}
-      {places.map((place) => {
-        if (!place.route_geometry) return null
-        try {
-          const coords = JSON.parse(place.route_geometry) as [number, number][]
-          if (!coords || coords.length < 2) return null
-          return (
-            <Polyline
-              key={`gpx-${place.id}`}
-              positions={coords}
-              color={place.category_color || '#3b82f6'}
-              weight={3.5}
-              opacity={0.75}
-            />
-          )
-        } catch { return null }
-      })}
+      {gpxPolylines}
+
+      <ReservationOverlay
+        reservations={visibleReservations}
+        showConnections
+        showStats={showReservationStats}
+        onEndpointClick={onReservationClick}
+      />
     </MapContainer>
+    {isMobile && <LocationButton
+      mode={trackingMode}
+      error={trackingError}
+      onClick={cycleTrackingMode}
+      bottomOffset={locationButtonBottom as unknown as number}
+    />}
+    </div>
+
+    {TooltipOverlay && (
+      <div data-testid="tooltip" style={{
+        position: 'fixed',
+        left: tooltipPos.x + 14,
+        top: tooltipPos.y - 10,
+        zIndex: 9999,
+        pointerEvents: 'none',
+        background: 'white',
+        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",
+        maxWidth: 220,
+        whiteSpace: 'nowrap',
+      }}>
+        <div style={{ fontWeight: 600, fontSize: 12, color: '#111827', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {hoveredPlace.name}
+        </div>
+        {hoveredPlace.category_name && CatIcon && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
+            <CatIcon size={10} style={{ color: hoveredPlace.category_color || '#6b7280', flexShrink: 0 }} />
+            <span style={{ fontSize: 11, color: '#6b7280' }}>{hoveredPlace.category_name}</span>
+          </div>
+        )}
+        {hoveredPlace.address && (
+          <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {hoveredPlace.address}
+          </div>
+        )}
+      </div>
+    )}
+    </>
   )
 })

client/src/components/Map/MapViewAuto.tsx

@@ -0,0 +1,16 @@
+import { useSettingsStore } from '../../store/settingsStore'
+import { MapView } from './MapView'
+import { MapViewGL } from './MapViewGL'
+
+// Auto-selects the map renderer based on user settings. Keeps the existing
+// Leaflet MapView untouched so the Mapbox GL variant can mature iteratively
+// behind a toggle. Atlas is not affected — it imports Leaflet directly.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function MapViewAuto(props: any) {
+  const provider = useSettingsStore(s => s.settings.map_provider)
+  const token = useSettingsStore(s => s.settings.mapbox_access_token)
+  // Fall back to Leaflet when Mapbox is selected but no token is set,
+  // so trip planner never shows an empty map due to a missing token.
+  if (provider === 'mapbox-gl' && token) return <MapViewGL {...props} />
+  return <MapView {...props} />
+}

client/src/components/Map/MapViewGL.tsx

@@ -0,0 +1,622 @@
+import { useEffect, useRef, useMemo, useState, createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import mapboxgl from 'mapbox-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useAuthStore } from '../../store/authStore'
+import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
+import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
+import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from './mapboxSetup'
+import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
+import { ReservationMapboxOverlay } from './reservationsMapbox'
+import LocationButton from './LocationButton'
+import { useGeolocation } from '../../hooks/useGeolocation'
+import type { Place, Reservation } from '../../types'
+
+function categoryIconSvg(iconName: string | null | undefined, size: number): string {
+  const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
+  try {
+    return renderToStaticMarkup(createElement(IconComponent, { size, color: 'white', strokeWidth: 2.5 }))
+  } catch { return '' }
+}
+
+interface RouteSegment {
+  mid: [number, number]
+  from: [number, number]
+  to: [number, number]
+  walkingText?: string
+  drivingText?: string
+}
+
+interface Props {
+  places: Place[]
+  dayPlaces?: Place[]
+  route?: [number, number][][] | null
+  routeSegments?: RouteSegment[]
+  selectedPlaceId?: number | null
+  onMarkerClick?: (id: number) => void
+  onMapClick?: (info: { latlng: { lat: number; lng: number } }) => void
+  onMapContextMenu?: ((e: { latlng: { lat: number; lng: number }; originalEvent: MouseEvent }) => void) | null
+  center?: [number, number]
+  zoom?: number
+  fitKey?: number | null
+  dayOrderMap?: Record<number, number[] | null>
+  leftWidth?: number
+  rightWidth?: number
+  hasInspector?: boolean
+  hasDayDetail?: boolean
+  reservations?: Reservation[]
+  visibleConnectionIds?: number[]
+  showReservationStats?: boolean
+  onReservationClick?: (reservationId: number) => void
+}
+
+function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
+  const size = selected ? 44 : 36
+  const borderColor = selected ? '#111827' : 'white'
+  const borderWidth = selected ? 3 : 2.5
+  const shadow = selected
+    ? '0 0 0 3px rgba(17,24,39,0.25), 0 4px 14px rgba(0,0,0,0.3)'
+    : '0 2px 8px rgba(0,0,0,0.22)'
+  const bgColor = place.category_color || '#6b7280'
+
+  // The visual circle is `size` + 2*border on each side. To make the
+  // mapbox `anchor: 'center'` land on the real visual middle of the marker
+  // (rather than just the inner content box), the wrapper has to be the
+  // full outer size. If we gave the wrapper only `size`, the border would
+  // bleed outside it and the route lines would appear slightly off.
+  const outer = size + borderWidth * 2
+
+  let badgeHtml = ''
+  if (orderNumbers && orderNumbers.length > 0) {
+    const label = orderNumbers.join(' · ')
+    badgeHtml = `<span style="
+      position:absolute;bottom:-2px;right:-2px;
+      min-width:18px;height:${orderNumbers.length > 1 ? 16 : 18}px;border-radius:${orderNumbers.length > 1 ? 8 : 9}px;
+      padding:0 ${orderNumbers.length > 1 ? 4 : 3}px;
+      background:rgba(255,255,255,0.94);
+      border:1.5px solid rgba(0,0,0,0.15);
+      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;
+      box-sizing:border-box;white-space:nowrap;
+    ">${label}</span>`
+  }
+
+  const wrap = document.createElement('div')
+  // Do NOT set `position: relative` here — mapbox-gl ships
+  // `.mapboxgl-marker { position: absolute }` and relies on it. An inline
+  // `position: relative` here overrides the class, turns every marker into
+  // a static block element, and stacks them in document order inside the
+  // canvas container. The result looks exactly like "markers drift as the
+  // map zooms" because each marker's transform is then applied relative
+  // to its stacked slot, not to the map viewport.
+  wrap.style.cssText = `width:${outer}px;height:${outer}px;cursor:pointer;`
+
+  const hasPhoto = photoUrl && (photoUrl.startsWith('data:') || photoUrl.startsWith('/api/maps/place-photo/'))
+  if (hasPhoto) {
+    wrap.innerHTML = `
+      <div style="
+        position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
+        width:${size}px;height:${size}px;border-radius:50%;
+        border:${borderWidth}px solid ${borderColor};
+        box-shadow:${shadow};
+        overflow:hidden;background:${bgColor};
+        box-sizing:content-box;
+      ">
+        <img src="${photoUrl}" width="${size}" height="${size}" style="display:block;border-radius:50%;object-fit:cover;" />
+      </div>
+      ${badgeHtml}
+    `
+  } else {
+    wrap.innerHTML = `
+      <div style="
+        position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
+        width:${size}px;height:${size}px;border-radius:50%;
+        border:${borderWidth}px solid ${borderColor};
+        box-shadow:${shadow};
+        background:${bgColor};
+        display:flex;align-items:center;justify-content:center;
+        box-sizing:content-box;
+      ">
+        ${categoryIconSvg(place.category_icon, selected ? 18 : 15)}
+      </div>
+      ${badgeHtml}
+    `
+  }
+  return wrap
+}
+
+export function MapViewGL({
+  places = [],
+  dayPlaces = [],
+  route = null,
+  selectedPlaceId = null,
+  onMarkerClick,
+  onMapClick,
+  onMapContextMenu = null,
+  center = [48.8566, 2.3522],
+  zoom = 10,
+  fitKey = 0,
+  dayOrderMap = {},
+  leftWidth = 0,
+  rightWidth = 0,
+  hasInspector = false,
+  hasDayDetail = false,
+  reservations = [],
+  visibleConnectionIds = [],
+  showReservationStats = false,
+  onReservationClick,
+}: Props) {
+  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
+  const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
+  const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
+  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
+  const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
+  const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
+  const [mapReady, setMapReady] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<mapboxgl.Map | null>(null)
+  const markersRef = useRef<Map<number, mapboxgl.Marker>>(new Map())
+  const locationMarkerRef = useRef<LocationMarkerHandle | null>(null)
+  const reservationOverlayRef = useRef<ReservationMapboxOverlay | null>(null)
+  // Refs so the reservation overlay always sees the latest callback /
+  // options without forcing a full overlay rebuild on every prop change.
+  const onReservationClickRef = useRef(onReservationClick)
+  onReservationClickRef.current = onReservationClick
+  const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode, setMode: setTrackingMode } = useGeolocation()
+  const onClickRefs = useRef({ marker: onMarkerClick, map: onMapClick, context: onMapContextMenu })
+  onClickRefs.current.marker = onMarkerClick
+  onClickRefs.current.map = onMapClick
+  onClickRefs.current.context = onMapContextMenu
+
+  // Build/rebuild the map on style/token/3d change
+  useEffect(() => {
+    if (!containerRef.current || !mapboxToken) return
+    mapboxgl.accessToken = mapboxToken
+
+    const map = new mapboxgl.Map({
+      container: containerRef.current,
+      style: mapboxStyle,
+      center: [center[1], center[0]],
+      zoom,
+      pitch: mapbox3d ? 45 : 0,
+      attributionControl: true,
+      antialias: mapboxQuality,
+      projection: mapboxQuality ? 'globe' : 'mercator',
+    })
+    mapRef.current = map
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(window as any).__trek_map = map
+
+    map.on('load', () => {
+      if (mapbox3d) {
+        // Terrain is only valuable on satellite styles — on clean vector
+        // styles it makes route lines drift off the HTML markers because
+        // the lines snap to DEM height while markers stay at sea level.
+        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(mapboxStyle)) {
+          const dark = document.documentElement.classList.contains('dark')
+          addCustom3dBuildings(map, dark)
+        }
+      }
+
+      // Mapbox Standard ships its own DEM-based terrain that kicks in
+      // below zoom 13.7. HTML markers project at sea level, so when the
+      // terrain exaggeration ramps up at lower zooms the markers drift
+      // away from the 3D buildings and route lines they belong to. The
+      // non-satellite Standard style still looks great without terrain,
+      // so flatten it out to keep markers pinned. (Satellite variants
+      // are left alone — the DEM is what gives them their character.)
+      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
+        try { map.setTerrain(null) } catch { /* noop */ }
+      }
+      // initial route source — kept around so updates can setData() cheaply
+      if (!map.getSource('trip-route')) {
+        map.addSource('trip-route', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
+        map.addLayer({
+          id: 'trip-route-line',
+          type: 'line',
+          source: 'trip-route',
+          paint: {
+            'line-color': '#111827',
+            'line-width': 3,
+            'line-opacity': 0.9,
+            'line-dasharray': [2, 1.5],
+          },
+          layout: { 'line-cap': 'round', 'line-join': 'round' },
+        })
+      }
+      // gpx geometries source (place.route_geometry)
+      if (!map.getSource('trip-gpx')) {
+        map.addSource('trip-gpx', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
+        map.addLayer({
+          id: 'trip-gpx-line',
+          type: 'line',
+          source: 'trip-gpx',
+          paint: {
+            'line-color': ['coalesce', ['get', 'color'], '#3b82f6'],
+            'line-width': 3.5,
+            'line-opacity': 0.75,
+          },
+          layout: { 'line-cap': 'round', 'line-join': 'round' },
+        })
+      }
+      // Signal that sources/layers are attached so overlay effects can
+      // safely add their own sources. Style rebuilds reset this via the
+      // cleanup below.
+      setMapReady(true)
+    })
+
+    map.on('click', (e) => {
+      const t = e.originalEvent.target as HTMLElement
+      if (t.closest('.mapboxgl-marker')) return // markers handle their own click
+      onClickRefs.current.map?.({ latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng } })
+    })
+    // In the mapbox-gl map the right mouse button is reserved for the
+    // built-in rotate/pitch gesture, so we bind the "add place" action
+    // to the middle mouse button (button === 1) instead.
+    const canvas = map.getCanvasContainer()
+    const onAuxDown = (ev: MouseEvent) => {
+      if (ev.button !== 1) return
+      ev.preventDefault()
+      const rect = canvas.getBoundingClientRect()
+      const lngLat = map.unproject([ev.clientX - rect.left, ev.clientY - rect.top])
+      onClickRefs.current.context?.({
+        latlng: { lat: lngLat.lat, lng: lngLat.lng },
+        originalEvent: ev,
+      })
+    }
+    // Also suppress the browser's native auxclick menu on middle-click.
+    const onAuxClick = (ev: MouseEvent) => {
+      if (ev.button === 1) ev.preventDefault()
+    }
+    canvas.addEventListener('mousedown', onAuxDown)
+    canvas.addEventListener('auxclick', onAuxClick)
+
+    // Drop follow mode if the user pans the map manually — matches the
+    // Apple Maps behaviour where the blue dot stays but the map no longer
+    // chases it until the user taps the button again.
+    map.on('dragstart', () => {
+      setTrackingMode(prev => prev === 'follow' ? 'show' : prev)
+    })
+
+    // Keep HTML markers glued to the terrain / 3D ground. Mapbox projects
+    // HTML markers at altitude=0 (sea level) by default, so as soon as the
+    // style has a terrain DEM (Standard, Standard Satellite, custom terrain)
+    // the markers drift off the places when the camera pitches or zooms —
+    // the buildings rise from DEM height, the marker stays at sea level,
+    // and the pixel offset grows as the perspective changes.
+    //
+    // Pushing `[lng, lat, elevation]` through setLngLat tells mapbox to
+    // project the marker onto the same ground the route line sits on.
+    // We re-apply this every render because DEM tiles stream in async.
+    let lastAltUpdate = 0
+    const syncMarkerAltitudes = () => {
+      const now = performance.now()
+      if (now - lastAltUpdate < 80) return // ~12Hz is plenty
+      lastAltUpdate = now
+      markersRef.current.forEach(marker => {
+        const ll = marker.getLngLat()
+        let alt = 0
+        try {
+          const e = map.queryTerrainElevation([ll.lng, ll.lat])
+          if (typeof e === 'number' && Number.isFinite(e)) alt = e
+        } catch { /* terrain not ready */ }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const curAlt = (ll as any).alt ?? 0
+        if (Math.abs(curAlt - alt) > 0.25) {
+          marker.setLngLat([ll.lng, ll.lat, alt])
+        }
+      })
+    }
+    map.on('render', syncMarkerAltitudes)
+
+    return () => {
+      canvas.removeEventListener('mousedown', onAuxDown)
+      canvas.removeEventListener('auxclick', onAuxClick)
+      markersRef.current.forEach(m => m.remove())
+      markersRef.current.clear()
+      if (reservationOverlayRef.current) {
+        reservationOverlayRef.current.destroy()
+        reservationOverlayRef.current = null
+      }
+      if (locationMarkerRef.current) {
+        locationMarkerRef.current.destroy()
+        locationMarkerRef.current = null
+      }
+      try { map.remove() } catch { /* noop */ }
+      mapRef.current = null
+      setMapReady(false)
+    }
+  }, [mapboxStyle, mapboxToken, mapbox3d]) // rebuild on style changes only
+
+  // Photo loading — mirrors the Leaflet MapView. Updates via RAF to batch
+  // simultaneous thumb arrivals into one re-render.
+  const pendingThumbsRef = useRef<Record<string, string>>({})
+  const thumbRafRef = useRef<number | null>(null)
+  const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
+  useEffect(() => {
+    if (!places || places.length === 0 || !placesPhotosEnabled) return
+    const cleanups: (() => void)[] = []
+
+    const setThumb = (cacheKey: string, thumb: string) => {
+      pendingThumbsRef.current[cacheKey] = thumb
+      if (thumbRafRef.current !== null) return
+      thumbRafRef.current = requestAnimationFrame(() => {
+        thumbRafRef.current = null
+        const pending = pendingThumbsRef.current
+        pendingThumbsRef.current = {}
+        setPhotoUrls(prev => {
+          const hasChange = Object.entries(pending).some(([k, v]) => prev[k] !== v)
+          return hasChange ? { ...prev, ...pending } : prev
+        })
+      })
+    }
+
+    for (const place of places) {
+      const cacheKey = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
+      if (!cacheKey) continue
+      const cached = getCached(cacheKey)
+      if (cached?.thumbDataUrl) {
+        setThumb(cacheKey, cached.thumbDataUrl)
+        continue
+      }
+      cleanups.push(onThumbReady(cacheKey, thumb => setThumb(cacheKey, thumb)))
+      if (!cached && !isLoading(cacheKey)) {
+        const photoId =
+          (place.image_url?.startsWith('/api/maps/place-photo/') ? place.image_url : null)
+          || place.google_place_id
+          || place.osm_id
+          || place.image_url
+        if (photoId || (place.lat && place.lng)) {
+          fetchPhoto(cacheKey, photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
+        }
+      }
+    }
+
+    return () => {
+      cleanups.forEach(fn => fn())
+      if (thumbRafRef.current !== null) {
+        cancelAnimationFrame(thumbRafRef.current)
+        thumbRafRef.current = null
+      }
+    }
+  }, [placeIds, placesPhotosEnabled]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Reconcile markers with places + photos. Rebuilds the DOM node when any
+  // visual input changes so photos, selection state and order badges stay
+  // in sync.
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    const ids = new Set(places.map(p => p.id))
+
+    markersRef.current.forEach((marker, id) => {
+      if (!ids.has(id)) {
+        marker.remove()
+        markersRef.current.delete(id)
+      }
+    })
+
+    places.forEach(place => {
+      if (!place.lat || !place.lng) return
+      const orderNumbers = dayOrderMap[place.id] ?? null
+      const pck = place.google_place_id || place.osm_id || `${place.lat},${place.lng}`
+      const photoUrl = (pck && photoUrls[pck]) || place.image_url || null
+      const selected = place.id === selectedPlaceId
+      const el = createMarkerElement(place as Place & { category_color?: string; category_icon?: string }, photoUrl, orderNumbers, selected)
+      el.addEventListener('click', (ev) => {
+        ev.stopPropagation()
+        onClickRefs.current.marker?.(place.id)
+      })
+      // Recreate marker each time rather than patching internal state —
+      // mapbox-gl's internal _element bookkeeping breaks under DOM swaps.
+      const existing = markersRef.current.get(place.id)
+      if (existing) existing.remove()
+      // Default (viewport-aligned) anchors keep the marker parallel to the
+      // screen so its pixel centre lines up with the route line at any
+      // pitch. Tried `pitchAlignment: 'map'` to snap markers onto terrain,
+      // but it rotates the element by the pitch angle and visually offsets
+      // the anchor by ~100px at 45° tilt, which caused the observed drift.
+      const m = new mapboxgl.Marker({ element: el, anchor: 'center' })
+        .setLngLat([place.lng, place.lat])
+        .addTo(map)
+      markersRef.current.set(place.id, m)
+    })
+  }, [places, selectedPlaceId, dayOrderMap, photoUrls])
+
+  // Update route geojson
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    const src = map.getSource('trip-route') as mapboxgl.GeoJSONSource | undefined
+    if (!src) return
+    const features = (route || []).filter(seg => seg && seg.length > 1).map(seg => ({
+      type: 'Feature' as const,
+      properties: {},
+      geometry: { type: 'LineString' as const, coordinates: seg.map(([lat, lng]) => [lng, lat]) },
+    }))
+    src.setData({ type: 'FeatureCollection', features })
+  }, [route])
+
+  // Update GPX geometries
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    const src = map.getSource('trip-gpx') as mapboxgl.GeoJSONSource | undefined
+    if (!src) return
+    const features = places.flatMap(place => {
+      if (!place.route_geometry) return []
+      try {
+        const coords = JSON.parse(place.route_geometry) as [number, number][]
+        if (!coords || coords.length < 2) return []
+        return [{
+          type: 'Feature' as const,
+          properties: { color: (place as Place & { category_color?: string }).category_color || '#3b82f6' },
+          geometry: { type: 'LineString' as const, coordinates: coords.map(([lat, lng]) => [lng, lat]) },
+        }]
+      } catch { return [] }
+    })
+    src.setData({ type: 'FeatureCollection', features })
+  }, [places])
+
+  // Reservation overlay — mirrors the Leaflet ReservationOverlay: great-
+  // circle arcs for flights/cruises, straight lines for trains/cars,
+  // clickable endpoint badges, rotating mid-arc stats label for flights.
+  // The overlay is a small imperative manager that owns its own source,
+  // layer, and HTML markers; it lives next to the map for the map's
+  // lifetime and is rebuilt when the style/token/3d effect rebuilds.
+  //
+  // `visibleConnectionIds` is driven by the per-reservation toggle in
+  // DayPlanSidebar — nothing is rendered until the user enables a
+  // booking's route, matching the Leaflet MapView's behaviour.
+  const visibleReservations = useMemo(() => {
+    if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
+    const set = new Set(visibleConnectionIds)
+    return reservations.filter(r => set.has(r.id))
+  }, [reservations, visibleConnectionIds])
+
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !mapReady) return
+    if (!reservationOverlayRef.current) {
+      reservationOverlayRef.current = new ReservationMapboxOverlay(map, {
+        showConnections: true,
+        showStats: showReservationStats,
+        showEndpointLabels,
+        onEndpointClick: (id) => onReservationClickRef.current?.(id),
+      })
+    }
+    reservationOverlayRef.current.update(visibleReservations, {
+      showConnections: true,
+      showStats: showReservationStats,
+      showEndpointLabels,
+      onEndpointClick: (id) => onReservationClickRef.current?.(id),
+    })
+  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady])
+
+  // Fit bounds on fitKey change — matches the Leaflet BoundsController
+  const paddingOpts = useMemo(() => {
+    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+    if (isMobile) return { top: 40, right: 20, bottom: 40, left: 20 }
+    const top = 60
+    const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
+    return { top, right: rightWidth + 40, bottom, left: leftWidth + 40 }
+  }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
+
+  // Also fit when the places collection changes so the initial render
+  // zooms to the trip instead of the default center.
+  const placeBoundsKey = useMemo(
+    () => places.filter(p => p.lat && p.lng).map(p => `${p.id}:${p.lat}:${p.lng}`).join('|'),
+    [places]
+  )
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    const target = dayPlaces.length > 0 ? dayPlaces : places
+    const valid = target.filter(p => p.lat && p.lng)
+    if (valid.length === 0) return
+    const bounds = new mapboxgl.LngLatBounds()
+    valid.forEach(p => bounds.extend([p.lng, p.lat]))
+    const run = () => {
+      try {
+        map.fitBounds(bounds, {
+          padding: paddingOpts,
+          maxZoom: 15,
+          pitch: mapbox3d ? 45 : 0,
+          duration: 400,
+        })
+      } catch { /* noop */ }
+    }
+    if (map.loaded()) run()
+    else map.once('load', run)
+  }, [fitKey, placeBoundsKey, paddingOpts, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // flyTo selected place
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !selectedPlaceId) return
+    const target = places.find(p => p.id === selectedPlaceId) || dayPlaces.find(p => p.id === selectedPlaceId)
+    if (!target?.lat || !target?.lng) return
+    try {
+      map.flyTo({
+        center: [target.lng, target.lat],
+        zoom: Math.max(map.getZoom(), 14),
+        pitch: mapbox3d ? 45 : 0,
+        duration: 400,
+      })
+    } catch { /* noop */ }
+  }, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // External center/zoom prop changes — jump without animation
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    try { map.jumpTo({ center: [center[1], center[0]], zoom }) } catch { /* noop */ }
+  }, [center[0], center[1]]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Blue dot rendering + follow-mode camera. Attach the marker lazily the
+  // first time a fix arrives so the layers sit on top of everything else
+  // added so far, and destroy it when tracking is turned off.
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    if (trackingMode === 'off') {
+      if (locationMarkerRef.current) {
+        locationMarkerRef.current.update(null)
+      }
+      return
+    }
+    if (!userPosition) return
+    const apply = () => {
+      if (!locationMarkerRef.current) locationMarkerRef.current = attachLocationMarker(map)
+      locationMarkerRef.current.update(userPosition)
+      if (trackingMode === 'follow') {
+        // easeTo is gentler than flyTo for continuous updates
+        try {
+          map.easeTo({
+            center: [userPosition.lng, userPosition.lat],
+            bearing: userPosition.heading ?? map.getBearing(),
+            zoom: Math.max(map.getZoom(), 16),
+            duration: 350,
+          })
+        } catch { /* noop */ }
+      }
+    }
+    if (map.loaded()) apply()
+    else map.once('load', apply)
+  }, [userPosition, trackingMode])
+
+  if (!mapboxToken) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-center px-6">
+        <div className="text-sm text-zinc-500">
+          No Mapbox access token configured.<br />
+          <span className="text-xs">Settings → Map → Mapbox GL</span>
+        </div>
+      </div>
+    )
+  }
+
+  // Desktop browsers only get IP-based geolocation (city-level accuracy),
+  // so the button would be misleading. Mobile, where real GPS lives, keeps it.
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+  const buttonBottom = 'calc(var(--bottom-nav-h, 84px) + 12px)'
+
+  return (
+    <div className="w-full h-full relative">
+      <div ref={containerRef} className="w-full h-full" />
+      {isMobile && (
+        <LocationButton
+          mode={trackingMode}
+          error={trackingError}
+          onClick={cycleTrackingMode}
+          bottomOffset={buttonBottom as unknown as number}
+        />
+      )}
+    </div>
+  )
+}

client/src/components/Map/ReservationOverlay.tsx

@@ -0,0 +1,447 @@
+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 { useSettingsStore } from '../../store/settingsStore'
+import type { Reservation, ReservationEndpoint } from '../../types'
+
+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']
+
+const TRANSPORT_COLOR = '#3b82f6'
+
+const TYPE_META: Record<TransportType, { color: string; icon: typeof Plane; geodesic: boolean }> = {
+  flight: { color: TRANSPORT_COLOR, icon: Plane, geodesic: true },
+  train: { color: TRANSPORT_COLOR, icon: Train, geodesic: false },
+  cruise: { color: TRANSPORT_COLOR, icon: Ship, geodesic: true },
+  car: { color: TRANSPORT_COLOR, icon: Car, geodesic: false },
+}
+
+function useEndpointPane() {
+  const map = useMap()
+  useMemo(() => {
+    if (typeof map?.getPane !== 'function' || typeof map?.createPane !== 'function') return
+    if (!map.getPane(ENDPOINT_PANE)) {
+      const pane = map.createPane(ENDPOINT_PANE)
+      pane.style.zIndex = '650'
+      pane.style.pointerEvents = 'auto'
+    }
+  }, [map])
+}
+
+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 estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
+  return L.divIcon({
+    className: 'trek-endpoint-marker',
+    html: `<div style="
+      display:inline-flex;align-items:center;justify-content:center;gap:4px;
+      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;
+      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>`,
+    iconSize: [estWidth, 22],
+    iconAnchor: [estWidth / 2, 11],
+    popupAnchor: [0, -11],
+  })
+}
+
+function toRad(d: number) { return d * Math.PI / 180 }
+function toDeg(r: number) { return r * 180 / Math.PI }
+
+function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
+  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
+  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
+  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
+  if (d === 0) return [a, b]
+  const pts: [number, number][] = []
+  for (let i = 0; i <= steps; i++) {
+    const f = i / steps
+    const A = Math.sin((1 - f) * d) / Math.sin(d)
+    const B = Math.sin(f * d) / Math.sin(d)
+    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
+    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
+    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
+    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
+    const lng = Math.atan2(y, x)
+    pts.push([toDeg(lat), toDeg(lng)])
+  }
+  return pts
+}
+
+function splitAntimeridian(points: [number, number][]): [number, number][][] {
+  const segments: [number, number][][] = []
+  let cur: [number, number][] = []
+  for (let i = 0; i < points.length; i++) {
+    if (i > 0 && Math.abs(points[i][1] - points[i - 1][1]) > 180) {
+      if (cur.length > 1) segments.push(cur)
+      cur = []
+    }
+    cur.push(points[i])
+  }
+  if (cur.length > 1) segments.push(cur)
+  return segments
+}
+
+function cleanName(name: string): string {
+  return name.replace(/\s*\([^)]*\)/g, '').trim()
+}
+
+function haversineKm(a: [number, number], b: [number, number]): number {
+  const R = 6371
+  const dLat = toRad(b[0] - a[0])
+  const dLng = toRad(b[1] - a[1])
+  const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a[0])) * Math.cos(toRad(b[0])) * Math.sin(dLng / 2) ** 2
+  return 2 * R * Math.asin(Math.sqrt(h))
+}
+
+function parseInTz(isoLocal: string, tz: string): number {
+  const [datePart, timePart] = isoLocal.split('T')
+  const [y, mo, d] = datePart.split('-').map(Number)
+  const [h, mi] = (timePart || '00:00').split(':').map(Number)
+  const guess = Date.UTC(y, mo - 1, d, h, mi)
+  const fmt = new Intl.DateTimeFormat('en-US', {
+    timeZone: tz, hour12: false,
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+  })
+  const parts = Object.fromEntries(fmt.formatToParts(new Date(guess)).filter(p => p.type !== 'literal').map(p => [p.type, p.value]))
+  const asUtc = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour) % 24, Number(parts.minute), Number(parts.second))
+  return guess - (asUtc - guess)
+}
+
+function computeDuration(from: ReservationEndpoint, to: ReservationEndpoint, fallbackStart: string | null, fallbackEnd: string | null): string | null {
+  let start = from.local_date && from.local_time ? `${from.local_date}T${from.local_time}` : fallbackStart
+  let end = to.local_date && to.local_time ? `${to.local_date}T${to.local_time}` : fallbackEnd
+  if (!start || !end) return null
+
+  if (!start.includes('T') && end.includes('T')) start = `${end.split('T')[0]}T${start}`
+  if (!end.includes('T') && start.includes('T')) end = `${start.split('T')[0]}T${end}`
+  if (!start.includes('T') || !end.includes('T')) return null
+
+  const fromTz = from.timezone || to.timezone
+  const toTz = to.timezone || fromTz
+
+  let startMs: number, endMs: number
+  if (fromTz && toTz) {
+    startMs = parseInTz(start, fromTz)
+    endMs = parseInTz(end, toTz)
+  } else {
+    startMs = new Date(start).getTime()
+    endMs = new Date(end).getTime()
+  }
+  if (!Number.isFinite(startMs) || !Number.isFinite(endMs)) return null
+  if (endMs <= startMs) endMs += 24 * 60 * 60000
+  const minutes = Math.round((endMs - startMs) / 60000)
+  if (minutes <= 0 || minutes > 48 * 60) return null
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return h > 0 ? `${h}h ${m}m` : `${m}m`
+}
+
+interface TransportItem {
+  res: Reservation
+  from: ReservationEndpoint
+  to: ReservationEndpoint
+  type: TransportType
+  arcs: [number, number][][]
+  primaryArc: [number, number][]
+  fallback: [number, number]
+  mainLabel: string | null
+  subLabel: string | null
+}
+
+function buildStatsHtml(color: string, mainLabel: string | null, subLabel: string | null): { html: string; width: number; height: number } {
+  const estWidth = Math.max(
+    mainLabel ? mainLabel.length * 6.5 : 0,
+    subLabel ? subLabel.length * 5.5 : 0,
+  ) + 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 html = `<div class="trek-stats-inner" style="
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    width:100%;height:100%;
+    padding:0 11px;border-radius:999px;
+    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;
+    white-space:nowrap;box-sizing:border-box;
+    transform-origin:center;
+    will-change:transform;
+  ">${main}${sub}</div>`
+  return { html, width: estWidth, height }
+}
+
+function StatsLabel({ item }: { item: TransportItem }) {
+  const map = useMap()
+  const markerRef = useRef<L.Marker | null>(null)
+  const innerRef = useRef<HTMLElement | null>(null)
+
+  const arc = item.primaryArc
+  const color = TYPE_META[item.type].color
+
+  const { html, width, height } = useMemo(() => buildStatsHtml(color, item.mainLabel, item.subLabel), [color, item.mainLabel, item.subLabel])
+  const buffer = AIRPORT_BADGE_HALF_PX + width / 2 + BADGE_GAP_PX
+
+  const compute = () => {
+    if (arc.length < 2) return null
+    const size = map.getSize()
+    const pts = arc.map(p => map.latLngToContainerPoint(p as L.LatLngTuple))
+    const cum: number[] = [0]
+    let total = 0
+    for (let i = 1; i < pts.length; i++) {
+      total += pts[i].distanceTo(pts[i - 1])
+      cum.push(total)
+    }
+    if (total <= 0) return null
+
+    const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
+    const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
+
+    const isIn = (p: L.Point) => {
+      if (p.x < -40 || p.x > size.x + 40 || p.y < -40 || p.y > size.y + 40) return false
+      if (p.distanceTo(fromPx) < buffer) return false
+      if (p.distanceTo(toPx) < buffer) return false
+      return true
+    }
+
+    let firstIdx = -1
+    let lastIdx = -1
+    for (let i = 0; i < pts.length; i++) {
+      if (isIn(pts[i])) {
+        if (firstIdx < 0) firstIdx = i
+        lastIdx = i
+      }
+    }
+    if (firstIdx < 0) {
+      const target = total / 2
+      let sIdx = 0
+      while (sIdx < cum.length - 2 && cum[sIdx + 1] < target) sIdx++
+      const span = cum[sIdx + 1] - cum[sIdx]
+      const tm = span > 0 ? (target - cum[sIdx]) / span : 0
+      const pA = pts[sIdx]
+      const pB = pts[sIdx + 1]
+      const mx = pA.x + (pB.x - pA.x) * tm
+      const my = pA.y + (pB.y - pA.y) * tm
+      const latlng = map.containerPointToLatLng([mx, my])
+      let angle = Math.atan2(pB.y - pA.y, pB.x - pA.x) * 180 / Math.PI
+      if (angle > 90) angle -= 180
+      if (angle < -90) angle += 180
+      return { point: [latlng.lat, latlng.lng] as [number, number], angle }
+    }
+
+    const bisectFraction = (a: L.Point, b: L.Point) => {
+      let lo = 0, hi = 1
+      for (let k = 0; k < 10; k++) {
+        const mid = (lo + hi) / 2
+        const mp = L.point(a.x + (b.x - a.x) * mid, a.y + (b.y - a.y) * mid)
+        if (isIn(mp)) hi = mid
+        else lo = mid
+      }
+      return (lo + hi) / 2
+    }
+
+    let lowCum = cum[firstIdx]
+    if (firstIdx > 0) {
+      const t = bisectFraction(pts[firstIdx - 1], pts[firstIdx])
+      lowCum = cum[firstIdx - 1] + (cum[firstIdx] - cum[firstIdx - 1]) * t
+    }
+    let highCum = cum[lastIdx]
+    if (lastIdx < pts.length - 1) {
+      const t = bisectFraction(pts[lastIdx + 1], pts[lastIdx])
+      highCum = cum[lastIdx] + (cum[lastIdx + 1] - cum[lastIdx]) * (1 - t)
+    }
+
+    const targetLen = (lowCum + highCum) / 2
+
+    let segIdx = 0
+    while (segIdx < cum.length - 2 && cum[segIdx + 1] < targetLen) segIdx++
+    const segSpan = cum[segIdx + 1] - cum[segIdx]
+    const t = segSpan > 0 ? (targetLen - cum[segIdx]) / segSpan : 0
+    const pA = pts[segIdx]
+    const pB = pts[segIdx + 1]
+    const px = pA.x + (pB.x - pA.x) * t
+    const py = pA.y + (pB.y - pA.y) * t
+    const latlng = map.containerPointToLatLng([px, py])
+
+    let angle = Math.atan2(pB.y - pA.y, pB.x - pA.x) * 180 / Math.PI
+    if (angle > 90) angle -= 180
+    if (angle < -90) angle += 180
+
+    return { point: [latlng.lat, latlng.lng] as [number, number], angle }
+  }
+
+  const apply = () => {
+    const pose = compute()
+    const marker = markerRef.current
+    if (!marker) return
+    const el = marker.getElement() as HTMLElement | null
+    if (!pose) {
+      if (el) el.style.display = 'none'
+      return
+    }
+    if (el) el.style.display = ''
+    marker.setLatLng(pose.point as L.LatLngTuple)
+    if (!innerRef.current && el) innerRef.current = el.querySelector('.trek-stats-inner') as HTMLElement | null
+    if (innerRef.current) innerRef.current.style.transform = `rotate(${pose.angle}deg)`
+  }
+
+  useEffect(() => {
+    const icon = L.divIcon({
+      className: 'trek-endpoint-stats',
+      html,
+      iconSize: [width, height],
+      iconAnchor: [width / 2, height / 2],
+    })
+    const marker = L.marker([0, 0], { icon, pane: ENDPOINT_PANE, interactive: false, keyboard: false })
+    marker.addTo(map)
+    markerRef.current = marker
+    innerRef.current = null
+    apply()
+    return () => {
+      marker.remove()
+      markerRef.current = null
+      innerRef.current = null
+    }
+  }, [map, html, width, height])
+
+  useMapEvents({
+    move: apply,
+    zoom: apply,
+    viewreset: apply,
+    resize: apply,
+  })
+
+  return null
+}
+
+interface Props {
+  reservations: Reservation[]
+  showConnections: boolean
+  showStats: boolean
+  onEndpointClick?: (reservationId: number) => void
+}
+
+export default function ReservationOverlay({ reservations, showConnections, showStats, onEndpointClick }: Props) {
+  useEndpointPane()
+  const map = useMap()
+  const [zoom, setZoom] = useState(() => map.getZoom())
+  useMapEvents({
+    zoomend: () => setZoom(map.getZoom()),
+  })
+  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
+
+  const items = useMemo<TransportItem[]>(() => {
+    const out: TransportItem[] = []
+    for (const r of reservations) {
+      if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
+      const eps = r.endpoints || []
+      const from = eps.find(e => e.role === 'from')
+      const to = eps.find(e => e.role === 'to')
+      if (!from || !to) continue
+      const type = r.type as TransportType
+      const isGeo = TYPE_META[type].geodesic
+      const arcs = isGeo
+        ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
+        : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
+      const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
+      const primaryArc = arcs[primaryIdx] ?? []
+      const fallback: [number, number] = primaryArc.length > 0
+        ? (primaryArc[Math.floor(primaryArc.length / 2)] ?? [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2])
+        : [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2]
+
+      const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
+      const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
+      const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
+      const subParts = [duration, distance].filter(Boolean) as string[]
+      const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
+
+      out.push({ res: r, from, to, type, arcs, primaryArc, fallback, mainLabel, subLabel })
+    }
+    return out
+  }, [reservations])
+
+  const visibleItems = useMemo(() => {
+    return items.filter(item => {
+      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
+      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
+      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200
+      return fromPx.distanceTo(toPx) >= minPx
+    })
+  }, [items, zoom, map])
+
+  const labelVisibleIds = useMemo(() => {
+    const set = new Set<number>()
+    for (const item of visibleItems) {
+      const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
+      const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
+      const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : 400
+      if (fromPx.distanceTo(toPx) >= minPx) set.add(item.res.id)
+    }
+    return set
+  }, [visibleItems, zoom, map])
+
+  if (!showConnections) return null
+
+  return (
+    <>
+      {visibleItems.map(item => item.arcs.map((seg, segIdx) => (
+        <Polyline
+          key={`line-${item.res.id}-${segIdx}`}
+          positions={seg}
+          pathOptions={{
+            color: TYPE_META[item.type].color,
+            weight: 2.5,
+            opacity: item.res.status === 'confirmed' ? 0.75 : 0.55,
+            dashArray: item.res.status === 'confirmed' ? undefined : '6, 6',
+          }}
+        />
+      )))}
+
+      {visibleItems.flatMap(item => [
+        <Marker
+          key={`from-${item.res.id}`}
+          position={[item.from.lat, item.from.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.from.code || cleanName(item.from.name)) : null)}
+          pane={ENDPOINT_PANE}
+          zIndexOffset={1000}
+          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
+        >
+          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.from.name}</div>
+            {item.res.title && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{item.res.title}</div>}
+          </Tooltip>
+        </Marker>,
+        <Marker
+          key={`to-${item.res.id}`}
+          position={[item.to.lat, item.to.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.to.code || cleanName(item.to.name)) : null)}
+          pane={ENDPOINT_PANE}
+          zIndexOffset={1000}
+          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
+        >
+          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.to.name}</div>
+            {item.res.title && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{item.res.title}</div>}
+          </Tooltip>
+        </Marker>,
+      ])}
+
+      {showStats && visibleItems.map(item => item.type === 'flight' && (item.mainLabel || item.subLabel) && labelVisibleIds.has(item.res.id) && (
+        <StatsLabel key={`stats-${item.res.id}`} item={item} />
+      ))}
+    </>
+  )
+}

client/src/components/Map/locationMarkerMapbox.ts

@@ -0,0 +1,172 @@
+import mapboxgl from 'mapbox-gl'
+import type { GeoPosition } from '../../hooks/useGeolocation'
+
+// Build the DOM element that backs the mapbox Marker. We animate the
+// heading cone via a CSS rotation so the DOM stays stable across updates
+// and mapbox doesn't get confused about which element to position.
+function buildLocationEl(): { root: HTMLDivElement; cone: HTMLDivElement } {
+  const root = document.createElement('div')
+  root.style.cssText = 'width:28px;height:28px;position:relative;pointer-events:none;'
+  // Accuracy pulse behind the dot
+  const pulse = document.createElement('div')
+  pulse.style.cssText = `
+    position:absolute;inset:-14px;border-radius:50%;
+    background:#3b82f6;opacity:0.25;
+    animation:trek-location-pulse 2s ease-out infinite;
+  `
+  // Heading cone (conic gradient fan)
+  const cone = document.createElement('div')
+  cone.style.cssText = `
+    position:absolute;left:50%;top:50%;width:60px;height:60px;
+    transform:translate(-50%,-50%) rotate(0deg);
+    background:conic-gradient(from -30deg, rgba(59,130,246,0) 0deg, rgba(59,130,246,0.35) 15deg, rgba(59,130,246,0) 60deg, rgba(59,130,246,0) 360deg);
+    border-radius:50%;
+    mask:radial-gradient(circle, transparent 12px, black 13px);
+    -webkit-mask:radial-gradient(circle, transparent 12px, black 13px);
+    transition:transform 0.12s ease-out;
+    display:none;
+  `
+  // Blue dot
+  const dot = document.createElement('div')
+  dot.style.cssText = `
+    position:absolute;left:50%;top:50%;
+    transform:translate(-50%,-50%);
+    width:18px;height:18px;border-radius:50%;
+    background:#3b82f6;border:3px solid white;
+    box-shadow:0 0 0 1px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.3);
+  `
+  root.appendChild(pulse)
+  root.appendChild(cone)
+  root.appendChild(dot)
+  return { root, cone }
+}
+
+// Inject the pulse keyframes once per document so the animation is
+// available for every map instance.
+function ensurePulseStyle() {
+  if (document.getElementById('trek-location-style')) return
+  const s = document.createElement('style')
+  s.id = 'trek-location-style'
+  s.textContent = `
+    @keyframes trek-location-pulse {
+      0%   { transform: scale(0.6); opacity: 0.35; }
+      70%  { transform: scale(1.6); opacity: 0; }
+      100% { transform: scale(1.6); opacity: 0; }
+    }
+  `
+  document.head.appendChild(s)
+}
+
+export interface LocationMarkerHandle {
+  update: (p: GeoPosition | null) => void
+  destroy: () => void
+}
+
+// Creates (or reuses) a location marker + accuracy circle on the given
+// mapbox map. Returns a handle the caller uses to push position updates
+// and clean up. Keeps its own DOM element and GeoJSON source so it can
+// coexist with the regular trip markers.
+export function attachLocationMarker(map: mapboxgl.Map): LocationMarkerHandle {
+  ensurePulseStyle()
+  const { root, cone } = buildLocationEl()
+  const marker = new mapboxgl.Marker({ element: root, anchor: 'center' })
+
+  const ensureAccuracyLayer = () => {
+    if (map.getSource('trek-location-accuracy')) return
+    try {
+      map.addSource('trek-location-accuracy', {
+        type: 'geojson',
+        data: { type: 'FeatureCollection', features: [] },
+      })
+      // Draw the accuracy ring as a geographic polygon: it's a real geodesic
+      // circle defined in meters, so mapbox automatically scales it with
+      // zoom the way Apple/Google Maps does — always the same real-world
+      // size regardless of viewport.
+      map.addLayer({
+        id: 'trek-location-accuracy',
+        type: 'fill',
+        source: 'trek-location-accuracy',
+        paint: {
+          'fill-color': '#3b82f6',
+          'fill-opacity': 0.14,
+          'fill-outline-color': '#3b82f6',
+        },
+      })
+    } catch { /* noop */ }
+  }
+
+  // Build a polygon approximating a geodesic circle around (lng, lat)
+  // with the given radius in meters. 48 segments is plenty for a smooth
+  // edge without paying much CPU per fix.
+  const geodesicCircle = (lng: number, lat: number, radiusMeters: number): number[][] => {
+    const earth = 6378137
+    const d = radiusMeters / earth
+    const lat1 = lat * Math.PI / 180
+    const lng1 = lng * Math.PI / 180
+    const coords: number[][] = []
+    const segments = 48
+    for (let i = 0; i <= segments; i++) {
+      const bearing = (i / segments) * 2 * Math.PI
+      const lat2 = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(bearing))
+      const lng2 = lng1 + Math.atan2(
+        Math.sin(bearing) * Math.sin(d) * Math.cos(lat1),
+        Math.cos(d) - Math.sin(lat1) * Math.sin(lat2),
+      )
+      coords.push([lng2 * 180 / Math.PI, lat2 * 180 / Math.PI])
+    }
+    return coords
+  }
+
+  const setAccuracy = (p: GeoPosition) => {
+    const src = map.getSource('trek-location-accuracy') as mapboxgl.GeoJSONSource | undefined
+    if (!src) return
+    if (!p.accuracy || p.accuracy < 1) {
+      src.setData({ type: 'FeatureCollection', features: [] })
+      return
+    }
+    const ring = geodesicCircle(p.lng, p.lat, p.accuracy)
+    src.setData({
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: {},
+        geometry: { type: 'Polygon', coordinates: [ring] },
+      }],
+    })
+  }
+
+  let lastPosRef: GeoPosition | null = null
+
+  if (map.loaded()) ensureAccuracyLayer()
+  else map.once('load', ensureAccuracyLayer)
+
+  const handle: LocationMarkerHandle = {
+    update: (p) => {
+      lastPosRef = p
+      if (!p) {
+        marker.remove()
+        const src = map.getSource('trek-location-accuracy') as mapboxgl.GeoJSONSource | undefined
+        src?.setData({ type: 'FeatureCollection', features: [] })
+        return
+      }
+      marker.setLngLat([p.lng, p.lat])
+      if (!marker.getElement().parentElement) marker.addTo(map)
+      if (p.heading !== null && !Number.isNaN(p.heading)) {
+        cone.style.display = 'block'
+        cone.style.transform = `translate(-50%,-50%) rotate(${p.heading}deg)`
+      } else {
+        cone.style.display = 'none'
+      }
+      setAccuracy(p)
+    },
+    destroy: () => {
+      try { marker.remove() } catch { /* noop */ }
+      try {
+        if (map.getLayer('trek-location-accuracy')) map.removeLayer('trek-location-accuracy')
+        if (map.getSource('trek-location-accuracy')) map.removeSource('trek-location-accuracy')
+      } catch { /* noop */ }
+    },
+  }
+
+  return handle
+}

client/src/components/Map/mapboxSetup.ts

@@ -0,0 +1,101 @@
+import type mapboxgl from 'mapbox-gl'
+
+// "mapbox/standard" and "mapbox/standard-satellite" ship their own 3D
+// buildings and terrain. For every other style we inject a fill-extrusion
+// layer against the classic `composite` vector source so the user still
+// gets real 3D buildings (not just a tilted 2D view) when they toggle 3D.
+export function isStandardFamily(style: string): boolean {
+  return style === 'mapbox://styles/mapbox/standard' || style === 'mapbox://styles/mapbox/standard-satellite'
+}
+
+// Terrain is only genuinely useful for the satellite imagery styles — on
+// clean flat styles like streets/light/dark it nudges route lines onto
+// the DEM while our HTML markers stay at Z=0, which causes the visible
+// offset when the map is pitched. Restrict terrain to satellite.
+export function wantsTerrain(style: string): boolean {
+  return style === 'mapbox://styles/mapbox/satellite-v9'
+      || style === 'mapbox://styles/mapbox/satellite-streets-v12'
+}
+
+// 3D can be added to every style now — the standard family has it built-in
+// and for everything else we either reuse the style's own `composite`
+// building layer or attach the public `mapbox-streets-v8` tileset as an
+// extra source (needed for pure satellite, which has no vector data).
+export function supportsCustom3d(style: string): boolean {
+  return !isStandardFamily(style)
+}
+
+// Add a 3D buildings extrusion layer to a non-Standard Mapbox style. For
+// the pure satellite style we lazily attach `mapbox-streets-v8` as a
+// fallback source so real building volumes sit on top of the imagery —
+// the Apple Maps-style "3D satellite" look the user asked for.
+export function addCustom3dBuildings(map: mapboxgl.Map, dark: boolean) {
+  if (map.getLayer('trek-3d-buildings')) return
+  const baseColor = dark ? '#3b3b3f' : '#cfd2d6'
+
+  // Styles without a `composite` source (pure satellite) need a fallback
+  // vector tileset for building geometry.
+  let sourceId = 'composite'
+  if (!map.getSource('composite')) {
+    sourceId = 'mapbox-streets-v8'
+    if (!map.getSource(sourceId)) {
+      try {
+        map.addSource(sourceId, { type: 'vector', url: 'mapbox://mapbox.mapbox-streets-v8' })
+      } catch { return }
+    }
+  }
+
+  try {
+    // Place extrusions below the first label layer so text stays readable.
+    const layers = map.getStyle()?.layers || []
+    const firstSymbolId = layers.find(l => l.type === 'symbol')?.id
+    map.addLayer({
+      id: 'trek-3d-buildings',
+      source: sourceId,
+      'source-layer': 'building',
+      filter: ['==', 'extrude', 'true'],
+      type: 'fill-extrusion',
+      minzoom: 14,
+      paint: {
+        'fill-extrusion-color': baseColor,
+        'fill-extrusion-height': [
+          'interpolate', ['linear'], ['zoom'],
+          14, 0,
+          15.5, ['coalesce', ['get', 'height'], 0],
+        ],
+        'fill-extrusion-base': [
+          'interpolate', ['linear'], ['zoom'],
+          14, 0,
+          15.5, ['coalesce', ['get', 'min_height'], 0],
+        ],
+        'fill-extrusion-opacity': 0.85,
+      },
+    }, firstSymbolId)
+  } catch { /* building source-layer unavailable */ }
+}
+
+// Terrain + sky that works against any style that has the DEM source.
+// The Standard family already handles terrain internally, skip there.
+export function addTerrainAndSky(map: mapboxgl.Map) {
+  try {
+    if (!map.getSource('mapbox-dem')) {
+      map.addSource('mapbox-dem', {
+        type: 'raster-dem',
+        url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+        tileSize: 512,
+        maxzoom: 14,
+      })
+    }
+    map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.2 })
+    if (!map.getLayer('sky')) {
+      map.addLayer({
+        id: 'sky',
+        type: 'sky',
+        paint: {
+          'sky-type': 'atmosphere',
+          'sky-atmosphere-sun-intensity': 15,
+        } as unknown as mapboxgl.SkyLayerSpecification['paint'],
+      })
+    }
+  } catch { /* style doesn't support terrain */ }
+}

client/src/components/Map/reservationsMapbox.ts

@@ -0,0 +1,388 @@
+// Mapbox GL counterpart to ReservationOverlay.tsx.
+//
+// react-leaflet is component-driven, mapbox-gl is imperative — so instead of
+// a React component, this exports a small manager class the MapViewGL wires
+// up next to its other sources/layers. The geometry logic (great-circle arcs,
+// antimeridian split, duration math) mirrors the Leaflet overlay so both
+// renderers produce the same visual result on the globe or a flat projection.
+
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import mapboxgl from 'mapbox-gl'
+import { Plane, Train, Ship, Car } from 'lucide-react'
+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']
+const TRANSPORT_COLOR = '#3b82f6'
+
+const TYPE_META: Record<TransportType, { icon: typeof Plane; geodesic: boolean }> = {
+  flight: { icon: Plane, geodesic: true },
+  train: { icon: Train, geodesic: false },
+  cruise: { icon: Ship, geodesic: true },
+  car: { icon: Car, geodesic: false },
+}
+
+// ── geometry helpers (ported from ReservationOverlay.tsx) ────────────────
+const toRad = (d: number) => d * Math.PI / 180
+const toDeg = (r: number) => r * 180 / Math.PI
+
+function greatCircle(a: [number, number], b: [number, number], steps = 256): [number, number][] {
+  const [lat1, lng1] = [toRad(a[0]), toRad(a[1])]
+  const [lat2, lng2] = [toRad(b[0]), toRad(b[1])]
+  const d = 2 * Math.asin(Math.sqrt(Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2))
+  if (d === 0) return [a, b]
+  const pts: [number, number][] = []
+  for (let i = 0; i <= steps; i++) {
+    const f = i / steps
+    const A = Math.sin((1 - f) * d) / Math.sin(d)
+    const B = Math.sin(f * d) / Math.sin(d)
+    const x = A * Math.cos(lat1) * Math.cos(lng1) + B * Math.cos(lat2) * Math.cos(lng2)
+    const y = A * Math.cos(lat1) * Math.sin(lng1) + B * Math.cos(lat2) * Math.sin(lng2)
+    const z = A * Math.sin(lat1) + B * Math.sin(lat2)
+    const lat = Math.atan2(z, Math.sqrt(x * x + y * y))
+    const lng = Math.atan2(y, x)
+    pts.push([toDeg(lat), toDeg(lng)])
+  }
+  return pts
+}
+
+function splitAntimeridian(points: [number, number][]): [number, number][][] {
+  const segments: [number, number][][] = []
+  let cur: [number, number][] = []
+  for (let i = 0; i < points.length; i++) {
+    if (i > 0 && Math.abs(points[i][1] - points[i - 1][1]) > 180) {
+      if (cur.length > 1) segments.push(cur)
+      cur = []
+    }
+    cur.push(points[i])
+  }
+  if (cur.length > 1) segments.push(cur)
+  return segments
+}
+
+function haversineKm(a: [number, number], b: [number, number]): number {
+  const R = 6371
+  const dLat = toRad(b[0] - a[0])
+  const dLng = toRad(b[1] - a[1])
+  const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a[0])) * Math.cos(toRad(b[0])) * Math.sin(dLng / 2) ** 2
+  return 2 * R * Math.asin(Math.sqrt(h))
+}
+
+function parseInTz(isoLocal: string, tz: string): number {
+  const [datePart, timePart] = isoLocal.split('T')
+  const [y, mo, d] = datePart.split('-').map(Number)
+  const [h, mi] = (timePart || '00:00').split(':').map(Number)
+  const guess = Date.UTC(y, mo - 1, d, h, mi)
+  const fmt = new Intl.DateTimeFormat('en-US', {
+    timeZone: tz, hour12: false,
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+  })
+  const parts = Object.fromEntries(fmt.formatToParts(new Date(guess)).filter(p => p.type !== 'literal').map(p => [p.type, p.value]))
+  const asUtc = Date.UTC(Number(parts.year), Number(parts.month) - 1, Number(parts.day), Number(parts.hour) % 24, Number(parts.minute), Number(parts.second))
+  return guess - (asUtc - guess)
+}
+
+function computeDuration(from: ReservationEndpoint, to: ReservationEndpoint, fallbackStart: string | null, fallbackEnd: string | null): string | null {
+  let start = from.local_date && from.local_time ? `${from.local_date}T${from.local_time}` : fallbackStart
+  let end = to.local_date && to.local_time ? `${to.local_date}T${to.local_time}` : fallbackEnd
+  if (!start || !end) return null
+  if (!start.includes('T') && end.includes('T')) start = `${end.split('T')[0]}T${start}`
+  if (!end.includes('T') && start.includes('T')) end = `${start.split('T')[0]}T${end}`
+  if (!start.includes('T') || !end.includes('T')) return null
+  const fromTz = from.timezone || to.timezone
+  const toTz = to.timezone || fromTz
+  let startMs: number, endMs: number
+  if (fromTz && toTz) {
+    startMs = parseInTz(start, fromTz)
+    endMs = parseInTz(end, toTz)
+  } else {
+    startMs = new Date(start).getTime()
+    endMs = new Date(end).getTime()
+  }
+  if (!Number.isFinite(startMs) || !Number.isFinite(endMs)) return null
+  if (endMs <= startMs) endMs += 24 * 60 * 60000
+  const minutes = Math.round((endMs - startMs) / 60000)
+  if (minutes <= 0 || minutes > 48 * 60) return null
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return h > 0 ? `${h}h ${m}m` : `${m}m`
+}
+
+const cleanName = (name: string) => name.replace(/\s*\([^)]*\)/g, '').trim()
+
+// ── item building ─────────────────────────────────────────────────────────
+interface TransportItem {
+  res: Reservation
+  from: ReservationEndpoint
+  to: ReservationEndpoint
+  type: TransportType
+  arcs: [number, number][][]
+  primaryArc: [number, number][]
+  mainLabel: string | null
+  subLabel: string | null
+}
+
+function buildItems(reservations: Reservation[]): TransportItem[] {
+  const out: TransportItem[] = []
+  for (const r of reservations) {
+    if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
+    const eps = r.endpoints || []
+    const from = eps.find(e => e.role === 'from')
+    const to = eps.find(e => e.role === 'to')
+    if (!from || !to) continue
+    const type = r.type as TransportType
+    const isGeo = TYPE_META[type].geodesic
+    const arcs = isGeo
+      ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
+      : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
+    const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
+    const primaryArc = arcs[primaryIdx] ?? []
+    const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
+    const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
+    const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
+    const subParts = [duration, distance].filter(Boolean) as string[]
+    const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
+    out.push({ res: r, from, to, type, arcs, primaryArc, mainLabel, subLabel })
+  }
+  return out
+}
+
+// ── DOM helpers for HTML markers ──────────────────────────────────────────
+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>` : ''
+  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;
+    box-sizing:border-box;height:22px;white-space:nowrap;cursor:pointer;
+  "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml}</div>`
+}
+
+function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { html: string; width: number; height: number } {
+  const estWidth = Math.max(
+    mainLabel ? mainLabel.length * 6.5 : 0,
+    subLabel ? subLabel.length * 5.5 : 0,
+  ) + 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 html = `<div class="trek-stats-inner" style="
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    width:100%;height:100%;
+    padding:0 11px;border-radius:999px;
+    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;
+    white-space:nowrap;box-sizing:border-box;pointer-events:none;
+    transform-origin:center;will-change:transform;
+  ">${main}${sub}</div>`
+  return { html, width: estWidth, height }
+}
+
+// ── overlay manager ──────────────────────────────────────────────────────
+export interface ReservationOverlayOptions {
+  showConnections: boolean
+  showStats: boolean
+  showEndpointLabels: boolean
+  onEndpointClick?: (reservationId: number) => void
+}
+
+export class ReservationMapboxOverlay {
+  private map: mapboxgl.Map
+  private items: TransportItem[] = []
+  private opts: ReservationOverlayOptions
+  private endpointMarkers: mapboxgl.Marker[] = []
+  private statsMarkers: { marker: mapboxgl.Marker; arc: [number, number][] }[] = []
+  private rerender: () => void
+  private destroyed = false
+
+  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions) {
+    this.map = map
+    this.opts = opts
+    this.rerender = () => { if (!this.destroyed) this.render() }
+    this.setupLayer()
+    map.on('zoomend', this.rerender)
+    map.on('moveend', this.rerender)
+    map.on('render', this.updateStatsRotation)
+  }
+
+  update(reservations: Reservation[], opts: ReservationOverlayOptions) {
+    this.opts = opts
+    this.items = buildItems(reservations)
+    this.render()
+  }
+
+  destroy() {
+    this.destroyed = true
+    this.map.off('zoomend', this.rerender)
+    this.map.off('moveend', this.rerender)
+    this.map.off('render', this.updateStatsRotation)
+    this.endpointMarkers.forEach(m => m.remove())
+    this.endpointMarkers = []
+    this.statsMarkers.forEach(s => s.marker.remove())
+    this.statsMarkers = []
+    try {
+      if (this.map.getLayer(RESERVATION_LINE_LAYER_ID)) this.map.removeLayer(RESERVATION_LINE_LAYER_ID)
+      if (this.map.getSource(RESERVATION_SOURCE_ID)) this.map.removeSource(RESERVATION_SOURCE_ID)
+    } catch { /* map already gone */ }
+  }
+
+  private setupLayer() {
+    const map = this.map
+    if (map.getSource(RESERVATION_SOURCE_ID)) return
+    map.addSource(RESERVATION_SOURCE_ID, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } })
+    map.addLayer({
+      id: RESERVATION_LINE_LAYER_ID,
+      type: 'line',
+      source: RESERVATION_SOURCE_ID,
+      paint: {
+        'line-color': TRANSPORT_COLOR,
+        'line-width': 2.5,
+        // Confirmed = solid + 0.75; pending = dashed + 0.55.
+        'line-opacity': ['case', ['==', ['get', 'status'], 'confirmed'], 0.75, 0.55] as any,
+        'line-dasharray': ['case', ['==', ['get', 'status'], 'confirmed'], ['literal', [1, 0]], ['literal', [3, 3]]] as any,
+      },
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+    })
+  }
+
+  private render() {
+    const map = this.map
+    if (!this.map.getSource(RESERVATION_SOURCE_ID)) return
+
+    const show = this.opts.showConnections
+
+    // Visible filter: require the on-screen pixel distance between
+    // endpoints to exceed a type-specific minimum, same as the Leaflet
+    // overlay, so tiny no-op transport lines don't clutter the map.
+    const visibleItems = show ? this.items.filter(item => {
+      try {
+        const fromPx = map.project([item.from.lng, item.from.lat])
+        const toPx = map.project([item.to.lng, item.to.lat])
+        const dx = fromPx.x - toPx.x, dy = fromPx.y - toPx.y
+        const dist = Math.sqrt(dx * dx + dy * dy)
+        const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200
+        return dist >= minPx
+      } catch { return true }
+    }) : []
+
+    // Label visibility threshold is higher than line visibility, to keep
+    // endpoint text from overlapping on very short lines.
+    const labelVisibleIds = new Set<number>()
+    if (show) {
+      for (const item of visibleItems) {
+        try {
+          const fromPx = map.project([item.from.lng, item.from.lat])
+          const toPx = map.project([item.to.lng, item.to.lat])
+          const dx = fromPx.x - toPx.x, dy = fromPx.y - toPx.y
+          const dist = Math.sqrt(dx * dx + dy * dy)
+          const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 300 : item.type === 'car' ? 150 : 400
+          if (dist >= minPx) labelVisibleIds.add(item.res.id)
+        } catch { /* ignore */ }
+      }
+    }
+
+    // ── line features ───────────────────────────────────────────────
+    const features = visibleItems.flatMap(item => item.arcs.map(seg => ({
+      type: 'Feature' as const,
+      properties: {
+        resId: item.res.id,
+        type: item.type,
+        status: item.res.status ?? 'pending',
+      },
+      geometry: {
+        type: 'LineString' as const,
+        coordinates: seg.map(([lat, lng]) => [lng, lat]),
+      },
+    })))
+    const src = map.getSource(RESERVATION_SOURCE_ID) as mapboxgl.GeoJSONSource | undefined
+    src?.setData({ type: 'FeatureCollection', features })
+
+    // ── endpoint markers ────────────────────────────────────────────
+    this.endpointMarkers.forEach(m => m.remove())
+    this.endpointMarkers = []
+    if (show) {
+      for (const item of visibleItems) {
+        const showLabel = this.opts.showEndpointLabels && labelVisibleIds.has(item.res.id)
+        for (const ep of [item.from, item.to]) {
+          const label = showLabel ? (ep.code || cleanName(ep.name)) : null
+          const el = document.createElement('div')
+          el.innerHTML = endpointMarkerHtml(item.type, label)
+          const inner = el.firstElementChild as HTMLElement | null
+          const node = inner ?? el
+          node.title = ep.name || ''
+          if (this.opts.onEndpointClick) {
+            node.addEventListener('click', (ev) => {
+              ev.stopPropagation()
+              this.opts.onEndpointClick?.(item.res.id)
+            })
+          }
+          const marker = new mapboxgl.Marker({ element: node, anchor: 'center' })
+            .setLngLat([ep.lng, ep.lat])
+            .addTo(map)
+          this.endpointMarkers.push(marker)
+        }
+      }
+    }
+
+    // ── stats label (flights only) ──────────────────────────────────
+    this.statsMarkers.forEach(s => s.marker.remove())
+    this.statsMarkers = []
+    if (show && this.opts.showStats) {
+      for (const item of visibleItems) {
+        if (item.type !== 'flight') continue
+        if (!labelVisibleIds.has(item.res.id)) continue
+        if (!item.mainLabel && !item.subLabel) continue
+        const arc = item.primaryArc
+        if (arc.length < 2) continue
+        const mid = arc[Math.floor(arc.length / 2)]!
+        const { html, width, height } = buildStatsHtml(item.mainLabel, item.subLabel)
+        const el = document.createElement('div')
+        el.style.cssText = `width:${width}px;height:${height}px;pointer-events:none;`
+        el.innerHTML = html
+        const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
+          .setLngLat([mid[1], mid[0]])
+          .addTo(map)
+        this.statsMarkers.push({ marker, arc })
+      }
+    }
+    // Prime rotation once so labels don't flash horizontal on first paint.
+    this.updateStatsRotation()
+  }
+
+  // Match the Leaflet overlay's "rotate the label along the arc" look.
+  // We pick a short segment straddling the arc midpoint, measure the
+  // screen angle between those two projected points, and clamp it to
+  // [-90°, 90°] so text never renders upside-down.
+  private updateStatsRotation = () => {
+    if (this.destroyed) return
+    for (const entry of this.statsMarkers) {
+      const { marker, arc } = entry
+      if (arc.length < 2) continue
+      const midIdx = Math.floor(arc.length / 2)
+      const a = arc[Math.max(0, midIdx - 2)]!
+      const b = arc[Math.min(arc.length - 1, midIdx + 2)]!
+      try {
+        const pa = this.map.project([a[1], a[0]])
+        const pb = this.map.project([b[1], b[0]])
+        let angle = Math.atan2(pb.y - pa.y, pb.x - pa.x) * 180 / Math.PI
+        if (angle > 90) angle -= 180
+        if (angle < -90) angle += 180
+        const el = marker.getElement()
+        const inner = el.querySelector('.trek-stats-inner') as HTMLElement | null
+        if (inner) inner.style.transform = `rotate(${angle}deg)`
+      } catch { /* map not ready / projection failure */ }
+    }
+  }
+}

client/src/components/Memories/MemoriesPanel.tsx

@@ -85,7 +85,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // Album linking
   const [showAlbumPicker, setShowAlbumPicker] = useState(false)
-  const [albums, setAlbums] = useState<{ id: string; albumName: string; assetCount: number }[]>([])
+  const [albums, setAlbums] = useState<{ id: string; albumName: string; assetCount: number; passphrase?: string }[]>([])
   const [albumsLoading, setAlbumsLoading] = useState(false)
   const [albumLinks, setAlbumLinks] = useState<{ id: number; provider: string; album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
   const [syncing, setSyncing] = useState<number | null>(null)
@@ -141,7 +141,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
     await loadAlbums(selectedProvider)
   }
 
-  const linkAlbum = async (albumId: string, albumName: string) => {
+  const linkAlbum = async (albumId: string, albumName: string, passphrase?: string) => {
     if (!selectedProvider) {
       toast.error(t('memories.error.linkAlbum'))
       return
@@ -152,6 +152,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
         album_id: albumId,
         album_name: albumName,
         provider: selectedProvider,
+        ...(passphrase ? { passphrase } : {}),
       })
       setShowAlbumPicker(false)
       await loadAlbumLinks()
@@ -489,7 +490,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
               {albums.map(album => {
                 const isLinked = linkedIds.has(album.id)
                 return (
-                  <button key={album.id} onClick={() => !isLinked && linkAlbum(album.id, album.albumName)}
+                  <button key={album.id} onClick={() => !isLinked && linkAlbum(album.id, album.albumName, album.passphrase)}
                     disabled={isLinked}
                     style={{
                       display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px',
@@ -581,7 +582,8 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                 borderColor: !pickerDateFilter ? 'var(--text-primary)' : 'var(--border-primary)',
                 color: !pickerDateFilter ? 'var(--bg-primary)' : 'var(--text-muted)',
               }}>
-              {t('memories.allPhotos')}
+              <span className="hidden sm:inline">{t('memories.allPhotos')}</span>
+              <span className="sm:hidden">{t('common.all')}</span>
             </button>
           </div>
           {selectedIds.size > 0 && (

client/src/components/PDF/JourneyBookPDF.tsx

@@ -308,7 +308,7 @@ 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'
+  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
   iframe.srcdoc = html
 
   card.appendChild(header)

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

@@ -78,6 +78,7 @@ const transportReservation = {
   id: 400,
   title: 'Flight to Rome',
   type: 'flight',
+  day_id: 10,
   reservation_time: '2025-06-01T14:30:00',
   confirmation_number: 'ABC123',
   metadata: JSON.stringify({ airline: 'Air Italia', flight_number: 'AI123', departure_airport: 'CDG', arrival_airport: 'FCO' }),

client/src/components/PDF/TripPDF.tsx

@@ -96,12 +96,12 @@ async function fetchPlacePhotos(assignments) {
   const allPlaces = Object.values(assignments).flatMap(a => a.map(x => x.place)).filter(Boolean)
   const unique = [...new Map(allPlaces.map(p => [p.id, p])).values()]
 
-  const toFetch = unique.filter(p => !p.image_url && p.google_place_id)
+  const toFetch = unique.filter(p => !p.image_url && (p.google_place_id || p.osm_id))
 
   await Promise.allSettled(
     toFetch.map(async (place) => {
       try {
-        const data = await mapsApi.placePhoto(place.google_place_id)
+        const data = await mapsApi.placePhoto(place.google_place_id || place.osm_id, place.lat, place.lng, place.name)
         if (data.photoUrl) photoMap[place.id] = data.photoUrl
       } catch {}
     })
@@ -140,23 +140,58 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   const totalCost = Object.values(assignments || {})
     .flatMap(a => a).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
 
+  // Span helpers for multi-day transport (mirrors DayPlanSidebar logic)
+  const pdfGetDayOrder = (d: Day) => d.day_number
+  const pdfGetSpanPhase = (r: any, dayId: number): 'single' | 'start' | 'middle' | 'end' => {
+    const startId = r.day_id
+    const endId = r.end_day_id ?? startId
+    if (!startId || startId === endId) return 'single'
+    if (dayId === startId) return 'start'
+    if (dayId === endId) return 'end'
+    return 'middle'
+  }
+  const pdfGetDisplayTime = (r: any, dayId: number): string | null => {
+    const phase = pdfGetSpanPhase(r, dayId)
+    if (phase === 'end') return r.reservation_end_time || null
+    if (phase === 'middle') return null
+    return r.reservation_time || null
+  }
+  const pdfGetSpanLabel = (r: any, phase: string): string | null => {
+    if (phase === 'single') return null
+    if (r.type === 'flight') return tr(`reservations.span.${phase === 'start' ? 'departure' : phase === 'end' ? 'arrival' : 'inTransit'}`)
+    if (r.type === 'car') return tr(`reservations.span.${phase === 'start' ? 'pickup' : phase === 'end' ? 'return' : 'active'}`)
+    return tr(`reservations.span.${phase === 'start' ? 'start' : phase === 'end' ? 'end' : 'ongoing'}`)
+  }
+  const pdfGetTransportForDay = (dayId: number) => (reservations || []).filter(r => {
+    if (r.type === 'hotel') return false
+    const startId = r.day_id
+    const endId = r.end_day_id ?? startId
+    if (startId == null) return false
+    if (endId !== startId) {
+      const startDay = sorted.find(d => d.id === startId)
+      const endDay = sorted.find(d => d.id === endId)
+      const thisDay = sorted.find(d => d.id === dayId)
+      if (!startDay || !endDay || !thisDay) return false
+      return pdfGetDayOrder(thisDay) >= pdfGetDayOrder(startDay) && pdfGetDayOrder(thisDay) <= pdfGetDayOrder(endDay)
+    }
+    return startId === dayId
+  })
+
   // Build day HTML
   const daysHtml = sorted.map((day, di) => {
     const assigned = assignments[String(day.id)] || []
     const notes = (dayNotes || []).filter(n => n.day_id === day.id)
     const cost = dayCost(assignments, day.id, loc)
 
-    // Reservations for this day (hotel rendered via accommodations block)
-    const dayReservations = (reservations || []).filter(r => {
-      if (!r.reservation_time || r.type === 'hotel') return false
-      return day.date && r.reservation_time.split('T')[0] === day.date
-    })
+    // Reservations for this day (hotel rendered via accommodations block; car middle-phase rendered in sidebar header only)
+    const dayReservations = pdfGetTransportForDay(day.id)
+      .filter(r => !(r.type === 'car' && pdfGetSpanPhase(r, day.id) === 'middle'))
 
     const merged = []
     assigned.forEach(a => merged.push({ type: 'place', k: a.order_index ?? a.sort_order ?? 0, data: a }))
     notes.forEach(n    => merged.push({ type: 'note',  k: n.sort_order ?? 0, data: n }))
     dayReservations.forEach(r => {
-      const pos = r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
+      const pos = r.day_positions?.[day.id] ?? r.day_positions?.[String(day.id)] ?? r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
       merged.push({ type: 'reservation', k: pos, data: r })
     })
     merged.sort((a, b) => a.k - b.k)
@@ -177,13 +212,17 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
             else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
             else if (r.type === 'tour') subtitle = [meta.operator].filter(Boolean).join(' · ')
             const locationLine = r.location || meta.location || ''
-            const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
+            const phase = pdfGetSpanPhase(r, day.id)
+            const spanLabel = pdfGetSpanLabel(r, phase)
+            const displayTime = pdfGetDisplayTime(r, day.id)
+            const time = displayTime?.includes('T') ? displayTime.split('T')[1]?.substring(0, 5) : ''
+            const titleHtml = `${spanLabel ? escHtml(spanLabel) + ': ' : ''}${escHtml(r.title)}`
             return `
               <div class="note-card" style="border-left: 3px solid ${color};">
                 <div class="note-line" style="background: ${color};"></div>
                 <span class="note-icon">${icon}</span>
                 <div class="note-body">
-                  <div class="note-text" style="font-weight: 600;">${escHtml(r.title)}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
+                  <div class="note-text" style="font-weight: 600;">${titleHtml}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
                   ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
                   ${locationLine ? `<div class="note-time">${escHtml(locationLine)}</div>` : ''}
                   ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}
@@ -521,7 +560,7 @@ ${daysHtml}
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals'
+  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
   iframe.srcdoc = html
 
   card.appendChild(header)

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Package } from 'lucide-react'
+import { adminApi, packingApi } from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
+import { useToast } from '../shared/Toast'
+import { useTranslation } from '../../i18n'
+
+interface Template {
+  id: number
+  name: string
+  item_count: number
+}
+
+interface ApplyTemplateButtonProps {
+  tripId: number
+  style: React.CSSProperties
+  className?: string
+}
+
+// Dropdown-Button um ein Packing-Template auf den aktuellen Trip anzuwenden.
+// Rendert nichts wenn keine Templates existieren.
+export default function ApplyTemplateButton({ tripId, style, className }: ApplyTemplateButtonProps): React.ReactElement | null {
+  const [templates, setTemplates] = useState<Template[]>([])
+  const [open, setOpen] = useState(false)
+  const [applying, setApplying] = useState(false)
+  const dropRef = useRef<HTMLDivElement>(null)
+  const toast = useToast()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    adminApi.packingTemplates().then(d => setTemplates(d.templates || [])).catch(() => {})
+  }, [tripId])
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (dropRef.current && !dropRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const handleApply = async (templateId: number) => {
+    setApplying(true)
+    try {
+      const data = await packingApi.applyTemplate(tripId, templateId)
+      useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(data.items || [])] }))
+      toast.success(t('packing.templateApplied', { count: data.count }))
+      setOpen(false)
+    } catch {
+      toast.error(t('packing.templateError'))
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  if (templates.length === 0) return null
+
+  return (
+    <div ref={dropRef} style={{ position: 'relative' }}>
+      <button
+        onClick={() => setOpen(v => !v)}
+        disabled={applying}
+        className={className ?? 'hover:opacity-[0.88]'}
+        style={style}
+      >
+        <Package size={14} strokeWidth={2.5} />
+        <span className="hidden sm:inline">{t('packing.applyTemplate')}</span>
+      </button>
+      {open && (
+        <div
+          className="trek-menu-enter"
+          style={{
+            position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 50,
+            background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+            boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 220,
+            transformOrigin: 'top right',
+          }}
+        >
+          {templates.map(tmpl => (
+            <button key={tmpl.id} onClick={() => handleApply(tmpl.id)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                padding: '8px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
+                background: 'transparent', fontFamily: 'inherit', fontSize: 12, color: 'var(--text-primary)',
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+            >
+              <Package size={13} style={{ color: 'var(--text-faint)' }} />
+              <div style={{ flex: 1, textAlign: 'left' }}>
+                <div style={{ fontWeight: 600 }}>{tmpl.name}</div>
+                <div style={{ fontSize: 10, color: 'var(--text-faint)' }}>
+                  {tmpl.item_count} {t('admin.packingTemplates.items')}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Packing/PackingListPanel.tsx

@@ -208,9 +208,14 @@ interface ArtikelZeileProps {
   canEdit?: boolean
 }
 
+// A category's first item is seeded with this sentinel because the server
+// rejects empty names. Treat it as a placeholder in the UI.
+const PACKING_PLACEHOLDER_NAME = '...'
+
 function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true }: ArtikelZeileProps) {
+  const isPlaceholder = item.name === PACKING_PLACEHOLDER_NAME
   const [editing, setEditing] = useState(false)
-  const [editName, setEditName] = useState(item.name)
+  const [editName, setEditName] = useState(isPlaceholder ? '' : item.name)
   const [hovered, setHovered] = useState(false)
   const [showCatPicker, setShowCatPicker] = useState(false)
   const [showBagPicker, setShowBagPicker] = useState(false)
@@ -223,7 +228,7 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
   const handleToggle = () => togglePackingItem(tripId, item.id, !item.checked)
 
   const handleSaveName = async () => {
-    if (!editName.trim()) { setEditing(false); setEditName(item.name); return }
+    if (!editName.trim()) { setEditing(false); setEditName(isPlaceholder ? '' : item.name); return }
     try { await updatePackingItem(tripId, item.id, { name: editName.trim() }); setEditing(false) }
     catch { toast.error(t('packing.toast.saveError')) }
   }
@@ -253,18 +258,32 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
       }}
     >
       <button onClick={handleToggle} style={{
-        flexShrink: 0, background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex',
-        color: item.checked ? '#10b981' : 'var(--text-faint)', transition: 'color 0.15s',
+        flexShrink: 0, background: 'none', border: 'none', cursor: 'pointer', padding: 0, position: 'relative',
+        width: 18, height: 18,
+        color: item.checked ? '#10b981' : 'var(--text-faint)',
+        transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
       }}>
-        {item.checked ? <CheckSquare size={18} /> : <Square size={18} />}
+        <Square size={18} style={{
+          position: 'absolute', inset: 0,
+          opacity: item.checked ? 0 : 1,
+          transform: item.checked ? 'scale(0.7)' : 'scale(1)',
+          transition: 'opacity 180ms cubic-bezier(0.23,1,0.32,1), transform 180ms cubic-bezier(0.23,1,0.32,1)',
+        }} />
+        <CheckSquare size={18} style={{
+          position: 'absolute', inset: 0,
+          opacity: item.checked ? 1 : 0,
+          transform: item.checked ? 'scale(1)' : 'scale(0.5)',
+          transition: 'opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 220ms cubic-bezier(0.34,1.56,0.64,1)',
+        }} />
       </button>
 
       {editing && canEdit ? (
         <input
           type="text" value={editName} autoFocus
+          placeholder={isPlaceholder ? '...' : undefined}
           onChange={e => setEditName(e.target.value)}
           onBlur={handleSaveName}
-          onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(item.name) } }}
+          onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(isPlaceholder ? '' : item.name) } }}
           style={{ flex: 1, fontSize: 13.5, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
         />
       ) : (
@@ -273,7 +292,8 @@ function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingE
           style={{
             flex: 1, fontSize: 13.5,
             cursor: !canEdit || item.checked ? 'default' : 'text',
-            color: item.checked ? 'var(--text-faint)' : 'var(--text-primary)',
+            color: isPlaceholder ? 'var(--text-faint)' : (item.checked ? 'var(--text-faint)' : 'var(--text-primary)'),
+            transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
             textDecoration: item.checked ? 'line-through' : 'none',
           }}
         >
@@ -729,9 +749,13 @@ function MenuItem({ icon, label, onClick, danger }: MenuItemProps) {
 interface PackingListPanelProps {
   tripId: number
   items: PackingItem[]
+  openImportSignal?: number
+  clearCheckedSignal?: number
+  saveTemplateSignal?: number
+  inlineHeader?: boolean
 }
 
-export default function PackingListPanel({ tripId, items }: PackingListPanelProps) {
+export default function PackingListPanel({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true }: PackingListPanelProps) {
   const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
   const [addingCategory, setAddingCategory] = useState(false)
   const [newCatName, setNewCatName] = useState('')
@@ -896,6 +920,31 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
   const [saveTemplateName, setSaveTemplateName] = useState('')
   const [showImportModal, setShowImportModal] = useState(false)
   const [importText, setImportText] = useState('')
+  const lastHandledImportSignal = useRef(openImportSignal)
+  const lastHandledClearSignal = useRef(clearCheckedSignal)
+  const lastHandledSaveSignal = useRef(saveTemplateSignal)
+
+  useEffect(() => {
+    if (openImportSignal !== lastHandledImportSignal.current && openImportSignal > 0) {
+      setShowImportModal(true)
+    }
+    lastHandledImportSignal.current = openImportSignal
+  }, [openImportSignal])
+
+  useEffect(() => {
+    if (clearCheckedSignal !== lastHandledClearSignal.current && clearCheckedSignal > 0) {
+      handleClearChecked()
+    }
+    lastHandledClearSignal.current = clearCheckedSignal
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clearCheckedSignal])
+
+  useEffect(() => {
+    if (saveTemplateSignal !== lastHandledSaveSignal.current && saveTemplateSignal > 0) {
+      setShowSaveTemplate(true)
+    }
+    lastHandledSaveSignal.current = saveTemplateSignal
+  }, [saveTemplateSignal])
   const csvInputRef = useRef<HTMLInputElement>(null)
   const templateDropdownRef = useRef<HTMLDivElement>(null)
 
@@ -916,10 +965,9 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
     setApplyingTemplate(true)
     try {
       const data = await packingApi.applyTemplate(tripId, templateId)
+      useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(data.items || [])] }))
       toast.success(t('packing.templateApplied', { count: data.count }))
       setShowTemplateDropdown(false)
-      // Reload packing items
-      window.location.reload()
     } catch {
       toast.error(t('packing.templateError'))
     } finally {
@@ -977,10 +1025,10 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
     if (parsed.length === 0) { toast.error(t('packing.importEmpty')); return }
     try {
       const result = await packingApi.bulkImport(tripId, parsed)
+      useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(result.items || [])] }))
       toast.success(t('packing.importSuccess', { count: result.count }))
       setImportText('')
       setShowImportModal(false)
-      window.location.reload()
     } catch { toast.error(t('packing.importError')) }
   }
 
@@ -999,16 +1047,43 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
 
       {/* ── Header ── */}
-      <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
-          <div>
-            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.title')}</h2>
-            <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
-              {items.length === 0 ? t('packing.empty') : t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
-            </p>
-          </div>
-          <div style={{ display: 'flex', gap: 6 }}>
-            {canEdit && abgehakt > 0 && (
+      <div style={{ padding: inlineHeader ? '20px 24px 16px' : '0 0 16px', flexShrink: 0, borderBottom: inlineHeader ? '1px solid rgba(0,0,0,0.06)' : undefined }}>
+        <div style={{ display: 'flex', alignItems: inlineHeader ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 14 }}>
+          {inlineHeader ? (
+            <div>
+              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--text-primary)' }}>{t('packing.title')}</h2>
+              {items.length > 0 && (
+                <p style={{ margin: '2px 0 0', fontSize: 12.5, color: 'var(--text-faint)' }}>
+                  {t('packing.progress', { packed: abgehakt, total: items.length, percent: fortschritt })}
+                </p>
+              )}
+            </div>
+          ) : <span />}
+          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+            {canEdit && items.length > 0 && showSaveTemplate && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                <input
+                  type="text" autoFocus
+                  value={saveTemplateName}
+                  onChange={e => setSaveTemplateName(e.target.value)}
+                  onKeyDown={e => { if (e.key === 'Enter') handleSaveAsTemplate(); if (e.key === 'Escape') { setShowSaveTemplate(false); setSaveTemplateName('') } }}
+                  placeholder={t('packing.templateName')}
+                  style={{ fontSize: 12, padding: '5px 10px', borderRadius: 99, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit', width: 140, background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                />
+                <button onClick={handleSaveAsTemplate} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#10b981' }}><Check size={14} /></button>
+                <button onClick={() => { setShowSaveTemplate(false); setSaveTemplateName('') }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)' }}><X size={14} /></button>
+              </div>
+            )}
+            {inlineHeader && canEdit && (
+              <button onClick={() => setShowImportModal(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', background: 'var(--bg-card)', color: 'var(--text-muted)',
+              }}>
+                <Upload size={12} /> <span className="hidden sm:inline">{t('packing.import')}</span>
+              </button>
+            )}
+            {inlineHeader && canEdit && abgehakt > 0 && (
               <button onClick={handleClearChecked} style={{
                 fontSize: 11.5, padding: '5px 10px', borderRadius: 99, border: '1px solid rgba(239,68,68,0.3)',
                 background: 'rgba(239,68,68,0.1)', color: '#ef4444', cursor: 'pointer', fontFamily: 'inherit',
@@ -1017,16 +1092,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
                 <span className="sm:hidden">{t('packing.clearCheckedShort', { count: abgehakt })}</span>
               </button>
             )}
-            {canEdit && (
-            <button onClick={() => setShowImportModal(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', background: 'var(--bg-card)', color: 'var(--text-muted)',
-            }}>
-              <Upload size={12} /> <span className="hidden sm:inline">{t('packing.import')}</span>
-            </button>
-            )}
-            {canEdit && availableTemplates.length > 0 && (
+            {inlineHeader && canEdit && availableTemplates.length > 0 && (
               <div ref={templateDropdownRef} style={{ position: 'relative' }}>
                 <button onClick={() => setShowTemplateDropdown(v => !v)} disabled={applyingTemplate} style={{
                   display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
@@ -1065,31 +1131,14 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
                 )}
               </div>
             )}
-            {canEdit && items.length > 0 && (
-              <div style={{ position: 'relative' }}>
-                {showSaveTemplate ? (
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                    <input
-                      type="text" autoFocus
-                      value={saveTemplateName}
-                      onChange={e => setSaveTemplateName(e.target.value)}
-                      onKeyDown={e => { if (e.key === 'Enter') handleSaveAsTemplate(); if (e.key === 'Escape') { setShowSaveTemplate(false); setSaveTemplateName('') } }}
-                      placeholder={t('packing.templateName')}
-                      style={{ fontSize: 12, padding: '5px 10px', borderRadius: 99, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit', width: 140, background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-                    />
-                    <button onClick={handleSaveAsTemplate} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#10b981' }}><Check size={14} /></button>
-                    <button onClick={() => { setShowSaveTemplate(false); setSaveTemplateName('') }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)' }}><X size={14} /></button>
-                  </div>
-                ) : (
-                  <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',
-                    background: 'var(--bg-card)', color: 'var(--text-muted)',
-                  }}>
-                    <FolderPlus size={12} /> <span className="hidden sm:inline">{t('packing.saveAsTemplate')}</span>
-                  </button>
-                )}
-              </div>
+            {inlineHeader && canEdit && 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',
+                background: 'var(--bg-card)', color: 'var(--text-muted)',
+              }}>
+                <FolderPlus size={12} /> <span className="hidden sm:inline">{t('packing.saveAsTemplate')}</span>
+              </button>
             )}
             {bagTrackingEnabled && (
               <button onClick={() => setShowBagModal(true)} className="xl:!hidden"
@@ -1107,17 +1156,69 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
         </div>
 
           {items.length > 0 && (
-          <div style={{ marginBottom: 14 }}>
-            <div style={{ height: 5, background: 'var(--bg-tertiary)', borderRadius: 99, overflow: 'hidden' }}>
+          <div className="hidden sm:block" style={{ marginTop: 14, marginBottom: 14 }}>
+            <div className="flex items-center" style={{ gap: 14 }}>
+              {fortschritt === 100 ? (
+                <div style={{
+                  display: 'flex', alignItems: 'center', gap: 8,
+                  fontSize: 16, fontWeight: 700, color: '#10b981',
+                  letterSpacing: '-0.01em', flexShrink: 0,
+                }}>
+                  <CheckCheck size={18} strokeWidth={2.5} />
+                  <span>{t('packing.allPacked')}</span>
+                </div>
+              ) : (
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexShrink: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'baseline' }}>
+                    <span style={{
+                      fontSize: 22, fontWeight: 700, color: 'var(--text-primary)',
+                      fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
+                      lineHeight: 1,
+                    }}>{abgehakt}</span>
+                    <span style={{
+                      fontSize: 14, fontWeight: 500, color: 'var(--text-faint)',
+                      fontVariantNumeric: 'tabular-nums', lineHeight: 1, marginLeft: 1,
+                    }}>/{items.length}</span>
+                  </div>
+                  <span style={{
+                    fontSize: 11, fontWeight: 600, padding: '2px 7px',
+                    borderRadius: 99, background: 'var(--bg-tertiary)',
+                    color: 'var(--text-muted)',
+                    fontVariantNumeric: 'tabular-nums',
+                    lineHeight: 1.4,
+                  }}>{fortschritt}%</span>
+                </div>
+              )}
+
               <div style={{
-                height: '100%', borderRadius: 99, transition: 'width 0.4s ease',
-                background: fortschritt === 100 ? '#10b981' : 'linear-gradient(90deg, var(--text-primary) 0%, var(--text-muted) 100%)',
-                width: `${fortschritt}%`,
-              }} />
+                flex: 1,
+                height: 8,
+                background: 'var(--bg-tertiary)',
+                borderRadius: 99,
+                overflow: 'hidden',
+                position: 'relative',
+                width: '100%',
+              }}>
+                <div style={{
+                  height: '100%',
+                  borderRadius: 99,
+                  transition: 'width 600ms cubic-bezier(0.23, 1, 0.32, 1), background 400ms ease, box-shadow 400ms ease',
+                  background: fortschritt === 100
+                    ? 'linear-gradient(90deg, #10b981 0%, #34d399 100%)'
+                    : 'var(--accent)',
+                  width: `${fortschritt}%`,
+                  boxShadow: fortschritt === 100 ? '0 0 14px rgba(16,185,129,0.45)' : 'none',
+                  position: 'relative',
+                }}>
+                  <div style={{
+                    position: 'absolute', inset: 0,
+                    background: 'linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%)',
+                    borderRadius: 99,
+                    pointerEvents: 'none',
+                  }} />
+                </div>
+              </div>
             </div>
-            {fortschritt === 100 && (
-              <p style={{ fontSize: 11.5, color: '#10b981', marginTop: 4, fontWeight: 600, margin: '4px 0 0' }}>{t('packing.allPacked')}</p>
-            )}
           </div>
         )}
 
@@ -1151,7 +1252,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
 
       {/* ── Filter-Tabs ── */}
       {items.length > 0 && (
-        <div style={{ display: 'flex', gap: 4, padding: '10px 16px 0', flexShrink: 0 }}>
+        <div style={{ display: 'flex', gap: 4, padding: '10px 0 0', flexShrink: 0 }}>
           {[['alle', t('packing.filterAll')], ['offen', t('packing.filterOpen')], ['erledigt', t('packing.filterDone')]].map(([id, label]) => (
             <button key={id} onClick={() => setFilter(id)} style={{
               padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer',
@@ -1165,7 +1266,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
 
       {/* ── Liste + Bags Sidebar ── */}
       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
-      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 12px 16px' }}>
+      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 0 16px' }}>
         {items.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px' }}>
             <Luggage size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 10px' }} />
@@ -1268,7 +1369,7 @@ export default function PackingListPanel({ tripId, items }: PackingListPanelProp
 
       {/* ── Bag Modal (mobile + click) ── */}
       {showBagModal && bagTrackingEnabled && (
-        <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: 20, paddingTop: 140, overflowY: 'auto' }}
+        <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: 20, paddingTop: 140, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflowY: 'auto' }}
           onClick={() => setShowBagModal(false)}>
           <div style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 360, maxHeight: 'calc(100vh - 80px)', overflow: 'auto', padding: 20, boxShadow: '0 16px 48px rgba(0,0,0,0.15)', flexShrink: 0 }}
             onClick={e => e.stopPropagation()}>

client/src/components/Photos/PhotoLightbox.tsx

@@ -79,6 +79,7 @@ export function PhotoLightbox({ photos, initialIndex, onClose, onUpdate, onDelet
   return (
     <div
       className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
+      style={{ paddingBottom: 'var(--bottom-nav-h)' }}
       onClick={onClose}
     >
       {/* Main area */}

client/src/components/Planner/AirportSelect.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Plane, X } from 'lucide-react'
+import { airportsApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+
+export interface Airport {
+  iata: string
+  icao: string | null
+  name: string
+  city: string
+  country: string
+  lat: number
+  lng: number
+  tz: string
+}
+
+interface Props {
+  value: Airport | null
+  onChange: (airport: Airport | null) => void
+  placeholder?: string
+  style?: React.CSSProperties
+}
+
+function formatLabel(a: Airport) {
+  return `${a.city || a.name} (${a.iata})`
+}
+
+export default function AirportSelect({ value, onChange, placeholder, style }: Props) {
+  const { t, locale } = useTranslation()
+  const countryName = useMemo(() => {
+    try { return new Intl.DisplayNames([locale || 'en'], { type: 'region' }) } catch { return null }
+  }, [locale])
+  const displayCountry = (code: string) => {
+    if (!code) return ''
+    try { return countryName?.of(code) || code } catch { return code }
+  }
+  const [query, setQuery] = useState(value ? formatLabel(value) : '')
+  const [open, setOpen] = useState(false)
+  const [results, setResults] = useState<Airport[]>([])
+  const [highlight, setHighlight] = useState(-1)
+  const [loading, setLoading] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const abortRef = useRef<AbortController | null>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    setQuery(value ? formatLabel(value) : '')
+  }, [value])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    const trimmed = query.trim()
+    if (trimmed.length < 2 || (value && trimmed === formatLabel(value))) {
+      setResults([])
+      return
+    }
+    debounceRef.current = setTimeout(async () => {
+      abortRef.current?.abort()
+      const controller = new AbortController()
+      abortRef.current = controller
+      setLoading(true)
+      try {
+        const data = await airportsApi.search(trimmed, controller.signal)
+        setResults(Array.isArray(data) ? data : [])
+        setHighlight(-1)
+      } catch (err: any) {
+        if (err?.name !== 'AbortError' && err?.name !== 'CanceledError') {
+          setResults([])
+        }
+      } finally {
+        setLoading(false)
+      }
+    }, 220)
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
+  }, [query, value])
+
+  const pick = (a: Airport) => {
+    onChange(a)
+    setQuery(formatLabel(a))
+    setOpen(false)
+    setResults([])
+  }
+
+  const clear = () => {
+    onChange(null)
+    setQuery('')
+    setResults([])
+  }
+
+  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || results.length === 0) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
+    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
+    else if (e.key === 'Escape') setOpen(false)
+  }
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative', ...style }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
+        <Plane size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+        <input
+          type="text"
+          value={query}
+          placeholder={placeholder ?? t('airport.searchPlaceholder')}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); if (value) onChange(null) }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={onKey}
+          style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text-primary)', fontSize: 13 }}
+        />
+        {value && (
+          <button type="button" onClick={clear} style={{ background: 'transparent', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }} aria-label="Clear">
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {open && (loading || results.length > 0) && (
+        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
+          {loading && results.length === 0 && (
+            <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('common.loading')}</div>
+          )}
+          {results.map((a, i) => (
+            <button
+              key={a.iata}
+              type="button"
+              onClick={() => pick(a)}
+              onMouseEnter={() => setHighlight(i)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
+                background: i === highlight ? 'var(--bg-hover)' : 'transparent',
+                color: 'var(--text-primary)', fontFamily: 'inherit',
+              }}
+            >
+              <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, monospace', fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', minWidth: 32 }}>{a.iata}</span>
+              <span style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.city || a.name}</div>
+                <div style={{ fontSize: 11, color: 'var(--text-faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.name}{a.country ? ` · ${displayCountry(a.country)}` : ''}</div>
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/DayDetailPanel.tsx

@@ -168,7 +168,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   const font = { fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }
 
   return (
-    <div className="fixed z-50 bottom-[96px] md:bottom-5" style={{ left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...font }}>
+    <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))`, ...font }}>
       <div style={{
         background: 'var(--bg-elevated)',
         backdropFilter: 'blur(40px) saturate(180%)',
@@ -462,7 +462,10 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                           onChange={v => setHotelDayRange(prev => ({ start: v, end: Math.max(v, prev.end) }))}
                           options={days.map((d, i) => ({
                             value: d.id,
-                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })}` : ''}`,
+                            label: d.title || t('planner.dayN', { n: i + 1 }),
+                            badge: d.date
+                              ? new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+                              : (d.title ? t('planner.dayN', { n: i + 1 }) : undefined),
                           }))}
                           size="sm"
                         />
@@ -474,7 +477,10 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                           onChange={v => setHotelDayRange(prev => ({ start: Math.min(prev.start, v), end: v }))}
                           options={days.map((d, i) => ({
                             value: d.id,
-                            label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })}` : ''}`,
+                            label: d.title || t('planner.dayN', { n: i + 1 }),
+                            badge: d.date
+                              ? new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+                              : (d.title ? t('planner.dayN', { n: i + 1 }) : undefined),
                           }))}
                           size="sm"
                         />

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

@@ -187,7 +187,7 @@ describe('DayPlanSidebar', () => {
     const assignments = { '10': [assignment] }
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
     // The chevron button immediately follows the "Add Note" button (which has a title attribute)
-    const addNoteBtn = screen.getByTitle('Add Note')
+    const addNoteBtn = screen.getByLabelText('Add Note')
     const chevron = addNoteBtn.nextElementSibling as HTMLButtonElement
     expect(chevron).toBeTruthy()
     await user.click(chevron)
@@ -201,7 +201,7 @@ describe('DayPlanSidebar', () => {
     const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
     const assignments = { '10': [assignment] }
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
-    const getChevron = () => screen.getByTitle('Add Note').nextElementSibling as HTMLButtonElement
+    const getChevron = () => screen.getByLabelText('Add Note').nextElementSibling as HTMLButtonElement
     await user.click(getChevron()) // collapse
     expect(screen.queryByText('Eiffel Tower')).not.toBeInTheDocument()
     await user.click(getChevron()) // re-expand
@@ -362,28 +362,14 @@ describe('DayPlanSidebar', () => {
     const user = userEvent.setup()
     const onUndo = vi.fn()
     render(<DayPlanSidebar {...makeDefaultProps({ canUndo: true, lastActionLabel: 'Removed place', onUndo })} />)
-    // Find the undo button — it has width 30, height 30 and is not disabled
-    const buttons = screen.getAllByRole('button')
-    // The undo button is the one with the Undo2 icon and is not disabled
-    const undoBtn = buttons.find(btn => {
-      const style = btn.getAttribute('style') || ''
-      return style.includes('width: 30px') || style.includes('width:30px') || (style.includes('30') && !btn.disabled)
-    })
-    if (undoBtn) {
-      await user.click(undoBtn)
-      expect(onUndo).toHaveBeenCalled()
-    }
+    const undoBtn = screen.getByLabelText('Undo')
+    await user.click(undoBtn)
+    expect(onUndo).toHaveBeenCalled()
   })
 
   it('FE-PLANNER-DAYPLAN-024: undo button not present when onUndo not provided', () => {
     render(<DayPlanSidebar {...makeDefaultProps({ canUndo: false })} />)
-    // When onUndo is not provided, the undo section is not rendered at all
-    const buttons = screen.getAllByRole('button')
-    const undoBtn = buttons.find(btn => {
-      const style = btn.getAttribute('style') || ''
-      return style.includes('width: 30px')
-    })
-    expect(undoBtn).toBeUndefined()
+    expect(screen.queryByLabelText('Undo')).toBeNull()
   })
 
   // ── PDF export ──────────────────────────────────────────────────────────
@@ -440,26 +426,27 @@ describe('DayPlanSidebar', () => {
       type: 'flight',
       title: 'Paris to London',
       reservation_time: '2025-06-01T08:00:00',
+      day_id: 10,
     })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation] })} />)
     expect(screen.getByText('Paris to London')).toBeInTheDocument()
   })
 
-  it('FE-PLANNER-DAYPLAN-031: clicking transport item shows detail modal', async () => {
+  it('FE-PLANNER-DAYPLAN-031: clicking transport item calls onEditTransport', async () => {
     const user = userEvent.setup()
+    const onEditTransport = vi.fn()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel Day' })
     const reservation = buildReservation({
       id: 200,
       type: 'flight',
       title: 'Air France 123',
       reservation_time: '2025-06-01T08:00:00',
+      day_id: 10,
     })
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation] })} />)
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation], onEditTransport })} />)
     await user.click(screen.getByText('Air France 123'))
-    // Detail modal should appear (shows the title again in the modal)
     await waitFor(() => {
-      const titles = screen.getAllByText('Air France 123')
-      expect(titles.length).toBeGreaterThan(1)
+      expect(onEditTransport).toHaveBeenCalledWith(expect.objectContaining({ id: 200 }))
     })
   })
 
@@ -664,6 +651,7 @@ describe('DayPlanSidebar', () => {
     const reservation = buildReservation({
       id: 200, type: 'flight', title: 'CDG to LHR',
       reservation_time: '2025-06-01T08:00:00',
+      day_id: 10,
     })
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day],
@@ -684,6 +672,8 @@ describe('DayPlanSidebar', () => {
       id: 201, type: 'flight', title: 'Transatlantic',
       reservation_time: '2025-06-01T22:00:00',
       reservation_end_time: '2025-06-02T06:00:00',
+      day_id: 10,
+      end_day_id: 11,
     } as any)
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day1, day2],
@@ -704,6 +694,8 @@ describe('DayPlanSidebar', () => {
       id: 300, type: 'car', title: 'Renault Rental',
       reservation_time: '2025-06-01T09:00:00',
       reservation_end_time: '2025-06-03T17:00:00',
+      day_id: 10,
+      end_day_id: 12,
     } as any)
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day1, day2, day3],
@@ -786,20 +778,22 @@ describe('DayPlanSidebar', () => {
 
   // ── Transport detail modal with metadata ───────────────────────────────
 
-  it('FE-PLANNER-DAYPLAN-051: transport detail modal shows flight metadata', async () => {
+  it('FE-PLANNER-DAYPLAN-051: clicking flight transport calls onEditTransport with reservation', async () => {
     const user = userEvent.setup()
+    const onEditTransport = vi.fn()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel' })
     const reservation = {
       ...buildReservation({
         id: 202, type: 'flight', title: 'Paris to Berlin',
         reservation_time: '2025-06-01T07:30:00',
+        day_id: 10,
       }),
       metadata: JSON.stringify({ airline: 'Lufthansa', flight_number: 'LH1234', departure_airport: 'CDG', arrival_airport: 'BER' }),
     }
-    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation as any] })} />)
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation as any], onEditTransport })} />)
     await user.click(screen.getByText('Paris to Berlin'))
     await waitFor(() => {
-      expect(screen.getByText('Lufthansa')).toBeInTheDocument()
+      expect(onEditTransport).toHaveBeenCalledWith(expect.objectContaining({ id: 202, type: 'flight' }))
     })
   })
 
@@ -923,7 +917,7 @@ describe('DayPlanSidebar', () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    const addNoteBtn = screen.getByTitle('Add Note')
+    const addNoteBtn = screen.getByLabelText('Add Note')
     await user.click(addNoteBtn)
     expect(mockDayNotesState.openAddNote).toHaveBeenCalled()
   })
@@ -1124,6 +1118,7 @@ describe('DayPlanSidebar', () => {
     const flight = buildReservation({
       id: 201, type: 'flight', title: 'Afternoon Flight',
       reservation_time: '2025-06-01T14:00:00',
+      day_id: 10,
     })
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [flight],
@@ -1683,4 +1678,42 @@ describe('DayPlanSidebar', () => {
     // Optimize button should not be visible when no day is selected
     expect(screen.queryByRole('button', { name: /optimize/i })).not.toBeInTheDocument()
   })
+
+  // ── Edit reservation pencil button ───────────────────────────────────────
+
+  it('FE-PLANNER-DAYPLAN-097: pencil button on non-transport reservation calls onEditReservation', async () => {
+    const user = userEvent.setup()
+    const place = buildPlace({ id: 1, name: 'Hotel du Lac' })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
+    const res = buildReservation({ id: 77, trip_id: 1, type: 'hotel', status: 'pending', assignment_id: 99 } as any)
+    const onEditReservation = vi.fn()
+    const onEditTransport = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
+      onEditReservation, onEditTransport,
+    })} />)
+    const pencil = screen.getByTitle(/edit/i)
+    await user.click(pencil)
+    expect(onEditReservation).toHaveBeenCalledWith(res)
+    expect(onEditTransport).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DAYPLAN-098: pencil button on transport reservation calls onEditTransport', async () => {
+    const user = userEvent.setup()
+    const place = buildPlace({ id: 1, name: 'Geneva Airport' })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
+    const res = buildReservation({ id: 88, trip_id: 1, type: 'flight', status: 'pending', assignment_id: 99 } as any)
+    const onEditReservation = vi.fn()
+    const onEditTransport = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
+      onEditReservation, onEditTransport,
+    })} />)
+    const pencil = screen.getByTitle(/edit/i)
+    await user.click(pencil)
+    expect(onEditTransport).toHaveBeenCalledWith(res)
+    expect(onEditReservation).not.toHaveBeenCalled()
+  })
 })

client/src/components/Planner/DayPlanSidebar.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
-interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: string; fromDayId?: string }
+interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: string; reservationId?: string; fromDayId?: string; phase?: 'single' | 'start' | 'middle' | 'end' }
 declare global { interface Window { __dragData: DragDataPayload | null } }
 
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import ReactDOM from 'react-dom'
-import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X } from 'lucide-react'
+import { ChevronDown, ChevronRight, ChevronUp, ChevronsDownUp, ChevronsUpDown, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Check, Trash2, Info, MapPin, Star, Heart, Camera, Lightbulb, Flag, Bookmark, Train, Bus, Plane, Car, Ship, Coffee, ShoppingBag, AlertTriangle, FileDown, Lock, Hotel, Utensils, Users, Undo2, X, Route as RouteIcon } from 'lucide-react'
 
 const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
 import { assignmentsApi, reservationsApi } from '../../api/client'
@@ -23,6 +23,7 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
 import { formatDate, formatTime, dayTotalCost, currencyDecimals } from '../../utils/formatters'
 import { useDayNotes } from '../../hooks/useDayNotes'
+import Tooltip from '../shared/Tooltip'
 import type { Trip, Day, Place, Category, Assignment, Reservation, AssignmentsMap, RouteResult } from '../../types'
 
 const NOTE_ICONS = [
@@ -170,6 +171,10 @@ interface DayPlanSidebarProps {
   onEditPlace: (place: Place) => void
   onDeletePlace: (placeId: number) => void
   reservations?: Reservation[]
+  visibleConnectionIds?: number[]
+  onToggleConnection?: (reservationId: number) => void
+  externalTransportDetail?: Reservation | null
+  onExternalTransportDetailHandled?: () => void
   onAddReservation: () => void
   onNavigateToFiles?: () => void
   onAddPlace?: () => void
@@ -179,6 +184,11 @@ interface DayPlanSidebarProps {
   canUndo?: boolean
   lastActionLabel?: string | null
   onUndo?: () => void
+  onRouteRefresh?: () => void
+  onAddTransport?: (dayId: number) => void
+  onEditTransport?: (reservation: Reservation) => void
+  onEditReservation?: (reservation: Reservation) => void
+  onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
 }
 
 const DayPlanSidebar = React.memo(function DayPlanSidebar({
@@ -189,6 +199,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   onReorder, onUpdateDayTitle, onRouteCalculated,
   onAssignToDay, onRemoveAssignment, onEditPlace, onDeletePlace,
   reservations = [],
+  visibleConnectionIds = [],
+  onToggleConnection,
+  externalTransportDetail,
+  onExternalTransportDetailHandled,
   onAddReservation,
   onAddPlace,
   onAddPlaceToDay,
@@ -198,6 +212,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   canUndo = false,
   lastActionLabel = null,
   onUndo,
+  onRouteRefresh,
+  onAddTransport,
+  onEditTransport,
+  onEditReservation,
+  onAddBookingToAssignment,
 }: DayPlanSidebarProps) {
   const toast = useToast()
   const { t, language, locale } = useTranslation()
@@ -227,13 +246,20 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   const [undoHover, setUndoHover] = useState(false)
   const [pdfHover, setPdfHover] = useState(false)
   const [icsHover, setIcsHover] = useState(false)
+  const [hoveredAssignmentId, setHoveredAssignmentId] = useState<number | null>(null)
   const [dropTargetKey, _setDropTargetKey] = useState(null)
   const dropTargetRef = useRef(null)
   const setDropTargetKey = (key) => { dropTargetRef.current = key; _setDropTargetKey(key) }
   const [dragOverDayId, setDragOverDayId] = useState(null)
-  const [hoveredId, setHoveredId] = useState(null)
   const [transportDetail, setTransportDetail] = useState(null)
   const [transportPosVersion, setTransportPosVersion] = useState(0)
+
+  useEffect(() => {
+    if (externalTransportDetail) {
+      setTransportDetail(externalTransportDetail)
+      onExternalTransportDetailHandled?.()
+    }
+  }, [externalTransportDetail, onExternalTransportDetailHandled])
   const [timeConfirm, setTimeConfirm] = useState<{
     dayId: number; fromId: number; time: string;
     // For drag & drop reorder
@@ -244,25 +270,38 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   const inputRef = useRef(null)
   const dragDataRef = useRef(null)
   const initedTransportIds = useRef(new Set<number>()) // Speichert Drag-Daten als Backup (dataTransfer geht bei Re-Render verloren)
+  // Remember which assignment we last auto-scrolled into view so we don't
+  // keep yanking the user back whenever they scroll away while the same
+  // place stays selected.
+  const lastAutoScrolledIdRef = useRef<number | null>(null)
+  useEffect(() => {
+    // Reset the scroll-lock whenever selection moves, so the next selected
+    // row triggers a fresh scroll-into-view on its ref.
+    if (!selectedAssignmentId && !selectedPlaceId) {
+      lastAutoScrolledIdRef.current = null
+    }
+  }, [selectedAssignmentId, selectedPlaceId])
 
   const currency = trip?.currency || 'EUR'
 
   // Drag-Daten aus dataTransfer, Ref oder window lesen (dataTransfer geht bei Re-Render verloren)
   const getDragData = (e) => {
     const dt = e?.dataTransfer
-    // Interner Drag hat Vorrang (Ref wird nur bei assignmentId/noteId gesetzt)
+    // Interner Drag hat Vorrang (Ref wird nur bei assignmentId/noteId/reservationId gesetzt)
     if (dragDataRef.current) {
       return {
         placeId: '',
         assignmentId: dragDataRef.current.assignmentId || '',
         noteId: dragDataRef.current.noteId || '',
+        reservationId: dragDataRef.current.reservationId || '',
         fromDayId: parseInt(dragDataRef.current.fromDayId) || 0,
+        phase: (dragDataRef.current.phase || 'single') as 'single' | 'start' | 'middle' | 'end',
       }
     }
     // Externer Drag (aus PlacesSidebar)
     const ext = window.__dragData || {}
     const placeId = dt?.getData('placeId') || ext.placeId || ''
-    return { placeId, assignmentId: '', noteId: '', fromDayId: 0 }
+    return { placeId, assignmentId: '', noteId: '', reservationId: '', fromDayId: 0, phase: 'single' as const }
   }
 
   // Only auto-expand genuinely new days (not on initial load from storage)
@@ -297,6 +336,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     return () => document.removeEventListener('dragend', cleanup)
   }, [])
 
+  // Initialize missing transport positions outside of render to avoid setState-during-render
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { days.forEach(day => initTransportPositions(day.id)) }, [days, reservations])
+
   const toggleDay = (dayId, e) => {
     e.stopPropagation()
     setExpandedDays(prev => {
@@ -309,26 +352,19 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
   const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
 
-  // Determine if a reservation's end_time represents a different date (multi-day)
-  const getEndDate = (r: Reservation) => {
-    const endStr = r.reservation_end_time || ''
-    return endStr.includes('T') ? endStr.split('T')[0] : null
-  }
-
-  // Get span phase: how a reservation relates to a specific day's date
-  const getSpanPhase = (r: Reservation, dayDate: string): 'single' | 'start' | 'middle' | 'end' => {
-    if (!r.reservation_time) return 'single'
-    const startDate = r.reservation_time.split('T')[0]
-    const endDate = getEndDate(r) || startDate
-    if (startDate === endDate) return 'single'
-    if (dayDate === startDate) return 'start'
-    if (dayDate === endDate) return 'end'
+  // Get span phase: how a reservation relates to a specific day (by id)
+  const getSpanPhase = (r: Reservation, dayId: number): 'single' | 'start' | 'middle' | 'end' => {
+    const startDayId = r.day_id
+    const endDayId = r.end_day_id ?? startDayId
+    if (!startDayId || startDayId === endDayId) return 'single'
+    if (dayId === startDayId) return 'start'
+    if (dayId === endDayId) return 'end'
     return 'middle'
   }
 
   // Get the appropriate display time for a reservation on a specific day
-  const getDisplayTimeForDay = (r: Reservation, dayDate: string): string | null => {
-    const phase = getSpanPhase(r, dayDate)
+  const getDisplayTimeForDay = (r: Reservation, dayId: number): string | null => {
+    const phase = getSpanPhase(r, dayId)
     if (phase === 'end') return r.reservation_end_time || null
     if (phase === 'middle') return null
     return r.reservation_time || null
@@ -342,36 +378,56 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     return t(`reservations.span.${phase === 'start' ? 'start' : phase === 'end' ? 'end' : 'ongoing'}`)
   }
 
+  const getDayOrder = (day: (typeof days)[number]) => (day as any).day_number ?? days.indexOf(day)
+
+  const computeMultiDayMove = (r: Reservation, targetDayId: number, phase: 'single' | 'start' | 'middle' | 'end') => {
+    const startId = r.day_id ?? targetDayId
+    const endId = r.end_day_id ?? startId
+    const order = (id: number) => { const d = days.find(x => x.id === id); return d ? getDayOrder(d) : 0 }
+    if (phase === 'single' || startId === endId) return { day_id: targetDayId, end_day_id: targetDayId }
+    if (phase === 'start') {
+      if (order(targetDayId) > order(endId)) return { day_id: targetDayId, end_day_id: targetDayId }
+      return { day_id: targetDayId, end_day_id: endId }
+    }
+    // phase === 'end'
+    if (order(targetDayId) < order(startId)) return { day_id: targetDayId, end_day_id: targetDayId }
+    return { day_id: startId, end_day_id: targetDayId }
+  }
+
   const getTransportForDay = (dayId: number) => {
-    const day = days.find(d => d.id === dayId)
-    if (!day?.date) return []
     const dayAssignmentIds = (assignments[String(dayId)] || []).map(a => a.id)
     return reservations.filter(r => {
-      if (!r.reservation_time || r.type === 'hotel') return false
+      if (r.type === 'hotel') return false
       if (r.assignment_id && dayAssignmentIds.includes(r.assignment_id)) return false
-      const startDate = r.reservation_time.split('T')[0]
-      const endDate = getEndDate(r)
 
-      if (endDate && endDate !== startDate) {
-        // Multi-day: show on any day in range (car middle handled elsewhere)
-        return day.date >= startDate && day.date <= endDate
-      } else {
-        // Single-day: show all non-hotel reservations that match this day's date
-        return startDate === day.date
+      const startDayId = r.day_id
+      const endDayId = r.end_day_id ?? startDayId
+
+      if (startDayId == null) return false
+
+      if (endDayId !== startDayId) {
+        const startDay = days.find(d => d.id === startDayId)
+        const endDay = days.find(d => d.id === endDayId)
+        const thisDay = days.find(d => d.id === dayId)
+        if (!startDay || !endDay || !thisDay) return false
+        return getDayOrder(thisDay) >= getDayOrder(startDay) && getDayOrder(thisDay) <= getDayOrder(endDay)
       }
+      return startDayId === dayId
     })
   }
 
   // Get car rentals that are in "active" (middle) phase for a day — shown in day header, not timeline
   const getActiveRentalsForDay = (dayId: number) => {
-    const day = days.find(d => d.id === dayId)
-    if (!day?.date) return []
     return reservations.filter(r => {
-      if (r.type !== 'car' || !r.reservation_time) return false
-      const startDate = r.reservation_time.split('T')[0]
-      const endDate = getEndDate(r)
-      if (!endDate || endDate === startDate) return false
-      return day.date > startDate && day.date < endDate
+      if (r.type !== 'car') return false
+      const startDayId = r.day_id
+      const endDayId = r.end_day_id
+      if (!startDayId || !endDayId || endDayId === startDayId) return false
+      const startDay = days.find(d => d.id === startDayId)
+      const endDay = days.find(d => d.id === endDayId)
+      const thisDay = days.find(d => d.id === dayId)
+      if (!startDay || !endDay || !thisDay) return false
+      return getDayOrder(thisDay) > getDayOrder(startDay) && getDayOrder(thisDay) < getDayOrder(endDay)
     })
   }
 
@@ -420,11 +476,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
       day_plan_position: computeTransportPosition(r, da) + idx * 0.01,
     }))
     // Mark as initialized immediately to prevent re-entry
-    for (const p of positions) {
-      initedTransportIds.current.add(p.id)
-      const res = reservations.find(x => x.id === p.id)
-      if (res) res.day_plan_position = p.day_plan_position
-    }
+    for (const p of positions) initedTransportIds.current.add(p.id)
+    // Update store so subscribers see the new positions
+    useTripStore.setState(state => ({
+      reservations: state.reservations.map(r => {
+        const p = positions.find(x => x.id === r.id)
+        if (!p) return r
+        return { ...r, day_plan_position: p.day_plan_position }
+      })
+    }))
     // Persist to server (fire and forget)
     reservationsApi.updatePositions(tripId, positions).catch(() => {})
   }
@@ -433,12 +493,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     const da = getDayAssignments(dayId)
     const dn = (dayNotes[String(dayId)] || []).slice().sort((a, b) => a.sort_order - b.sort_order)
     const transport = getTransportForDay(dayId)
-    const dayDate = days.find(d => d.id === dayId)?.date || ''
-
-    // Initialize positions for transports that don't have one yet
-    if (transport.some(r => r.day_plan_position == null)) {
-      initTransportPositions(dayId)
-    }
 
     // All places keep their order_index — untimed can be freely moved, timed auto-sort when time is set
     const baseItems = [
@@ -450,7 +504,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     const timedTransports = transport.map(r => ({
       type: 'transport' as const,
       data: r,
-      minutes: parseTimeToMinutes(getDisplayTimeForDay(r, dayDate)) ?? 0,
+      minutes: parseTimeToMinutes(getDisplayTimeForDay(r, dayId)) ?? 0,
     })).sort((a, b) => a.minutes - b.minutes)
 
     if (timedTransports.length === 0) return baseItems
@@ -592,23 +646,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     }
 
     try {
+      // Update transport positions in store FIRST so the useEffect triggered by
+      // onReorder's optimistic assignment update reads the correct positions.
+      if (transportUpdates.length) {
+        useTripStore.setState(state => ({
+          reservations: state.reservations.map(r => {
+            const tu = transportUpdates.find(u => u.id === r.id)
+            if (!tu) return r
+            const day_positions = { ...(r.day_positions || {}), [dayId]: tu.day_plan_position }
+            return { ...r, day_plan_position: tu.day_plan_position, day_positions }
+          })
+        }))
+        setTransportPosVersion(v => v + 1)
+      }
       if (assignmentIds.length) await onReorder(dayId, assignmentIds)
+      if (transportUpdates.length) {
+        onRouteRefresh?.()
+        await reservationsApi.updatePositions(tripId, transportUpdates, dayId)
+      }
       for (const n of noteUpdates) {
         await tripActions.updateDayNote(tripId, dayId, n.id, { sort_order: n.sort_order })
       }
-      if (transportUpdates.length) {
-        for (const tu of transportUpdates) {
-          const res = reservations.find(r => r.id === tu.id)
-          if (res) {
-            res.day_plan_position = tu.day_plan_position
-            // Update per-day position for multi-day reservations
-            if (!res.day_positions) res.day_positions = {}
-            res.day_positions[dayId] = tu.day_plan_position
-          }
-        }
-        setTransportPosVersion(v => v + 1)
-        await reservationsApi.updatePositions(tripId, transportUpdates, dayId)
-      }
       if (prevAssignmentIds.length) {
         const capturedDayId = dayId
         const capturedPrevIds = prevAssignmentIds
@@ -620,13 +678,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
   }
 
   const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false) => {
-    // Transport bookings themselves cannot be dragged
-    if (fromType === 'transport') {
-      toast.error(t('dayplan.cannotReorderTransport'))
-      setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
-      return
-    }
-
     const m = getMergedItems(dayId)
 
     // Check if a timed place is being moved → would it break chronological order?
@@ -839,7 +890,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
     e.preventDefault()
     e.stopPropagation()
     setDragOverDayId(null)
-    const { placeId, assignmentId, noteId, fromDayId } = getDragData(e)
+    const { placeId, assignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
+    if (fromReservationId && fromDayId !== dayId) {
+      const r = reservations.find(x => x.id === Number(fromReservationId))
+      if (r) { const update = computeMultiDayMove(r, dayId, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+      setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null; return
+    }
     if (placeId) {
       onAssignToDay?.(parseInt(placeId), dayId)
     } else if (assignmentId && fromDayId !== dayId) {
@@ -894,18 +950,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
-      {/* Reise-Titel */}
-      <div style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)', lineHeight: '1.3' }}>{trip?.title}</div>
-            {(trip?.start_date || trip?.end_date) && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 3 }}>
-                {[trip.start_date, trip.end_date].filter(Boolean).map(d => new Date(d + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })).join(' – ')}
-                {days.length > 0 && ` · ${days.length} ${t('dayplan.days')}`}
-              </div>
-            )}
-          </div>
+      {/* Toolbar */}
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
           <div style={{ position: 'relative', flexShrink: 0 }}>
             <button
               onClick={async () => {
@@ -987,11 +1034,57 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
               </div>
             )}
           </div>
+          {(() => {
+            const allExpanded = days.length > 0 && days.every(d => expandedDays.has(d.id))
+            const label = allExpanded ? t('dayplan.collapseAll') : t('dayplan.expandAll')
+            return (
+              <Tooltip label={label} placement="bottom">
+                <button
+                  onClick={() => {
+                    const next = allExpanded ? new Set() : new Set(days.map(d => d.id))
+                    setExpandedDays(next)
+                    try { sessionStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...next])) } catch {}
+                  }}
+                  aria-label={label}
+                  aria-pressed={allExpanded}
+                  style={{
+                    position: 'relative', flexShrink: 0,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    width: 30, height: 30, borderRadius: 8,
+                    border: '1px solid var(--border-primary)', background: 'none',
+                    color: 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
+                    transition: 'color 0.15s, border-color 0.15s, background 0.15s',
+                    overflow: 'hidden',
+                  }}
+                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
+                >
+                  <span style={{
+                    position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)',
+                    opacity: allExpanded ? 0 : 1,
+                    transform: allExpanded ? 'translateY(-8px) scale(0.6)' : 'translateY(0) scale(1)',
+                  }}>
+                    <ChevronsUpDown size={14} strokeWidth={2} />
+                  </span>
+                  <span style={{
+                    position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)',
+                    opacity: allExpanded ? 1 : 0,
+                    transform: allExpanded ? 'translateY(0) scale(1)' : 'translateY(8px) scale(0.6)',
+                  }}>
+                    <ChevronsDownUp size={14} strokeWidth={2} />
+                  </span>
+                </button>
+              </Tooltip>
+            )
+          })()}
           {onUndo && (
             <div style={{ position: 'relative', flexShrink: 0 }}>
               <button
                 onClick={onUndo}
                 disabled={!canUndo}
+                aria-label={t('undo.button')}
                 onMouseEnter={() => setUndoHover(true)}
                 onMouseLeave={() => setUndoHover(false)}
                 style={{
@@ -1023,7 +1116,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
       </div>
 
       {/* Tagesliste */}
-      <div className="scroll-container" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+      <div className={`scroll-container${draggingId ? '' : ' trek-stagger'}`} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
         {days.map((day, index) => {
           const isSelected = selectedDayId === day.id
           const isExpanded = expandedDays.has(day.id)
@@ -1041,14 +1134,14 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
               {/* Tages-Header — akzeptiert Drops aus der PlacesSidebar */}
               <div
                 onClick={() => { onSelectDay(day.id); if (onDayDetail) onDayDetail(day) }}
-                onDragOver={e => { e.preventDefault(); setDragOverDayId(day.id) }}
+                onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
                 onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDragOverDayId(null) }}
                 onDrop={e => handleDropOnDay(e, day.id)}
                 style={{
                   display: 'flex', alignItems: 'center', gap: 10,
                   padding: '11px 14px 11px 16px',
                   cursor: 'pointer',
-                  background: isDragTarget ? 'rgba(17,24,39,0.07)' : (isSelected ? 'var(--bg-tertiary)' : 'transparent'),
+                  background: isDragTarget ? 'rgba(17,24,39,0.07)' : (isSelected ? 'var(--bg-selected)' : 'transparent'),
                   transition: 'background 0.12s',
                   userSelect: 'none',
                   outline: isDragTarget ? '2px dashed rgba(17,24,39,0.25)' : 'none',
@@ -1097,6 +1190,29 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                       >
                         <Pencil size={15} strokeWidth={1.8} color="var(--text-secondary)" />
                       </button>}
+                      {canEditDays && onAddTransport && (
+                        <Tooltip label={t('transport.addTransport')} placement="top">
+                        <button
+                          onClick={e => { e.stopPropagation(); onAddTransport(day.id) }}
+                          aria-label={t('transport.addTransport')}
+                          style={{
+                            flexShrink: 0,
+                            background: 'none',
+                            border: 'none',
+                            padding: '4px',
+                            cursor: 'pointer',
+                            opacity: 0.45,
+                            display: 'flex',
+                            alignItems: 'center',
+                            borderRadius: 4,
+                          }}
+                          onMouseEnter={e => { (e.currentTarget as HTMLElement).style.opacity = '1' }}
+                          onMouseLeave={e => { (e.currentTarget as HTMLElement).style.opacity = '0.45' }}
+                        >
+                          <Plus size={15} strokeWidth={1.8} color="var(--text-secondary)" />
+                        </button>
+                        </Tooltip>
+                      )}
                       {(() => {
                         const dayAccs = accommodations.filter(a => day.id >= a.start_day_id && day.id <= a.end_day_id)
                           // Sort: check-out first, then ongoing stays, then check-in last
@@ -1119,9 +1235,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           const border = isCheckOut && !isCheckIn ? 'rgba(239,68,68,0.2)' : isCheckIn ? 'rgba(34,197,94,0.2)' : 'var(--border-primary)'
                           const iconColor = isCheckOut && !isCheckIn ? '#ef4444' : isCheckIn ? '#22c55e' : 'var(--text-muted)'
                           return (
-                            <span key={acc.id} onClick={e => { e.stopPropagation(); onPlaceClick(acc.place_id) }} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 7px', borderRadius: 5, background: bg, border: `1px solid ${border}`, flexShrink: 1, minWidth: 0, maxWidth: '40%', cursor: 'pointer' }}>
+                            <span key={acc.id} onClick={e => { e.stopPropagation(); if ((acc as any).place_id) onPlaceClick((acc as any).place_id) }} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 7px', borderRadius: 5, background: bg, border: `1px solid ${border}`, flexShrink: 1, minWidth: 0, maxWidth: '40%', cursor: (acc as any).place_id ? 'pointer' : 'default' }}>
                               <Hotel size={8} style={{ color: iconColor, flexShrink: 0 }} />
-                              <span style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_name}</span>
+                              <span style={{ fontSize: 9, color: 'var(--text-muted)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{(acc as any).place_name || (acc as any).reservation_title}</span>
                             </span>
                           )
                         })
@@ -1151,15 +1267,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                   </div>
                 </div>
 
-                {canEditDays && <button
+                {canEditDays && <Tooltip label={t('dayplan.addNote')} placement="top"><button
                   onClick={e => openAddNote(day.id, e)}
-                  title={t('dayplan.addNote')}
+                  aria-label={t('dayplan.addNote')}
                   style={{ flexShrink: 0, background: 'none', border: 'none', padding: 6, cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}
                   onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
                   onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}
                 >
                   <FileText size={16} strokeWidth={2} />
-                </button>}
+                </button></Tooltip>}
                 <button
                   onClick={e => toggleDay(day.id, e)}
                   style={{ flexShrink: 0, background: 'none', border: 'none', padding: 6, cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'var(--text-faint)' }}
@@ -1176,7 +1292,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                   onDrop={e => {
                     e.preventDefault()
                     e.stopPropagation()
-                    const { placeId, assignmentId, noteId, fromDayId } = getDragData(e)
+                    const { placeId, assignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                     // Drop on transport card (detected via dropTargetRef for sync accuracy)
                     if (dropTargetRef.current?.startsWith('transport-')) {
                       const isAfter = dropTargetRef.current.startsWith('transport-after-')
@@ -1185,6 +1301,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
+                      } else if (fromReservationId && fromDayId !== day.id) {
+                        const r = reservations.find(x => x.id === Number(fromReservationId))
+                        if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                      } else if (fromReservationId) {
+                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter)
                       } else if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                       } else if (assignmentId) {
@@ -1198,6 +1319,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                       return
                     }
 
+                    if (fromReservationId && fromDayId !== day.id) {
+                      const r = reservations.find(x => x.id === Number(fromReservationId))
+                      if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                      setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; return
+                    }
                     if (!assignmentId && !noteId && !placeId) { dragDataRef.current = null; window.__dragData = null; return }
                     if (placeId) {
                       onAssignToDay?.(parseInt(placeId), day.id)
@@ -1222,7 +1348,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                 >
                   {merged.length === 0 && !dayNoteUi ? (
                     <div
-                      onDragOver={e => { e.preventDefault(); setDragOverDayId(day.id) }}
+                      onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
                       onDrop={e => handleDropOnDay(e, day.id)}
                       style={{ padding: '16px', textAlign: 'center', borderRadius: 8,
                         background: dragOverDayId === day.id ? 'rgba(17,24,39,0.05)' : 'transparent',
@@ -1244,7 +1370,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         const cat = categories.find(c => c.id === place.category_id)
                         const isPlaceSelected = selectedAssignmentId ? assignment.id === selectedAssignmentId : place.id === selectedPlaceId
                         const isDraggingThis = draggingId === assignment.id
-                        const isHovered = hoveredId === assignment.id
                         const placeIdx = placeItems.findIndex(i => i.data.id === assignment.id)
 
                         const arrowMove = (direction: 'up' | 'down') => {
@@ -1283,7 +1408,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
                         return (
                           <React.Fragment key={`place-${assignment.id}`}>
-                            {showDropLine && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                           <div
                             draggable={canEditDays}
                             onDragStart={e => {
@@ -1297,11 +1421,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                             onDragOver={e => { e.preventDefault(); e.stopPropagation(); setDragOverDayId(null); if (dropTargetKey !== `place-${assignment.id}`) setDropTargetKey(`place-${assignment.id}`) }}
                             onDrop={e => {
                               e.preventDefault(); e.stopPropagation()
-                              const { placeId, assignmentId: fromAssignmentId, noteId, fromDayId } = getDragData(e)
+                              const { placeId, assignmentId: fromAssignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                               if (placeId) {
                                 const pos = placeItems.findIndex(i => i.data.id === assignment.id)
                                 onAssignToDay?.(parseInt(placeId), day.id, pos >= 0 ? pos : undefined)
                                 setDropTargetKey(null); window.__dragData = null
+                              } else if (fromReservationId && fromDayId !== day.id) {
+                                const r = reservations.find(x => x.id === Number(fromReservationId))
+                                if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                                setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
+                              } else if (fromReservationId) {
+                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'place', assignment.id)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 const toIdx = getDayAssignments(day.id).findIndex(a => a.id === assignment.id)
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id, toIdx).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
@@ -1318,6 +1448,21 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 handleMergedDrop(day.id, 'note', Number(noteId), 'place', assignment.id)
                               }
                             }}
+                            ref={el => {
+                              // Auto-scroll the selected row into view — but only on
+                              // the transition "just became selected". Once we've
+                              // scrolled for this assignment id, we won't scroll
+                              // again until selection actually moves somewhere else.
+                              if (el && isPlaceSelected && lastAutoScrolledIdRef.current !== assignment.id) {
+                                const rect = el.getBoundingClientRect()
+                                const nearTop = rect.top < 80
+                                const nearBottom = rect.bottom > window.innerHeight - 80
+                                if (nearTop || nearBottom) {
+                                  el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                                }
+                                lastAutoScrolledIdRef.current = assignment.id
+                              }
+                            }}
                             onDragEnd={() => { setDraggingId(null); setDragOverDayId(null); setDropTargetKey(null); dragDataRef.current = null }}
                             onClick={() => { onPlaceClick(isPlaceSelected ? null : place.id, isPlaceSelected ? null : assignment.id); if (!isPlaceSelected) onSelectDay(day.id, true) }}
                             onContextMenu={e => ctxMenu.open(e, [
@@ -1328,23 +1473,36 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               { divider: true },
                               canEditDays && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
                             ])}
-                            onMouseEnter={() => setHoveredId(assignment.id)}
-                            onMouseLeave={() => setHoveredId(null)}
+                            onMouseEnter={e => {
+                              if (!isPlaceSelected && !lockedIds.has(assignment.id))
+                                e.currentTarget.style.background = 'var(--bg-hover)'
+                              const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                              if (grip) grip.style.opacity = '1'
+                              setHoveredAssignmentId(assignment.id)
+                            }}
+                            onMouseLeave={e => {
+                              if (!isPlaceSelected && !lockedIds.has(assignment.id))
+                                e.currentTarget.style.background = 'transparent'
+                              const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                              if (grip) grip.style.opacity = '0.3'
+                              setHoveredAssignmentId(null)
+                            }}
                             style={{
                               display: 'flex', alignItems: 'center', gap: 8,
                               padding: '7px 8px 7px 10px',
                               cursor: 'pointer',
                               background: lockedIds.has(assignment.id)
                                 ? 'rgba(220,38,38,0.08)'
-                                : isPlaceSelected ? 'var(--bg-hover)' : (isHovered ? 'var(--bg-hover)' : 'transparent'),
+                                : isPlaceSelected ? 'var(--bg-selected)' : 'transparent',
                               borderLeft: lockedIds.has(assignment.id)
                                 ? '3px solid #dc2626'
                                 : '3px solid transparent',
+                              borderTop: showDropLine ? '2px solid var(--text-primary)' : undefined,
                               transition: 'background 0.15s, border-color 0.15s',
                               opacity: isDraggingThis ? 0.4 : 1,
                             }}
                           >
-                            {canEditDays && <div style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: isHovered ? 1 : 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                            {canEditDays && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                               <GripVertical size={13} strokeWidth={1.8} />
                             </div>}
                             <div
@@ -1405,26 +1563,74 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 const res = reservations.find(r => r.assignment_id === assignment.id)
                                 if (!res) return null
                                 const confirmed = res.status === 'confirmed'
+                                const hasEndpoints = onToggleConnection && (res.endpoints || []).length >= 2
+                                const active = hasEndpoints ? visibleConnectionIds.includes(res.id) : false
                                 return (
-                                  <div style={{ marginTop: 3, display: 'inline-flex', alignItems: 'center', gap: 3, padding: '1px 6px', borderRadius: 5, fontSize: 9, fontWeight: 600,
-                                    background: confirmed ? 'rgba(22,163,74,0.1)' : 'rgba(217,119,6,0.1)',
-                                    color: confirmed ? '#16a34a' : '#d97706',
-                                  }}>
-                                    {(() => { const RI = RES_ICONS[res.type] || Ticket; return <RI size={8} /> })()}
-                                    <span className="hidden sm:inline">{confirmed ? t('planner.resConfirmed') : t('planner.resPending')}</span>
-                                    {res.reservation_time?.includes('T') && (
-                                      <span style={{ fontWeight: 400 }}>
-                                        {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
-                                        {res.reservation_end_time && ` – ${res.reservation_end_time}`}
-                                      </span>
+                                  <div style={{ marginTop: 3, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '1px 6px', borderRadius: 5, fontSize: 9, fontWeight: 600,
+                                      background: confirmed ? 'rgba(22,163,74,0.1)' : 'rgba(217,119,6,0.1)',
+                                      color: confirmed ? '#16a34a' : '#d97706',
+                                    }}>
+                                      {(() => { const RI = RES_ICONS[res.type] || Ticket; return <RI size={8} /> })()}
+                                      <span className="hidden sm:inline">{confirmed ? t('planner.resConfirmed') : t('planner.resPending')}</span>
+                                      {res.reservation_time?.includes('T') && (
+                                        <span style={{ fontWeight: 400 }}>
+                                          {new Date(res.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: timeFormat === '12h' })}
+                                          {res.reservation_end_time && ` – ${res.reservation_end_time}`}
+                                        </span>
+                                      )}
+                                      {(() => {
+                                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
+                                        if (!meta) return null
+                                        if (meta.airline && meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.airline} {meta.flight_number}</span>
+                                        if (meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.flight_number}</span>
+                                        if (meta.train_number) return <span style={{ fontWeight: 400 }}>{meta.train_number}</span>
+                                        return null
+                                      })()}
+                                    </div>
+                                    {hasEndpoints && (
+                                      <button
+                                        type="button"
+                                        onClick={e => { e.stopPropagation(); onToggleConnection!(res.id) }}
+                                        title={t(active ? 'map.hideConnections' : 'map.showConnections')}
+                                        style={{
+                                          flexShrink: 0, appearance: 'none',
+                                          width: 20, height: 20, borderRadius: 4,
+                                          display: 'grid', placeItems: 'center', cursor: 'pointer',
+                                          border: 'none',
+                                          background: active ? '#3b82f6' : 'transparent',
+                                          color: active ? '#fff' : 'var(--text-faint)',
+                                          transition: 'color 120ms cubic-bezier(0.23,1,0.32,1), background 120ms cubic-bezier(0.23,1,0.32,1)',
+                                        }}
+                                        onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--text-primary)' }}
+                                        onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--text-faint)' }}
+                                      >
+                                        <RouteIcon size={11} />
+                                      </button>
                                     )}
-                                    {(() => {
-                                      const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                                      if (!meta) return null
-                                      if (meta.airline && meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.airline} {meta.flight_number}</span>
-                                      if (meta.flight_number) return <span style={{ fontWeight: 400 }}>{meta.flight_number}</span>
-                                      if (meta.train_number) return <span style={{ fontWeight: 400 }}>{meta.train_number}</span>
-                                      return null
+                                    {canEditDays && (() => {
+                                      const isTransport = ['flight','train','car','cruise','bus'].includes(res.type)
+                                      const handler = isTransport ? onEditTransport : onEditReservation
+                                      if (!handler) return null
+                                      return (
+                                        <button
+                                          type="button"
+                                          onClick={e => { e.stopPropagation(); handler(res) }}
+                                          title={t('common.edit')}
+                                          style={{
+                                            flexShrink: 0, appearance: 'none',
+                                            width: 20, height: 20, borderRadius: 4,
+                                            display: 'grid', placeItems: 'center', cursor: 'pointer',
+                                            border: 'none', background: 'transparent',
+                                            color: 'var(--text-faint)',
+                                            transition: 'color 120ms cubic-bezier(0.23,1,0.32,1), background 120ms cubic-bezier(0.23,1,0.32,1)',
+                                          }}
+                                          onMouseEnter={e => { e.currentTarget.style.color = 'var(--text-primary)' }}
+                                          onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-faint)' }}
+                                        >
+                                          <Pencil size={11} />
+                                        </button>
+                                      )
                                     })()}
                                   </div>
                                 )
@@ -1447,7 +1653,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 </div>
                               )}
                             </div>
-                            {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, opacity: isHovered ? 1 : undefined, transition: 'opacity 0.15s' }}>
+                            {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
                               <button onClick={moveUp} disabled={idx === 0} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: idx === 0 ? 'default' : 'pointer', color: idx === 0 ? 'var(--border-primary)' : 'var(--text-faint)', display: 'flex', lineHeight: 1 }}>
                                 <ChevronUp size={12} strokeWidth={2} />
                               </button>
@@ -1455,6 +1661,32 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 <ChevronDown size={12} strokeWidth={2} />
                               </button>
                             </div>}
+                            {canEditDays && onAddBookingToAssignment && hoveredAssignmentId === assignment.id && (
+                              <button
+                                onClick={e => {
+                                  e.stopPropagation()
+                                  onAddBookingToAssignment(day.id, assignment.id)
+                                }}
+                                title={t('reservations.addBooking')}
+                                style={{
+                                  flexShrink: 0,
+                                  background: 'none',
+                                  border: '1px solid var(--border-primary)',
+                                  borderRadius: 5,
+                                  padding: '2px 6px',
+                                  cursor: 'pointer',
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: 3,
+                                  fontSize: 10,
+                                  fontWeight: 500,
+                                  color: 'var(--text-muted)',
+                                  fontFamily: 'inherit',
+                                }}
+                              >
+                                <Plus size={11} strokeWidth={2} />
+                              </button>
+                            )}
                           </div>
                           </React.Fragment>
                         )
@@ -1463,7 +1695,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                       // Transport booking (flight, train, bus, car, cruise)
                       if (item.type === 'transport') {
                         const res = item.data
-                        const spanPhase = getSpanPhase(res, day.date)
+                        const spanPhase = getSpanPhase(res, day.id)
 
                         // Car "active" (middle) days are shown in the day header, skip here
                         if (res.type === 'car' && spanPhase === 'middle') return null
@@ -1471,7 +1703,6 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                         const TransportIcon = RES_ICONS[res.type] || Ticket
                         const color = '#3b82f6'
                         const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                        const isTransportHovered = hoveredId === `transport-${res.id}`
 
                         // Subtitle aus Metadaten zusammensetzen
                         let subtitle = ''
@@ -1486,13 +1717,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
 
                         // Multi-day span phase
                         const spanLabel = getSpanLabel(res, spanPhase)
-                        const displayTime = getDisplayTimeForDay(res, day.date)
+                        const displayTime = getDisplayTimeForDay(res, day.id)
 
                         return (
                           <React.Fragment key={`transport-${res.id}-${day.id}`}>
-                          {showDropLine && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                           <div
-                            onClick={() => setTransportDetail(res)}
+                            onClick={() => canEditDays && onEditTransport?.(res)}
                             onDragOver={e => {
                               e.preventDefault(); e.stopPropagation()
                               const rect = e.currentTarget.getBoundingClientRect()
@@ -1500,13 +1730,26 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               const key = inBottom ? `transport-after-${res.id}-${day.id}` : `transport-${res.id}-${day.id}`
                               if (dropTargetRef.current !== key) setDropTargetKey(key)
                             }}
+                            draggable={canEditDays && spanPhase !== 'middle'}
+                            onDragStart={e => {
+                              if (!canEditDays || spanPhase === 'middle') { e.preventDefault(); return }
+                              e.dataTransfer.effectAllowed = 'move'
+                              dragDataRef.current = { reservationId: String(res.id), fromDayId: String(day.id), phase: spanPhase }
+                              setDraggingId(res.id)
+                            }}
+                            onDragEnd={() => { setDraggingId(null); setDragOverDayId(null); setDropTargetKey(null); dragDataRef.current = null }}
                             onDrop={e => {
                               e.preventDefault(); e.stopPropagation()
                               const rect = e.currentTarget.getBoundingClientRect()
                               const insertAfter = e.clientY > rect.top + rect.height / 2
-                              const { placeId, assignmentId: fromAssignmentId, noteId, fromDayId } = getDragData(e)
+                              const { placeId, assignmentId: fromAssignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                               if (placeId) {
                                 onAssignToDay?.(parseInt(placeId), day.id)
+                              } else if (fromReservationId && fromDayId !== day.id) {
+                                const r2 = reservations.find(x => x.id === Number(fromReservationId))
+                                if (r2) { const update = computeMultiDayMove(r2, day.id, phase); tripActions.updateReservation(tripId, r2.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                              } else if (fromReservationId) {
+                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (fromAssignmentId) {
@@ -1518,20 +1761,27 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                             }}
-                            onMouseEnter={() => setHoveredId(`transport-${res.id}`)}
-                            onMouseLeave={() => setHoveredId(null)}
+                            onMouseEnter={e => { e.currentTarget.style.background = `${color}12` }}
+                            onMouseLeave={e => { e.currentTarget.style.background = `${color}08` }}
                             style={{
                               display: 'flex', alignItems: 'center', gap: 8,
                               padding: '7px 8px 7px 10px',
                               margin: '1px 8px',
                               borderRadius: 6,
                               border: `1px solid ${color}33`,
-                              background: isTransportHovered ? `${color}12` : `${color}08`,
-                              cursor: 'pointer', userSelect: 'none',
+                              borderTop: showDropLine ? '2px solid var(--text-primary)' : undefined,
+                              borderBottom: showDropLineAfter ? '2px solid var(--text-primary)' : undefined,
+                              background: `${color}08`,
+                              cursor: canEditDays && onEditTransport ? 'pointer' : 'default', userSelect: 'none',
                               transition: 'background 0.1s',
-                              opacity: spanPhase === 'middle' ? 0.65 : 1,
+                              opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
+                            {canEditDays && spanPhase !== 'middle' && (
+                              <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                                <GripVertical size={13} strokeWidth={1.8} />
+                              </div>
+                            )}
                             <div style={{
                               width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                               borderRadius: '50%', background: `${color}18`,
@@ -1570,20 +1820,40 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                                 </div>
                               )}
                             </div>
+                            {onToggleConnection && (res.endpoints || []).length >= 2 && (() => {
+                              const active = visibleConnectionIds.includes(res.id)
+                              return (
+                                <button
+                                  type="button"
+                                  onClick={e => { e.stopPropagation(); onToggleConnection(res.id) }}
+                                  title={t(active ? 'map.hideConnections' : 'map.showConnections')}
+                                  style={{
+                                    flexShrink: 0, appearance: 'none',
+                                    width: 26, height: 26, borderRadius: 6,
+                                    display: 'grid', placeItems: 'center', cursor: 'pointer',
+                                    border: 'none',
+                                    background: active ? color : 'transparent',
+                                    color: active ? '#fff' : 'var(--text-faint)',
+                                    transition: 'color 120ms cubic-bezier(0.23,1,0.32,1), background 120ms cubic-bezier(0.23,1,0.32,1)',
+                                  }}
+                                  onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--text-primary)' }}
+                                  onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--text-faint)' }}
+                                >
+                                  <RouteIcon size={13} />
+                                </button>
+                              )
+                            })()}
                           </div>
-                          {showDropLineAfter && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                           </React.Fragment>
                         )
                       }
 
                       // Notizkarte
                       const note = item.data
-                      const isNoteHovered = hoveredId === `note-${note.id}`
                       const NoteIcon = getNoteIcon(note.icon)
                       const noteIdx = idx
                       return (
                         <React.Fragment key={`note-${note.id}`}>
-                          {showDropLine && <div style={{ height: 2, background: 'var(--text-primary)', borderRadius: 1, margin: '2px 8px' }} />}
                         <div
                           draggable={canEditDays}
                           onDragStart={e => { if (!canEditDays) { e.preventDefault(); return } e.dataTransfer.setData('noteId', String(note.id)); e.dataTransfer.setData('fromDayId', String(day.id)); e.dataTransfer.effectAllowed = 'move'; dragDataRef.current = { noteId: String(note.id), fromDayId: String(day.id) }; setDraggingId(`note-${note.id}`) }}
@@ -1591,8 +1861,14 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                           onDragOver={e => { e.preventDefault(); e.stopPropagation(); if (dropTargetKey !== `note-${note.id}`) setDropTargetKey(`note-${note.id}`) }}
                           onDrop={e => {
                             e.preventDefault(); e.stopPropagation()
-                            const { noteId: fromNoteId, assignmentId: fromAssignmentId, fromDayId } = getDragData(e)
-                            if (fromNoteId && fromDayId !== day.id) {
+                            const { noteId: fromNoteId, assignmentId: fromAssignmentId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
+                            if (fromReservationId && fromDayId !== day.id) {
+                              const r = reservations.find(x => x.id === Number(fromReservationId))
+                              if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                              setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
+                            } else if (fromReservationId) {
+                              handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'note', note.id)
+                            } else if (fromNoteId && fromDayId !== day.id) {
                               const tm = getMergedItems(day.id)
                               const toIdx = tm.findIndex(i => i.type === 'note' && i.data.id === note.id)
                               const so = toIdx <= 0 ? (tm[0]?.sortKey ?? 0) - 1 : (tm[toIdx - 1].sortKey + tm[toIdx].sortKey) / 2
@@ -1615,20 +1891,31 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                             { divider: true },
                             { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => deleteNote(day.id, note.id) },
                           ]) : undefined}
-                          onMouseEnter={() => setHoveredId(`note-${note.id}`)}
-                          onMouseLeave={() => setHoveredId(null)}
+                          onMouseEnter={e => {
+                            const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                            if (grip) grip.style.opacity = '1'
+                            const editBtns = e.currentTarget.querySelector('.note-edit-buttons') as HTMLElement | null
+                            if (editBtns) editBtns.style.opacity = '1'
+                          }}
+                          onMouseLeave={e => {
+                            const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
+                            if (grip) grip.style.opacity = '0.3'
+                            const editBtns = e.currentTarget.querySelector('.note-edit-buttons') as HTMLElement | null
+                            if (editBtns) editBtns.style.opacity = '0'
+                          }}
                           style={{
                             display: 'flex', alignItems: 'center', gap: 8,
                             padding: '7px 8px 7px 2px',
                             margin: '1px 8px',
                             borderRadius: 6,
                             border: '1px solid var(--border-faint)',
-                            background: isNoteHovered ? 'var(--bg-hover)' : 'var(--bg-hover)',
+                            borderTop: showDropLine ? '2px solid var(--text-primary)' : undefined,
+                            background: 'var(--bg-hover)',
                             opacity: draggingId === `note-${note.id}` ? 0.4 : 1,
                             transition: 'background 0.1s', cursor: 'grab', userSelect: 'none',
                           }}
                         >
-                          {canEditDays && <div style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: isNoteHovered ? 1 : 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                          {canEditDays && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                             <GripVertical size={13} strokeWidth={1.8} />
                           </div>}
                           <div style={{ width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--bg-hover)', overflow: 'hidden' }}>
@@ -1642,11 +1929,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                               <div className="collab-note-md" style={{ fontSize: 10.5, fontWeight: 400, color: 'var(--text-faint)', lineHeight: '1.3', marginTop: 2, wordBreak: 'break-word' }}><Markdown remarkPlugins={[remarkGfm]}>{note.time}</Markdown></div>
                             )}
                           </div>
-                          {canEditDays && <div className="note-edit-buttons" style={{ display: 'flex', gap: 1, flexShrink: 0, opacity: isNoteHovered ? 1 : 0, transition: 'opacity 0.15s' }}>
+                          {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)} style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}><Pencil size={10} /></button>
                             <button onClick={e => deleteNote(day.id, note.id, e)} style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}><Trash2 size={10} /></button>
                           </div>}
-                          {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, opacity: isNoteHovered ? 1 : undefined, transition: 'opacity 0.15s' }}>
+                          {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} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === 0 ? 'default' : 'pointer', color: noteIdx === 0 ? 'var(--border-primary)' : 'var(--text-faint)', display: 'flex', lineHeight: 1 }}><ChevronUp size={12} strokeWidth={2} /></button>
                             <button onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'down') }} disabled={noteIdx === merged.length - 1} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === merged.length - 1 ? 'default' : 'pointer', color: noteIdx === merged.length - 1 ? 'var(--border-primary)' : 'var(--text-faint)', display: 'flex', lineHeight: 1 }}><ChevronDown size={12} strokeWidth={2} /></button>
                           </div>}
@@ -1661,12 +1948,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
                     onDragOver={e => { e.preventDefault(); e.stopPropagation(); if (dropTargetKey !== `end-${day.id}`) setDropTargetKey(`end-${day.id}`) }}
                     onDrop={e => {
                       e.preventDefault(); e.stopPropagation()
-                      const { placeId, assignmentId, noteId, fromDayId } = getDragData(e)
+                      const { placeId, assignmentId, noteId, reservationId: fromReservationId, fromDayId, phase } = getDragData(e)
                       // Neuer Ort von der Orte-Liste
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
                         setDropTargetKey(null); window.__dragData = null; return
                       }
+                      if (fromReservationId && fromDayId !== day.id) {
+                        const r = reservations.find(x => x.id === Number(fromReservationId))
+                        if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
+                        setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null; return
+                      }
                       if (!assignmentId && !noteId) { dragDataRef.current = null; window.__dragData = null; return }
                       if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))

client/src/components/Planner/FileImportModal.tsx

@@ -36,6 +36,8 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [summary, setSummary] = useState<PlacesImportSummary | null>(null)
+  const [gpxOpts, setGpxOpts] = useState({ waypoints: true, routes: true, tracks: true })
+  const [kmlOpts, setKmlOpts] = useState({ points: true, paths: true })
 
   const validateFile = (f: File): string | null => {
     const ext = f.name.toLowerCase().split('.').pop()
@@ -127,7 +129,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
 
     try {
       if (ext === 'gpx') {
-        const result = await placesApi.importGpx(tripId, file)
+        const result = await placesApi.importGpx(tripId, file, gpxOpts)
         await loadTrip(tripId)
         if (result.count === 0 && result.skipped > 0) {
           toast.warning(t('places.importAllSkipped'))
@@ -137,15 +139,13 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
         if (result.places?.length > 0) {
           const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
           pushUndo?.(t('undo.importGpx'), async () => {
-            for (const id of importedIds) {
-              try { await placesApi.delete(tripId, id) } catch {}
-            }
+            try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
             await loadTrip(tripId)
           })
         }
         handleClose()
       } else {
-        const result = await placesApi.importMapFile(tripId, file)
+        const result = await placesApi.importMapFile(tripId, file, kmlOpts)
         await loadTrip(tripId)
         setSummary(result.summary || null)
         if (result.count === 0 && (result.summary?.skippedCount ?? 0) > 0) {
@@ -159,9 +159,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
         if (result.places?.length > 0) {
           const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
           pushUndo?.(t('undo.importKeyholeMarkup'), async () => {
-            for (const id of importedIds) {
-              try { await placesApi.delete(tripId, id) } catch {}
-            }
+            try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
             await loadTrip(tripId)
           })
         }
@@ -177,7 +175,12 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
     }
   }
 
-  const canImport = !!file && !loading
+  const fileExt = file?.name.toLowerCase().split('.').pop() ?? ''
+  const isGpx = fileExt === 'gpx'
+  const isKml = fileExt === 'kml' || fileExt === 'kmz'
+  const gpxNoneSelected = isGpx && !gpxOpts.waypoints && !gpxOpts.routes && !gpxOpts.tracks
+  const kmlNoneSelected = isKml && !kmlOpts.points && !kmlOpts.paths
+  const canImport = !!file && !loading && !gpxNoneSelected && !kmlNoneSelected
 
   if (!isOpen) return null
 
@@ -242,6 +245,58 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
           )}
         </div>
 
+        {isGpx && (
+          <div style={{ marginBottom: 12 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              {t('places.gpxImportTypes')}
+            </div>
+            {(['waypoints', 'routes', 'tracks'] as const).map(key => (
+              <label key={key} onClick={() => setGpxOpts(prev => ({ ...prev, [key]: !prev[key] }))} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer' }}>
+                <div style={{
+                  width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                  border: gpxOpts[key] ? 'none' : '1.5px solid var(--border-primary)',
+                  background: gpxOpts[key] ? 'var(--accent)' : 'transparent',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {gpxOpts[key] && <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="1.5,5 4,7.5 8.5,2" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
+                </div>
+                <span style={{ fontSize: 12, color: 'var(--text-primary)', userSelect: 'none' }}>
+                  {t(key === 'waypoints' ? 'places.gpxImportWaypoints' : key === 'routes' ? 'places.gpxImportRoutes' : 'places.gpxImportTracks')}
+                </span>
+              </label>
+            ))}
+            {gpxNoneSelected && (
+              <div style={{ fontSize: 11, color: '#b45309', marginTop: 4 }}>{t('places.gpxImportNoneSelected')}</div>
+            )}
+          </div>
+        )}
+
+        {isKml && (
+          <div style={{ marginBottom: 12 }}>
+            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              {t('places.kmlImportTypes')}
+            </div>
+            {(['points', 'paths'] as const).map(key => (
+              <label key={key} onClick={() => setKmlOpts(prev => ({ ...prev, [key]: !prev[key] }))} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer' }}>
+                <div style={{
+                  width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                  border: kmlOpts[key] ? 'none' : '1.5px solid var(--border-primary)',
+                  background: kmlOpts[key] ? 'var(--accent)' : 'transparent',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {kmlOpts[key] && <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="1.5,5 4,7.5 8.5,2" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
+                </div>
+                <span style={{ fontSize: 12, color: 'var(--text-primary)', userSelect: 'none' }}>
+                  {t(key === 'points' ? 'places.kmlImportPoints' : 'places.kmlImportPaths')}
+                </span>
+              </label>
+            ))}
+            {kmlNoneSelected && (
+              <div style={{ fontSize: 11, color: '#b45309', marginTop: 4 }}>{t('places.kmlImportNoneSelected')}</div>
+            )}
+          </div>
+        )}
+
         {summary && (
           <div style={{
             border: '1px solid var(--border-primary)', borderRadius: 10,

client/src/components/Planner/LocationSelect.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from 'react'
+import { MapPin, X } from 'lucide-react'
+import { mapsApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+
+export interface LocationPoint {
+  name: string
+  lat: number
+  lng: number
+  address?: string | null
+}
+
+interface Props {
+  value: LocationPoint | null
+  onChange: (loc: LocationPoint | null) => void
+  placeholder?: string
+  style?: React.CSSProperties
+}
+
+export default function LocationSelect({ value, onChange, placeholder, style }: Props) {
+  const { t, locale } = useTranslation()
+  const [query, setQuery] = useState(value?.name || '')
+  const [open, setOpen] = useState(false)
+  const [results, setResults] = useState<any[]>([])
+  const [highlight, setHighlight] = useState(-1)
+  const [loading, setLoading] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    setQuery(value?.name || '')
+  }, [value])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    const trimmed = query.trim()
+    if (trimmed.length < 3 || (value && trimmed === value.name)) {
+      setResults([])
+      return
+    }
+    debounceRef.current = setTimeout(async () => {
+      setLoading(true)
+      try {
+        const data = await mapsApi.search(trimmed, locale)
+        setResults(data.places || [])
+        setHighlight(-1)
+      } catch {
+        setResults([])
+      } finally {
+        setLoading(false)
+      }
+    }, 320)
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
+  }, [query, value, locale])
+
+  const pick = (r: any) => {
+    const lat = Number(r.lat)
+    const lng = Number(r.lng)
+    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return
+    const loc: LocationPoint = { name: r.name || r.address || 'Location', lat, lng, address: r.address || null }
+    onChange(loc)
+    setQuery(loc.name)
+    setOpen(false)
+    setResults([])
+  }
+
+  const clear = () => {
+    onChange(null)
+    setQuery('')
+    setResults([])
+  }
+
+  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || results.length === 0) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
+    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
+    else if (e.key === 'Escape') setOpen(false)
+  }
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative', ...style }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
+        <MapPin size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+        <input
+          type="text"
+          value={query}
+          placeholder={placeholder ?? t('reservations.searchLocation')}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); if (value) onChange(null) }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={onKey}
+          style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text-primary)', fontSize: 13 }}
+        />
+        {value && (
+          <button type="button" onClick={clear} style={{ background: 'transparent', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }} aria-label="Clear">
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {open && (loading || results.length > 0) && (
+        <div style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
+          {loading && results.length === 0 && (
+            <div style={{ padding: 10, fontSize: 12, color: 'var(--text-faint)' }}>{t('common.loading')}</div>
+          )}
+          {results.map((r, i) => (
+            <button
+              key={`${r.osm_id || r.google_place_id || i}`}
+              type="button"
+              onClick={() => pick(r)}
+              onMouseEnter={() => setHighlight(i)}
+              style={{
+                display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%',
+                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
+                background: i === highlight ? 'var(--bg-hover)' : 'transparent',
+                color: 'var(--text-primary)', fontFamily: 'inherit',
+              }}
+            >
+              <MapPin size={12} style={{ color: 'var(--text-faint)', marginTop: 2, flexShrink: 0 }} />
+              <span style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name || r.address}</div>
+                {r.address && r.name !== r.address && (
+                  <div style={{ fontSize: 11, color: 'var(--text-faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.address}</div>
+                )}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/PlaceFormModal.tsx

@@ -360,6 +360,25 @@ export default function PlaceFormModal({
       onClose={onClose}
       title={place ? t('places.editPlace') : t('places.addPlace')}
       size="lg"
+      footer={
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSaving || hasTimeError}
+            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
+          >
+            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
     >
       <form onSubmit={handleSubmit} className="space-y-4" onPaste={handlePaste}>
         {/* Place Search */}
@@ -613,23 +632,6 @@ export default function PlaceFormModal({
           </div>
         )}
 
-        {/* Actions */}
-        <div className="flex justify-end gap-3 pt-2 border-t border-gray-100">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-50"
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            type="submit"
-            disabled={isSaving || hasTimeError}
-            className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
-          >
-            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
-          </button>
-        </div>
       </form>
     </Modal>
   )

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

@@ -195,7 +195,7 @@ describe('Filter tabs', () => {
     const assignments = { '1': [buildAssignment({ place: planned, day_id: 1 })] };
     render(<PlacesSidebar {...defaultProps} places={[planned, unplanned]} assignments={assignments} />);
     await user.click(screen.getByRole('button', { name: /Unplanned/i }));
-    await user.click(screen.getByRole('button', { name: /^All$/i }));
+    await user.click(screen.getByRole('button', { name: /^All/i }));
     expect(screen.getByText('Planned Place')).toBeInTheDocument();
     expect(screen.getByText('Unplanned Place')).toBeInTheDocument();
   });

client/src/components/Planner/PlacesSidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { useState, useMemo, useEffect, useRef } from 'react'
-import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye } from 'lucide-react'
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react'
+import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye, Route } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { useTranslation } from '../../i18n'
@@ -12,6 +12,8 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import type { Place, Category, Day, AssignmentsMap } from '../../types'
 import FileImportModal from './FileImportModal'
+import ConfirmDialog from '../shared/ConfirmDialog'
+import Tooltip from '../shared/Tooltip'
 
 interface PlacesSidebarProps {
   tripId: number
@@ -25,6 +27,8 @@ interface PlacesSidebarProps {
   onAssignToDay: (placeId: number, dayId: number) => void
   onEditPlace: (place: Place) => void
   onDeletePlace: (placeId: number) => void
+  onBulkDeletePlaces?: (ids: number[]) => void
+  onBulkDeleteConfirm?: (ids: number[]) => void
   days: Day[]
   isMobile: boolean
   onCategoryFilterChange?: (categoryIds: Set<string>) => void
@@ -32,9 +36,115 @@ interface PlacesSidebarProps {
   pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
 }
 
+interface MemoPlaceRowProps {
+  place: Place
+  category: Category | undefined
+  isSelected: boolean
+  isPlanned: boolean
+  inDay: boolean
+  isChecked: boolean
+  selectMode: boolean
+  selectedDayId: number | null
+  canEditPlaces: boolean
+  isMobile: boolean
+  t: (key: string, params?: Record<string, any>) => string
+  onPlaceClick: (id: number | null) => void
+  onContextMenu: (e: React.MouseEvent, place: Place) => void
+  onAssignToDay: (placeId: number, dayId?: number) => void
+  toggleSelected: (id: number) => void
+  setDayPickerPlace: (place: any) => void
+}
+
+const MemoPlaceRow = React.memo(function MemoPlaceRow({
+  place, category: cat, isSelected, isPlanned, inDay, isChecked,
+  selectMode, selectedDayId, canEditPlaces, isMobile, t,
+  onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace,
+}: MemoPlaceRowProps) {
+  const hasGeometry = Boolean(place.route_geometry)
+  return (
+    <div
+      key={place.id}
+      draggable={!selectMode}
+      onDragStart={e => {
+        e.dataTransfer.setData('placeId', String(place.id))
+        e.dataTransfer.effectAllowed = 'copy'
+        window.__dragData = { placeId: String(place.id) }
+      }}
+      onClick={() => {
+        if (selectMode) {
+          toggleSelected(place.id)
+        } else if (isMobile) {
+          setDayPickerPlace(place)
+        } else {
+          onPlaceClick(isSelected ? null : place.id)
+        }
+      }}
+      onContextMenu={selectMode ? undefined : e => onContextMenu(e, place)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 10,
+        padding: '9px 14px 9px 16px',
+        cursor: selectMode ? 'pointer' : 'grab',
+        background: isChecked ? 'color-mix(in srgb, var(--accent) 8%, transparent)' : isSelected ? 'var(--border-faint)' : 'transparent',
+        borderBottom: '1px solid var(--border-faint)',
+        transition: 'background 0.1s',
+        contentVisibility: 'auto',
+        containIntrinsicSize: '0 52px',
+      }}
+      onMouseEnter={e => { if (!isSelected && !isChecked) e.currentTarget.style.background = 'var(--bg-hover)' }}
+      onMouseLeave={e => { if (!isSelected && !isChecked) e.currentTarget.style.background = 'transparent' }}
+    >
+      {selectMode && (
+        <div style={{
+          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+          border: isChecked ? 'none' : '1.5px solid var(--border-primary)',
+          background: isChecked ? 'var(--accent)' : 'transparent',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          {isChecked && <Check size={10} strokeWidth={3} color="white" />}
+        </div>
+      )}
+      <PlaceAvatar place={place} category={cat} size={34} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
+          {hasGeometry && <Route size={11} strokeWidth={2} color="var(--text-faint)" style={{ flexShrink: 0 }} title="Track / Route" />}
+          {cat && (() => {
+            const CatIcon = getCategoryIcon(cat.icon)
+            return <CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} style={{ flexShrink: 0 }} title={cat.name} />
+          })()}
+          <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+            {place.name}
+          </span>
+        </div>
+        {(place.description || place.address || cat?.name) && (
+          <div style={{ marginTop: 2 }}>
+            <span style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', lineHeight: 1.2 }}>
+              {place.description || place.address || cat?.name}
+            </span>
+          </div>
+        )}
+      </div>
+      <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
+        {!selectMode && !inDay && selectedDayId && (
+          <button
+            onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              width: 20, height: 20, borderRadius: 6,
+              background: 'var(--bg-hover)', border: 'none', cursor: 'pointer',
+              color: 'var(--text-faint)', padding: 0, transition: 'background 0.15s, color 0.15s',
+            }}
+            onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
+            onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
+          ><Plus size={12} strokeWidth={2.5} /></button>
+        )}
+      </div>
+    </div>
+  )
+})
+
 const PlacesSidebar = React.memo(function PlacesSidebar({
   tripId, places, categories, assignments, selectedDayId, selectedPlaceId,
-  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, days, isMobile, onCategoryFilterChange, onPlacesFilterChange, pushUndo,
+  onPlaceClick, onAddPlace, onAssignToDay, onEditPlace, onDeletePlace, onBulkDeletePlaces, onBulkDeleteConfirm, days, isMobile, onCategoryFilterChange, onPlacesFilterChange, pushUndo,
 }: PlacesSidebarProps) {
   const { t } = useTranslation()
   const toast = useToast()
@@ -110,9 +220,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
       if (result.places?.length > 0) {
         const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
         pushUndo?.(t(provider === 'google' ? 'undo.importGoogleList' : 'undo.importNaverList'), async () => {
-          for (const id of importedIds) {
-            try { await placesApi.delete(tripId, id) } catch {}
-          }
+          try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
           await loadTrip(tripId)
         })
       }
@@ -126,6 +234,28 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState('all')
   const [categoryFilters, setCategoryFiltersLocal] = useState<Set<string>>(new Set())
+  const [selectMode, setSelectMode] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
+  const [pendingDeleteIds, setPendingDeleteIds] = useState<number[] | null>(null)
+
+  const exitSelectMode = () => { setSelectMode(false); setSelectedIds(new Set()) }
+
+  // Auto-exit when all selected places have been removed from the store (e.g. after bulk delete)
+  useEffect(() => {
+    if (!selectMode || selectedIds.size === 0) return
+    const placeIdSet = new Set(places.map(p => p.id))
+    if ([...selectedIds].every(id => !placeIdSet.has(id))) {
+      setSelectMode(false)
+      setSelectedIds(new Set())
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [places])
+
+  const toggleSelected = useCallback((id: number) => setSelectedIds(prev => {
+    const next = new Set(prev)
+    if (next.has(id)) next.delete(id); else next.add(id)
+    return next
+  }), [])
 
   const toggleCategoryFilter = (catId: string) => {
     setCategoryFiltersLocal(prev => {
@@ -140,12 +270,16 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const [mobileShowDays, setMobileShowDays] = useState(false)
 
   // Alle geplanten Ort-IDs abrufen (einem Tag zugewiesen)
+  const hasTracks = useMemo(() => places.some(p => p.route_geometry), [places])
+  useEffect(() => { if (filter === 'tracks' && !hasTracks) setFilter('all') }, [hasTracks, filter])
+
   const plannedIds = useMemo(() => new Set(
     Object.values(assignments).flatMap(da => da.map(a => a.place?.id).filter(Boolean))
   ), [assignments])
 
   const filtered = useMemo(() => places.filter(p => {
     if (filter === 'unplanned' && plannedIds.has(p.id)) return false
+    if (filter === 'tracks' && !p.route_geometry) return false
     if (categoryFilters.size > 0) {
       if (p.category_id == null) {
         if (!categoryFilters.has('uncategorized')) return false
@@ -159,6 +293,26 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
   const isAssignedToSelectedDay = (placeId) =>
     selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)
 
+  const selectedDayIdRef = useRef<number | null>(selectedDayId)
+  useEffect(() => { selectedDayIdRef.current = selectedDayId }, [selectedDayId])
+
+  const inDaySet = useMemo(() => {
+    if (!selectedDayId) return new Set<number>()
+    return new Set<number>((assignments[String(selectedDayId)] || []).map((a: any) => a.place?.id).filter(Boolean))
+  }, [assignments, selectedDayId])
+
+  const openContextMenu = useCallback((e: React.MouseEvent, place: Place) => {
+    const selDayId = selectedDayIdRef.current
+    ctxMenu.open(e, [
+      canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
+      selDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, selDayId) },
+      place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
+      (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${(place as any).google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + (place as any).google_place_id : place.lat + ',' + place.lng}`, '_blank') },
+      { divider: true },
+      canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+    ])
+  }, [ctxMenu.open, canEditPlaces, t, onEditPlace, onAssignToDay, onDeletePlace])
+
   return (
     <div
       onDragEnter={handleSidebarDragEnter}
@@ -220,19 +374,65 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
             <MapPin size={11} strokeWidth={2} /> {t(hasMultipleListImportProviders ? 'places.importList' : 'places.importGoogleList')}
           </button>
         </div>
+        <div style={{ height: 1, background: 'var(--border-primary)', margin: '2px 0 10px' }} />
         </>}
 
         {/* Filter-Tabs */}
-        <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
-          {[{ id: 'all', label: t('places.all') }, { id: 'unplanned', label: t('places.unplanned') }].map(f => (
-            <button key={f.id} onClick={() => { setFilter(f.id); onPlacesFilterChange?.(f.id) }} style={{
-              padding: '4px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
-              fontSize: 11, fontWeight: 500, fontFamily: 'inherit',
-              background: filter === f.id ? 'var(--accent)' : 'var(--bg-tertiary)',
-              color: filter === f.id ? 'var(--accent-text)' : 'var(--text-muted)',
-            }}>{f.label}</button>
-          ))}
-        </div>
+        {(() => {
+          const baseFiltered = places.filter(p => {
+            if (categoryFilters.size > 0) {
+              if (p.category_id == null) {
+                if (!categoryFilters.has('uncategorized')) return false
+              } else if (!categoryFilters.has(String(p.category_id))) return false
+            }
+            if (search && !p.name.toLowerCase().includes(search.toLowerCase()) &&
+                !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false
+            return true
+          })
+          const counts = {
+            all: baseFiltered.length,
+            unplanned: baseFiltered.filter(p => !plannedIds.has(p.id)).length,
+            tracks: baseFiltered.filter(p => p.route_geometry).length,
+          }
+          const tabs = ([
+            { id: 'all', label: t('places.all') },
+            { id: 'unplanned', label: t('places.unplanned') },
+            hasTracks ? { id: 'tracks', label: t('places.filterTracks') } : null,
+          ] as const).filter(Boolean) as Array<{ id: 'all' | 'unplanned' | 'tracks'; label: string }>
+          return (
+            <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
+              {tabs.map(f => {
+                const active = filter === f.id
+                return (
+                  <button
+                    key={f.id}
+                    onClick={() => { setFilter(f.id); onPlacesFilterChange?.(f.id); setSelectedIds(new Set()) }}
+                    style={{
+                      appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
+                      display: 'inline-flex', alignItems: 'center', gap: 5,
+                      padding: '4px 9px', borderRadius: 99,
+                      fontSize: 11, fontWeight: 500, whiteSpace: 'nowrap',
+                      background: active ? 'var(--accent)' : 'var(--bg-card)',
+                      color: active ? 'var(--accent-text)' : 'var(--text-primary)',
+                      boxShadow: active ? 'none' : '0 1px 2px rgba(0,0,0,0.06)',
+                      transition: 'background 0.15s, color 0.15s, box-shadow 0.15s',
+                    }}
+                  >
+                    {f.label}
+                    <span style={{
+                      fontSize: 9, fontWeight: 600, lineHeight: 1,
+                      background: active ? 'color-mix(in srgb, var(--accent-text) 22%, transparent)' : 'var(--bg-tertiary)',
+                      color: active ? 'var(--accent-text)' : 'var(--text-faint)',
+                      padding: '1px 5px', borderRadius: 99, minWidth: 14, textAlign: 'center',
+                    }}>
+                      {counts[f.id]}
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          )
+        })()}
 
         {/* Suchfeld */}
         <div style={{ position: 'relative' }}>
@@ -240,7 +440,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
           <input
             type="text"
             value={search}
-            onChange={e => setSearch(e.target.value)}
+            onChange={e => { setSearch(e.target.value); if (selectMode) setSelectedIds(new Set()) }}
             placeholder={t('places.search')}
             style={{
               width: '100%', padding: '7px 30px 7px 30px', borderRadius: 10,
@@ -263,9 +463,9 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
               ? (categoryFilters.has('uncategorized') ? t('places.noCategory') : categories.find(c => categoryFilters.has(String(c.id)))?.name || t('places.allCategories'))
               : `${categoryFilters.size} ${t('places.categoriesSelected')}`
           return (
-            <div style={{ marginTop: 6, position: 'relative' }}>
+            <div style={{ marginTop: 6, position: 'relative', display: 'flex', gap: 6, alignItems: 'stretch' }}>
               <button onClick={() => setCatDropOpen(v => !v)} style={{
-                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                 padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-primary)',
                 background: 'var(--bg-card)', fontSize: 12, color: 'var(--text-primary)',
                 cursor: 'pointer', fontFamily: 'inherit',
@@ -273,6 +473,41 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
                 <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
                 <ChevronDown size={12} style={{ flexShrink: 0, color: 'var(--text-faint)', transform: catDropOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
               </button>
+              {canEditPlaces && (
+                <Tooltip label={t('common.select')} placement="bottom">
+                <button
+                  onClick={() => { setSelectMode(v => !v); setSelectedIds(new Set()) }}
+                  aria-label={t('common.select')}
+                  aria-pressed={selectMode}
+                  style={{
+                    position: 'relative', width: 30, flexShrink: 0, borderRadius: 8,
+                    border: `1px solid ${selectMode ? 'var(--accent)' : 'var(--border-primary)'}`,
+                    background: selectMode ? 'color-mix(in srgb, var(--accent) 14%, transparent)' : 'var(--bg-card)',
+                    color: selectMode ? 'var(--accent)' : 'var(--text-faint)',
+                    cursor: 'pointer', fontFamily: 'inherit', padding: 0,
+                    transition: 'background 0.18s, color 0.18s, border-color 0.18s',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <span style={{
+                    position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
+                    opacity: selectMode ? 0 : 1,
+                    transform: selectMode ? 'rotate(-90deg) scale(0.6)' : 'rotate(0) scale(1)',
+                  }}>
+                    <Check size={13} strokeWidth={2.4} />
+                  </span>
+                  <span style={{
+                    position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
+                    opacity: selectMode ? 1 : 0,
+                    transform: selectMode ? 'rotate(0) scale(1)' : 'rotate(90deg) scale(0.6)',
+                  }}>
+                    <X size={13} strokeWidth={2.4} />
+                  </span>
+                </button>
+                </Tooltip>
+              )}
               {catDropOpen && (
                 <div style={{
                   position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 50, marginTop: 4,
@@ -343,13 +578,65 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
         })()}
       </div>
 
-      {/* Anzahl */}
-      <div style={{ padding: '6px 16px', flexShrink: 0 }}>
-        <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}</span>
-      </div>
+      {/* Anzahl / Auswahl-Leiste */}
+      {selectMode ? (
+        <div style={{
+          margin: '6px 16px', padding: '5px 8px 5px 10px', borderRadius: 8,
+          background: 'color-mix(in srgb, var(--accent) 10%, transparent)',
+          display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0, fontSize: 11,
+        }}>
+          <span style={{ flex: 1, color: 'var(--accent)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {t('places.selectionCount', { count: selectedIds.size })}
+          </span>
+          <Tooltip label={selectedIds.size === filtered.length && filtered.length > 0 ? t('common.deselectAll') : t('common.selectAll')} placement="bottom">
+          <button
+            onClick={() => {
+              if (selectedIds.size === filtered.length) setSelectedIds(new Set())
+              else setSelectedIds(new Set(filtered.map(p => p.id)))
+            }}
+            aria-label={selectedIds.size === filtered.length && filtered.length > 0 ? t('common.deselectAll') : t('common.selectAll')}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              width: 24, height: 24, borderRadius: 6, border: 'none',
+              background: 'transparent', color: 'var(--text-muted)', cursor: 'pointer', padding: 0,
+            }}
+            onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+            onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
+          >
+            <Check size={13} strokeWidth={2.2} />
+          </button>
+          </Tooltip>
+          <Tooltip label={t('places.deleteSelected')} placement="bottom">
+          <button
+            onClick={() => {
+              if (selectedIds.size === 0) return
+              if (isMobile) setPendingDeleteIds(Array.from(selectedIds))
+              else onBulkDeletePlaces?.(Array.from(selectedIds))
+            }}
+            disabled={selectedIds.size === 0}
+            aria-label={t('places.deleteSelected')}
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              width: 24, height: 24, borderRadius: 6, border: 'none',
+              background: 'transparent',
+              color: selectedIds.size > 0 ? '#ef4444' : 'var(--text-faint)',
+              cursor: selectedIds.size > 0 ? 'pointer' : 'default', padding: 0,
+            }}
+            onMouseEnter={e => { if (selectedIds.size > 0) e.currentTarget.style.background = 'color-mix(in srgb, #ef4444 14%, transparent)' }}
+            onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
+          >
+            <Trash2 size={13} strokeWidth={2} />
+          </button>
+          </Tooltip>
+        </div>
+      ) : (
+        <div style={{ padding: '6px 16px', flexShrink: 0 }}>
+          <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}</span>
+        </div>
+      )}
 
       {/* Liste */}
-      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+      <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
         {filtered.length === 0 ? (
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
             <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
@@ -363,82 +650,29 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
           filtered.map(place => {
             const cat = categories.find(c => c.id === place.category_id)
             const isSelected = place.id === selectedPlaceId
-            const inDay = isAssignedToSelectedDay(place.id)
             const isPlanned = plannedIds.has(place.id)
-
+            const inDay = inDaySet.has(place.id)
+            const isChecked = selectedIds.has(place.id)
             return (
-              <div
+              <MemoPlaceRow
                 key={place.id}
-                draggable
-                onDragStart={e => {
-                  e.dataTransfer.setData('placeId', String(place.id))
-                  e.dataTransfer.effectAllowed = 'copy'
-                  // Backup in window für Cross-Component Drag (dataTransfer geht bei Re-Render verloren)
-                  window.__dragData = { placeId: String(place.id) }
-                }}
-                onClick={() => {
-                  if (isMobile) {
-                    setDayPickerPlace(place)
-                  } else {
-                    onPlaceClick(isSelected ? null : place.id)
-                  }
-                }}
-                onContextMenu={e => ctxMenu.open(e, [
-                  canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
-                  selectedDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, selectedDayId) },
-                  place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-                  (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${place.google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + place.google_place_id : place.lat + ',' + place.lng}`, '_blank') },
-                  { divider: true },
-                  canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
-                ])}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 10,
-                  padding: '9px 14px 9px 16px',
-                  cursor: 'grab',
-                  background: isSelected ? 'var(--border-faint)' : 'transparent',
-                  borderBottom: '1px solid var(--border-faint)',
-                  transition: 'background 0.1s',
-                  contentVisibility: 'auto',
-                  containIntrinsicSize: '0 52px',
-                }}
-                onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}
-              >
-                <PlaceAvatar place={place} category={cat} size={34} />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
-                    {cat && (() => {
-                      const CatIcon = getCategoryIcon(cat.icon)
-                      return <CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} style={{ flexShrink: 0 }} title={cat.name} />
-                    })()}
-                    <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
-                      {place.name}
-                    </span>
-                  </div>
-                  {(place.description || place.address || cat?.name) && (
-                    <div style={{ marginTop: 2 }}>
-                      <span style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', lineHeight: 1.2 }}>
-                        {place.description || place.address || cat?.name}
-                      </span>
-                    </div>
-                  )}
-                </div>
-                <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                  {!inDay && selectedDayId && (
-                    <button
-                      onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
-                      style={{
-                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        width: 20, height: 20, borderRadius: 6,
-                        background: 'var(--bg-hover)', border: 'none', cursor: 'pointer',
-                        color: 'var(--text-faint)', padding: 0, transition: 'background 0.15s, color 0.15s',
-                      }}
-                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
-                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
-                    ><Plus size={12} strokeWidth={2.5} /></button>
-                  )}
-                </div>
-              </div>
+                place={place}
+                category={cat}
+                isSelected={isSelected}
+                isPlanned={isPlanned}
+                inDay={inDay}
+                isChecked={isChecked}
+                selectMode={selectMode}
+                selectedDayId={selectedDayId}
+                canEditPlaces={canEditPlaces}
+                isMobile={isMobile}
+                t={t}
+                onPlaceClick={onPlaceClick}
+                onContextMenu={openContextMenu}
+                onAssignToDay={onAssignToDay}
+                toggleSelected={toggleSelected}
+                setDayPickerPlace={setDayPickerPlace}
+              />
             )
           })
         )}
@@ -602,6 +836,14 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
         initialFile={sidebarDropFile}
       />
       <ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
+      {isMobile && (
+        <ConfirmDialog
+          isOpen={!!pendingDeleteIds?.length}
+          onClose={() => setPendingDeleteIds(null)}
+          onConfirm={() => { onBulkDeleteConfirm?.(pendingDeleteIds!); setPendingDeleteIds(null) }}
+          message={t('trip.confirm.deletePlaces', { count: pendingDeleteIds?.length ?? 0 })}
+        />
+      )}
     </div>
   )
 })

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

@@ -87,7 +87,7 @@ describe('ReservationModal', () => {
   });
 
   it('FE-PLANNER-RESMODAL-003: shows "Edit Reservation" title when editing', () => {
-    const res = buildReservation({ title: 'Flight NY', type: 'flight' });
+    const res = buildReservation({ title: 'Nice Dinner', type: 'restaurant' });
     render(<ReservationModal {...defaultProps} reservation={res} />);
     expect(screen.getByText(/Edit Reservation/i)).toBeInTheDocument();
   });
@@ -101,34 +101,26 @@ describe('ReservationModal', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 
-  it('FE-PLANNER-RESMODAL-005: all 9 type buttons are visible', () => {
+  it('FE-PLANNER-RESMODAL-005: all 5 type buttons are visible (transport types removed)', () => {
     render(<ReservationModal {...defaultProps} />);
-    expect(screen.getByRole('button', { name: /Flight/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Accommodation/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Restaurant/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Train/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Rental Car/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Cruise/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Event/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Tour/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Other/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Flight$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Train$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Car$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Cruise$/i })).not.toBeInTheDocument();
   });
 
   // ── Type selection ──────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-RESMODAL-006: clicking Flight type button shows flight-specific fields', async () => {
+  it('FE-PLANNER-RESMODAL-006: clicking Event type button activates it', async () => {
     render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    // Flight-specific airline field has placeholder="Lufthansa" (exact, not the title placeholder)
-    expect(screen.getByPlaceholderText('Lufthansa')).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-RESMODAL-007: flight type shows airline/airport fields', async () => {
-    render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    expect(screen.getByText(/Airline/i)).toBeInTheDocument();
-    expect(screen.getByText(/^From$/i)).toBeInTheDocument();
-    expect(screen.getByText(/^To$/i)).toBeInTheDocument();
+    const eventBtn = screen.getByRole('button', { name: /Event/i });
+    await userEvent.click(eventBtn);
+    expect(eventBtn).toHaveStyle({ background: 'var(--text-primary)' });
   });
 
   it('FE-PLANNER-RESMODAL-008: hotel type shows check-in/check-out time fields', async () => {
@@ -139,12 +131,10 @@ describe('ReservationModal', () => {
     expect(screen.getByText(/Check-out/i)).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-009: train type shows train number/platform/seat fields', async () => {
+  it('FE-PLANNER-RESMODAL-009: restaurant type shows location field', async () => {
     render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Train/i }));
-    expect(screen.getByText(/Train No\./i)).toBeInTheDocument();
-    expect(screen.getByText(/Platform/i)).toBeInTheDocument();
-    expect(screen.getByText(/Seat/i)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /Restaurant/i }));
+    expect(screen.getByPlaceholderText(/Address, Airport/i)).toBeInTheDocument();
   });
 
   it('FE-PLANNER-RESMODAL-010: hotel type hides assignment picker', async () => {
@@ -183,13 +173,10 @@ describe('ReservationModal', () => {
     expect(screen.getByDisplayValue('Breakfast included')).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-014: editing pre-fills type — train type does not show flight fields', () => {
-    const res = buildReservation({ type: 'train' });
+  it('FE-PLANNER-RESMODAL-014: editing pre-fills type — restaurant type shows location field', () => {
+    const res = buildReservation({ type: 'restaurant', location: 'Via Roma 1' });
     render(<ReservationModal {...defaultProps} reservation={res} />);
-    // Flight-specific airline input has placeholder="Lufthansa" (exact) — should NOT appear for train type
-    expect(screen.queryByPlaceholderText('Lufthansa')).not.toBeInTheDocument();
-    // Train fields should appear
-    expect(screen.getByText(/Train No\./i)).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Via Roma 1')).toBeInTheDocument();
   });
 
   // ── Validation ──────────────────────────────────────────────────────────────
@@ -216,8 +203,10 @@ describe('ReservationModal', () => {
     fireEvent.change(datePickers[1], { target: { value: '2025-06-09' } });
     fireEvent.change(timePickers[1], { target: { value: '09:00' } });
 
-    // When isEndBeforeStart=true the submit button is disabled, so submit the form directly
-    const form = screen.getByRole('button', { name: /^Add$/i }).closest('form')!;
+    // When isEndBeforeStart=true the submit button is disabled, so fire submit on the form directly.
+    // The Save button now lives in the Modal's sticky footer (outside the <form>), so we query
+    // the form by tag instead of walking up from the button.
+    const form = document.querySelector('form')!;
     fireEvent.submit(form);
 
     expect(onSave).not.toHaveBeenCalled();
@@ -232,18 +221,18 @@ describe('ReservationModal', () => {
 
   // ── Submit flow ─────────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-RESMODAL-016: submitting valid flight calls onSave with correct shape', async () => {
+  it('FE-PLANNER-RESMODAL-016: submitting valid restaurant booking calls onSave with correct shape', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Air France 777');
+    await userEvent.click(screen.getByRole('button', { name: /Restaurant/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Le Jules Verne');
 
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ title: 'Air France 777', type: 'flight' })
+      expect.objectContaining({ title: 'Le Jules Verne', type: 'restaurant' })
     );
   });
 
@@ -439,17 +428,17 @@ describe('ReservationModal', () => {
     );
   });
 
-  it('FE-PLANNER-RESMODAL-031: train type — saving calls onSave with train type', async () => {
+  it('FE-PLANNER-RESMODAL-031: event type — saving calls onSave with event type', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Train/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Eurostar Paris');
+    await userEvent.click(screen.getByRole('button', { name: /Event/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Louvre Museum');
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ title: 'Eurostar Paris', type: 'train' })
+      expect.objectContaining({ title: 'Louvre Museum', type: 'event' })
     );
   });
 
@@ -473,7 +462,7 @@ describe('ReservationModal', () => {
 
   it('FE-PLANNER-RESMODAL-036: file upload to existing reservation calls onFileUpload', async () => {
     const onFileUpload = vi.fn().mockResolvedValue(undefined);
-    const res = buildReservation({ id: 10, title: 'My Trip', type: 'flight' });
+    const res = buildReservation({ id: 10, title: 'My Trip', type: 'other' });
     render(
       <ReservationModal
         {...defaultProps}
@@ -575,30 +564,18 @@ describe('ReservationModal', () => {
     expect(screen.queryByPlaceholderText('0.00')).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-042: flight type metadata saved with airline and airports', async () => {
+  it('FE-PLANNER-RESMODAL-042: hotel type metadata saved with check-in time', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Flight/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'AF 447');
-    await userEvent.type(screen.getByPlaceholderText('Lufthansa'), 'Air France');
-    await userEvent.type(screen.getByPlaceholderText('LH 123'), 'AF 447');
-    await userEvent.type(screen.getByPlaceholderText('FRA'), 'CDG');
-    await userEvent.type(screen.getByPlaceholderText('NRT'), 'JFK');
+    await userEvent.click(screen.getByRole('button', { name: /Accommodation/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Grand Hotel');
 
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'flight',
-        metadata: expect.objectContaining({
-          airline: 'Air France',
-          flight_number: 'AF 447',
-          departure_airport: 'CDG',
-          arrival_airport: 'JFK',
-        }),
-      })
+      expect.objectContaining({ title: 'Grand Hotel', type: 'hotel' })
     );
   });
 
@@ -638,22 +615,21 @@ describe('ReservationModal', () => {
     expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESMODAL-045: car type shows date/time section', async () => {
+  it('FE-PLANNER-RESMODAL-045: tour type shows time pickers', async () => {
     render(<ReservationModal {...defaultProps} />);
-    await userEvent.click(screen.getByRole('button', { name: /Rental Car/i }));
-    // Car type still shows date fields (not hotel which hides them)
+    await userEvent.click(screen.getByRole('button', { name: /^Tour$/i }));
     await waitFor(() => {
-      expect(screen.getAllByTestId('date-picker').length).toBeGreaterThan(0);
+      expect(screen.getAllByTestId('time-picker').length).toBeGreaterThan(0);
     });
   });
 
-  it('FE-PLANNER-RESMODAL-046: cruise type renders and saves correctly', async () => {
+  it('FE-PLANNER-RESMODAL-046: other type renders and saves correctly', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
-    await userEvent.click(screen.getByRole('button', { name: /Cruise/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Caribbean Cruise');
+    await userEvent.click(screen.getByRole('button', { name: /^Other$/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Misc item');
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
-    await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'cruise' })));
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'other' })));
   });
 
   it('FE-PLANNER-RESMODAL-047: clicking budget category select changes the value', async () => {
@@ -734,23 +710,17 @@ describe('ReservationModal', () => {
     });
   });
 
-  it('FE-PLANNER-RESMODAL-035: flight with train number metadata saved correctly', async () => {
+  it('FE-PLANNER-RESMODAL-035: hotel type saves correctly', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
-    await userEvent.click(screen.getByRole('button', { name: /Train/i }));
-    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'ICE 792');
-    await userEvent.type(screen.getByPlaceholderText(/ICE 123/i), 'ICE 792');
-    await userEvent.type(screen.getByPlaceholderText(/^12$/i), '5');
-    await userEvent.type(screen.getByPlaceholderText(/42A/i), '14B');
+    await userEvent.click(screen.getByRole('button', { name: /^Accommodation$/i }));
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Hotel Test');
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'train',
-        metadata: expect.objectContaining({ train_number: 'ICE 792', platform: '5', seat: '14B' }),
-      })
+      expect.objectContaining({ type: 'hotel' })
     );
   });
 });

client/src/components/Planner/ReservationModal.tsx

@@ -5,7 +5,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useAddonStore } from '../../store/addonStore'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
-import { Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
+import { Hotel, Utensils, Ticket, FileText, Users, Paperclip, X, ExternalLink, Link2 } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -14,12 +14,8 @@ import { openFile } from '../../utils/fileDownload'
 import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
 
 const TYPE_OPTIONS = [
-  { value: 'flight',     labelKey: 'reservations.type.flight',     Icon: Plane },
   { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
   { value: 'restaurant', labelKey: 'reservations.type.restaurant', Icon: Utensils },
-  { 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: 'event',      labelKey: 'reservations.type.event',      Icon: Ticket },
   { value: 'tour',       labelKey: 'reservations.type.tour',       Icon: Users },
   { value: 'other',      labelKey: 'reservations.type.other',      Icon: FileText },
@@ -33,7 +29,6 @@ function buildAssignmentOptions(days, assignments, t, locale) {
     const dayLabel = day.title || t('dayplan.dayN', { n: day.day_number })
     const dateStr = day.date ? ` · ${formatDate(day.date, locale)}` : ''
     const groupLabel = `${dayLabel}${dateStr}`
-    // Group header (non-selectable)
     options.push({ value: `_header_${day.id}`, label: groupLabel, disabled: true, isHeader: true })
     for (let i = 0; i < da.length; i++) {
       const place = da[i].place
@@ -64,9 +59,10 @@ interface ReservationModalProps {
   onFileUpload?: (fd: FormData) => Promise<void>
   onFileDelete: (fileId: number) => Promise<void>
   accommodations?: Accommodation[]
+  defaultAssignmentId?: number | null
 }
 
-export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [] }: ReservationModalProps) {
+export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null }: ReservationModalProps) {
   const { id: tripId } = useParams<{ id: string }>()
   const loadFiles = useTripStore(s => s.loadFiles)
   const toast = useToast()
@@ -84,20 +80,16 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const [form, setForm] = useState({
     title: '', type: 'other', status: 'pending',
     reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
-    notes: '', assignment_id: '', accommodation_id: '',
+    notes: '', assignment_id: '' as string | number, accommodation_id: '' as string | number,
     price: '', budget_category: '',
-    meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
-    meta_departure_timezone: '', meta_arrival_timezone: '',
-    meta_train_number: '', meta_platform: '', meta_seat: '',
     meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
-    hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
+    hotel_place_id: '' as string | number, hotel_start_day: '' as string | number, hotel_end_day: '' as string | number,
   })
   const [isSaving, setIsSaving] = useState(false)
   const [uploadingFile, setUploadingFile] = useState(false)
   const [pendingFiles, setPendingFiles] = useState([])
   const [showFilePicker, setShowFilePicker] = useState(false)
   const [linkedFileIds, setLinkedFileIds] = useState<number[]>([])
-  const [unlinkedFileIds, setUnlinkedFileIds] = useState<number[]>([])
 
   const assignmentOptions = useMemo(
     () => buildAssignmentOptions(days, assignments, t, locale),
@@ -107,7 +99,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   useEffect(() => {
     if (reservation) {
       const meta = typeof reservation.metadata === 'string' ? JSON.parse(reservation.metadata || '{}') : (reservation.metadata || {})
-      // Parse end_date from reservation_end_time if it's a full ISO datetime
       const rawEnd = reservation.reservation_end_time || ''
       let endDate = ''
       let endTime = rawEnd
@@ -130,15 +121,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         notes: reservation.notes || '',
         assignment_id: reservation.assignment_id || '',
         accommodation_id: reservation.accommodation_id || '',
-        meta_airline: meta.airline || '',
-        meta_flight_number: meta.flight_number || '',
-        meta_departure_airport: meta.departure_airport || '',
-        meta_arrival_airport: meta.arrival_airport || '',
-        meta_departure_timezone: meta.departure_timezone || '',
-        meta_arrival_timezone: meta.arrival_timezone || '',
-        meta_train_number: meta.train_number || '',
-        meta_platform: meta.platform || '',
-        meta_seat: meta.seat || '',
         meta_check_in_time: meta.check_in_time || '',
         meta_check_in_end_time: meta.check_in_end_time || '',
         meta_check_out_time: meta.check_out_time || '',
@@ -152,41 +134,34 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       setForm({
         title: '', type: 'other', status: 'pending',
         reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
-        notes: '', assignment_id: '', accommodation_id: '',
+        notes: '', assignment_id: defaultAssignmentId ?? '', accommodation_id: '',
         price: '', budget_category: '',
-        meta_airline: '', meta_flight_number: '', meta_departure_airport: '', meta_arrival_airport: '',
-        meta_departure_timezone: '', meta_arrival_timezone: '',
-        meta_train_number: '', meta_platform: '', meta_seat: '',
         meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
+        hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
       })
       setPendingFiles([])
     }
-  }, [reservation, isOpen, selectedDayId])
+  }, [reservation, isOpen, selectedDayId, defaultAssignmentId])
+
+  // Re-hydrate hotel day range when the accommodations prop arrives after the modal opens
+  // (race: tripAccommodations fetch may complete after isOpen fires, leaving hotel fields empty)
+  useEffect(() => {
+    if (!isOpen || !reservation || reservation.type !== 'hotel' || !reservation.accommodation_id) return
+    const acc = accommodations.find(a => a.id == reservation.accommodation_id)
+    if (!acc) return
+    setForm(prev => {
+      if (prev.hotel_place_id !== '' || prev.hotel_start_day !== '' || prev.hotel_end_day !== '') return prev
+      return { ...prev, hotel_place_id: acc.place_id, hotel_start_day: acc.start_day_id, hotel_end_day: acc.end_day_id }
+    })
+  }, [accommodations, isOpen, reservation])
 
   const set = (field, value) => setForm(prev => ({ ...prev, [field]: value }))
 
-  // Validate that end datetime is after start datetime
   const isEndBeforeStart = (() => {
     if (!form.end_date || !form.reservation_time) return false
     const startDate = form.reservation_time.split('T')[0]
     const startTime = form.reservation_time.split('T')[1] || '00:00'
     const endTime = form.reservation_end_time || '00:00'
-    // For flights, compare in UTC using timezone offsets
-    if (form.type === 'flight') {
-      const parseOffset = (tz: string): number | null => {
-        if (!tz) return null
-        const m = tz.trim().match(/^(?:UTC|GMT)?\s*([+-])(\d{1,2})(?::(\d{2}))?$/i)
-        if (!m) return null
-        const sign = m[1] === '+' ? 1 : -1
-        return sign * (parseInt(m[2]) * 60 + parseInt(m[3] || '0'))
-      }
-      const depOffset = parseOffset(form.meta_departure_timezone)
-      const arrOffset = parseOffset(form.meta_arrival_timezone)
-      if (depOffset === null || arrOffset === null) return false
-      const depMinutes = new Date(`${startDate}T${startTime}`).getTime() - depOffset * 60000
-      const arrMinutes = new Date(`${form.end_date}T${endTime}`).getTime() - arrOffset * 60000
-      return arrMinutes <= depMinutes
-    }
     const startFull = `${startDate}T${startTime}`
     const endFull = `${form.end_date}T${endTime}`
     return endFull <= startFull
@@ -199,23 +174,11 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
     setIsSaving(true)
     try {
       const metadata: Record<string, string> = {}
-      if (form.type === 'flight') {
-        if (form.meta_airline) metadata.airline = form.meta_airline
-        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
-        if (form.meta_departure_airport) metadata.departure_airport = form.meta_departure_airport
-        if (form.meta_arrival_airport) metadata.arrival_airport = form.meta_arrival_airport
-        if (form.meta_departure_timezone) metadata.departure_timezone = form.meta_departure_timezone
-        if (form.meta_arrival_timezone) metadata.arrival_timezone = form.meta_arrival_timezone
-      } else if (form.type === 'hotel') {
+      if (form.type === 'hotel') {
         if (form.meta_check_in_time) metadata.check_in_time = form.meta_check_in_time
         if (form.meta_check_in_end_time) metadata.check_in_end_time = form.meta_check_in_end_time
         if (form.meta_check_out_time) metadata.check_out_time = form.meta_check_out_time
-      } else if (form.type === 'train') {
-        if (form.meta_train_number) metadata.train_number = form.meta_train_number
-        if (form.meta_platform) metadata.platform = form.meta_platform
-        if (form.meta_seat) metadata.seat = form.meta_seat
       }
-      // Combine end_date + end_time into reservation_end_time
       let combinedEndTime = form.reservation_end_time
       if (form.end_date) {
         combinedEndTime = form.reservation_end_time ? `${form.end_date}T${form.reservation_end_time}` : form.end_date
@@ -224,26 +187,27 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         if (form.price) metadata.price = form.price
         if (form.budget_category) metadata.budget_category = form.budget_category
       }
+
       const saveData: Record<string, any> = {
         title: form.title, type: form.type, status: form.status,
-        reservation_time: form.type === 'hotel' ? null : form.reservation_time,
-        reservation_end_time: form.type === 'hotel' ? null : combinedEndTime,
+        reservation_time: form.type === 'hotel' ? null : (form.reservation_time || null),
+        reservation_end_time: form.type === 'hotel' ? null : (combinedEndTime || null),
         location: form.location, confirmation_number: form.confirmation_number,
         notes: form.notes,
         assignment_id: form.assignment_id || null,
         accommodation_id: form.type === 'hotel' ? (form.accommodation_id || null) : null,
         metadata: Object.keys(metadata).length > 0 ? metadata : null,
+        endpoints: [],
+        needs_review: false,
       }
-      // Auto-create/update budget entry if price is set, or signal removal if cleared
       if (isBudgetEnabled) {
         saveData.create_budget_entry = form.price && parseFloat(form.price) > 0
           ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
           : { total_price: 0 }
       }
-      // If hotel with place + days, pass hotel data for auto-creation or update
-      if (form.type === 'hotel' && form.hotel_place_id && form.hotel_start_day && form.hotel_end_day) {
+      if (form.type === 'hotel' && form.hotel_start_day && form.hotel_end_day) {
         saveData.create_accommodation = {
-          place_id: form.hotel_place_id,
+          place_id: form.hotel_place_id || null,
           start_day_id: form.hotel_start_day,
           end_day_id: form.hotel_end_day,
           check_in: form.meta_check_in_time || null,
@@ -307,7 +271,22 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const labelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.03em' }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')} size="2xl">
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')}
+      size="2xl"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
+    >
       <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
 
         {/* Type selector */}
@@ -338,7 +317,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
 
         {/* Assignment Picker (hidden for hotels) */}
         {form.type !== 'hotel' && assignmentOptions.length > 0 && (
-        <div>
+          <div>
             <div style={{ flex: 1, minWidth: 0 }}>
               <label style={labelStyle}>
                 <Link2 size={10} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
@@ -365,138 +344,105 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 size="sm"
               />
             </div>
-        </div>
+          </div>
         )}
 
         {/* Start Date/Time + End Date/Time + Status (hidden for hotels) */}
         {form.type !== 'hotel' && (
-        <>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}</label>
-              <CustomDatePicker
-                value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
-                onChange={d => {
-                  const [, t] = (form.reservation_time || '').split('T')
-                  set('reservation_time', d ? (t ? `${d}T${t}` : d) : '')
-                }}
-              />
-            </div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.departureTime') : form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}</label>
-              <CustomTimePicker
-                value={(() => { const [, t] = (form.reservation_time || '').split('T'); return t || '' })()}
-                onChange={t => {
-                  const [d] = (form.reservation_time || '').split('T')
-                  const selectedDay = days.find(dy => dy.id === selectedDayId)
-                  const date = d || selectedDay?.date || new Date().toISOString().split('T')[0]
-                  set('reservation_time', t ? `${date}T${t}` : date)
-                }}
-              />
-            </div>
-            {form.type === 'flight' && (
+          <>
+            <div style={{ display: 'flex', gap: 8 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.meta.departureTimezone')}</label>
-                <input type="text" value={form.meta_departure_timezone} onChange={e => set('meta_departure_timezone', e.target.value)}
-                  placeholder="e.g. CET, UTC+1" style={inputStyle} />
+                <label style={labelStyle}>{t('reservations.date')}</label>
+                <CustomDatePicker
+                  value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
+                  onChange={d => {
+                    const [, tm] = (form.reservation_time || '').split('T')
+                    set('reservation_time', d ? (tm ? `${d}T${tm}` : d) : '')
+                  }}
+                />
               </div>
-            )}
-          </div>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}</label>
-              <CustomDatePicker
-                value={form.end_date}
-                onChange={d => set('end_date', d || '')}
-              />
-            </div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
-              <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
-            </div>
-            {form.type === 'flight' && (
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.meta.arrivalTimezone')}</label>
-                <input type="text" value={form.meta_arrival_timezone} onChange={e => set('meta_arrival_timezone', e.target.value)}
-                  placeholder="e.g. JST, UTC+9" style={inputStyle} />
+                <label style={labelStyle}>{t('reservations.startTime')}</label>
+                <CustomTimePicker
+                  value={(() => { const [, tm] = (form.reservation_time || '').split('T'); return tm || '' })()}
+                  onChange={tm => {
+                    const [d] = (form.reservation_time || '').split('T')
+                    const selectedDay = days.find(dy => dy.id === selectedDayId)
+                    const date = d || selectedDay?.date || new Date().toISOString().split('T')[0]
+                    set('reservation_time', tm ? `${date}T${tm}` : date)
+                  }}
+                />
               </div>
-            )}
-          </div>
-          {isEndBeforeStart && (
-            <div style={{ fontSize: 11, color: '#ef4444', marginTop: -6 }}>{t('reservations.validation.endBeforeStart')}</div>
-          )}
-          <div style={{ display: 'flex', gap: 8 }}>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>{t('reservations.status')}</label>
-              <CustomSelect
-                value={form.status}
-                onChange={value => set('status', value)}
-                options={[
-                  { value: 'pending', label: t('reservations.pending') },
-                  { value: 'confirmed', label: t('reservations.confirmed') },
-                ]}
-                size="sm"
-              />
             </div>
-          </div>
-        </>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.endDate')}</label>
+                <CustomDatePicker
+                  value={form.end_date}
+                  onChange={d => set('end_date', d || '')}
+                />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.endTime')}</label>
+                <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
+              </div>
+            </div>
+            {isEndBeforeStart && (
+              <div style={{ fontSize: 11, color: '#ef4444', marginTop: -6 }}>{t('reservations.validation.endBeforeStart')}</div>
+            )}
+          </>
         )}
 
-        {/* Location + Booking Code */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {/* Location */}
+        {form.type !== 'hotel' && (
           <div>
             <label style={labelStyle}>{t('reservations.locationAddress')}</label>
             <input type="text" value={form.location} onChange={e => set('location', e.target.value)}
               placeholder={t('reservations.locationPlaceholder')} style={inputStyle} />
           </div>
+        )}
+
+        {/* Booking Code + Status */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
             <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
             <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
               placeholder={t('reservations.confirmationPlaceholder')} style={inputStyle} />
           </div>
+          <div>
+            <label style={labelStyle}>{t('reservations.status')}</label>
+            <CustomSelect
+              value={form.status}
+              onChange={value => set('status', value)}
+              options={[
+                { value: 'pending', label: t('reservations.pending') },
+                { value: 'confirmed', label: t('reservations.confirmed') },
+              ]}
+              size="sm"
+            />
+          </div>
         </div>
 
-        {/* Type-specific fields */}
-        {form.type === 'flight' && (
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.airline') || 'Airline'}</label>
-              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
-                placeholder="Lufthansa" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.flightNumber') || 'Flight No.'}</label>
-              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
-                placeholder="LH 123" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.from') || 'From'}</label>
-              <input type="text" value={form.meta_departure_airport} onChange={e => set('meta_departure_airport', e.target.value)}
-                placeholder="FRA" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.to') || 'To'}</label>
-              <input type="text" value={form.meta_arrival_airport} onChange={e => set('meta_arrival_airport', e.target.value)}
-                placeholder="NRT" style={inputStyle} />
-            </div>
-          </div>
-        )}
-
+        {/* Hotel fields */}
         {form.type === 'hotel' && (
           <>
-            {/* Hotel place + day range */}
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
               <div>
                 <label style={labelStyle}>{t('reservations.meta.hotelPlace')}</label>
                 <CustomSelect
                   value={form.hotel_place_id}
                   onChange={value => {
-                    set('hotel_place_id', value)
                     const p = places.find(pl => pl.id === value)
-                    if (p) {
-                      if (!form.title) set('title', p.name)
-                      if (!form.location && p.address) set('location', p.address)
-                    }
+                    setForm(prev => {
+                      const next = { ...prev, hotel_place_id: value }
+                      if (!value) {
+                        next.location = ''
+                      } else if (p) {
+                        if (!prev.title) next.title = p.name
+                        if (!prev.location && p.address) next.location = p.address
+                      }
+                      return next
+                    })
                   }}
                   placeholder={t('reservations.meta.pickHotel')}
                   options={[
@@ -513,7 +459,15 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                   value={form.hotel_start_day}
                   onChange={value => set('hotel_start_day', value)}
                   placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
+                  options={days.map(d => {
+                    const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
+                    const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
+                    return {
+                      value: d.id,
+                      label: d.title || t('dayplan.dayN', { n: d.day_number }),
+                      badge: dateBadge ?? dayBadge,
+                    }
+                  })}
                   size="sm"
                 />
               </div>
@@ -523,13 +477,20 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                   value={form.hotel_end_day}
                   onChange={value => set('hotel_end_day', value)}
                   placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => ({ value: d.id, label: d.title || `${t('dayplan.dayN', { n: d.day_number })}${d.date ? ` · ${formatDate(d.date, locale)}` : ''}` }))}
+                  options={days.map(d => {
+                    const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
+                    const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
+                    return {
+                      value: d.id,
+                      label: d.title || t('dayplan.dayN', { n: d.day_number }),
+                      badge: dateBadge ?? dayBadge,
+                    }
+                  })}
                   size="sm"
                 />
               </div>
             </div>
-            {/* Check-in/out times + Status */}
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
               <div>
                 <label style={labelStyle}>{t('reservations.meta.checkIn')}</label>
                 <CustomTimePicker value={form.meta_check_in_time} onChange={v => set('meta_check_in_time', v)} />
@@ -542,42 +503,10 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <label style={labelStyle}>{t('reservations.meta.checkOut')}</label>
                 <CustomTimePicker value={form.meta_check_out_time} onChange={v => set('meta_check_out_time', v)} />
               </div>
-              <div>
-                <label style={labelStyle}>{t('reservations.status')}</label>
-                <CustomSelect
-                  value={form.status}
-                  onChange={value => set('status', value)}
-                  options={[
-                    { value: 'pending', label: t('reservations.pending') },
-                    { value: 'confirmed', label: t('reservations.confirmed') },
-                  ]}
-                  size="sm"
-                />
-              </div>
             </div>
           </>
         )}
 
-        {form.type === 'train' && (
-          <div className="grid grid-cols-3 gap-3">
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.trainNumber') || 'Train No.'}</label>
-              <input type="text" value={form.meta_train_number} onChange={e => set('meta_train_number', e.target.value)}
-                placeholder="ICE 123" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.platform') || 'Platform'}</label>
-              <input type="text" value={form.meta_platform} onChange={e => set('meta_platform', e.target.value)}
-                placeholder="12" style={inputStyle} />
-            </div>
-            <div>
-              <label style={labelStyle}>{t('reservations.meta.seat') || 'Seat'}</label>
-              <input type="text" value={form.meta_seat} onChange={e => set('meta_seat', e.target.value)}
-                placeholder="42A" style={inputStyle} />
-            </div>
-          </div>
-        )}
-
         {/* Notes */}
         <div>
           <label style={labelStyle}>{t('reservations.notes')}</label>
@@ -596,12 +525,9 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
                 <a href="#" onClick={(e) => { e.preventDefault(); openFile(f.url).catch(() => {}) }} style={{ color: 'var(--text-faint)', display: 'flex', flexShrink: 0, cursor: 'pointer' }}><ExternalLink size={11} /></a>
                 <button type="button" onClick={async () => {
-                  // Always unlink, never delete the file
-                  // Clear primary reservation_id if it points to this reservation
                   if (f.reservation_id === reservation?.id) {
                     try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
                   }
-                  // Remove from file_links if linked there
                   try {
                     const linksRes = await apiClient.get(`/trips/${tripId}/files/${f.id}/links`)
                     const link = (linksRes.data.links || []).find((l: any) => l.reservation_id === reservation?.id)
@@ -634,7 +560,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <Paperclip size={11} />
                 {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
               </button>}
-              {/* Link existing file picker */}
               {reservation?.id && files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).length > 0 && (
                 <div style={{ position: 'relative' }}>
                   <button type="button" onClick={() => setShowFilePicker(v => !v)} style={{
@@ -678,7 +603,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </div>
         </div>
 
-        {/* Price + Budget Category — only shown when budget addon is enabled */}
+        {/* Price + Budget Category */}
         {isBudgetEnabled && (
           <>
             <div style={{ display: 'flex', gap: 8 }}>
@@ -686,7 +611,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 <label style={labelStyle}>{t('reservations.price')}</label>
                 <input type="text" inputMode="decimal" value={form.price}
                   onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let t = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = t.lastIndexOf(','), ld = t.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { t = t.substring(0, dp).replace(/[.,]/g, '') + '.' + t.substring(dp + 1) } else { t = t.replace(/[.,]/g, '') } set('price', t) }}
+                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
                   placeholder="0.00"
                   style={inputStyle} />
               </div>
@@ -712,15 +637,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           </>
         )}
 
-        {/* Actions */}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, paddingTop: 4, borderTop: '1px solid var(--border-secondary)' }}>
-          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="submit" disabled={isSaving || !form.title.trim() || isEndBeforeStart} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
       </form>
     </Modal>
   )

client/src/components/Planner/ReservationsPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
@@ -8,7 +8,7 @@ import { useTranslation } from '../../i18n'
 import {
   Plane, Hotel, Utensils, Train, Car, Ship, Ticket, FileText, MapPin,
   Calendar, Hash, CheckCircle2, Circle, Pencil, Trash2, Plus, ChevronDown, ChevronRight, Users,
-  ExternalLink, BookMarked, Lightbulb, Link2, Clock,
+  ExternalLink, BookMarked, Lightbulb, Link2, Clock, ArrowRight, AlertCircle,
 } from 'lucide-react'
 import { openFile } from '../../utils/fileDownload'
 import type { Reservation, Day, TripFile, AssignmentsMap } from '../../types'
@@ -69,9 +69,10 @@ interface ReservationCardProps {
   onNavigateToFiles: () => void
   assignmentLookup: Record<number, AssignmentLookupEntry>
   canEdit: boolean
+  days?: Day[]
 }
 
-function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit }: ReservationCardProps) {
+function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateToFiles, assignmentLookup, canEdit, days = [] }: ReservationCardProps) {
   const { toggleReservationStatus } = useTripStore()
   const toast = useToast()
   const { t, locale } = useTranslation()
@@ -109,6 +110,34 @@ 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 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)
+    : (isHotel && r.accommodation_start_day_id) ? days.find(d => d.id === r.accommodation_start_day_id)
+    : undefined
+  const endDay = r.end_day_id ? days.find(d => d.id === r.end_day_id)
+    : (isHotel && r.accommodation_end_day_id) ? days.find(d => d.id === r.accommodation_end_day_id)
+    : undefined
+  const DayLabel = ({ day }: { day: typeof startDay }) => {
+    if (!day) return null
+    const name = day.title || t('dayplan.dayN', { n: day.day_number })
+    const badge = day.date
+      ? new Date(day.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+      : null
+    return (
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+        <span>{name}</span>
+        {badge && (
+          <span style={{
+            fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
+            background: 'var(--bg-secondary)', padding: '1px 6px', borderRadius: 999,
+          }}>{badge}</span>
+        )}
+      </span>
+    )
+  }
+
   return (
     <div style={{
       borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column',
@@ -119,13 +148,15 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
       onMouseEnter={e => e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'}
       onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
     >
-      {/* Header */}
+      {/* Header — wraps to a second row on narrow screens so the status/category chips
+          never collide with the title. */}
       <div style={{
         display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
+        flexWrap: 'wrap',
         padding: '12px 14px',
         background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)',
       }}>
-        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0, flexWrap: 'wrap' }}>
           <span style={{
             display: 'inline-flex', alignItems: 'center', gap: 6,
             fontSize: 12, fontWeight: 600, color: confirmed ? '#16a34a' : '#d97706',
@@ -142,6 +173,17 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
             <TypeIcon size={12} style={{ color: typeInfo.color }} />
             {t(typeInfo.labelKey)}
           </span>
+          {r.needs_review ? (
+            <span style={{
+              display: 'inline-flex', alignItems: 'center', gap: 4,
+              fontSize: 11, fontWeight: 600, color: '#b45309',
+              padding: '3px 8px', borderRadius: 6,
+              background: 'rgba(245,158,11,0.12)',
+            }} title={t('reservations.needsReviewHint')}>
+              <AlertCircle size={11} />
+              {t('reservations.needsReview')}
+            </span>
+          ) : null}
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           <span style={{
@@ -175,6 +217,18 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
       {/* Body */}
       <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
+        {/* Day label for transport/hotel reservations linked to days */}
+        {(isTransportType || isHotel) && startDay && (
+          <div>
+            <div style={fieldLabelStyle}>{t('reservations.date')}</div>
+            <div style={{ ...fieldValueStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexWrap: 'wrap' }}>
+              <DayLabel day={startDay} />
+              {endDay && endDay.id !== startDay.id && (
+                <><span style={{ color: 'var(--text-faint)' }}>–</span><DayLabel day={endDay} /></>
+              )}
+            </div>
+          </div>
+        )}
         {/* Date / Time row */}
         {hasDate && (
           <div style={{ display: 'grid', gap: 10, gridTemplateColumns: hasTime ? '1fr 1fr' : '1fr' }}>
@@ -218,15 +272,35 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           </div>
         )}
 
+        {(() => {
+          const eps = r.endpoints || []
+          const from = eps.find(e => e.role === 'from')
+          const to = eps.find(e => e.role === 'to')
+          if (!from || !to) return null
+          return (
+            <div style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+              padding: '8px 12px', borderRadius: 10,
+              background: 'var(--bg-tertiary)',
+              fontSize: 12.5, color: 'var(--text-primary)',
+            }}>
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{from.name}</span>
+              <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{to.name}</span>
+            </div>
+          )
+        })()}
+
         {/* Type-specific metadata */}
         {(() => {
           const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
           if (!meta || Object.keys(meta).length === 0) return null
+          const hasEndpoints = (r.endpoints || []).some(e => e.role === 'from') && (r.endpoints || []).some(e => e.role === 'to')
           const cells: { label: string; value: string }[] = []
           if (meta.airline) cells.push({ label: t('reservations.meta.airline'), value: meta.airline })
           if (meta.flight_number) cells.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
-          if (meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
-          if (meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
+          if (!hasEndpoints && meta.departure_airport) cells.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
+          if (!hasEndpoints && meta.arrival_airport) cells.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
           if (meta.train_number) cells.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
           if (meta.platform) cells.push({ label: t('reservations.meta.platform'), value: meta.platform })
           if (meta.seat) cells.push({ label: t('reservations.meta.seat'), value: meta.seat })
@@ -351,10 +425,20 @@ interface SectionProps {
   children: React.ReactNode
   defaultOpen?: boolean
   accent: 'green' | string
+  storageKey?: string
 }
 
-function Section({ title, count, children, defaultOpen = true, accent }: SectionProps) {
-  const [open, setOpen] = useState(defaultOpen)
+function Section({ title, count, children, defaultOpen = true, accent, storageKey }: SectionProps) {
+  const [open, setOpen] = useState(() => {
+    if (!storageKey || typeof window === 'undefined') return defaultOpen
+    const stored = window.localStorage.getItem(storageKey)
+    if (stored === null) return defaultOpen
+    return stored === '1'
+  })
+  useEffect(() => {
+    if (!storageKey || typeof window === 'undefined') return
+    window.localStorage.setItem(storageKey, open ? '1' : '0')
+  }, [open, storageKey])
   return (
     <div style={{ marginBottom: 28 }}>
       <button onClick={() => setOpen(o => !o)} style={{
@@ -389,9 +473,11 @@ interface ReservationsPanelProps {
   onEdit: (reservation: Reservation) => void
   onDelete: (id: number) => void
   onNavigateToFiles: () => void
+  titleKey?: string
+  addManualKey?: string
 }
 
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
@@ -442,7 +528,7 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
           display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
         }}>
           <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
-            {t('reservations.title')}
+            {t(titleKey)}
           </h2>
 
           {reservations.length > 0 && (
@@ -516,7 +602,7 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
               onMouseLeave={e => e.currentTarget.style.opacity = '1'}
             >
               <Plus size={14} strokeWidth={2.5} />
-              <span className="hidden sm:inline">{t('reservations.addManual')}</span>
+              <span className="hidden sm:inline">{t(addManualKey)}</span>
             </button>
           )}
         </div>
@@ -537,13 +623,13 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
         ) : (
           <>
             {allPending.length > 0 && (
-              <Section title={t('reservations.pending')} count={allPending.length} accent="gray">
-                {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
+              <Section title={t('reservations.pending')} count={allPending.length} accent="gray" storageKey={`trek:bookings-pending-open:${tripId}`}>
+                {allPending.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} days={days} />)}
               </Section>
             )}
             {allConfirmed.length > 0 && (
-              <Section title={t('reservations.confirmed')} count={allConfirmed.length} accent="green">
-                {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} />)}
+              <Section title={t('reservations.confirmed')} count={allConfirmed.length} accent="green" storageKey={`trek:bookings-confirmed-open:${tripId}`}>
+                {allConfirmed.map(r => <ReservationCard key={r.id} r={r} tripId={tripId} onEdit={onEdit} onDelete={onDelete} files={files} onNavigateToFiles={onNavigateToFiles} assignmentLookup={assignmentLookup} canEdit={canEdit} days={days} />)}
               </Section>
             )}
           </>

client/src/components/Planner/TransportModal.tsx

@@ -0,0 +1,484 @@
+import { useState, useEffect, useMemo } from 'react'
+import { Plane, Train, Car, Ship } from 'lucide-react'
+import Modal from '../shared/Modal'
+import CustomSelect from '../shared/CustomSelect'
+import CustomTimePicker from '../shared/CustomTimePicker'
+import AirportSelect, { type Airport } from './AirportSelect'
+import LocationSelect, { type LocationPoint } from './LocationSelect'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { useTripStore } from '../../store/tripStore'
+import { useAddonStore } from '../../store/addonStore'
+import { formatDate } from '../../utils/formatters'
+import type { Day, Reservation, ReservationEndpoint } from '../../types'
+
+const TRANSPORT_TYPES = ['flight', 'train', 'car', 'cruise'] as const
+type TransportType = typeof TRANSPORT_TYPES[number]
+
+interface EndpointPick {
+  airport?: Airport
+  location?: LocationPoint
+}
+
+function endpointFromAirport(a: Airport, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
+  return {
+    role, sequence,
+    name: a.city ? `${a.city} (${a.iata})` : a.name,
+    code: a.iata,
+    lat: a.lat, lng: a.lng,
+    timezone: a.tz,
+    local_date: date,
+    local_time: time,
+  }
+}
+
+function endpointFromLocation(l: LocationPoint, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
+  return {
+    role, sequence,
+    name: l.name,
+    code: null,
+    lat: l.lat, lng: l.lng,
+    timezone: null,
+    local_date: date,
+    local_time: time,
+  }
+}
+
+function airportFromEndpoint(e: ReservationEndpoint | undefined): Airport | null {
+  if (!e || !e.code) return null
+  return {
+    iata: e.code, icao: null,
+    name: e.name, city: e.name.replace(/\s*\([A-Z]{3}\)\s*$/, ''),
+    country: '',
+    lat: e.lat, lng: e.lng,
+    tz: e.timezone || '',
+  }
+}
+
+function locationFromEndpoint(e: ReservationEndpoint | undefined): LocationPoint | null {
+  if (!e) return null
+  return { name: e.name, lat: e.lat, lng: e.lng, address: null }
+}
+
+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 },
+]
+
+const defaultForm = {
+  title: '',
+  type: 'flight' as TransportType,
+  status: 'pending' as 'pending' | 'confirmed',
+  start_day_id: '' as string | number,
+  end_day_id: '' as string | number,
+  departure_time: '',
+  arrival_time: '',
+  confirmation_number: '',
+  notes: '',
+  price: '',
+  budget_category: '',
+  meta_airline: '',
+  meta_flight_number: '',
+  meta_train_number: '',
+  meta_platform: '',
+  meta_seat: '',
+}
+
+interface TransportModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (data: Record<string, any>) => Promise<void>
+  reservation: Reservation | null
+  days: Day[]
+  selectedDayId: number | null
+}
+
+export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId }: TransportModalProps) {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const budgetCategories = useMemo(() => {
+    const cats = new Set<string>()
+    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
+    return Array.from(cats).sort()
+  }, [budgetItems])
+  const [form, setForm] = useState({ ...defaultForm })
+  const [isSaving, setIsSaving] = useState(false)
+  const [fromPick, setFromPick] = useState<EndpointPick>({})
+  const [toPick, setToPick] = useState<EndpointPick>({})
+
+  useEffect(() => {
+    if (!isOpen) return
+    if (reservation) {
+      const meta = typeof reservation.metadata === 'string'
+        ? JSON.parse(reservation.metadata || '{}')
+        : (reservation.metadata || {})
+      const eps = reservation.endpoints || []
+      const from = eps.find(e => e.role === 'from')
+      const to = eps.find(e => e.role === 'to')
+      const type = (TRANSPORT_TYPES as readonly string[]).includes(reservation.type)
+        ? reservation.type as TransportType
+        : 'flight'
+      setForm({
+        title: reservation.title || '',
+        type,
+        status: reservation.status || 'pending',
+        start_day_id: reservation.day_id ?? '',
+        end_day_id: reservation.end_day_id ?? '',
+        departure_time: reservation.reservation_time?.split('T')[1]?.slice(0, 5) ?? '',
+        arrival_time: reservation.reservation_end_time?.split('T')[1]?.slice(0, 5) ?? '',
+        confirmation_number: reservation.confirmation_number || '',
+        notes: reservation.notes || '',
+        meta_airline: meta.airline || '',
+        meta_flight_number: meta.flight_number || '',
+        meta_train_number: meta.train_number || '',
+        meta_platform: meta.platform || '',
+        meta_seat: meta.seat || '',
+        price: meta.price || '',
+        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
+      })
+      if (type === 'flight') {
+        setFromPick({ airport: airportFromEndpoint(from) || undefined })
+        setToPick({ airport: airportFromEndpoint(to) || undefined })
+      } else {
+        setFromPick({ location: locationFromEndpoint(from) || undefined })
+        setToPick({ location: locationFromEndpoint(to) || undefined })
+      }
+    } else {
+      setForm({ ...defaultForm, start_day_id: selectedDayId ?? '', end_day_id: selectedDayId ?? '' })
+      setFromPick({})
+      setToPick({})
+    }
+  }, [isOpen, reservation, selectedDayId, budgetItems])
+
+  const set = (field: string, value: any) => setForm(prev => ({ ...prev, [field]: value }))
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.title.trim()) return
+    setIsSaving(true)
+    try {
+      const startDay = days.find(d => d.id === Number(form.start_day_id))
+      const endDay = days.find(d => d.id === Number(form.end_day_id))
+
+      const buildTime = (day: Day | undefined, time: string): string | null => {
+        if (!time) return null
+        return day?.date ? `${day.date}T${time}` : `T${time}`
+      }
+
+      const metadata: Record<string, string> = {}
+      if (form.type === 'flight') {
+        if (form.meta_airline) metadata.airline = form.meta_airline
+        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
+        if (fromPick.airport) {
+          metadata.departure_airport = fromPick.airport.iata
+          metadata.departure_timezone = fromPick.airport.tz
+        }
+        if (toPick.airport) {
+          metadata.arrival_airport = toPick.airport.iata
+          metadata.arrival_timezone = toPick.airport.tz
+        }
+      } else if (form.type === 'train') {
+        if (form.meta_train_number) metadata.train_number = form.meta_train_number
+        if (form.meta_platform) metadata.platform = form.meta_platform
+        if (form.meta_seat) metadata.seat = form.meta_seat
+      }
+      if (isBudgetEnabled) {
+        if (form.price) metadata.price = form.price
+        if (form.budget_category) metadata.budget_category = form.budget_category
+      }
+
+      const startDate = startDay?.date ?? null
+      const endDate = (endDay ?? startDay)?.date ?? null
+      const endpoints: ReturnType<typeof endpointFromAirport>[] = []
+      if (form.type === 'flight') {
+        if (fromPick.airport) endpoints.push(endpointFromAirport(fromPick.airport, 'from', 0, startDate, form.departure_time || null))
+        if (toPick.airport) endpoints.push(endpointFromAirport(toPick.airport, 'to', 1, endDate, form.arrival_time || null))
+      } else {
+        if (fromPick.location) endpoints.push(endpointFromLocation(fromPick.location, 'from', 0, startDate, form.departure_time || null))
+        if (toPick.location) endpoints.push(endpointFromLocation(toPick.location, 'to', 1, endDate, form.arrival_time || null))
+      }
+
+      const payload = {
+        title: form.title,
+        type: form.type,
+        status: form.status,
+        day_id: form.start_day_id ? Number(form.start_day_id) : null,
+        end_day_id: form.end_day_id ? Number(form.end_day_id) : null,
+        reservation_time: buildTime(startDay, form.departure_time),
+        reservation_end_time: buildTime(endDay ?? startDay, form.arrival_time),
+        location: null,
+        confirmation_number: form.confirmation_number || null,
+        notes: form.notes || null,
+        metadata: Object.keys(metadata).length > 0 ? metadata : null,
+        endpoints,
+        needs_review: false,
+      }
+      if (isBudgetEnabled) {
+        (payload as any).create_budget_entry = form.price && parseFloat(form.price) > 0
+          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
+          : { total_price: 0 }
+      }
+      await onSave(payload)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : t('common.unknownError'))
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const inputStyle = {
+    width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
+    padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
+    outline: 'none', boxSizing: 'border-box' as const, color: 'var(--text-primary)', background: 'var(--bg-input)',
+  }
+  const labelStyle = {
+    display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)',
+    marginBottom: 5, textTransform: 'uppercase' as const, letterSpacing: '0.03em',
+  }
+
+  const dayOptions = [
+    { value: '', label: '—' },
+    ...days.map(d => {
+      const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
+      const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
+      return {
+        value: d.id,
+        label: d.title || t('dayplan.dayN', { n: d.day_number }),
+        badge: dateBadge ?? dayBadge,
+      }
+    }),
+  ]
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={reservation ? t('transport.modalTitle.edit') : t('transport.modalTitle.create')}
+      size="2xl"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button type="button" onClick={onClose} style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
+            {t('common.cancel')}
+          </button>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim()} style={{ padding: '8px 20px', borderRadius: 10, border: 'none', background: 'var(--text-primary)', color: 'var(--bg-primary)', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
+            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+          </button>
+        </div>
+      }
+    >
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+
+        {/* Type selector */}
+        <div>
+          <label style={labelStyle}>{t('reservations.bookingType')}</label>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+            {TYPE_OPTIONS.map(({ value, labelKey, Icon }) => (
+              <button key={value} type="button" onClick={() => set('type', value)} style={{
+                display: 'flex', alignItems: 'center', gap: 4,
+                padding: '5px 10px', borderRadius: 99, border: '1px solid',
+                fontSize: 11, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.12s',
+                background: form.type === value ? 'var(--text-primary)' : 'var(--bg-card)',
+                borderColor: form.type === value ? 'var(--text-primary)' : 'var(--border-primary)',
+                color: form.type === value ? 'var(--bg-primary)' : 'var(--text-muted)',
+              }}>
+                <Icon size={11} /> {t(labelKey)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Title */}
+        <div>
+          <label style={labelStyle}>{t('reservations.titleLabel')} *</label>
+          <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
+            placeholder={t('reservations.titlePlaceholder')} style={inputStyle} />
+        </div>
+
+        {/* From / To endpoints */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label style={labelStyle}>{t('reservations.meta.from')}</label>
+            {form.type === 'flight' ? (
+              <AirportSelect value={fromPick.airport || null} onChange={a => setFromPick({ airport: a || undefined })} />
+            ) : (
+              <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
+            )}
+          </div>
+          <div>
+            <label style={labelStyle}>{t('reservations.meta.to')}</label>
+            {form.type === 'flight' ? (
+              <AirportSelect value={toPick.airport || null} onChange={a => setToPick({ airport: a || undefined })} />
+            ) : (
+              <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
+            )}
+          </div>
+        </div>
+
+        {/* Departure row */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>
+              {form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}
+            </label>
+            <CustomSelect
+              value={form.start_day_id}
+              onChange={value => set('start_day_id', value)}
+              placeholder={t('dayplan.dayN', { n: '?' })}
+              options={dayOptions}
+              size="sm"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>
+              {form.type === 'flight' ? t('reservations.departureTime') : form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}
+            </label>
+            <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
+          </div>
+          {form.type === 'flight' && fromPick.airport && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{t('reservations.meta.departureTimezone')}</label>
+              <div style={{ ...inputStyle, padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
+                {fromPick.airport.tz}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Arrival row */}
+        <div style={{ display: 'flex', gap: 8 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>
+              {form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}
+            </label>
+            <CustomSelect
+              value={form.end_day_id}
+              onChange={value => set('end_day_id', value)}
+              placeholder={t('dayplan.dayN', { n: '?' })}
+              options={dayOptions}
+              size="sm"
+            />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <label style={labelStyle}>
+              {form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}
+            </label>
+            <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
+          </div>
+          {form.type === 'flight' && toPick.airport && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <label style={labelStyle}>{t('reservations.meta.arrivalTimezone')}</label>
+              <div style={{ ...inputStyle, padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
+                {toPick.airport.tz}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Flight-specific fields */}
+        {form.type === 'flight' && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.airline')}</label>
+              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
+                placeholder="Lufthansa" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.flightNumber')}</label>
+              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
+                placeholder="LH 123" style={inputStyle} />
+            </div>
+          </div>
+        )}
+
+        {/* Train-specific fields */}
+        {form.type === 'train' && (
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.trainNumber')}</label>
+              <input type="text" value={form.meta_train_number} onChange={e => set('meta_train_number', e.target.value)}
+                placeholder="ICE 123" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.platform')}</label>
+              <input type="text" value={form.meta_platform} onChange={e => set('meta_platform', e.target.value)}
+                placeholder="12" style={inputStyle} />
+            </div>
+            <div>
+              <label style={labelStyle}>{t('reservations.meta.seat')}</label>
+              <input type="text" value={form.meta_seat} onChange={e => set('meta_seat', e.target.value)}
+                placeholder="42A" style={inputStyle} />
+            </div>
+          </div>
+        )}
+
+        {/* Booking Code + Status */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div>
+            <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
+            <input type="text" value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
+              placeholder={t('reservations.confirmationPlaceholder')} style={inputStyle} />
+          </div>
+          <div>
+            <label style={labelStyle}>{t('reservations.status')}</label>
+            <CustomSelect
+              value={form.status}
+              onChange={value => set('status', value)}
+              options={[
+                { value: 'pending', label: t('reservations.pending') },
+                { value: 'confirmed', label: t('reservations.confirmed') },
+              ]}
+              size="sm"
+            />
+          </div>
+        </div>
+
+        {/* Notes */}
+        <div>
+          <label style={labelStyle}>{t('reservations.notes')}</label>
+          <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
+            placeholder={t('reservations.notesPlaceholder')}
+            style={{ ...inputStyle, resize: 'none', lineHeight: 1.5 }} />
+        </div>
+
+        {/* Price + Budget Category */}
+        {isBudgetEnabled && (
+          <>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.price')}</label>
+                <input type="text" inputMode="decimal" value={form.price}
+                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
+                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
+                  placeholder="0.00"
+                  style={inputStyle} />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
+                <CustomSelect
+                  value={form.budget_category}
+                  onChange={v => set('budget_category', v)}
+                  options={[
+                    { value: '', label: t('reservations.budgetCategoryAuto') },
+                    ...budgetCategories.map(c => ({ value: c, label: c })),
+                  ]}
+                  placeholder={t('reservations.budgetCategoryAuto')}
+                  size="sm"
+                />
+              </div>
+            </div>
+            {form.price && parseFloat(form.price) > 0 && (
+              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
+                {t('reservations.budgetHint')}
+              </div>
+            )}
+          </>
+        )}
+
+      </form>
+    </Modal>
+  )
+}

client/src/components/Settings/AboutTab.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen } from 'lucide-react'
+import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen, Tent, Compass, Plane, Crown, Infinity as InfinityIcon } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import Section from './Section'
 
@@ -7,8 +7,229 @@ interface Props {
   appVersion: string
 }
 
+type SupporterTierId = 'no_return_ticket' | 'lost_luggage_vip' | 'business_class_dreamer' | 'budget_traveller' | 'hostel_bunkmate'
+
+interface SupporterTier {
+  id: SupporterTierId
+  labelKey: string
+  price: string
+  gradient: string
+  glow: string
+  icon: typeof Tent
+}
+
+const SUPPORTER_TIERS: SupporterTier[] = [
+  { id: 'no_return_ticket', labelKey: 'settings.about.supporter.tier.noReturnTicket', price: '∞', gradient: 'linear-gradient(135deg, #fbbf24, #ec4899 55%, #6366f1)', glow: 'rgba(236,72,153,0.45)', icon: InfinityIcon },
+  { id: 'lost_luggage_vip', labelKey: 'settings.about.supporter.tier.lostLuggageVip', price: '$30', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', glow: 'rgba(168,85,247,0.35)', icon: Crown },
+  { id: 'business_class_dreamer', labelKey: 'settings.about.supporter.tier.businessClassDreamer', price: '$15', gradient: 'linear-gradient(135deg, #6366f1, #0ea5e9)', glow: 'rgba(99,102,241,0.35)', icon: Plane },
+  { id: 'budget_traveller', labelKey: 'settings.about.supporter.tier.budgetTraveller', price: '$10', gradient: 'linear-gradient(135deg, #14b8a6, #06b6d4)', glow: 'rgba(20,184,166,0.3)', icon: Compass },
+  { id: 'hostel_bunkmate', labelKey: 'settings.about.supporter.tier.hostelBunkmate', price: '$5', gradient: 'linear-gradient(135deg, #64748b, #94a3b8)', glow: 'rgba(100,116,139,0.25)', icon: Tent },
+]
+
+interface Supporter {
+  username: string
+  tier: SupporterTierId
+  since: string
+  link?: string
+}
+
+const SUPPORTERS: Supporter[] = [
+  { username: 'Someone', tier: 'hostel_bunkmate', since: '2026-04' },
+]
+
+function SupporterSection({ t, locale }: { t: (key: string, vars?: Record<string, string | number>) => string; locale: string }) {
+  if (SUPPORTERS.length === 0) return null
+
+  const formatSince = (yearMonth: string): string => {
+    const [y, m] = yearMonth.split('-').map(Number)
+    if (!y || !m) return yearMonth
+    try {
+      return new Date(y, m - 1, 1).toLocaleDateString(locale, { year: 'numeric', month: 'long' })
+    } catch { return yearMonth }
+  }
+
+  return (
+    <div className="supporter-section">
+      <style>{`
+        .supporter-section { margin-top: 20px; }
+        .supporter-card {
+          position: relative;
+          border-radius: 20px;
+          padding: 22px 22px 18px;
+          background: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, rgba(236,72,153,0.04) 100%);
+          border: 1px solid rgba(99,102,241,0.18);
+          overflow: hidden;
+        }
+        .supporter-glow {
+          position: absolute; inset: -60px; z-index: 0; pointer-events: none;
+          background: radial-gradient(500px 240px at 15% -10%, rgba(99,102,241,0.18), transparent 60%), radial-gradient(400px 200px at 90% 110%, rgba(236,72,153,0.12), transparent 60%);
+          animation: supporterGlow 6s ease-in-out infinite;
+        }
+        .supporter-header {
+          position: relative; z-index: 1;
+          display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+          margin-bottom: 6px;
+        }
+        .supporter-badge {
+          display: inline-flex; align-items: center; gap: 6px;
+          padding: 4px 10px; border-radius: 999px;
+          background: linear-gradient(90deg, #6366f1, #ec4899, #fbbf24);
+          background-size: 200% 100%;
+          animation: supporterShimmer 4s ease-in-out infinite;
+          color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
+          box-shadow: 0 4px 16px rgba(236,72,153,0.25);
+          white-space: nowrap;
+        }
+        .supporter-title {
+          margin: 0; font-size: 16px; font-weight: 700;
+          color: var(--text-primary); letter-spacing: -0.01em;
+        }
+        .supporter-subtitle {
+          position: relative; z-index: 1;
+          margin: 0 0 16px; font-size: 12.5px;
+          color: var(--text-secondary); line-height: 1.55;
+        }
+        .supporter-tiers {
+          position: relative; z-index: 1;
+          display: flex; flex-direction: column; gap: 10px;
+        }
+        .supporter-tier {
+          display: flex; align-items: flex-start; gap: 12px;
+          padding: 10px 12px; border-radius: 14px;
+          background: var(--bg-card);
+          border: 1px solid var(--border-primary);
+        }
+        .supporter-tier-icon {
+          width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
+          display: flex; align-items: center; justify-content: center;
+          color: #fff;
+        }
+        .supporter-tier-body { flex: 1; min-width: 0; }
+        .supporter-tier-head {
+          display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
+        }
+        .supporter-tier-label {
+          font-size: 13.5px; font-weight: 700; color: var(--text-primary);
+        }
+        .supporter-tier-price {
+          font-size: 11px; font-weight: 600; color: var(--text-faint);
+          padding: 1px 7px; border-radius: 6px; background: var(--bg-tertiary);
+        }
+        .supporter-tier-chips {
+          display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
+        }
+        .supporter-tier-empty {
+          font-size: 11.5px; font-style: italic; color: var(--text-faint);
+        }
+        .supporter-chip {
+          display: inline-flex; align-items: center; gap: 7px;
+          padding: 4px 10px; border-radius: 999px;
+          background: var(--bg-tertiary);
+          border: 1px solid var(--border-primary);
+          text-decoration: none;
+          transition: border-color 0.15s, box-shadow 0.15s;
+          max-width: 100%;
+        }
+        .supporter-chip-name {
+          font-size: 12px; font-weight: 600; color: var(--text-primary);
+          white-space: nowrap;
+        }
+        .supporter-chip-since {
+          font-size: 10.5px; font-weight: 500; color: var(--text-faint);
+          white-space: nowrap;
+        }
+        .supporter-chip-since-short { display: none; }
+        @keyframes supporterShimmer {
+          0%, 100% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+        }
+        @keyframes supporterGlow {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 0.75; }
+        }
+        @media (max-width: 640px) {
+          .supporter-card { border-radius: 16px; padding: 16px 14px 14px; }
+          .supporter-glow { inset: -40px; }
+          .supporter-header { gap: 8px; }
+          .supporter-badge { font-size: 10px; padding: 3px 9px; letter-spacing: 0.03em; }
+          .supporter-title { font-size: 15px; flex-basis: 100%; }
+          .supporter-subtitle { font-size: 12px; margin-bottom: 14px; }
+          .supporter-tier { padding: 10px; gap: 10px; border-radius: 12px; }
+          .supporter-tier-icon { width: 34px; height: 34px; border-radius: 10px; }
+          .supporter-tier-label { font-size: 13px; }
+          .supporter-tier-chips { gap: 5px; margin-top: 7px; }
+          .supporter-chip { padding: 3px 9px; }
+          .supporter-chip-since { font-size: 10px; }
+          .supporter-chip-since-full { display: none; }
+          .supporter-chip-since-short { display: inline; }
+        }
+      `}</style>
+      <div className="supporter-card">
+        <div className="supporter-glow" />
+
+        <div className="supporter-header">
+          <span className="supporter-badge">{t('settings.about.supporters.badge')}</span>
+          <h3 className="supporter-title">{t('settings.about.supporters.title')}</h3>
+        </div>
+        <p className="supporter-subtitle">{t('settings.about.supporters.subtitle')}</p>
+
+        <div className="supporter-tiers">
+          {SUPPORTER_TIERS.map(tier => {
+            const members = SUPPORTERS.filter(s => s.tier === tier.id)
+            const empty = members.length === 0
+            const TierIcon = tier.icon
+            return (
+              <div key={tier.id} className="supporter-tier" style={{ opacity: empty ? 0.55 : 1 }}>
+                <div className="supporter-tier-icon" style={{ background: tier.gradient, boxShadow: `0 6px 18px ${tier.glow}` }}>
+                  <TierIcon size={18} strokeWidth={2.2} />
+                </div>
+                <div className="supporter-tier-body">
+                  <div className="supporter-tier-head">
+                    <span className="supporter-tier-label">{t(tier.labelKey)}</span>
+                    <span className="supporter-tier-price">{tier.price}</span>
+                  </div>
+                  <div className="supporter-tier-chips">
+                    {empty && (
+                      <span className="supporter-tier-empty">
+                        {t('settings.about.supporters.tierEmpty')}
+                      </span>
+                    )}
+                    {members.map(m => {
+                      const chipContent = (
+                        <>
+                          <span className="supporter-chip-name">{m.username}</span>
+                          <span className="supporter-chip-since supporter-chip-since-full">
+                            · {t('settings.about.supporters.since', { date: formatSince(m.since) })}
+                          </span>
+                          <span className="supporter-chip-since supporter-chip-since-short">
+                            · {formatSince(m.since)}
+                          </span>
+                        </>
+                      )
+                      return m.link ? (
+                        <a key={m.username} href={m.link} target="_blank" rel="noopener noreferrer" className="supporter-chip"
+                          onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-faint)'; e.currentTarget.style.boxShadow = `0 2px 8px ${tier.glow}` }}
+                          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+                        >
+                          {chipContent}
+                        </a>
+                      ) : (
+                        <div key={m.username} className="supporter-chip">{chipContent}</div>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function AboutTab({ appVersion }: Props): React.ReactElement {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
 
   return (
     <Section title={t('settings.about')} icon={Info}>
@@ -33,7 +254,7 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           href="https://ko-fi.com/mauriceboe"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -51,7 +272,7 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           href="https://buymeacoffee.com/mauriceboe"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -69,7 +290,7 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           href="https://discord.gg/NhZBDSd4qW"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -90,7 +311,7 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -108,7 +329,7 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -126,7 +347,7 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           href="https://github.com/mauriceboe/TREK/wiki"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
           style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
           onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
           onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
@@ -141,6 +362,8 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
           <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
         </a>
       </div>
+
+      <SupporterSection t={t} locale={locale} />
     </Section>
   )
 }

client/src/components/Settings/DisplaySettingsTab.test.tsx

@@ -42,7 +42,7 @@ describe('DisplaySettingsTab', () => {
 
   it('FE-COMP-DISPLAY-005: shows Auto mode button', () => {
     render(<DisplaySettingsTab />);
-    expect(screen.getByText('Auto')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Auto/i })).toBeInTheDocument();
   });
 
   it('FE-COMP-DISPLAY-006: shows Language section', () => {
@@ -95,16 +95,16 @@ describe('DisplaySettingsTab', () => {
     const updateSetting = vi.fn().mockResolvedValue(undefined);
     seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'light' }), updateSetting });
     render(<DisplaySettingsTab />);
-    await user.click(screen.getByText('Auto'));
+    await user.click(screen.getByRole('button', { name: /Auto/i }));
     expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'auto');
   });
 
   it('FE-COMP-DISPLAY-014: active color mode button has border with var(--text-primary)', () => {
     seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }) });
     render(<DisplaySettingsTab />);
-    const darkBtn = screen.getByText('Dark').closest('button')!;
-    const lightBtn = screen.getByText('Light').closest('button')!;
-    const autoBtn = screen.getByText('Auto').closest('button')!;
+    const darkBtn = screen.getByRole('button', { name: /^Dark$/i });
+    const lightBtn = screen.getByRole('button', { name: /^Light$/i });
+    const autoBtn = screen.getByRole('button', { name: /Auto/i });
     expect(darkBtn.style.border).toContain('var(--text-primary)');
     expect(lightBtn.style.border).toContain('var(--border-primary)');
     expect(autoBtn.style.border).toContain('var(--border-primary)');
@@ -122,8 +122,11 @@ describe('DisplaySettingsTab', () => {
   it('FE-COMP-DISPLAY-016: active language button is visually highlighted', () => {
     seedStore(useSettingsStore, { settings: buildSettings({ language: 'en' }) });
     render(<DisplaySettingsTab />);
-    const englishBtn = screen.getByText('English').closest('button')!;
-    expect(englishBtn.style.border).toContain('var(--text-primary)');
+    // Multiple elements contain "English" (desktop grid button + mobile dropdown trigger).
+    // The desktop grid button is the one with the active border style.
+    const englishMatches = screen.getAllByText('English').map(el => el.closest('button')!).filter(Boolean);
+    const activeBtn = englishMatches.find(btn => (btn.style.border || '').includes('var(--text-primary)'));
+    expect(activeBtn).toBeDefined();
   });
 
   it('FE-COMP-DISPLAY-017: shows Temperature section label', () => {
@@ -152,7 +155,9 @@ describe('DisplaySettingsTab', () => {
     const updateSetting = vi.fn().mockResolvedValue(undefined);
     seedStore(useSettingsStore, { settings: buildSettings({ time_format: '12h' }), updateSetting });
     render(<DisplaySettingsTab />);
-    await user.click(screen.getByText('24h (14:30)'));
+    // The label is split across a text node ('24h') and a responsive span (' (14:30)').
+    // Click the button that contains the 24h text instead of matching the full string.
+    await user.click(screen.getByRole('button', { name: /24h/ }));
     expect(updateSetting).toHaveBeenCalledWith('time_format', '24h');
   });
 

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
-import { Palette, Sun, Moon, Monitor } from 'lucide-react'
+import React, { useState, useEffect, useRef } from 'react'
+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'
@@ -10,6 +10,17 @@ export default function DisplaySettingsTab(): React.ReactElement {
   const { t } = useTranslation()
   const toast = useToast()
   const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || 'celsius')
+  const [langOpen, setLangOpen] = useState(false)
+  const langDropdownRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!langOpen) return
+    const handler = (e: MouseEvent) => {
+      if (langDropdownRef.current && !langDropdownRef.current.contains(e.target as Node)) setLangOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [langOpen])
 
   useEffect(() => {
     setTempUnit(settings.temperature_unit || 'celsius')
@@ -46,8 +57,13 @@ export default function DisplaySettingsTab(): React.ReactElement {
                   transition: 'all 0.15s',
                 }}
               >
-                <opt.icon size={16} />
-                {opt.label}
+                <span className="hidden sm:inline-flex"><opt.icon size={16} /></span>
+                {opt.value === 'auto' ? (
+                  <>
+                    <span className="hidden sm:inline">{opt.label}</span>
+                    <span className="sm:hidden">Auto</span>
+                  </>
+                ) : opt.label}
               </button>
             )
           })}
@@ -57,7 +73,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
       {/* Language */}
       <div>
         <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.language')}</label>
-        <div className="flex flex-wrap gap-3">
+        {/* Desktop: Button grid */}
+        <div className="hidden sm:flex flex-wrap gap-3">
           {SUPPORTED_LANGUAGES.map(opt => (
             <button
               key={opt.value}
@@ -79,6 +96,60 @@ export default function DisplaySettingsTab(): React.ReactElement {
             </button>
           ))}
         </div>
+        {/* Mobile: Custom dropdown */}
+        <div ref={langDropdownRef} className="sm:hidden" style={{ position: 'relative' }}>
+          {(() => {
+            const current = SUPPORTED_LANGUAGES.find(o => o.value === settings.language) || SUPPORTED_LANGUAGES[0]
+            return (
+              <button
+                type="button"
+                onClick={() => setLangOpen(v => !v)}
+                style={{
+                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                  padding: '10px 14px', borderRadius: 10,
+                  border: '2px solid var(--border-primary)',
+                  background: 'var(--bg-card)', color: 'var(--text-primary)',
+                  fontSize: 14, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer',
+                }}
+              >
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{current?.label}</span>
+                <ChevronDown size={14} style={{ flexShrink: 0, color: 'var(--text-faint)', transform: langOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
+              </button>
+            )
+          })()}
+          {langOpen && (
+            <div style={{
+              position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, zIndex: 50,
+              background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+              boxShadow: '0 8px 24px rgba(0,0,0,0.15)', padding: 4, maxHeight: 280, overflowY: 'auto',
+            }}>
+              {SUPPORTED_LANGUAGES.map(opt => {
+                const active = settings.language === opt.value
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={async () => {
+                      setLangOpen(false)
+                      try { await updateSetting('language', opt.value) }
+                      catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.error')) }
+                    }}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                      padding: '9px 12px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                      background: active ? 'var(--bg-hover)' : 'transparent',
+                      fontFamily: 'inherit', fontSize: 14, color: 'var(--text-primary)',
+                      textAlign: 'left', fontWeight: active ? 600 : 500,
+                    }}
+                  >
+                    <span style={{ flex: 1 }}>{opt.label}</span>
+                    {active && <Check size={14} strokeWidth={2.5} color="var(--accent)" />}
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
       </div>
 
       {/* Temperature */}
@@ -117,8 +188,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
         <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.timeFormat')}</label>
         <div className="flex gap-3">
           {[
-            { value: '24h', label: '24h (14:30)' },
-            { value: '12h', label: '12h (2:30 PM)' },
+            { value: '24h', short: '24h', example: '14:30' },
+            { value: '12h', short: '12h', example: '2:30 PM' },
           ].map(opt => (
             <button
               key={opt.value}
@@ -136,7 +207,8 @@ export default function DisplaySettingsTab(): React.ReactElement {
                 transition: 'all 0.15s',
               }}
             >
-              {opt.label}
+              {opt.short}
+              <span className="hidden sm:inline">{` (${opt.example})`}</span>
             </button>
           ))}
         </div>
@@ -172,6 +244,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
         </div>
       </div>
 
+      {/* Booking route labels */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.bookingLabels')}</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('map_booking_labels', 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.map_booking_labels !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.map_booking_labels !== 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" style={{ color: 'var(--text-faint)' }}>{t('settings.bookingLabelsHint')}</p>
+      </div>
+
       {/* Blur Booking Codes */}
       <div>
         <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.blurBookingCodes')}</label>

client/src/components/Settings/MapSettingsTab.test.tsx

@@ -123,12 +123,12 @@ describe('MapSettingsTab', () => {
     });
     render(<MapSettingsTab />);
     await user.click(screen.getByText('Save Map'));
-    expect(updateSettings).toHaveBeenCalledWith({
+    expect(updateSettings).toHaveBeenCalledWith(expect.objectContaining({
       map_tile_url: '',
       default_lat: 48.8566,
       default_lng: 2.3522,
       default_zoom: 10,
-    });
+    }));
   });
 
   it('FE-COMP-MAP-013: Save Map button shows spinner while saving', async () => {

client/src/components/Settings/MapSettingsTab.tsx

@@ -1,11 +1,13 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
-import { Map, Save } from 'lucide-react'
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { Map, Save, Layers, Box, ChevronDown, Check } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
+import MapboxPreview from './MapboxPreview'
 import Section from './Section'
+import ToggleSwitch from './ToggleSwitch'
 import type { Place } from '../../types'
 
 interface MapPreset {
@@ -21,18 +23,137 @@ const MAP_PRESETS: MapPreset[] = [
   { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
 ]
 
+interface StylePreset {
+  name: string
+  url: string
+  tags: string[]
+}
+
+const MAPBOX_STYLE_PRESETS: StylePreset[] = [
+  { name: 'Mapbox Standard',          url: 'mapbox://styles/mapbox/standard',            tags: ['3D', 'Apple-like'] },
+  { name: 'Standard Satellite',       url: 'mapbox://styles/mapbox/standard-satellite',  tags: ['3D', 'Satellite'] },
+  { name: 'Streets',                  url: 'mapbox://styles/mapbox/streets-v12',         tags: ['3D', 'Classic'] },
+  { name: 'Outdoors',                 url: 'mapbox://styles/mapbox/outdoors-v12',        tags: ['3D', 'Terrain'] },
+  { name: 'Light',                    url: 'mapbox://styles/mapbox/light-v11',           tags: ['3D', 'Minimal'] },
+  { name: 'Dark',                     url: 'mapbox://styles/mapbox/dark-v11',            tags: ['3D', 'Dark'] },
+  { name: 'Satellite',                url: 'mapbox://styles/mapbox/satellite-v9',        tags: ['3D', 'Satellite'] },
+  { name: 'Satellite Streets',        url: 'mapbox://styles/mapbox/satellite-streets-v12', tags: ['3D', 'Satellite'] },
+  { name: 'Navigation Day',           url: 'mapbox://styles/mapbox/navigation-day-v1',   tags: ['3D', 'Apple-like'] },
+  { name: 'Navigation Night',         url: 'mapbox://styles/mapbox/navigation-night-v1', tags: ['3D', 'Dark'] },
+]
+
+// Tag → chip color mapping. Keeps the dropdown readable at a glance so a
+// user scanning the list can spot 3D / Satellite / Apple-like styles.
+const TAG_STYLES: Record<string, string> = {
+  '3D': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300',
+  '2D': 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
+  'Satellite': 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
+  'Apple-like': 'bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300',
+  'Modern': 'bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300',
+  'Dark': 'bg-zinc-800 text-zinc-100 dark:bg-zinc-900 dark:text-zinc-300',
+  'Minimal': 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+  'Hillshading': 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
+  'Terrain': 'bg-lime-100 text-lime-800 dark:bg-lime-900/40 dark:text-lime-300',
+  'Realistic': 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300',
+  'Navigation': 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  'Classic': 'bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300',
+  'Hybrid': 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
+  'No labels': 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
+}
+
+function TagChip({ tag }: { tag: string }) {
+  const cls = TAG_STYLES[tag] || 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300'
+  return (
+    <span className={`text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded leading-none ${cls}`}>
+      {tag}
+    </span>
+  )
+}
+
+function StyleDropdown({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDoc)
+    return () => document.removeEventListener('mousedown', onDoc)
+  }, [open])
+
+  const selected = MAPBOX_STYLE_PRESETS.find(p => p.url === value)
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        className="w-full flex items-center justify-between gap-2 px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg text-sm bg-white dark:bg-slate-900 hover:border-slate-400 focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+      >
+        <span className="flex items-center gap-2 min-w-0">
+          <span className="text-slate-900 dark:text-white truncate">
+            {selected ? selected.name : t('settings.mapStylePlaceholder')}
+          </span>
+          {selected && (
+            <span className="flex items-center gap-1 flex-shrink-0">
+              {selected.tags.map(t => <TagChip key={t} tag={t} />)}
+            </span>
+          )}
+        </span>
+        <ChevronDown size={14} className="flex-shrink-0 text-slate-400" />
+      </button>
+      {open && (
+        <div className="absolute z-20 mt-1 w-full max-h-80 overflow-auto rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg py-1">
+          {MAPBOX_STYLE_PRESETS.map(preset => {
+            const isActive = preset.url === value
+            return (
+              <button
+                key={preset.url}
+                type="button"
+                onClick={() => { onChange(preset.url); setOpen(false) }}
+                className={`w-full flex items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-slate-50 dark:hover:bg-slate-800 ${isActive ? 'bg-slate-50 dark:bg-slate-800' : ''}`}
+              >
+                <span className="flex items-center gap-2 flex-wrap">
+                  <span className="text-slate-900 dark:text-white font-medium">{preset.name}</span>
+                  {preset.tags.map(t => <TagChip key={t} tag={t} />)}
+                </span>
+                {isActive && <Check size={14} className="flex-shrink-0 text-slate-900 dark:text-white" />}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+type Provider = 'leaflet' | 'mapbox-gl'
+
 export default function MapSettingsTab(): React.ReactElement {
   const { settings, updateSettings } = useSettingsStore()
   const { t } = useTranslation()
   const toast = useToast()
   const [saving, setSaving] = useState(false)
+  const [provider, setProvider] = useState<Provider>((settings.map_provider as Provider) || 'leaflet')
   const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
+  const [mapboxToken, setMapboxToken] = useState<string>(settings.mapbox_access_token || '')
+  const [mapboxStyle, setMapboxStyle] = useState<string>(settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const [mapbox3d, setMapbox3d] = useState<boolean>(settings.mapbox_3d_enabled !== false)
+  const [mapboxQuality, setMapboxQuality] = useState<boolean>(settings.mapbox_quality_mode === true)
   const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
   const [defaultLng, setDefaultLng] = useState<number | string>(settings.default_lng || 2.3522)
   const [defaultZoom, setDefaultZoom] = useState<number | string>(settings.default_zoom || 10)
 
   useEffect(() => {
+    setProvider((settings.map_provider as Provider) || 'leaflet')
     setMapTileUrl(settings.map_tile_url || '')
+    setMapboxToken(settings.mapbox_access_token || '')
+    setMapboxStyle(settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+    setMapbox3d(settings.mapbox_3d_enabled !== false)
+    setMapboxQuality(settings.mapbox_quality_mode === true)
     setDefaultLat(settings.default_lat || 48.8566)
     setDefaultLng(settings.default_lng || 2.3522)
     setDefaultZoom(settings.default_zoom || 10)
@@ -67,7 +188,12 @@ export default function MapSettingsTab(): React.ReactElement {
     setSaving(true)
     try {
       await updateSettings({
+        map_provider: provider,
         map_tile_url: mapTileUrl,
+        mapbox_access_token: mapboxToken,
+        mapbox_style: mapboxStyle,
+        mapbox_3d_enabled: mapbox3d,
+        mapbox_quality_mode: mapboxQuality,
         default_lat: parseFloat(String(defaultLat)),
         default_lng: parseFloat(String(defaultLng)),
         default_zoom: parseInt(String(defaultZoom)),
@@ -80,28 +206,159 @@ export default function MapSettingsTab(): React.ReactElement {
     }
   }
 
+  // 3D is available on every style now — pure satellite uses the
+  // mapbox-streets-v8 tileset as a fallback building source.
+  const supports3d = true
+
   return (
     <Section title={t('settings.map')} icon={Map}>
+      {/* Provider picker — big cards so the choice is obvious */}
       <div>
-        <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapTemplate')}</label>
-        <CustomSelect
-          value={mapTileUrl}
-          onChange={(value: string) => { if (value) setMapTileUrl(value) }}
-          placeholder={t('settings.mapTemplatePlaceholder.select')}
-          options={MAP_PRESETS.map(p => ({ value: p.url, label: p.name }))}
-          size="sm"
-          style={{ marginBottom: 8 }}
-        />
-        <input
-          type="text"
-          value={mapTileUrl}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapTileUrl(e.target.value)}
-          placeholder="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          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"
-        />
-        <p className="text-xs text-slate-400 mt-1">{t('settings.mapDefaultHint')}</p>
+        <label className="block text-sm font-medium text-slate-700 mb-2">{t('settings.mapProvider')}</label>
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            onClick={() => setProvider('leaflet')}
+            className={`flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
+              provider === 'leaflet'
+                ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
+                : 'border-slate-200 hover:border-slate-400 dark:border-slate-700'
+            }`}
+          >
+            <Layers size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
+            <div>
+              <div className="text-sm font-medium text-slate-900 dark:text-white">Leaflet</div>
+              <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapLeafletSubtitle')}</div>
+            </div>
+          </button>
+          <button
+            type="button"
+            onClick={() => setProvider('mapbox-gl')}
+            className={`relative flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
+              provider === 'mapbox-gl'
+                ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
+                : 'border-slate-200 hover:border-slate-400 dark:border-slate-700'
+            }`}
+          >
+            <Box size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
+            <div className="min-w-0">
+              <div className="text-sm font-medium text-slate-900 dark:text-white">
+                <span className="sm:hidden">Mapbox</span>
+                <span className="hidden sm:inline">Mapbox GL</span>
+              </div>
+              <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapMapboxSubtitle')}</div>
+            </div>
+            {/* Experimental badge only on ≥sm; on mobile there's no room next to the title. */}
+            <span className="hidden sm:inline-block absolute top-2 right-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
+              {t('settings.mapExperimental')}
+            </span>
+          </button>
+        </div>
+        <p className="text-xs text-slate-400 mt-2">
+          {t('settings.mapProviderHint')}
+        </p>
       </div>
 
+      {/* Leaflet settings */}
+      {provider === 'leaflet' && (
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapTemplate')}</label>
+          <CustomSelect
+            value={mapTileUrl}
+            onChange={(value: string) => { if (value) setMapTileUrl(value) }}
+            placeholder={t('settings.mapTemplatePlaceholder.select')}
+            options={MAP_PRESETS.map(p => ({ value: p.url, label: p.name }))}
+            size="sm"
+            style={{ marginBottom: 8 }}
+          />
+          <input
+            type="text"
+            value={mapTileUrl}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapTileUrl(e.target.value)}
+            placeholder="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            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"
+          />
+          <p className="text-xs text-slate-400 mt-1">{t('settings.mapDefaultHint')}</p>
+        </div>
+      )}
+
+      {/* Mapbox GL settings */}
+      {provider === 'mapbox-gl' && (
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapMapboxToken')}</label>
+            <input
+              type="text"
+              value={mapboxToken}
+              onChange={(e) => setMapboxToken(e.target.value)}
+              placeholder="pk.eyJ1Ijoi..."
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+            />
+            <p className="text-xs text-slate-400 mt-1">
+              {t('settings.mapMapboxTokenHint')}{' '}
+              <a href="https://account.mapbox.com/access-tokens/" target="_blank" rel="noreferrer" className="underline">
+                {t('settings.mapMapboxTokenLink')}
+              </a>
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapStyle')}</label>
+            <div className="mb-2">
+              <StyleDropdown value={mapboxStyle} onChange={setMapboxStyle} />
+            </div>
+            <input
+              type="text"
+              value={mapboxStyle}
+              onChange={(e) => setMapboxStyle(e.target.value)}
+              placeholder="mapbox://styles/mapbox/standard"
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+            />
+            <p className="text-xs text-slate-400 mt-1">
+              {t('settings.mapStyleHint')}
+            </p>
+          </div>
+
+          <div className={`flex items-start gap-3 p-3 rounded-lg border transition-colors ${
+            supports3d
+              ? 'border-slate-200 dark:border-slate-700'
+              : 'border-slate-200 opacity-60 dark:border-slate-700'
+          }`}>
+            <div className="flex-1">
+              <div className="text-sm font-medium text-slate-900 dark:text-white">{t('settings.map3dBuildings')}</div>
+              <div className="text-xs text-slate-500 mt-0.5">
+                {t('settings.map3dHint')}
+              </div>
+            </div>
+            <ToggleSwitch
+              on={mapbox3d && supports3d}
+              onToggle={() => { if (supports3d) setMapbox3d(!mapbox3d) }}
+            />
+          </div>
+
+          <div className="flex items-start gap-3 p-3 rounded-lg border border-slate-200 dark:border-slate-700">
+            <div className="flex-1">
+              <div className="text-sm font-medium text-slate-900 dark:text-white flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2">
+                <span className="order-2 sm:order-1">{t('settings.mapHighQuality')}</span>
+                <span className="order-1 sm:order-2 text-[9px] font-semibold tracking-wide uppercase px-1.5 py-[3px] rounded bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300 leading-none">
+                  {t('settings.mapExperimental')}
+                </span>
+              </div>
+              <div className="text-xs text-slate-500 mt-0.5">
+                {t('settings.mapHighQualityHint')}{' '}
+                <span className="text-amber-600 dark:text-amber-400">{t('settings.mapHighQualityWarning')}</span>
+              </div>
+            </div>
+            <ToggleSwitch on={mapboxQuality} onToggle={() => setMapboxQuality(!mapboxQuality)} />
+          </div>
+
+          <div className="text-xs text-slate-400 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
+            <strong className="text-slate-600 dark:text-slate-300">{t('settings.mapTipLabel')}</strong> {t('settings.mapTip')}
+          </div>
+        </div>
+      )}
+
+      {/* Default map position — applies regardless of provider */}
       <div className="grid grid-cols-2 gap-3">
         <div>
           <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.latitude')}</label>
@@ -109,7 +366,7 @@ export default function MapSettingsTab(): React.ReactElement {
             type="number"
             step="any"
             value={defaultLat}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLat(e.target.value)}
+            onChange={(e) => setDefaultLat(e.target.value)}
             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>
@@ -119,7 +376,7 @@ export default function MapSettingsTab(): React.ReactElement {
             type="number"
             step="any"
             value={defaultLng}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultLng(e.target.value)}
+            onChange={(e) => setDefaultLng(e.target.value)}
             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>
@@ -127,25 +384,40 @@ export default function MapSettingsTab(): React.ReactElement {
 
       <div>
         <div style={{ position: 'relative', inset: 0, height: '200px', width: '100%' }}>
-          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-          {React.createElement(MapView as any, {
-            places: mapPlaces,
-            dayPlaces: [],
-            route: null,
-            routeSegments: null,
-            selectedPlaceId: null,
-            onMarkerClick: null,
-            onMapClick: handleMapClick,
-            onMapContextMenu: null,
-            center: [settings.default_lat, settings.default_lng],
-            zoom: defaultZoom,
-            tileUrl: mapTileUrl,
-            fitKey: null,
-            dayOrderMap: [],
-            leftWidth: 0,
-            rightWidth: 0,
-            hasInspector: false,
-          })}
+          {provider === 'mapbox-gl' ? (
+            <MapboxPreview
+              token={mapboxToken}
+              style={mapboxStyle}
+              lat={parseFloat(String(defaultLat)) || 48.8566}
+              lng={parseFloat(String(defaultLng)) || 2.3522}
+              // Zoom in close so the style's character (3D buildings,
+              // satellite texture, label density) is immediately visible.
+              zoom={Math.max(parseInt(String(defaultZoom)) || 10, 16)}
+              enable3d={mapbox3d && supports3d}
+              quality={mapboxQuality}
+              onClick={(ll) => { setDefaultLat(ll.lat); setDefaultLng(ll.lng) }}
+            />
+          ) : (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            React.createElement(MapView as any, {
+              places: mapPlaces,
+              dayPlaces: [],
+              route: null,
+              routeSegments: null,
+              selectedPlaceId: null,
+              onMarkerClick: null,
+              onMapClick: handleMapClick,
+              onMapContextMenu: null,
+              center: [settings.default_lat, settings.default_lng],
+              zoom: defaultZoom,
+              tileUrl: mapTileUrl,
+              fitKey: null,
+              dayOrderMap: [],
+              leftWidth: 0,
+              rightWidth: 0,
+              hasInspector: false,
+            })
+          )}
         </div>
       </div>
 

client/src/components/Settings/MapboxPreview.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react'
+import mapboxgl from 'mapbox-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
+import { isStandardFamily, supportsCustom3d, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
+
+interface Props {
+  token: string
+  style: string
+  lat: number
+  lng: number
+  zoom: number
+  enable3d: boolean
+  quality?: boolean
+  onClick?: (latlng: { lat: number; lng: number }) => void
+}
+
+export default function MapboxPreview({ token, style, lat, lng, zoom, enable3d, quality = false, onClick }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<mapboxgl.Map | null>(null)
+  const onClickRef = useRef(onClick)
+  onClickRef.current = onClick
+
+  useEffect(() => {
+    if (!containerRef.current || !token) return
+    mapboxgl.accessToken = token
+
+    const map = new mapboxgl.Map({
+      container: containerRef.current,
+      style,
+      center: [lng, lat],
+      zoom,
+      pitch: enable3d ? 45 : 0,
+      attributionControl: true,
+      antialias: quality,
+      projection: quality ? 'globe' : 'mercator',
+    })
+    mapRef.current = map
+
+    map.on('load', () => {
+      if (enable3d) {
+        if (!isStandardFamily(style)) addTerrainAndSky(map)
+        if (supportsCustom3d(style)) {
+          const dark = document.documentElement.classList.contains('dark')
+          addCustom3dBuildings(map, dark)
+        }
+      }
+      if (style === 'mapbox://styles/mapbox/standard') {
+        try { map.setTerrain(null) } catch { /* noop */ }
+      }
+    })
+
+    map.on('click', (e) => {
+      onClickRef.current?.({ lat: e.lngLat.lat, lng: e.lngLat.lng })
+    })
+
+    return () => {
+      try { map.remove() } catch { /* noop */ }
+      mapRef.current = null
+    }
+  }, [token, style, enable3d, quality])
+
+  // Recenter without rebuilding the map when lat/lng/zoom change externally
+  useEffect(() => {
+    if (!mapRef.current) return
+    try { mapRef.current.jumpTo({ center: [lng, lat], zoom }) } catch { /* noop */ }
+  }, [lat, lng, zoom])
+
+  if (!token) {
+    return (
+      <div className="flex items-center justify-center h-full bg-slate-100 dark:bg-slate-800 text-xs text-slate-500 rounded-lg border border-slate-200 dark:border-slate-700">
+        Enter a Mapbox access token to preview
+      </div>
+    )
+  }
+
+  return <div ref={containerRef} style={{ width: '100%', height: '100%', borderRadius: '8px', overflow: 'hidden' }} />
+}

client/src/components/Settings/NotificationsTab.tsx

@@ -25,6 +25,7 @@ const EVENT_LABEL_KEYS: Record<string, string> = {
   trip_invite: 'settings.notifyTripInvite',
   booking_change: 'settings.notifyBookingChange',
   trip_reminder: 'settings.notifyTripReminder',
+  todo_due: 'settings.notifyTodoDue',
   vacay_invite: 'settings.notifyVacayInvite',
   photos_shared: 'settings.notifyPhotosShared',
   collab_message: 'settings.notifyCollabMessage',

client/src/components/Settings/PhotoProvidersSection.tsx

@@ -5,6 +5,7 @@ import { useToast } from '../../components/shared/Toast'
 import apiClient from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import Section from './Section'
+import ToggleSwitch from './ToggleSwitch'
 
 interface ProviderField {
   key: string
@@ -222,15 +223,13 @@ export default function PhotoProvidersSection(): React.ReactElement {
           {fields.map(field => (
             <div key={`${provider.id}-${field.key}`}>
               {field.input_type === 'checkbox' ? (
-                <label className="flex items-center gap-2 cursor-pointer select-none">
-                  <input
-                    type="checkbox"
-                    checked={values[field.key] === 'true'}
-                    onChange={e => handleProviderFieldChange(provider.id, field.key, e.target.checked ? 'true' : 'false')}
-                    className="w-4 h-4 rounded border-slate-300 accent-slate-900"
+                <div className="flex items-center gap-3">
+                  <ToggleSwitch
+                    on={values[field.key] === 'true'}
+                    onToggle={() => handleProviderFieldChange(provider.id, field.key, values[field.key] === 'true' ? 'false' : 'true')}
                   />
                   <span className="text-sm font-medium text-slate-700">{t(`memories.${field.label}`)}</span>
-                </label>
+                </div>
               ) : (
                 <>
                   <label className="block text-sm font-medium text-slate-700 mb-1.5">{t(`memories.${field.label}`)}</label>
@@ -248,7 +247,9 @@ export default function PhotoProvidersSection(): React.ReactElement {
               )}
             </div>
           ))}
-          <div className="flex items-center gap-3">
+          {/* Wraps on mobile so the connection badge drops to its own row
+              instead of clipping off the side of the card. */}
+          <div className="flex flex-wrap items-center gap-3">
             <button
               onClick={() => handleSaveProvider(provider)}
               disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
@@ -266,15 +267,17 @@ export default function PhotoProvidersSection(): React.ReactElement {
               {testing
                 ? <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
                 : <Camera className="w-4 h-4" />}
-              {t('memories.testConnection')}
+              <span className="sm:hidden">{t('memories.testShort')}</span>
+              <span className="hidden sm:inline">{t('memories.testConnection')}</span>
             </button>
+            {/* On mobile the badge sits on its own row thanks to flex-wrap, so force a line break via basis-full. */}
             {connected ? (
-              <span className="text-xs font-medium text-green-600 flex items-center gap-1">
+              <span className="basis-full sm:basis-auto text-xs font-medium text-green-600 flex items-center gap-1">
                 <span className="w-2 h-2 bg-green-500 rounded-full" />
                 {t('memories.connected')}
               </span>
             ) : (
-              <span className="text-xs font-medium text-slate-400 flex items-center gap-1">
+              <span className="basis-full sm:basis-auto text-xs font-medium text-slate-400 flex items-center gap-1">
                 <span className="w-2 h-2 bg-slate-300 rounded-full" />
                 {t('memories.disconnected')}
               </span>

client/src/components/Settings/ToggleSwitch.tsx

@@ -2,9 +2,10 @@ import React from 'react'
 
 export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
   return (
-    <button onClick={onToggle}
+    <button type="button" onClick={onToggle}
       style={{
-        position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
+        position: 'relative', width: 44, height: 24, minWidth: 44, flexShrink: 0,
+        borderRadius: 12, border: 'none', padding: 0, cursor: 'pointer',
         background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
         transition: 'background 0.2s',
       }}>

client/src/components/SystemNotices/SystemNoticeModal.test.tsx

@@ -112,8 +112,9 @@ describe('ModalRenderer', () => {
   });
 
   it('FE-SN-MODAL-005: CTA nav button dismisses all notices (not just current)', async () => {
-    const noticeA = makeNotice({ id: 'n-a', titleKey: 'Notice A', cta: { kind: 'nav', labelKey: 'Go to trips', href: '/trips' } });
-    const noticeB = makeNotice({ id: 'n-b', titleKey: 'Notice B' });
+    // CTA is only shown on the last page; navigate there first
+    const noticeA = makeNotice({ id: 'n-a', titleKey: 'Notice A' });
+    const noticeB = makeNotice({ id: 'n-b', titleKey: 'Notice B', cta: { kind: 'nav', labelKey: 'Go to trips', href: '/trips' } });
     useSystemNoticeStore.setState({ notices: [noticeA, noticeB], loaded: true });
 
     const dismissSpy = vi.spyOn(useSystemNoticeStore.getState(), 'dismiss');
@@ -121,6 +122,12 @@ describe('ModalRenderer', () => {
 
     await flushGraceDelay();
 
+    // Navigate to last page
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Go to notice 2'));
+    });
+    await flushGraceDelay();
+
     const ctaBtn = screen.getByRole('button', { name: 'Go to trips' });
     await act(async () => {
       fireEvent.click(ctaBtn);
@@ -299,17 +306,22 @@ describe('ModalRenderer', () => {
     expect(screen.getByText('Notice A')).toBeTruthy();
     expect(screen.getByText('1 / 3')).toBeTruthy();
 
-    // Dismiss notice A — store shrinks, parent re-renders with [B, C]
+    // Navigate to last page where X button is available
     await act(async () => {
-      fireEvent.click(screen.getByLabelText('Dismiss'));
-      useSystemNoticeStore.setState({ notices: [noticeB, noticeC], loaded: true });
-      rerender(<ModalRenderer notices={[noticeB, noticeC]} />);
+      fireEvent.click(screen.getByLabelText('Go to notice 3'));
     });
     await flushGraceDelay();
 
-    // Must show B (idx=0), not C (idx=1 — the old buggy behavior)
-    expect(screen.getByText('Notice B')).toBeTruthy();
-    expect(screen.getByText('1 / 2')).toBeTruthy();
+    // Dismiss all from last page — store shrinks
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Dismiss'));
+      useSystemNoticeStore.setState({ notices: [], loaded: true });
+      rerender(<ModalRenderer notices={[]} />);
+    });
+    await flushGraceDelay();
+
+    // All dismissed — modal should be gone
+    expect(screen.queryByRole('dialog')).toBeNull();
   });
 
   it('FE-SN-MODAL-017: X button dismisses all notices, not just the current one', async () => {
@@ -321,6 +333,12 @@ describe('ModalRenderer', () => {
     render(<ModalRenderer notices={[noticeA, noticeB]} />);
     await flushGraceDelay();
 
+    // X button only appears on the last page — navigate there
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Go to notice 2'));
+    });
+    await flushGraceDelay();
+
     await act(async () => {
       fireEvent.click(screen.getByLabelText('Dismiss'));
     });
@@ -330,7 +348,7 @@ describe('ModalRenderer', () => {
     expect(dismissSpy).toHaveBeenCalledTimes(2);
   });
 
-  it('FE-SN-MODAL-018: ESC key dismisses all notices when current is dismissible', async () => {
+  it('FE-SN-MODAL-018: ESC key dismisses all notices when on last page', async () => {
     const noticeA = makeNotice({ id: 'n-a', titleKey: 'Notice A' });
     const noticeB = makeNotice({ id: 'n-b', titleKey: 'Notice B' });
     useSystemNoticeStore.setState({ notices: [noticeA, noticeB], loaded: true });
@@ -339,6 +357,12 @@ describe('ModalRenderer', () => {
     render(<ModalRenderer notices={[noticeA, noticeB]} />);
     await flushGraceDelay();
 
+    // ESC only works on last page — navigate there first
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText('Go to notice 2'));
+    });
+    await flushGraceDelay();
+
     await act(async () => {
       fireEvent.keyDown(document, { key: 'Escape' });
     });

client/src/components/SystemNotices/SystemNoticeModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 import { Info, AlertTriangle, AlertOctagon, X, ChevronLeft, ChevronRight } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
@@ -62,6 +63,7 @@ interface ContentProps {
 
 function NoticeContent({ notice, title, body, ctaLabel, titleId, bodyId, isDark, onDismiss, onDismissAll, onCTA, total, currentPage, canPage, onPrev, onNext, onGoto }: ContentProps) {
   const { t } = useTranslation();
+  const isLastPage = total <= 1 || currentPage === total - 1;
 
   const DefaultIcon = SEVERITY_ICONS[notice.severity] ?? Info;
   const LucideIcon: React.ElementType = notice.icon
@@ -69,125 +71,168 @@ function NoticeContent({ notice, title, body, ctaLabel, titleId, bodyId, isDark,
     : DefaultIcon;
 
   return (
-    <div className="flex flex-col relative">
-      {/* Dismiss X button */}
-      {notice.dismissible && (
+    <div className="flex flex-col relative" style={{ flex: '1 1 0', minHeight: '100%' }}>
+      {/* Dismiss X button — only on last page so users read all notices */}
+      {notice.dismissible && isLastPage && (
         <button
           onClick={onDismissAll}
-          className="absolute top-4 right-4 p-2 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+          className="absolute top-4 right-4 z-10 p-2 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
           aria-label="Dismiss"
         >
           <X size={18} />
         </button>
       )}
 
-      {/* Hero image (not inline) */}
-      {notice.media && notice.media.placement !== 'inline' && (
-        <div
-          className="w-full overflow-hidden"
-          style={{ aspectRatio: notice.media.aspectRatio ?? '16/9' }}
-        >
-          <img
-            src={isDark && notice.media.srcDark ? notice.media.srcDark : notice.media.src}
-            alt={t(notice.media.altKey)}
-            className="w-full h-full object-cover"
-            fetchPriority="high"
-            decoding="async"
-            onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
-          />
-        </div>
-      )}
-
-      <div className="p-8">
-        {/* Severity icon (when no hero) */}
-        {!notice.media && (
-          <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${SEVERITY_ACCENT[notice.severity] ?? ''}`}>
-            <LucideIcon size={28} />
-          </div>
-        )}
-
-        {/* Title */}
-        <h2
-          id={titleId}
-          className="text-xl font-semibold text-center text-slate-900 dark:text-slate-100 mb-3"
-        >
-          {title}
-        </h2>
-
-        {/* Body — markdown */}
-        <div
-          id={bodyId}
-          className="text-sm leading-relaxed text-center text-slate-600 dark:text-slate-400 max-w-[340px] mx-auto mb-4"
-        >
-          <React.Suspense fallback={<p className="text-sm text-slate-500">{body}</p>}>
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              rehypePlugins={[rehypeSanitize]}
-              components={{
-                a: ({ href, children }) => (
-                  <a
-                    href={href}
-                    className="text-blue-600 dark:text-blue-400 underline hover:no-underline"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {children}
-                  </a>
-                ),
-                ul: ({ children }) => <ul className="list-disc list-inside text-left">{children}</ul>,
-                ol: ({ children }) => <ol className="list-decimal list-inside text-left">{children}</ol>,
-              }}
-            >
-              {body}
-            </ReactMarkdown>
-          </React.Suspense>
-        </div>
-
-        {/* Inline image */}
-        {notice.media?.placement === 'inline' && (
+      {/* Scrollable content — vertically centered when shorter than available space */}
+      <div className="flex flex-col justify-center" style={{ flex: '1 1 0' }}>
+        {/* Hero image (not inline) */}
+        {notice.media && notice.media.placement !== 'inline' && (
           <div
-            className="w-full overflow-hidden rounded-lg mb-4 max-w-[340px] mx-auto"
+            className="w-full overflow-hidden"
             style={{ aspectRatio: notice.media.aspectRatio ?? '16/9' }}
           >
             <img
               src={isDark && notice.media.srcDark ? notice.media.srcDark : notice.media.src}
               alt={t(notice.media.altKey)}
               className="w-full h-full object-cover"
+              fetchPriority="high"
               decoding="async"
               onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
             />
           </div>
         )}
 
-        {/* Highlights */}
-        {notice.highlights && notice.highlights.length > 0 && (
-          <ul className="max-w-[340px] mx-auto mb-4 space-y-2">
-            {notice.highlights.map((h, i) => {
-              const HIcon: React.ElementType | null = h.iconName
-                ? ((LucideIcons as Record<string, unknown>)[h.iconName] as React.ElementType) ?? null
-                : null;
-              return (
-                <li key={i} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
-                  {HIcon
-                    ? <HIcon size={16} className="text-blue-500 shrink-0" />
-                    : <span className="text-blue-500 shrink-0">✓</span>
-                  }
-                  {t(h.labelKey)}
-                </li>
-              );
-            })}
-          </ul>
+        {/* Special warm header for Heart icon (thank-you notice) */}
+        {notice.icon === 'Heart' && !notice.media && (
+          <div className="relative overflow-hidden bg-gradient-to-br from-rose-500 via-pink-500 to-indigo-500 px-8 py-5 text-center">
+            <div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(circle at 20% 50%, white 1px, transparent 1px), radial-gradient(circle at 80% 20%, white 1px, transparent 1px), radial-gradient(circle at 60% 80%, white 1px, transparent 1px)', backgroundSize: '60px 60px, 80px 80px, 40px 40px' }} />
+            <div className="relative flex items-center justify-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center ring-2 ring-white/10">
+                <LucideIcon size={20} className="text-white" />
+              </div>
+              <div className="text-left">
+                <h2 id={titleId} className="text-lg font-bold text-white leading-tight">{title}</h2>
+                <p className="text-xs text-white/60 font-medium">TREK 3.0</p>
+              </div>
+            </div>
+          </div>
         )}
 
+        <div className={`${notice.icon === 'Heart' && !notice.media ? 'px-8 py-6' : 'p-8'} flex flex-col`}>
+          {/* Severity icon (when no hero and not Heart) */}
+          {!notice.media && notice.icon !== 'Heart' && (
+            <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${SEVERITY_ACCENT[notice.severity] ?? ''}`}>
+              <LucideIcon size={28} />
+            </div>
+          )}
+
+          {/* Title (not for Heart — rendered in gradient header) */}
+          {(notice.icon !== 'Heart' || notice.media) && (
+            <h2
+              id={titleId}
+              className="text-xl font-semibold text-center text-slate-900 dark:text-slate-100 mb-3"
+            >
+              {title}
+            </h2>
+          )}
+
+          {/* Body — markdown */}
+          <div
+            id={bodyId}
+            className="text-sm leading-relaxed text-slate-600 dark:text-slate-400 mx-auto mb-4 text-center"
+          >
+            <React.Suspense fallback={<p className="text-sm text-slate-500">{body}</p>}>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeSanitize]}
+                components={{
+                  a: ({ href, children }) => (
+                    <a
+                      href={href}
+                      className="text-indigo-600 dark:text-indigo-400 underline decoration-indigo-300 dark:decoration-indigo-700 hover:decoration-indigo-500 dark:hover:decoration-indigo-400 underline-offset-2 transition-colors"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {children}
+                    </a>
+                  ),
+                  p: ({ children }) => {
+                    // Signature line styling (e.g. "— Maurice")
+                    const text = typeof children === 'string' ? children : Array.isArray(children) ? children.find(c => typeof c === 'string') : '';
+                    if (typeof text === 'string' && text.trim().startsWith('—') && text.trim().length < 30) {
+                      return <p className="mt-4 mb-3 text-base font-semibold text-slate-800 dark:text-slate-200 italic">{children}</p>;
+                    }
+                    return <p className="mb-3 last:mb-0">{children}</p>;
+                  },
+                  hr: () => (
+                    <div className="my-5 flex items-center gap-3">
+                      <div className="flex-1 border-t border-slate-200 dark:border-slate-700" />
+                      <span className="text-slate-300 dark:text-slate-600 text-xs">♡</span>
+                      <div className="flex-1 border-t border-slate-200 dark:border-slate-700" />
+                    </div>
+                  ),
+                  strong: ({ children }) => <strong className="font-semibold text-slate-800 dark:text-slate-200">{children}</strong>,
+                  ul: ({ children }) => <ul className="list-disc list-inside text-left">{children}</ul>,
+                  ol: ({ children }) => <ol className="list-decimal list-inside text-left">{children}</ol>,
+                }}
+              >
+                {body}
+              </ReactMarkdown>
+            </React.Suspense>
+          </div>
+
+          {/* Inline image */}
+          {notice.media?.placement === 'inline' && (
+            <div
+              className="w-full overflow-hidden rounded-lg mb-4 mx-auto"
+              style={{ aspectRatio: notice.media.aspectRatio ?? '16/9' }}
+            >
+              <img
+                src={isDark && notice.media.srcDark ? notice.media.srcDark : notice.media.src}
+                alt={t(notice.media.altKey)}
+                className="w-full h-full object-cover"
+                decoding="async"
+                onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
+              />
+            </div>
+          )}
+
+          {/* Highlights */}
+          {notice.highlights && notice.highlights.length > 0 && (
+            <ul className="mx-auto mb-4 space-y-2">
+              {notice.highlights.map((h, i) => {
+                const HIcon: React.ElementType | null = h.iconName
+                  ? ((LucideIcons as Record<string, unknown>)[h.iconName] as React.ElementType) ?? null
+                  : null;
+                return (
+                  <li key={i} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
+                    {HIcon
+                      ? <HIcon size={16} className="text-blue-500 shrink-0" />
+                      : <span className="text-blue-500 shrink-0">✓</span>
+                    }
+                    {t(h.labelKey)}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </div>
+
+      {/* Sticky footer — pager + CTA, always anchored at the bottom of the slot */}
+      <div
+        className="sticky bottom-0 px-8 pt-4 flex flex-col gap-3 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800"
+        style={{ paddingBottom: 'calc(var(--bottom-nav-h) + 1rem)' }}
+      >
         {/* Pager — dots, arrows, counter (only when multiple notices) */}
         {total > 1 && (
-          <div className="flex flex-col items-center gap-1 mb-4">
+          <div className="flex flex-col items-center gap-1">
             <div className="flex items-center gap-2">
               <button
                 onClick={onPrev}
                 disabled={!canPage || currentPage === 0}
                 aria-label={t('system_notice.pager.prev')}
-                className="p-1 rounded text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                className="px-2 py-1 rounded border border-slate-200 dark:border-slate-700 text-slate-500 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
               >
                 <ChevronLeft size={14} />
               </button>
@@ -211,7 +256,7 @@ function NoticeContent({ notice, title, body, ctaLabel, titleId, bodyId, isDark,
                 onClick={onNext}
                 disabled={!canPage || currentPage === total - 1}
                 aria-label={t('system_notice.pager.next')}
-                className="p-1 rounded text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                className="px-2 py-1 rounded border border-slate-200 dark:border-slate-700 text-slate-500 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
               >
                 <ChevronRight size={14} />
               </button>
@@ -226,8 +271,8 @@ function NoticeContent({ notice, title, body, ctaLabel, titleId, bodyId, isDark,
         )}
 
         {/* CTA + dismiss link */}
-        <div className="flex flex-col items-center gap-3 mt-2">
-          {ctaLabel ? (
+        <div className="flex flex-col items-center gap-3">
+          {ctaLabel && isLastPage ? (
             <button
               id={`notice-cta-${notice.id}`}
               onClick={onCTA}
@@ -235,16 +280,16 @@ function NoticeContent({ notice, title, body, ctaLabel, titleId, bodyId, isDark,
             >
               {ctaLabel}
             </button>
-          ) : (
+          ) : (notice.dismissible || isLastPage) && (
             <button
               id={`notice-cta-${notice.id}`}
-              onClick={onDismissAll}
+              onClick={isLastPage ? onDismissAll : onNext}
               className="w-full h-11 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors"
             >
               {t('common.ok')}
             </button>
           )}
-          {notice.dismissible && ctaLabel && (
+          {notice.dismissible && isLastPage && ctaLabel && (
             <button
               onClick={onDismiss}
               className="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors"
@@ -283,7 +328,13 @@ export function ModalRenderer({ notices }: Props) {
   // Non-dismissible notices lock the pager so users must act before advancing.
   const canPage = notice?.dismissible !== false;
 
+  const touchStartX = useRef<number | null>(null);
   const touchStartY = useRef<number | null>(null);
+  // 'h' once we classify the gesture as horizontal, 'v' for vertical, null = unclassified
+  const dragLockRef = useRef<'h' | 'v' | null>(null);
+  // Sheet scroll offset at the moment the touch began — used to suppress dismiss-drag
+  // when the user is scrolled into content and pans down to scroll back up.
+  const scrollTopAtTouchStart = useRef(0);
   // Keep a ref to the current notice id so dismiss/CTA handlers see the latest value
   const noticeIdRef = useRef<string | null>(null);
   noticeIdRef.current = notice?.id ?? null;
@@ -295,7 +346,15 @@ export function ModalRenderer({ notices }: Props) {
   // contentWrapperRef: the div wrapping NoticeContent — we animate its transform directly.
   const isPageNavRef = useRef(false);
   const slideDirRef  = useRef<'left' | 'right'>('right');
-  const contentWrapperRef = useRef<HTMLDivElement>(null);
+  // Mobile drag strip — wraps all 3 slots and is translated to reveal prev/current/next
+  const stripRef = useRef<HTMLDivElement>(null);
+  // The sheet element itself — animated on vertical drag-to-dismiss
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const clipRef = useRef<HTMLDivElement>(null);
+  // Individual slot scroll containers (prev / center / next)
+  const prevSlotRef  = useRef<HTMLDivElement>(null);
+  const contentWrapperRef = useRef<HTMLDivElement>(null); // center slot
+  const nextSlotRef  = useRef<HTMLDivElement>(null);
 
   // Mobile breakpoint
   useEffect(() => {
@@ -368,15 +427,16 @@ export function ModalRenderer({ notices }: Props) {
     };
   }, [notice?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // ESC key — closes all modal notices (same as clicking X)
+  // ESC key — closes all modal notices (only on last page so users read all notices)
+  const isLastPage = notices.length <= 1 || idx === notices.length - 1;
   useEffect(() => {
-    if (!visible || !notice?.dismissible) return;
+    if (!visible || !notice?.dismissible || !isLastPage) return;
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') handleDismissAll();
     };
     document.addEventListener('keydown', handler);
     return () => document.removeEventListener('keydown', handler);
-  }, [visible, notice?.dismissible]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [visible, notice?.dismissible, isLastPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Arrow-key pager navigation
   useEffect(() => {
@@ -410,6 +470,12 @@ export function ModalRenderer({ notices }: Props) {
     return () => { document.body.style.overflow = ''; };
   }, [visible, notice]);
 
+  // Reset center slot scroll to top on navigation (keyboard / pager buttons).
+  useEffect(() => {
+    if (!isMobile) return;
+    contentWrapperRef.current?.scrollTo({ top: 0 });
+  }, [idx, isMobile]);
+
   function announceIndex(newIdx: number, total: number) {
     setPageAnnouncement(
       t('system_notice.pager.position')
@@ -453,6 +519,17 @@ export function ModalRenderer({ notices }: Props) {
     }
   }
 
+  function animatedDismissAll() {
+    const sheet = sheetRef.current;
+    if (!sheet || prefersReducedMotion) { handleDismissAll(); return; }
+    sheet.style.transition = 'transform 300ms ease-out';
+    sheet.style.transform = 'translateY(110%)';
+    sheet.addEventListener('transitionend', function onDone() {
+      sheet.removeEventListener('transitionend', onDone);
+      handleDismissAll();
+    }, { once: true });
+  }
+
   // Sets up the content wrapper's start transform SYNCHRONOUSLY (before React
   // re-renders with the new notice), then flags the grace-delay effect to slide
   // rather than hide+show.
@@ -531,6 +608,38 @@ export function ModalRenderer({ notices }: Props) {
       ? (visible ? 'opacity-100' : 'opacity-0')
       : (visible ? 'opacity-100 translate-y-0' : 'opacity-100 translate-y-full');
 
+    // Build ContentProps for an adjacent slot so NoticeContent renders correctly
+    function buildSlotProps(n: SystemNoticeDTO, slotIdx: number): ContentProps {
+      const slotRawBody = t(n.bodyKey);
+      const slotBody = n.bodyParams
+        ? Object.entries(n.bodyParams).reduce(
+            (s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), v),
+            slotRawBody
+          )
+        : slotRawBody;
+      return {
+        notice: n,
+        title: t(n.titleKey),
+        body: slotBody,
+        ctaLabel: n.cta ? t(n.cta.labelKey) : null,
+        titleId: `notice-title-${n.id}`,
+        bodyId: `notice-body-${n.id}`,
+        isDark,
+        onDismiss: handleDismiss,
+        onDismissAll: handleDismissAll,
+        onCTA: handleCTA,
+        total: notices.length,
+        currentPage: slotIdx,
+        canPage,
+        onPrev: handlePrev,
+        onNext: handleNext,
+        onGoto: handleGoto,
+      };
+    }
+
+    const prevNotice = notices[idx - 1] ?? null;
+    const nextNotice = notices[idx + 1] ?? null;
+
     return (
       <div className="fixed inset-0 z-50" role="presentation">
         {/* Screen-reader page announcements */}
@@ -538,30 +647,150 @@ export function ModalRenderer({ notices }: Props) {
         {/* Backdrop */}
         <div
           className={`absolute inset-0 bg-slate-950/40 backdrop-blur-[2px] transition-opacity ${dur} ${ease} ${visible ? 'opacity-100' : 'opacity-0'}`}
-          onClick={notice.dismissible ? handleDismiss : undefined}
+          onClick={notice.dismissible ? animatedDismissAll : undefined}
         />
         {/* Bottom sheet */}
         <div
+          ref={sheetRef}
           role="dialog"
           aria-modal="true"
           aria-labelledby={titleId}
           aria-describedby={bodyId}
-          className={`absolute bottom-0 left-0 right-0 rounded-t-3xl overflow-hidden max-h-[85dvh] overflow-y-auto bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl transition-all ${dur} ${ease} ${mobileMotion}`}
-          onTouchStart={e => { touchStartY.current = e.touches[0].clientY; }}
-          onTouchEnd={e => {
-            if (touchStartY.current !== null && notice.dismissible) {
-              const delta = e.changedTouches[0].clientY - touchStartY.current;
-              if (delta > 80) handleDismiss();
+          className={`absolute bottom-0 left-0 right-0 rounded-t-3xl overflow-hidden h-[85dvh] flex flex-col bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl transition-[opacity,transform] ${dur} ${ease} ${mobileMotion}`}
+          style={{ touchAction: 'pan-y' }}
+          onTouchStart={e => {
+            touchStartX.current = e.touches[0].clientX;
+            touchStartY.current = e.touches[0].clientY;
+            dragLockRef.current = null;
+            scrollTopAtTouchStart.current = contentWrapperRef.current?.scrollTop ?? 0;
+          }}
+          onTouchMove={e => {
+            if (prefersReducedMotion) return;
+            const startX = touchStartX.current;
+            const startY = touchStartY.current;
+            if (startX === null || startY === null) return;
+            const dx = e.touches[0].clientX - startX;
+            const dy = e.touches[0].clientY - startY;
+            // Classify gesture direction on first significant movement
+            if (!dragLockRef.current) {
+              if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
+                dragLockRef.current = Math.abs(dx) >= Math.abs(dy) ? 'h' : 'v';
+                // Reset adjacent slots to top before they slide into view.
+                if (dragLockRef.current === 'h') {
+                  prevSlotRef.current?.scrollTo({ top: 0 });
+                  nextSlotRef.current?.scrollTo({ top: 0 });
+                }
+              }
+              return;
             }
+            if (dragLockRef.current === 'h') {
+              const strip = stripRef.current;
+              if (!strip) return;
+              strip.style.transition = 'none';
+              // Strip base = -33.333% (center slot visible); dx offsets from there
+              strip.style.transform = `translateX(calc(-33.333% + ${dx}px))`;
+            } else if (dragLockRef.current === 'v' && notice.dismissible) {
+              // Only intercept downward drag for dismiss when the sheet is scrolled to the top.
+              // If scrolled into content, let native pan-y scroll it back up.
+              if (scrollTopAtTouchStart.current > 0) return;
+              const sheet = sheetRef.current;
+              if (!sheet || dy <= 0) return;
+              sheet.style.transition = 'none';
+              sheet.style.transform = `translateY(${dy}px)`;
+            }
+          }}
+          onTouchEnd={e => {
+            const startX = touchStartX.current;
+            const startY = touchStartY.current;
+            touchStartX.current = null;
             touchStartY.current = null;
+            const lock = dragLockRef.current;
+            dragLockRef.current = null;
+
+            if (lock === 'h') {
+              if (startX === null) return;
+              const deltaX = e.changedTouches[0].clientX - startX;
+              const strip = stripRef.current;
+              if (!strip) return;
+
+              const goNext = isRtlLanguage(language) ? deltaX > 50 : deltaX < -50;
+              const goPrev = isRtlLanguage(language) ? deltaX < -50 : deltaX > 50;
+              const canGoNext = canPage && idx < notices.length - 1;
+              const canGoPrev = canPage && idx > 0;
+
+              if ((goNext && canGoNext) || (goPrev && canGoPrev)) {
+                // Animate strip to the adjacent slot (-66.666% = next, 0% = prev)
+                strip.style.transition = 'transform 200ms ease-out';
+                strip.style.transform = goNext ? 'translateX(-66.666%)' : 'translateX(0%)';
+                strip.addEventListener('transitionend', function onDone() {
+                  strip.removeEventListener('transitionend', onDone);
+                  strip.style.transition = 'none';
+                  // Render new content into the center slot BEFORE moving the strip,
+                  // so the browser never paints old content at the center position.
+                  const newIdx = goNext ? idx + 1 : idx - 1;
+                  flushSync(() => {
+                    isPageNavRef.current = true;
+                    setIdx(newIdx);
+                    announceIndex(newIdx, notices.length);
+                  });
+                  // Reset all slot scrolls so the new center starts at top.
+                  prevSlotRef.current?.scrollTo({ top: 0 });
+                  contentWrapperRef.current?.scrollTo({ top: 0 });
+                  nextSlotRef.current?.scrollTo({ top: 0 });
+                  strip.style.transform = 'translateX(-33.333%)';
+                }, { once: true });
+              } else {
+                // Spring back to center
+                strip.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
+                strip.style.transform = 'translateX(-33.333%)';
+                strip.addEventListener('transitionend', function onSnap() {
+                  strip.removeEventListener('transitionend', onSnap);
+                  strip.style.transition = '';
+                  strip.style.transform = 'translateX(-33.333%)';
+                }, { once: true });
+              }
+              return;
+            }
+
+            // Vertical drag — animated dismiss or spring back (only when at scroll top)
+            if (lock === 'v' && startY !== null && scrollTopAtTouchStart.current === 0) {
+              const deltaY = e.changedTouches[0].clientY - startY;
+              const sheet = sheetRef.current;
+              if (deltaY > 80 && notice.dismissible) {
+                animatedDismissAll();
+              } else if (sheet && deltaY > 0) {
+                sheet.style.transition = 'transform 300ms cubic-bezier(0.34,1.56,0.64,1)';
+                sheet.style.transform = 'translateY(0)';
+                sheet.addEventListener('transitionend', function onSnap() {
+                  sheet.removeEventListener('transitionend', onSnap);
+                  sheet.style.transition = '';
+                  sheet.style.transform = '';
+                }, { once: true });
+              }
+            }
           }}
         >
-          {/* Drag handle */}
-          <div className="pt-3 pb-1 flex justify-center">
+          {/* Drag handle — fixed, does not scroll */}
+          <div className="pt-3 pb-1 flex justify-center shrink-0">
             <div className="w-9 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
           </div>
-          <div ref={contentWrapperRef}>
-            <NoticeContent {...contentProps} />
+          {/* Clip container — fills remaining sheet height, hides adjacent slots */}
+          <div style={{ flex: '1 1 0', minHeight: 0, overflow: 'hidden', width: '100%' }}>
+            {/* 3-slot strip: [prev][current][next] — starts at -33.333% to show current */}
+            <div
+              ref={stripRef}
+              style={{ display: 'flex', width: '300%', height: '100%', alignItems: 'stretch', transform: 'translateX(-33.333%)' }}
+            >
+              <div ref={prevSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+                {prevNotice && <NoticeContent {...buildSlotProps(prevNotice, idx - 1)} />}
+              </div>
+              <div ref={contentWrapperRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+                <NoticeContent {...contentProps} />
+              </div>
+              <div ref={nextSlotRef} style={{ width: '33.333%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+                {nextNotice && <NoticeContent {...buildSlotProps(nextNotice, idx + 1)} />}
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -569,7 +798,7 @@ export function ModalRenderer({ notices }: Props) {
   }
 
   // Desktop centered modal
-  const maxWidth = notice.severity === 'critical' ? 'max-w-[560px]' : 'max-w-[480px]';
+  const maxWidth = notice.severity === 'critical' ? 'max-w-[680px]' : 'max-w-[620px]';
   const desktopMotion = prefersReducedMotion
     ? (visible ? 'opacity-100' : 'opacity-0')
     : (visible ? 'opacity-100 scale-100' : 'opacity-0 scale-[0.97]');
@@ -578,7 +807,7 @@ export function ModalRenderer({ notices }: Props) {
     <div
       className={`fixed inset-0 z-50 bg-slate-950/40 backdrop-blur-[2px] transition-opacity ${dur} ${ease} ${visible ? 'opacity-100' : 'opacity-0'}`}
       role="presentation"
-      onClick={notice.dismissible ? handleDismiss : undefined}
+      onClick={notice.dismissible && isLastPage ? handleDismissAll : undefined}
     >
       {/* Screen-reader page announcements */}
       <span className="sr-only" role="status" aria-live="polite" aria-atomic="true">{pageAnnouncement}</span>
@@ -588,7 +817,7 @@ export function ModalRenderer({ notices }: Props) {
           aria-modal="true"
           aria-labelledby={titleId}
           aria-describedby={bodyId}
-          className={`w-full ${maxWidth} rounded-2xl overflow-hidden shadow-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 transition-all ${dur} ${ease} ${desktopMotion}`}
+          className={`w-full ${maxWidth} rounded-2xl overflow-hidden overflow-y-auto max-h-[90vh] shadow-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 transition-all ${dur} ${ease} ${desktopMotion}`}
           onClick={e => e.stopPropagation()}
         >
           <div ref={contentWrapperRef}>

client/src/components/Todo/TodoListPanel.test.tsx

@@ -37,9 +37,10 @@ describe('TodoListPanel', () => {
     expect(screen.getByText('Buy tickets')).toBeInTheDocument();
   });
 
-  it('FE-COMP-TODO-002: shows Add new task button', () => {
-    render(<TodoListPanel tripId={1} items={[]} />);
-    expect(screen.getByText('Add new task...')).toBeInTheDocument();
+  it('FE-COMP-TODO-002: raising addItemSignal opens the new task form', async () => {
+    const { rerender } = render(<TodoListPanel tripId={1} items={[]} addItemSignal={0} />);
+    rerender(<TodoListPanel tripId={1} items={[]} addItemSignal={1} />);
+    await screen.findByText('Create task');
   });
 
   it('FE-COMP-TODO-003: sidebar filter buttons are rendered', () => {
@@ -119,11 +120,9 @@ describe('TodoListPanel', () => {
     expect(screen.getByText(/1 \/ 2 completed/i)).toBeInTheDocument();
   });
 
-  it('FE-COMP-TODO-011: clicking Add new task opens detail form', async () => {
-    const user = userEvent.setup();
-    render(<TodoListPanel tripId={1} items={[]} />);
-    await user.click(screen.getByText('Add new task...'));
-    // The detail pane shows "Create task" button
+  it('FE-COMP-TODO-011: raising addItemSignal opens detail form with Create task button', async () => {
+    const { rerender } = render(<TodoListPanel tripId={1} items={[]} addItemSignal={0} />);
+    rerender(<TodoListPanel tripId={1} items={[]} addItemSignal={1} />);
     await screen.findByText('Create task');
   });
 
@@ -398,15 +397,12 @@ describe('TodoListPanel', () => {
         return HttpResponse.json({ item: buildTodoItem({ id: 99, name: 'Brand New Task' }) });
       }),
     );
-    render(<TodoListPanel tripId={1} items={[]} />);
-    // Open the new task pane
-    await user.click(screen.getByText('Add new task...'));
-    // Wait for "Create task" button to appear
+    const { rerender } = render(<TodoListPanel tripId={1} items={[]} addItemSignal={0} />);
+    // Raising the signal opens the new task pane (simulates the toolbar button click)
+    rerender(<TodoListPanel tripId={1} items={[]} addItemSignal={1} />);
     await screen.findByText('Create task');
-    // Type a task name in the autoFocus input (Task name placeholder)
     const nameInput = screen.getByPlaceholderText('Task name');
     await user.type(nameInput, 'Brand New Task');
-    // Click the Create task button
     await user.click(screen.getByText('Create task'));
     await waitFor(() => expect(postCalled).toBe(true));
   });

client/src/components/Todo/TodoListPanel.tsx

@@ -1,4 +1,5 @@
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo, useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
@@ -37,7 +38,7 @@ type FilterType = 'all' | 'my' | 'overdue' | 'done' | string
 
 interface Member { id: number; username: string; avatar: string | null }
 
-export default function TodoListPanel({ tripId, items }: { tripId: number; items: TodoItem[] }) {
+export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tripId: number; items: TodoItem[]; addItemSignal?: number }) {
   const { addTodoItem, updateTodoItem, deleteTodoItem, toggleTodoItem } = useTripStore()
   const canEdit = useCanDo('packing_edit')
   const toast = useToast()
@@ -55,6 +56,15 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
   const [filter, setFilter] = useState<FilterType>('all')
   const [selectedId, setSelectedId] = useState<number | null>(null)
   const [isAddingNew, setIsAddingNew] = useState(false)
+  const lastHandledAddSignal = useRef(addItemSignal)
+
+  useEffect(() => {
+    if (addItemSignal !== lastHandledAddSignal.current && addItemSignal > 0) {
+      setSelectedId(null)
+      setIsAddingNew(true)
+    }
+    lastHandledAddSignal.current = addItemSignal
+  }, [addItemSignal])
   const [sortByPrio, setSortByPrio] = useState(false)
   const [addingCategory, setAddingCategory] = useState(false)
   const [newCategoryName, setNewCategoryName] = useState('')
@@ -160,12 +170,12 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
       {/* ── Left Sidebar ── */}
       <div style={{
         width: isMobile ? 52 : 220, flexShrink: 0, borderRight: '1px solid var(--border-faint)',
-        padding: isMobile ? '12px 6px' : '16px 10px', display: 'flex', flexDirection: 'column', gap: 2, overflowY: 'auto',
+        padding: isMobile ? '12px 6px' : '16px 12px 16px 0', display: 'flex', flexDirection: 'column', gap: 2, overflowY: 'auto',
         transition: 'width 0.2s',
       }}>
         {/* Progress Card */}
         {!isMobile && <div style={{
-          margin: '0 6px 12px', padding: '14px 14px 12px', borderRadius: 14,
+          margin: '0 0 12px', padding: '14px 14px 12px', borderRadius: 14,
           background: 'var(--bg-hover)',
           border: '1px solid var(--border-primary)',
           boxShadow: '0 1px 2px rgba(0,0,0,0.02)',
@@ -192,9 +202,12 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
         <SidebarItem id="overdue" icon={AlertCircle} label={t('todo.filter.overdue')} count={overdueCount} />
         <SidebarItem id="done" icon={CheckCheck} label={t('todo.filter.done')} count={doneCount} />
 
-        {/* Sort by priority */}
+        {/* Sort by */}
+        {!isMobile && <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', padding: '16px 12px 4px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+          {t('todo.sidebar.sortBy')}
+        </div>}
         <button onClick={() => setSortByPrio(v => !v)}
-          title={isMobile ? t('todo.sortByPrio') : undefined}
+          title={isMobile ? t('todo.priority') : undefined}
           style={{
             display: 'flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start',
             gap: isMobile ? 0 : 8, width: '100%', padding: isMobile ? '8px 0' : '7px 12px',
@@ -206,7 +219,7 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
           onMouseEnter={e => { if (!sortByPrio) e.currentTarget.style.background = 'var(--bg-hover)' }}
           onMouseLeave={e => { if (!sortByPrio) e.currentTarget.style.background = 'transparent' }}>
           <Flag size={isMobile ? 18 : 15} style={{ flexShrink: 0, opacity: 0.7 }} />
-          {!isMobile && <span style={{ flex: 1, textAlign: 'left' }}>{t('todo.sortByPrio')}</span>}
+          {!isMobile && <span style={{ flex: 1, textAlign: 'left' }}>{t('todo.priority')}</span>}
         </button>
 
         {/* Categories */}
@@ -251,27 +264,6 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
           </div>
         </div>
 
-        {/* Add task */}
-        {canEdit && (
-          <div style={{ padding: '10px 20px', borderBottom: '1px solid var(--border-faint)' }}>
-            <button
-              onClick={() => { setSelectedId(null); setIsAddingNew(true) }}
-              style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-                width: '100%', padding: '9px 16px', borderRadius: 8,
-                background: isAddingNew ? 'var(--text-primary)' : 'var(--bg-hover)',
-                color: isAddingNew ? 'var(--bg-primary)' : 'var(--text-primary)',
-                border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
-                fontSize: 13, fontWeight: 600, transition: 'all 0.15s',
-              }}
-              onMouseEnter={e => { if (!isAddingNew) { e.currentTarget.style.background = 'var(--text-primary)'; e.currentTarget.style.color = 'var(--bg-primary)'; e.currentTarget.style.borderColor = 'var(--text-primary)' } }}
-              onMouseLeave={e => { if (!isAddingNew) { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-primary)'; e.currentTarget.style.borderColor = 'var(--border-primary)' } }}>
-              <Plus size={14} />
-              {t('todo.addItem')}
-            </button>
-          </div>
-        )}
-
         {/* Task list */}
         <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0' }}>
           {filtered.length === 0 ? null : (
@@ -394,7 +386,7 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
       )}
       {selectedItem && !isAddingNew && isMobile && (
         <div onClick={e => { if (e.target === e.currentTarget) setSelectedId(null) }}
-          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
+          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' } } }}>
             <DetailPane
@@ -407,19 +399,28 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
           </div>
         </div>
       )}
-      {isAddingNew && !selectedItem && !isMobile && (
-        <NewTaskPane
-          tripId={tripId}
-          categories={categories}
-          members={members}
-          defaultCategory={typeof filter === 'string' && categories.includes(filter) ? filter : null}
-          onCreated={(id) => { setIsAddingNew(false); setSelectedId(id) }}
-          onClose={() => setIsAddingNew(false)}
-        />
-      )}
-      {isAddingNew && !selectedItem && isMobile && (
+      {isAddingNew && !selectedItem && !isMobile && ReactDOM.createPortal(
         <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
-          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
+          className="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' } } }}>
+            <NewTaskPane
+              tripId={tripId}
+              categories={categories}
+              members={members}
+              defaultCategory={typeof filter === 'string' && categories.includes(filter) ? filter : null}
+              onCreated={(id) => { setIsAddingNew(false); setSelectedId(id) }}
+              onClose={() => setIsAddingNew(false)}
+            />
+          </div>
+        </div>,
+        document.body
+      )}
+      {isAddingNew && !selectedItem && isMobile && ReactDOM.createPortal(
+        <div onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
+          className="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' } } }}>
             <NewTaskPane
@@ -431,7 +432,8 @@ export default function TodoListPanel({ tripId, items }: { tripId: number; items
               onClose={() => setIsAddingNew(false)}
             />
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   )
@@ -647,6 +649,7 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
   const [desc, setDesc] = useState('')
   const [dueDate, setDueDate] = useState('')
   const [category, setCategory] = useState(defaultCategory || '')
+  const [addingCategory, setAddingCategoryInline] = useState(false)
   const [assignedUserId, setAssignedUserId] = useState<number | null>(null)
   const [priority, setPriority] = useState(0)
   const [saving, setSaving] = useState(false)
@@ -657,9 +660,10 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
     if (!name.trim()) return
     setSaving(true)
     try {
+      const trimmedCategory = category.trim()
       const item = await addTodoItem(tripId, {
         name: name.trim(), description: desc || null, priority,
-        due_date: dueDate || null, category: category || null,
+        due_date: dueDate || null, category: trimmedCategory || null,
         assigned_user_id: assignedUserId,
       } as any)
       if (item?.id) onCreated(item.id)
@@ -696,19 +700,49 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
 
         <div>
           <label style={labelStyle}>{t('todo.detail.category')}</label>
-          <CustomSelect
-            value={category}
-            onChange={v => setCategory(v)}
-            options={[
-              { value: '', label: t('todo.noCategory') },
-              ...categories.map(c => ({
-                value: c, label: c,
-                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
-              })),
-            ]}
-            placeholder={t('todo.noCategory')}
-            size="sm"
-          />
+          {addingCategory ? (
+            <div style={{ display: 'flex', gap: 4 }}>
+              <input
+                autoFocus
+                value={category}
+                onChange={e => setCategory(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') setAddingCategoryInline(false); if (e.key === 'Escape') { setCategory(''); setAddingCategoryInline(false) } }}
+                placeholder={t('todo.newCategory')}
+                style={{ flex: 1, fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)', borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }}
+              />
+              <button type="button" onClick={() => setAddingCategoryInline(false)}
+                style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-primary)' }}>
+                <Check size={14} />
+              </button>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', gap: 4 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <CustomSelect
+                  value={category}
+                  onChange={v => setCategory(v)}
+                  options={[
+                    { value: '', label: t('todo.noCategory') },
+                    ...categories.map(c => ({
+                      value: c, label: c,
+                      icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
+                    })),
+                    ...(category && !categories.includes(category) ? [{
+                      value: category, label: `${category} (${t('todo.newCategoryLabel') || 'new'})`,
+                      icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#9ca3af', display: 'inline-block' }} />,
+                    }] : []),
+                  ]}
+                  placeholder={t('todo.noCategory')}
+                  size="sm"
+                />
+              </div>
+              <button type="button" onClick={() => { setCategory(''); setAddingCategoryInline(true) }}
+                title={t('todo.newCategory')}
+                style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit' }}>
+                <Plus size={14} />
+              </button>
+            </div>
+          )}
         </div>
 
         <div>

client/src/components/Vacay/VacayCalendar.tsx

@@ -94,7 +94,7 @@ export default function VacayCalendar() {
         <div className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-xl border" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', boxShadow: '0 8px 32px rgba(0,0,0,0.12)' }}>
           <button
             onClick={() => setCompanyMode(false)}
-            className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
+            className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-[background-color,color,border-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]"
             style={{
               background: !companyMode ? 'var(--text-primary)' : 'transparent',
               color: !companyMode ? 'var(--bg-card)' : 'var(--text-muted)',
@@ -107,7 +107,7 @@ export default function VacayCalendar() {
           {companyHolidaysEnabled && (
             <button
               onClick={() => setCompanyMode(true)}
-              className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-all"
+              className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg text-[11px] sm:text-xs font-medium transition-[background-color,color,border-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]"
               style={{
                 background: companyMode ? '#d97706' : 'transparent',
                 color: companyMode ? '#fff' : 'var(--text-muted)',

client/src/components/Vacay/VacayPersons.tsx

@@ -121,9 +121,9 @@ export default function VacayPersons() {
 
       {/* Invite Modal — Portal to body to avoid z-index issues */}
       {showInvite && ReactDOM.createPortal(
-        <div className="fixed inset-0 flex items-center justify-center px-4" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
+        <div className="fixed inset-0 flex items-center justify-center px-4 trek-backdrop-enter" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
           onClick={() => setShowInvite(false)}>
-          <div className="rounded-2xl shadow-2xl w-full max-w-sm" style={{ background: 'var(--bg-card)', animation: 'modalIn 0.2s ease-out' }}
+          <div className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-sm" style={{ background: 'var(--bg-card)' }}
             onClick={e => e.stopPropagation()}>
             <div className="flex items-center justify-between p-5" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
               <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.inviteUser')}</h2>
@@ -164,9 +164,9 @@ export default function VacayPersons() {
 
       {/* Color Picker Modal — Portal to body */}
       {showColorPicker && ReactDOM.createPortal(
-        <div className="fixed inset-0 flex items-center justify-center px-4" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
+        <div className="fixed inset-0 flex items-center justify-center px-4 trek-backdrop-enter" style={{ zIndex: 99990, backgroundColor: 'rgba(15,23,42,0.5)', paddingTop: 70 }}
           onClick={() => { setShowColorPicker(false); setColorEditUserId(null) }}>
-          <div className="rounded-2xl shadow-2xl w-full max-w-xs" style={{ background: 'var(--bg-card)', animation: 'modalIn 0.2s ease-out' }}
+          <div className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-xs" style={{ background: 'var(--bg-card)' }}
             onClick={e => e.stopPropagation()}>
             <div className="flex items-center justify-between p-5" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
               <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('vacay.changeColor')}</h2>
@@ -178,7 +178,7 @@ export default function VacayPersons() {
               <div className="flex flex-wrap gap-2 justify-center">
                 {PRESET_COLORS.map(c => (
                   <button key={c} onClick={() => handleColorChange(c)}
-                    className={`w-8 h-8 rounded-full transition-all ${editingUserColor === c ? 'ring-2 ring-offset-2 scale-110' : 'hover:scale-110'}`}
+                    className={`w-8 h-8 rounded-full transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] ${editingUserColor === c ? 'ring-2 ring-offset-2 scale-110' : 'hover:scale-110'}`}
                     style={{ backgroundColor: c }} />
                 ))}
               </div>

client/src/components/Vacay/VacayStats.tsx

@@ -87,7 +87,10 @@ function StatCard({ stat: s, isMe, canEdit, selectedYear, onSave, t }: StatCardP
         <span className="text-[10px] tabular-nums" style={{ color: 'var(--text-faint)' }}>{s.used}/{s.total_available}</span>
       </div>
       <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--bg-secondary)' }}>
-        <div className="h-full rounded-full transition-all duration-500" style={{ width: `${pct}%`, backgroundColor: s.person_color }} />
+        <div
+          className="trek-bar-fill h-full rounded-full transition-[width] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          style={{ width: `${pct}%`, backgroundColor: s.person_color }}
+        />
       </div>
       <div className="grid grid-cols-3 gap-1.5">
         {/* Days — editable */}

client/src/components/Weather/WeatherWidget.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind } from 'lucide-react'
-import { weatherApi } from '../../api/client'
+import { fetchWeather } from '../../services/weatherQueue'
 import { useSettingsStore } from '../../store/settingsStore'
 
 const WEATHER_ICON_MAP = {
@@ -61,7 +61,7 @@ export default function WeatherWidget({ lat, lng, date, compact = false }: Weath
       // Climate data: use from cache but re-fetch in background to upgrade to forecast
       else if (cached.type === 'climate') {
         setWeather(cached)
-        weatherApi.get(lat, lng, date)
+        fetchWeather(lat, lng, date)
           .then(data => {
             if (!data.error && data.temp !== undefined && data.type === 'forecast') {
               setWeatherCache(cacheKey, data)
@@ -77,7 +77,7 @@ export default function WeatherWidget({ lat, lng, date, compact = false }: Weath
       return
     }
     setLoading(true)
-    weatherApi.get(lat, lng, date)
+    fetchWeather(lat, lng, date)
       .then(data => {
         if (data.error || data.temp === undefined) {
           setFailed(true)

client/src/components/shared/ConfirmDialog.tsx

@@ -40,16 +40,13 @@ export default function ConfirmDialog({
 
   return (
     <div
-      className="fixed inset-0 z-[60] flex items-center justify-center px-4"
-      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)' }}
+      className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingBottom: 'var(--bottom-nav-h)' }}
       onClick={onClose}
     >
       <div
-        className="rounded-2xl shadow-2xl w-full max-w-sm p-6"
-        style={{
-          animation: 'modalIn 0.2s ease-out forwards',
-          background: 'var(--bg-card)',
-        }}
+        className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-sm p-6"
+        style={{ background: 'var(--bg-card)' }}
         onClick={e => e.stopPropagation()}
       >
         <div className="flex items-start gap-4">
@@ -90,12 +87,6 @@ export default function ConfirmDialog({
         </div>
       </div>
 
-      <style>{`
-        @keyframes modalIn {
-          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
-          to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-      `}</style>
     </div>
   )
 }

client/src/components/shared/ContextMenu.tsx

@@ -65,7 +65,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
   if (!menu) return null
 
   return ReactDOM.createPortal(
-    <div ref={ref} style={{
+    <div ref={ref} className="trek-popover-enter" style={{
       position: 'fixed', left: menu.x, top: menu.y, zIndex: 999999,
       background: 'var(--bg-card)', borderRadius: 10, padding: '4px',
       border: '1px solid var(--border-primary)',
@@ -73,7 +73,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
       backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
       minWidth: 160,
       fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
-      animation: 'ctxIn 0.1s ease-out',
+      transformOrigin: 'top left',
     }}>
       {menu.items.filter(Boolean).map((item, i) => {
         if (item.divider) return <div key={i} style={{ height: 1, background: 'var(--border-faint)', margin: '3px 6px' }} />
@@ -95,7 +95,6 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
           </button>
         )
       })}
-      <style>{`@keyframes ctxIn { from { opacity: 0; transform: scale(0.95) } to { opacity: 1; transform: scale(1) } }`}</style>
     </div>,
     document.body
   )

client/src/components/shared/CopyButton.tsx

@@ -0,0 +1,65 @@
+import React, { useCallback, useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+
+interface CopyButtonProps {
+  value: string
+  size?: number
+  title?: string
+  className?: string
+  onCopy?: () => void
+}
+
+// Button that morphs between copy icon and check icon for 1.5s after click.
+export function CopyButton({ value, size = 14, title, className, onCopy }: CopyButtonProps): React.ReactElement {
+  const [copied, setCopied] = useState(false)
+
+  const handleClick = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+      onCopy?.()
+      window.setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // noop
+    }
+  }, [value, onCopy])
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      title={title}
+      className={className}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: size + 12,
+        height: size + 12,
+        border: 'none',
+        background: 'transparent',
+        color: copied ? '#22c55e' : 'var(--text-muted)',
+        cursor: 'pointer',
+        borderRadius: 6,
+      }}
+    >
+      <Copy size={size} style={{
+        position: 'absolute',
+        transition: 'opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1)',
+        opacity: copied ? 0 : 1,
+        transform: copied ? 'scale(0.6) rotate(-45deg)' : 'scale(1) rotate(0)',
+      }} />
+      <Check size={size} style={{
+        position: 'absolute',
+        transition: 'opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1)',
+        opacity: copied ? 1 : 0,
+        transform: copied ? 'scale(1) rotate(0)' : 'scale(0.6) rotate(45deg)',
+        strokeWidth: 2.5,
+      }} />
+    </button>
+  )
+}
+
+export default CopyButton

client/src/components/shared/CopyTripDialog.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useCallback } from 'react'
+import { Check, X } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+
+interface CopyTripDialogProps {
+  isOpen: boolean
+  tripTitle: string
+  onClose: () => void
+  onConfirm: () => void
+}
+
+const WILL_COPY_KEYS = [
+  'dashboard.confirm.copy.will1',
+  'dashboard.confirm.copy.will2',
+  'dashboard.confirm.copy.will3',
+  'dashboard.confirm.copy.will4',
+  'dashboard.confirm.copy.will5',
+  'dashboard.confirm.copy.will6',
+]
+
+const WONT_COPY_KEYS = [
+  'dashboard.confirm.copy.wont1',
+  'dashboard.confirm.copy.wont2',
+  'dashboard.confirm.copy.wont3',
+  'dashboard.confirm.copy.wont4',
+]
+
+export default function CopyTripDialog({ isOpen, tripTitle, onClose, onConfirm }: CopyTripDialogProps) {
+  const { t } = useTranslation()
+
+  const handleEsc = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose()
+  }, [onClose])
+
+  useEffect(() => {
+    if (isOpen) document.addEventListener('keydown', handleEsc)
+    return () => document.removeEventListener('keydown', handleEsc)
+  }, [isOpen, handleEsc])
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingBottom: 'var(--bottom-nav-h)' }}
+      onClick={onClose}
+    >
+      <div
+        className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-md p-6"
+        style={{ background: 'var(--bg-card)' }}
+        onClick={e => e.stopPropagation()}
+      >
+        <h3 className="text-base font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
+          {t('dashboard.confirm.copy.title')}
+        </h3>
+        <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
+          {tripTitle}
+        </p>
+
+        <div className="flex flex-col gap-3">
+          <div className="rounded-xl p-3" style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-secondary)' }}>
+            <p className="text-xs font-semibold uppercase tracking-wide mb-2" style={{ color: '#16a34a' }}>
+              {t('dashboard.confirm.copy.willCopy')}
+            </p>
+            <ul className="flex flex-col gap-1">
+              {WILL_COPY_KEYS.map(key => (
+                <li key={key} className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  <Check size={13} className="flex-shrink-0" style={{ color: '#16a34a' }} />
+                  {t(key)}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="rounded-xl p-3" style={{ background: 'var(--bg-subtle)', border: '1px solid var(--border-secondary)' }}>
+            <p className="text-xs font-semibold uppercase tracking-wide mb-2" style={{ color: 'var(--text-muted)' }}>
+              {t('dashboard.confirm.copy.wontCopy')}
+            </p>
+            <ul className="flex flex-col gap-1">
+              {WONT_COPY_KEYS.map(key => (
+                <li key={key} className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  <X size={13} className="flex-shrink-0" style={{ color: 'var(--text-muted)' }} />
+                  {t(key)}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 mt-5">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors"
+            style={{ color: 'var(--text-secondary)', border: '1px solid var(--border-secondary)' }}
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={() => { onConfirm(); onClose() }}
+            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors text-white bg-blue-600 hover:bg-blue-700"
+          >
+            {t('dashboard.confirm.copy.confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/shared/CustomDateTimePicker.tsx

@@ -119,13 +119,14 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {}, com
           ...(() => {
             const r = ref.current?.getBoundingClientRect()
             if (!r) return { top: 0, left: 0 }
-            const w = 268, pad = 8
+            const w = 268, pad = 8, h = 360
             const vw = window.innerWidth
-            const vh = window.innerHeight
+            const vh = window.visualViewport?.height ?? window.innerHeight
             let left = r.left
             let top = r.bottom + 4
             if (left + w > vw - pad) left = Math.max(pad, vw - w - pad)
-            if (top + 320 > vh) top = Math.max(pad, r.top - 320)
+            if (top + h > vh - pad) top = r.top - h - 4
+            top = Math.max(pad, Math.min(top, vh - h - pad))
             if (vw < 360) left = Math.max(pad, (vw - w) / 2)
             return { top, left }
           })(),

client/src/components/shared/CustomSelect.tsx

@@ -9,6 +9,7 @@ interface SelectOption {
   isHeader?: boolean
   searchLabel?: string
   groupLabel?: string
+  badge?: string
 }
 
 interface CustomSelectProps {
@@ -104,7 +105,14 @@ export default function CustomSelect({
         <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: selected ? 'var(--text-primary)' : 'var(--text-faint)' }}>
           {selected ? selected.label : placeholder}
         </span>
-        <ChevronDown size={sm ? 12 : 14} style={{ flexShrink: 0, color: 'var(--text-faint)', transition: 'transform 0.2s', transform: open ? 'rotate(180deg)' : 'none' }} />
+        {selected?.badge && (
+          <span style={{
+            flexShrink: 0, fontSize: 10, fontWeight: 600, color: 'var(--text-muted)',
+            background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 999,
+            letterSpacing: '0.01em',
+          }}>{selected.badge}</span>
+        )}
+        <ChevronDown size={sm ? 12 : 14} style={{ flexShrink: 0, color: 'var(--text-faint)', transition: 'transform 200ms cubic-bezier(0.23,1,0.32,1)', transform: open ? 'rotate(180deg)' : 'none' }} />
       </button>
 
       {/* Dropdown */}
@@ -128,7 +136,9 @@ export default function CustomSelect({
           borderRadius: 10,
           boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
           overflow: 'hidden',
-          animation: 'selectIn 0.15s ease-out',
+          animation: 'trek-menu-enter 200ms cubic-bezier(0.23, 1, 0.32, 1)',
+          transformOrigin: 'top center',
+          willChange: 'transform, opacity',
         }}>
           {/* Search */}
           {searchable && (
@@ -184,6 +194,13 @@ export default function CustomSelect({
                   >
                     {option.icon && <span style={{ display: 'flex', flexShrink: 0 }}>{option.icon}</span>}
                     <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{option.label}</span>
+                    {option.badge && (
+                      <span style={{
+                        flexShrink: 0, fontSize: 10, fontWeight: 600, color: 'var(--text-muted)',
+                        background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 999,
+                        letterSpacing: '0.01em',
+                      }}>{option.badge}</span>
+                    )}
                     {isSelected && <Check size={13} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />}
                   </button>
                 )
@@ -194,12 +211,6 @@ export default function CustomSelect({
         document.body
       )}
 
-      <style>{`
-        @keyframes selectIn {
-          from { opacity: 0; transform: translateY(-4px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-      `}</style>
     </div>
   )
 }

client/src/components/shared/LoadingImage.tsx

@@ -0,0 +1,36 @@
+import React, { useState, type ImgHTMLAttributes } from 'react'
+
+interface LoadingImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  containerClassName?: string
+  containerStyle?: React.CSSProperties
+}
+
+// Image with shimmer-placeholder until loaded. Drops the shimmer once native load fires.
+export function LoadingImage({
+  containerClassName, containerStyle, className, style, onLoad, ...imgProps
+}: LoadingImageProps): React.ReactElement {
+  const [loaded, setLoaded] = useState(false)
+  return (
+    <div className={containerClassName} style={{ position: 'relative', overflow: 'hidden', ...containerStyle }}>
+      {!loaded && (
+        <div
+          className="trek-skeleton"
+          style={{ position: 'absolute', inset: 0, borderRadius: 0 }}
+          aria-hidden
+        />
+      )}
+      <img
+        {...imgProps}
+        className={className}
+        style={{
+          ...style,
+          opacity: loaded ? 1 : 0,
+          transition: 'opacity 300ms cubic-bezier(0.23, 1, 0.32, 1)',
+        }}
+        onLoad={e => { setLoaded(true); onLoad?.(e) }}
+      />
+    </div>
+  )
+}
+
+export default LoadingImage

client/src/components/shared/Modal.tsx

@@ -50,8 +50,8 @@ export default function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop"
-      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 20, overflow: 'hidden' }}
+      className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop trek-backdrop-enter"
+      style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflow: 'hidden' }}
       onMouseDown={e => { mouseDownTarget.current = e.target }}
       onClick={e => {
         if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) onClose()
@@ -60,18 +60,16 @@ export default function Modal({
     >
       <div
         className={`
-          rounded-2xl shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
-          flex flex-col max-h-[calc(100vh-180px)] md:max-h-[calc(100vh-90px)]
-          animate-in fade-in zoom-in-95 duration-200
+          trek-modal-enter
+          rounded-2xl overflow-hidden shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
+          flex flex-col
+          max-h-[calc(100dvh-var(--bottom-nav-h)-90px)] sm:max-h-[calc(100dvh-90px)]
         `}
-        style={{
-          animation: 'modalIn 0.2s ease-out forwards',
-          background: 'var(--bg-card)',
-        }}
+        style={{ background: 'var(--bg-card)' }}
         onClick={e => e.stopPropagation()}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between p-6" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
+        {/* Header — stays put even while the body scrolls */}
+        <div className="flex items-center justify-between p-6 flex-shrink-0" style={{ borderBottom: '1px solid var(--border-secondary)' }}>
           <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
           {!hideCloseButton && (
             <button
@@ -83,25 +81,19 @@ export default function Modal({
           )}
         </div>
 
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto p-6">
+        {/* Body — scrolls when content overflows. min-h-0 lets the flex child shrink below its intrinsic height. */}
+        <div className="flex-1 overflow-y-auto p-6 min-h-0">
           {children}
         </div>
 
-        {/* Footer */}
+        {/* Footer — sticky at the bottom of the modal, never compressed */}
         {footer && (
-          <div className="p-6" style={{ borderTop: '1px solid var(--border-secondary)' }}>
+          <div className="p-6 flex-shrink-0" style={{ borderTop: '1px solid var(--border-secondary)' }}>
             {footer}
           </div>
         )}
       </div>
 
-      <style>{`
-        @keyframes modalIn {
-          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
-          to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-      `}</style>
     </div>
   )
 }

client/src/components/shared/PlaceAvatar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { getCategoryIcon } from './categoryIcons'
 import { getCached, isLoading, fetchPhoto, onThumbReady } from '../../services/photoService'
+import { useAuthStore } from '../../store/authStore'
 import type { Place } from '../../types'
 
 interface Category {
@@ -18,10 +19,12 @@ export default React.memo(function PlaceAvatar({ place, size = 32, category }: P
   const [photoSrc, setPhotoSrc] = useState<string | null>(place.image_url || null)
   const [visible, setVisible] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
+  const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
 
   // Observe visibility — fetch photo only when avatar enters viewport
   useEffect(() => {
     if (place.image_url) { setVisible(true); return }
+    if (!placesPhotosEnabled) return
     const el = ref.current
     if (!el) return
     // Check if already cached — show immediately without waiting for intersection
@@ -37,6 +40,7 @@ export default React.memo(function PlaceAvatar({ place, size = 32, category }: P
   useEffect(() => {
     if (!visible) return
     if (place.image_url) { setPhotoSrc(place.image_url); return }
+    if (!placesPhotosEnabled) return
     const photoId = place.google_place_id || place.osm_id
     if (!photoId && !(place.lat && place.lng)) { setPhotoSrc(null); return }
 

client/src/components/shared/Skeleton.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+// Simple skeleton placeholder with shimmer. Size via className or props.
+export function Skeleton({
+  width, height, radius, className, style,
+}: {
+  width?: number | string
+  height?: number | string
+  radius?: number | string
+  className?: string
+  style?: React.CSSProperties
+}): React.ReactElement {
+  return (
+    <div
+      className={`trek-skeleton ${className ?? ''}`.trim()}
+      style={{
+        width,
+        height: height ?? 14,
+        borderRadius: radius,
+        ...style,
+      }}
+      aria-hidden
+    />
+  )
+}
+
+// Trip card skeleton matching SpotlightCard layout
+export function SpotlightSkeleton(): React.ReactElement {
+  return (
+    <div
+      className="relative rounded-3xl overflow-hidden mb-8"
+      style={{ minHeight: 340, background: 'var(--bg-tertiary)' }}
+    >
+      <div className="trek-skeleton absolute inset-0" style={{ borderRadius: 24 }} />
+      <div className="relative p-6 flex flex-col justify-end" style={{ minHeight: 340 }}>
+        <Skeleton width={160} height={40} radius={8} style={{ marginBottom: 8 }} />
+        <Skeleton width={220} height={16} radius={4} />
+      </div>
+    </div>
+  )
+}
+
+// Trip list item skeleton
+export function TripCardSkeleton(): React.ReactElement {
+  return (
+    <div
+      className="rounded-2xl border border-zinc-200 dark:border-zinc-700 overflow-hidden"
+      style={{ background: 'var(--bg-card)' }}
+    >
+      <Skeleton height={140} radius={0} />
+      <div className="p-4 flex flex-col gap-2">
+        <Skeleton width="60%" height={18} />
+        <Skeleton width="40%" height={12} />
+      </div>
+    </div>
+  )
+}
+
+// Day sidebar skeleton row
+export function DaySkeleton(): React.ReactElement {
+  return (
+    <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <Skeleton width={120} height={16} />
+      <Skeleton width="80%" height={12} />
+      <Skeleton width="60%" height={12} />
+    </div>
+  )
+}
+
+export default Skeleton

client/src/components/shared/SlidingTabs.tsx

@@ -0,0 +1,126 @@
+import React, { useLayoutEffect, useRef, useState, type CSSProperties } from 'react'
+
+export interface SlidingTab<T extends string> {
+  id: T
+  label: React.ReactNode
+  title?: string
+  icon?: React.ComponentType<{ size?: number; className?: string }>
+  count?: number
+}
+
+interface SlidingTabsProps<T extends string> {
+  tabs: readonly SlidingTab<T>[]
+  activeTab: T
+  onChange: (id: T) => void
+  size?: 'sm' | 'md'
+  fullWidth?: boolean
+  className?: string
+  indicatorColor?: string
+  indicatorTextColor?: string
+}
+
+// Stripe-style sliding indicator — der aktive Pill gleitet zwischen Tabs.
+// Nutzt gemessene Offsets der Buttons + CSS transform.
+export function SlidingTabs<T extends string>({
+  tabs, activeTab, onChange, size = 'md', fullWidth, className,
+  indicatorColor = 'var(--accent)', indicatorTextColor = 'var(--accent-text)',
+}: SlidingTabsProps<T>): React.ReactElement {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const tabRefs = useRef<Map<T, HTMLButtonElement | null>>(new Map())
+  const [indicator, setIndicator] = useState<{ left: number; width: number; ready: boolean }>({ left: 0, width: 0, ready: false })
+
+  useLayoutEffect(() => {
+    const active = tabRefs.current.get(activeTab)
+    const container = containerRef.current
+    if (!active || !container) return
+    const containerRect = container.getBoundingClientRect()
+    const activeRect = active.getBoundingClientRect()
+    setIndicator({
+      left: activeRect.left - containerRect.left + container.scrollLeft,
+      width: activeRect.width,
+      ready: true,
+    })
+  }, [activeTab, tabs.length])
+
+  const padding = size === 'sm' ? '5px 12px' : '6px 14px'
+  const fontSize = size === 'sm' ? 12 : 13
+  const borderRadius = size === 'sm' ? 18 : 20
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        position: 'relative', display: 'flex', alignItems: 'center',
+        gap: 2, overflowX: 'auto', scrollbarWidth: 'none', msOverflowStyle: 'none',
+        width: fullWidth ? '100%' : undefined,
+      }}
+    >
+      {/* Sliding indicator */}
+      {indicator.ready && (
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: indicator.left,
+            width: indicator.width,
+            height: size === 'sm' ? 26 : 30,
+            background: indicatorColor,
+            borderRadius,
+            transform: 'translateY(-50%)',
+            transition: 'left 320ms cubic-bezier(0.77, 0, 0.175, 1), width 320ms cubic-bezier(0.77, 0, 0.175, 1)',
+            pointerEvents: 'none',
+            zIndex: 0,
+            willChange: 'left, width',
+          }}
+        />
+      )}
+      {tabs.map(tab => {
+        const isActive = tab.id === activeTab
+        const Icon = tab.icon
+        const btnStyle: CSSProperties = {
+          position: 'relative', zIndex: 1,
+          flexShrink: 0,
+          padding,
+          borderRadius,
+          border: 'none',
+          cursor: 'pointer',
+          fontSize,
+          fontWeight: isActive ? 600 : 500,
+          background: 'transparent',
+          color: isActive ? indicatorTextColor : 'var(--text-muted)',
+          fontFamily: 'inherit',
+          transition: 'color 220ms cubic-bezier(0.23, 1, 0.32, 1)',
+          display: 'flex', alignItems: 'center', gap: 6,
+          flex: fullWidth ? 1 : undefined,
+          justifyContent: 'center',
+          whiteSpace: 'nowrap',
+        }
+        return (
+          <button
+            key={tab.id}
+            ref={el => { tabRefs.current.set(tab.id, el) }}
+            onClick={() => onChange(tab.id)}
+            style={btnStyle}
+            title={tab.title ?? (typeof tab.label === 'string' ? tab.label : undefined)}
+          >
+            {Icon && <Icon size={size === 'sm' ? 13 : 15} />}
+            {tab.label}
+            {tab.count != null && (
+              <span style={{
+                fontSize: 10, fontWeight: 600,
+                padding: '1px 6px', borderRadius: 99, minWidth: 16,
+                background: isActive ? 'rgba(255,255,255,0.22)' : 'var(--bg-tertiary)',
+                color: isActive ? 'inherit' : 'var(--text-faint)',
+                textAlign: 'center',
+              }}>{tab.count}</span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default SlidingTabs

client/src/components/shared/Tooltip.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useRef, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+
+interface TooltipProps {
+  label: string
+  placement?: Placement
+  delay?: number
+  disabled?: boolean
+  children: React.ReactElement
+}
+
+export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, children }: TooltipProps) {
+  const [open, setOpen] = useState(false)
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(null)
+  const triggerRef = useRef<HTMLElement | null>(null)
+  const tooltipRef = useRef<HTMLDivElement | null>(null)
+  const timerRef = useRef<number | null>(null)
+
+  const show = () => {
+    if (disabled || !label) return
+    if (timerRef.current) window.clearTimeout(timerRef.current)
+    timerRef.current = window.setTimeout(() => setOpen(true), delay)
+  }
+  const hide = () => {
+    if (timerRef.current) window.clearTimeout(timerRef.current)
+    setOpen(false)
+  }
+
+  useEffect(() => () => { if (timerRef.current) window.clearTimeout(timerRef.current) }, [])
+
+  useEffect(() => {
+    if (!open || !triggerRef.current) return
+    const r = triggerRef.current.getBoundingClientRect()
+    const tipW = tooltipRef.current?.offsetWidth ?? 0
+    const tipH = tooltipRef.current?.offsetHeight ?? 0
+    const gap = 6
+    let top = 0, left = 0
+    if (placement === 'top') { top = r.top - tipH - gap; left = r.left + r.width / 2 - tipW / 2 }
+    else if (placement === 'bottom') { top = r.bottom + gap; left = r.left + r.width / 2 - tipW / 2 }
+    else if (placement === 'left') { top = r.top + r.height / 2 - tipH / 2; left = r.left - tipW - gap }
+    else { top = r.top + r.height / 2 - tipH / 2; left = r.right + gap }
+    const pad = 6
+    left = Math.max(pad, Math.min(left, window.innerWidth - tipW - pad))
+    top = Math.max(pad, Math.min(top, window.innerHeight - tipH - pad))
+    setCoords({ top, left })
+  }, [open, placement, label])
+
+  const child = React.Children.only(children)
+  const trigger = React.cloneElement(child, {
+    ref: (node: HTMLElement | null) => {
+      triggerRef.current = node
+      const r = (child as any).ref
+      if (typeof r === 'function') r(node)
+      else if (r && typeof r === 'object') r.current = node
+    },
+    onMouseEnter: (e: any) => { show(); child.props.onMouseEnter?.(e) },
+    onMouseLeave: (e: any) => { hide(); child.props.onMouseLeave?.(e) },
+    onFocus: (e: any) => { show(); child.props.onFocus?.(e) },
+    onBlur: (e: any) => { hide(); child.props.onBlur?.(e) },
+  })
+
+  return (
+    <>
+      {trigger}
+      {open && ReactDOM.createPortal(
+        <div
+          ref={tooltipRef}
+          role="tooltip"
+          className="trek-popover-enter"
+          style={{
+            position: 'fixed',
+            top: coords?.top ?? -9999,
+            left: coords?.left ?? -9999,
+            visibility: coords ? 'visible' : 'hidden',
+            pointerEvents: 'none',
+            zIndex: 100000,
+            background: 'var(--bg-card, #ffffff)',
+            color: 'var(--text-primary, #111827)',
+            fontSize: 11,
+            fontWeight: 500,
+            padding: '5px 10px',
+            borderRadius: 8,
+            whiteSpace: 'nowrap',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            border: '1px solid var(--border-faint, #e5e7eb)',
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+            transformOrigin: placement === 'top' ? 'bottom center' : placement === 'bottom' ? 'top center' : placement === 'left' ? 'center right' : 'center left',
+          }}
+        >
+          {label}
+        </div>,
+        document.body,
+      )}
+    </>
+  )
+}
+
+export default Tooltip

client/src/hooks/useCountUp.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+
+const isTestEnv = typeof navigator !== 'undefined' && /jsdom/i.test(navigator.userAgent ?? '')
+
+// Zählt beim Mount von 0 auf target hoch. Feste Dauer mit ease-out-quint.
+export function useCountUp(target: number, duration = 800): number {
+  const [value, setValue] = useState(() => isTestEnv || target <= 0 ? target : 0)
+  const startRef = useRef<number | null>(null)
+  const frameRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+    if (reduced || isTestEnv || target <= 0) { setValue(target); return }
+
+    startRef.current = null
+    const step = (now: number) => {
+      if (startRef.current == null) startRef.current = now
+      const elapsed = now - startRef.current
+      const t = Math.min(elapsed / duration, 1)
+      // ease-out-quint
+      const eased = 1 - Math.pow(1 - t, 5)
+      setValue(Math.round(target * eased))
+      if (t < 1) frameRef.current = requestAnimationFrame(step)
+    }
+    frameRef.current = requestAnimationFrame(step)
+    return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current) }
+  }, [target, duration])
+
+  return value
+}

client/src/hooks/useGeolocation.ts

@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+// Permission-gated orientation listener with iOS support. iOS 13+ requires
+// an explicit user gesture to request permission, so the caller triggers
+// this from the "enable location" button click.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DeviceOrientationEventIOS = typeof DeviceOrientationEvent & { requestPermission?: () => Promise<'granted' | 'denied'> }
+
+export interface GeoPosition {
+  lat: number
+  lng: number
+  accuracy: number    // meters
+  heading: number | null   // 0-360°, null when unavailable (stationary, indoor, no sensor)
+  speed: number | null
+  timestamp: number
+}
+
+export type TrackingMode = 'off' | 'show' | 'follow'
+
+export interface UseGeolocationReturn {
+  position: GeoPosition | null
+  mode: TrackingMode
+  error: string | null
+  /** Toggle through off → show → follow → off. Also triggers iOS orientation permission on first call. */
+  cycleMode: () => Promise<void>
+  /** Force-set mode. Accepts a function for derived updates like `prev => prev === 'follow' ? 'show' : prev`. */
+  setMode: (m: TrackingMode | ((prev: TrackingMode) => TrackingMode)) => void
+}
+
+// Keep a tiny EMA on heading so the compass cone doesn't jitter on every
+// device orientation event. Mobile sensors fire at 60Hz and raw readings
+// swing ±5° even when the phone is still — smoothing to ~0.25 weight
+// gives a stable-but-responsive needle.
+function smoothAngle(prev: number | null, next: number, alpha = 0.25): number {
+  if (prev === null) return next
+  // Take the shortest angular distance so we don't lerp the long way around
+  let delta = next - prev
+  if (delta > 180) delta -= 360
+  if (delta < -180) delta += 360
+  return (prev + delta * alpha + 360) % 360
+}
+
+export function useGeolocation(): UseGeolocationReturn {
+  const [position, setPosition] = useState<GeoPosition | null>(null)
+  const [mode, setModeState] = useState<TrackingMode>('off')
+  const [error, setError] = useState<string | null>(null)
+  const watchIdRef = useRef<number | null>(null)
+  const orientationHandlerRef = useRef<((e: DeviceOrientationEvent) => void) | null>(null)
+  const headingRef = useRef<number | null>(null)
+
+  const stopWatch = useCallback(() => {
+    if (watchIdRef.current !== null) {
+      try { navigator.geolocation.clearWatch(watchIdRef.current) } catch { /* noop */ }
+      watchIdRef.current = null
+    }
+    if (orientationHandlerRef.current) {
+      window.removeEventListener('deviceorientationabsolute', orientationHandlerRef.current as EventListener)
+      window.removeEventListener('deviceorientation', orientationHandlerRef.current as EventListener)
+      orientationHandlerRef.current = null
+    }
+    headingRef.current = null
+  }, [])
+
+  const startWatch = useCallback(async () => {
+    if (!('geolocation' in navigator)) {
+      setError('Geolocation is not supported in this browser')
+      return false
+    }
+    setError(null)
+
+    // iOS: ask for orientation permission up front; on Android and desktop
+    // no prompt is needed and the method is undefined.
+    const DOE = (window.DeviceOrientationEvent || {}) as DeviceOrientationEventIOS
+    if (typeof DOE.requestPermission === 'function') {
+      try {
+        const res = await DOE.requestPermission()
+        if (res !== 'granted') {
+          // Permission denied — we still enable location, just no heading cone.
+        }
+      } catch { /* older webkit throws — ignore and proceed */ }
+    }
+
+    // Device orientation → compass heading. `alpha` is rotation around the
+    // Z-axis (0 = facing magnetic north on most devices). The webkit-only
+    // `webkitCompassHeading` is already geographic north + clockwise, so
+    // prefer it when available.
+    const onOrientation = (e: DeviceOrientationEvent) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const ev = e as any
+      let heading: number | null = null
+      if (typeof ev.webkitCompassHeading === 'number') {
+        heading = ev.webkitCompassHeading
+      } else if (e.absolute && typeof e.alpha === 'number') {
+        // alpha is CCW from North; convert to CW heading
+        heading = (360 - e.alpha) % 360
+      } else if (typeof e.alpha === 'number') {
+        // Non-absolute orientation: better than nothing but drifts over time
+        heading = (360 - e.alpha) % 360
+      }
+      if (heading === null || Number.isNaN(heading)) return
+      headingRef.current = smoothAngle(headingRef.current, heading)
+      // Merge into position without triggering a refetch
+      setPosition(p => p ? { ...p, heading: headingRef.current } : p)
+    }
+    orientationHandlerRef.current = onOrientation
+    // Prefer "absolute" which is tied to magnetic north; fall back to plain.
+    window.addEventListener('deviceorientationabsolute', onOrientation as EventListener)
+    window.addEventListener('deviceorientation', onOrientation as EventListener)
+
+    watchIdRef.current = navigator.geolocation.watchPosition(
+      (pos) => {
+        setPosition({
+          lat: pos.coords.latitude,
+          lng: pos.coords.longitude,
+          accuracy: pos.coords.accuracy,
+          // GPS heading is reliable when moving; keep compass reading
+          // otherwise so the arrow still points correctly when stationary.
+          heading: pos.coords.heading ?? headingRef.current,
+          speed: pos.coords.speed ?? null,
+          timestamp: pos.timestamp,
+        })
+      },
+      (err) => {
+        setError(err.message || 'Location unavailable')
+        // Stay subscribed so a later fix can still recover (e.g. GPS
+        // lock takes a while indoors). Only fully stop on permission denial.
+        if (err.code === err.PERMISSION_DENIED) {
+          stopWatch()
+          setModeState('off')
+        }
+      },
+      {
+        enableHighAccuracy: true,
+        maximumAge: 2000,
+        timeout: 15000,
+      }
+    )
+    return true
+  }, [stopWatch])
+
+  const setMode = useCallback((m: TrackingMode | ((prev: TrackingMode) => TrackingMode)) => {
+    setModeState(prev => {
+      const next = typeof m === 'function' ? m(prev) : m
+      if (next === 'off') {
+        stopWatch()
+        setPosition(null)
+      } else if (watchIdRef.current === null) {
+        // started externally but no watch yet — start it
+        startWatch()
+      }
+      return next
+    })
+  }, [startWatch, stopWatch])
+
+  const cycleMode = useCallback(async () => {
+    if (mode === 'off') {
+      const ok = await startWatch()
+      if (ok) setModeState('show')
+    } else if (mode === 'show') {
+      setModeState('follow')
+    } else {
+      setModeState('off')
+      stopWatch()
+      setPosition(null)
+    }
+  }, [mode, startWatch, stopWatch])
+
+  useEffect(() => stopWatch, [stopWatch])
+
+  return { position, mode, error, cycleMode, setMode }
+}

client/src/hooks/useIsMobile.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+
+/** Returns true when the viewport is below the lg breakpoint (1024px). */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth < 1024,
+  )
+
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 1023px)')
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    setIsMobile(mq.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+
+  return isMobile
+}

client/src/hooks/useRouteCalculation.ts

@@ -1,50 +1,123 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { useSettingsStore } from '../store/settingsStore'
+import { useTripStore } from '../store/tripStore'
 import { calculateSegments } from '../components/Map/RouteCalculator'
 import type { TripStoreState } from '../store/tripStore'
 import type { RouteSegment, RouteResult } from '../types'
 
+const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'cruise']
+
 /**
  * Manages route calculation state for a selected day. Extracts geo-coded waypoints from
  * day assignments, draws a straight-line route, and optionally fetches per-segment
  * driving/walking durations via OSRM. Aborts in-flight requests when the day changes.
  */
 export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null) {
-  const [route, setRoute] = useState<[number, number][] | null>(null)
+  const [route, setRoute] = useState<[number, number][][] | null>(null)
   const [routeInfo, setRouteInfo] = useState<RouteResult | null>(null)
   const [routeSegments, setRouteSegments] = useState<RouteSegment[]>([])
   const routeCalcEnabled = useSettingsStore((s) => s.settings.route_calculation) !== false
   const routeAbortRef = useRef<AbortController | null>(null)
-  // Keep a ref to the latest tripStore so updateRouteForDay never has a stale closure
-  const tripStoreRef = useRef(tripStore)
-  tripStoreRef.current = tripStore
+  const reservationsForSignature = useTripStore((s) => s.reservations)
 
   const updateRouteForDay = useCallback(async (dayId: number | null) => {
     if (routeAbortRef.current) routeAbortRef.current.abort()
     if (!dayId) { setRoute(null); setRouteSegments([]); return }
-    const currentAssignments = tripStoreRef.current.assignments || {}
+    // Read directly from store (not a render-phase ref) so callers after optimistic
+    // updates or non-optimistic deletes always see the latest assignments.
+    const currentAssignments = useTripStore.getState().assignments || {}
     const da = (currentAssignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
-    const waypoints = da.map((a) => a.place).filter((p) => p?.lat && p?.lng)
-    if (waypoints.length < 2) { setRoute(null); setRouteSegments([]); return }
-    setRoute(waypoints.map((p) => [p.lat!, p.lng!]))
+    const allReservations = useTripStore.getState().reservations || []
+    const allDays = useTripStore.getState().days || []
+    const dayOrder = (id: number | null | undefined): number | null => {
+      if (id == null) return null
+      const d = allDays.find(x => x.id === id)
+      return d ? ((d as any).day_number ?? allDays.indexOf(d)) : null
+    }
+    const thisOrder = dayOrder(dayId)
+
+    // Transport reservations for this day with a known position — mirrors getTransportForDay semantics
+    const dayTransports = thisOrder == null ? [] : allReservations.filter(r => {
+      if (!TRANSPORT_TYPES.includes(r.type)) return false
+      const startId = r.day_id
+      if (startId == null) return false
+      const endId = r.end_day_id ?? startId
+      if (startId === endId) {
+        if (startId !== dayId) return false
+      } else {
+        const startOrder = dayOrder(startId)
+        const endOrder = dayOrder(endId)
+        if (startOrder == null || endOrder == null) return false
+        if (thisOrder < startOrder || thisOrder > endOrder) return false
+      }
+      const pos = r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position
+      return pos != null
+    })
+
+    // Build a unified list of places + transports sorted by effective position,
+    // then derive segments by resetting whenever a transport appears — mirrors getMergedItems order.
+    type Entry = { kind: 'place'; lat: number; lng: number } | { kind: 'transport' }
+    const entries: (Entry & { pos: number })[] = [
+      ...da.filter(a => a.place?.lat && a.place?.lng).map(a => ({
+        kind: 'place' as const, lat: a.place.lat!, lng: a.place.lng!, pos: a.order_index,
+      })),
+      ...dayTransports.map(r => ({
+        kind: 'transport' as const,
+        pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
+      })),
+    ].sort((a, b) => a.pos - b.pos)
+
+    const segments: [number, number][][] = []
+    let currentSeg: [number, number][] = []
+    for (const entry of entries) {
+      if (entry.kind === 'place') {
+        currentSeg.push([entry.lat, entry.lng])
+      } else {
+        if (currentSeg.length >= 2) segments.push([...currentSeg])
+        currentSeg = []
+      }
+    }
+    if (currentSeg.length >= 2) segments.push(currentSeg)
+
+    const geocodedWaypoints = da.map(a => a.place).filter(p => p?.lat && p?.lng) as { lat: number; lng: number }[]
+
+    if (segments.length === 0 && geocodedWaypoints.length < 2) {
+      setRoute(null); setRouteSegments([]); return
+    }
+    setRoute(segments.length > 0 ? segments : null)
     if (!routeCalcEnabled) { setRouteSegments([]); return }
     const controller = new AbortController()
     routeAbortRef.current = controller
     try {
-      const segments = await calculateSegments(waypoints as { lat: number; lng: number }[], { signal: controller.signal })
-      if (!controller.signal.aborted) setRouteSegments(segments)
+      const calcSegments = await calculateSegments(geocodedWaypoints, { signal: controller.signal })
+      if (!controller.signal.aborted) setRouteSegments(calcSegments)
     } catch (err: unknown) {
       if (err instanceof Error && err.name !== 'AbortError') setRouteSegments([])
       else if (!(err instanceof Error)) setRouteSegments([])
     }
   }, [routeCalcEnabled])
 
-  // Only recalculate when assignments for the SELECTED day change
+  // Stable signature for transport reservations on the selected day — changes when a transport
+  // is added, removed, or repositioned, ensuring route recalc fires even on transport-only reorders.
+  const transportSignature = useMemo(() => {
+    if (!selectedDayId) return ''
+    return reservationsForSignature
+      .filter(r => TRANSPORT_TYPES.includes(r.type))
+      .map(r => {
+        const pos = r.day_positions?.[selectedDayId] ?? r.day_positions?.[String(selectedDayId)] ?? r.day_plan_position
+        return `${r.id}:${r.day_id ?? ''}:${r.end_day_id ?? ''}:${r.reservation_time ?? ''}:${pos ?? ''}`
+      })
+      .sort()
+      .join('|')
+  }, [reservationsForSignature, selectedDayId])
+
+  // Recalculate when assignments or transport positions for the SELECTED day change
   const selectedDayAssignments = selectedDayId ? tripStore.assignments?.[String(selectedDayId)] : null
   useEffect(() => {
     if (!selectedDayId) { setRoute(null); setRouteSegments([]); return }
     updateRouteForDay(selectedDayId)
-  }, [selectedDayId, selectedDayAssignments])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDayId, selectedDayAssignments, transportSignature])
 
   return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
 }

client/src/i18n/translations/ar.ts

@@ -14,6 +14,9 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'إضافة',
   'common.loading': 'جارٍ التحميل...',
   'common.import': 'استيراد',
+  'common.select': 'تحديد',
+  'common.selectAll': 'تحديد الكل',
+  'common.deselectAll': 'إلغاء تحديد الكل',
   'common.error': 'خطأ',
   'common.unknownError': 'خطأ غير معروف',
   'common.tooManyAttempts': 'محاولات كثيرة جدًا. يرجى المحاولة لاحقًا.',
@@ -31,6 +34,8 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'لا شيء',
   'common.date': 'التاريخ',
   'common.rename': 'إعادة تسمية',
+  'common.discardChanges': 'تجاهل التغييرات',
+  'common.discard': 'تجاهل',
   'common.name': 'الاسم',
   'common.email': 'البريد الإلكتروني',
   'common.password': 'كلمة المرور',
@@ -158,6 +163,24 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'settings.mapDefaultHint': 'اتركه فارغًا لاستخدام OpenStreetMap افتراضيًا',
   'settings.mapTemplatePlaceholder': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   'settings.mapHint': 'قالب URL لبلاطات الخريطة',
+  'settings.mapProvider': 'مزود الخريطة',
+  'settings.mapProviderHint': 'يؤثر على خرائط Trip Planner و Journey. يستخدم Atlas دائمًا Leaflet.',
+  'settings.mapLeafletSubtitle': '2D كلاسيكي، أي بلاطات نقطية',
+  'settings.mapMapboxSubtitle': 'بلاطات متجهية ومبانٍ ثلاثية الأبعاد وتضاريس',
+  'settings.mapExperimental': 'تجريبي',
+  'settings.mapMapboxToken': 'رمز وصول Mapbox',
+  'settings.mapMapboxTokenHint': 'الرمز العام (pk.*) من',
+  'settings.mapMapboxTokenLink': 'mapbox.com ← رموز الوصول',
+  'settings.mapStyle': 'نمط الخريطة',
+  'settings.mapStylePlaceholder': 'اختر نمط Mapbox',
+  'settings.mapStyleHint': 'إعداد مسبق أو عنوان URL mapbox://styles/USER/ID خاص بك',
+  'settings.map3dBuildings': 'مبانٍ ثلاثية الأبعاد وتضاريس',
+  'settings.map3dHint': 'إمالة + مبانٍ ثلاثية الأبعاد حقيقية — يعمل مع كل نمط بما في ذلك الأقمار الصناعية.',
+  'settings.mapHighQuality': 'وضع الجودة العالية',
+  'settings.mapHighQualityHint': 'تحسين الحواف + إسقاط كروي لحواف أكثر حدة وعرض واقعي للعالم.',
+  'settings.mapHighQualityWarning': 'قد يؤثر على الأداء في الأجهزة الأقل قدرة.',
+  'settings.mapTipLabel': 'نصيحة:',
+  'settings.mapTip': 'انقر بزر الماوس الأيمن واسحب لتدوير/إمالة الخريطة. النقر الأوسط لإضافة مكان (النقر الأيمن مخصص للتدوير).',
   'settings.latitude': 'خط العرض',
   'settings.longitude': 'خط الطول',
   'settings.saveMap': 'حفظ الخريطة',
@@ -183,6 +206,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'settings.notifyTripInvite': 'دعوات الرحلات',
   'settings.notifyBookingChange': 'تغييرات الحجز',
   'settings.notifyTripReminder': 'تذكيرات الرحلات',
+  'settings.notifyTodoDue': 'مهمة مستحقة',
   'settings.notifyVacayInvite': 'دعوات دمج الإجازات',
   'settings.notifyPhotosShared': 'صور مشتركة (Immich)',
   'settings.notifyCollabMessage': 'رسائل الدردشة (Collab)',
@@ -313,6 +337,16 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'اقتراح ميزة',
   'settings.about.featureRequestHint': 'اقترح ميزة جديدة',
   'settings.about.wikiHint': 'التوثيق والأدلة',
+  'settings.about.supporters.badge': 'الداعمون الشهريون',
+  'settings.about.supporters.title': 'رفاق رحلة TREK',
+  'settings.about.supporters.subtitle': 'بينما تخطّط لمسارك التالي، يساعد هؤلاء الأشخاص في التخطيط لمستقبل TREK. تذهب مساهمتهم الشهرية مباشرةً إلى التطوير والساعات الفعلية المبذولة — حتى يظلّ TREK مفتوح المصدر.',
+  'settings.about.supporters.since': 'داعم منذ {date}',
+  'settings.about.supporters.tierEmpty': 'كن الأول',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK هو مخطط سفر مستضاف ذاتيًا يساعدك على تنظيم رحلاتك من أول فكرة حتى آخر ذكرى. تخطيط يومي، ميزانية، قوائم تعبئة، صور والمزيد — كل شيء في مكان واحد، على خادمك الخاص.',
   'settings.about.madeWith': 'صُنع بـ',
   'settings.about.madeBy': 'بواسطة موريس ومجتمع مفتوح المصدر متنامٍ.',
@@ -432,6 +466,28 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'login.oidcFailed': 'فشل تسجيل الدخول عبر OIDC',
   'login.usernameRequired': 'اسم المستخدم مطلوب',
   'login.passwordMinLength': 'يجب أن تكون كلمة المرور 8 أحرف على الأقل',
+  'login.forgotPassword': 'نسيت كلمة المرور؟',
+  'login.forgotPasswordTitle': 'إعادة تعيين كلمة المرور',
+  'login.forgotPasswordBody': 'أدخل عنوان البريد الإلكتروني المسجَّل. إذا كان الحساب موجودًا، سنرسل رابط إعادة التعيين.',
+  'login.forgotPasswordSubmit': 'إرسال الرابط',
+  'login.forgotPasswordSentTitle': 'تحقق من بريدك',
+  'login.forgotPasswordSentBody': 'إذا كان هناك حساب مرتبط بهذا البريد، فإن الرابط في الطريق. تنتهي صلاحيته خلال 60 دقيقة.',
+  'login.forgotPasswordSmtpHintOff': 'ملاحظة: لم يقم المسؤول بتكوين SMTP، لذا سيتم كتابة رابط إعادة التعيين في وحدة تحكم الخادم بدلاً من إرساله عبر البريد الإلكتروني.',
+  'login.backToLogin': 'العودة إلى تسجيل الدخول',
+  'login.newPassword': 'كلمة المرور الجديدة',
+  'login.confirmPassword': 'تأكيد كلمة المرور الجديدة',
+  'login.passwordsDontMatch': 'كلمتا المرور غير متطابقتين',
+  'login.mfaCode': 'رمز 2FA',
+  'login.resetPasswordTitle': 'ضبط كلمة مرور جديدة',
+  'login.resetPasswordBody': 'اختر كلمة مرور قوية لم تستخدمها هنا من قبل. 8 أحرف على الأقل.',
+  'login.resetPasswordMfaBody': 'أدخل رمز 2FA أو رمز النسخ الاحتياطي لإتمام إعادة التعيين.',
+  'login.resetPasswordSubmit': 'إعادة تعيين كلمة المرور',
+  'login.resetPasswordVerify': 'تحقق وأعد التعيين',
+  'login.resetPasswordSuccessTitle': 'تم تحديث كلمة المرور',
+  'login.resetPasswordSuccessBody': 'يمكنك الآن تسجيل الدخول بكلمة المرور الجديدة.',
+  'login.resetPasswordInvalidLink': 'رابط إعادة تعيين غير صالح',
+  'login.resetPasswordInvalidLinkBody': 'هذا الرابط مفقود أو تالف. اطلب رابطًا جديدًا للمتابعة.',
+  'login.resetPasswordFailed': 'فشلت إعادة التعيين. ربما انتهت صلاحية الرابط.',
 
   // Register
   'register.passwordMismatch': 'كلمتا المرور غير متطابقتين',
@@ -588,6 +644,12 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'admin.fileTypesSaved': 'تم حفظ إعدادات أنواع الملفات',
 
   // Packing Templates & Bag Tracking
+  'admin.placesPhotos.title': 'صور الأماكن',
+  'admin.placesPhotos.subtitle': 'جلب الصور من Google Places API. عطّلها للحفاظ على حصة API. صور Wikimedia غير متأثرة.',
+  'admin.placesAutocomplete.title': 'الإكمال التلقائي للأماكن',
+  'admin.placesAutocomplete.subtitle': 'استخدام Google Places API لاقتراحات البحث. عطّلها للحفاظ على حصة API.',
+  'admin.placesDetails.title': 'تفاصيل الأماكن',
+  'admin.placesDetails.subtitle': 'جلب معلومات تفصيلية عن الأماكن (الساعات، التقييم، الموقع) من Google Places API. عطّلها للحفاظ على حصة API.',
   'admin.bagTracking.title': 'تتبع الأمتعة',
   'admin.bagTracking.subtitle': 'تفعيل الوزن وتعيين الأمتعة للعناصر',
   'admin.collab.chat.title': 'الدردشة',
@@ -851,6 +913,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'الخطة',
+  'trip.tabs.transports': 'المواصلات',
   'trip.tabs.reservations': 'الحجوزات',
   'trip.tabs.reservationsShort': 'حجز',
   'trip.tabs.packing': 'قائمة التجهيز',
@@ -873,6 +936,8 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'تمت إضافة الحجز',
   'trip.toast.deleted': 'تم الحذف',
   'trip.confirm.deletePlace': 'هل تريد حذف هذا المكان؟',
+  'trip.confirm.deletePlaces': 'حذف {count} أماكن؟',
+  'trip.toast.placesDeleted': 'تم حذف {count} أماكن',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'لا توجد أماكن مخططة لهذا اليوم',
@@ -917,6 +982,17 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'فشل الاستيراد',
   'places.importAllSkipped': 'جميع الأماكن موجودة بالفعل في الرحلة.',
   'places.gpxImported': 'تم استيراد {count} مكان من GPX',
+  'places.gpxImportTypes': 'ما الذي تريد استيراده؟',
+  'places.gpxImportWaypoints': 'نقاط الطريق',
+  'places.gpxImportRoutes': 'المسارات',
+  'places.gpxImportTracks': 'المسارات (مع هندسة الطريق)',
+  'places.gpxImportNoneSelected': 'اختر نوعاً واحداً على الأقل للاستيراد.',
+  'places.kmlImportTypes': 'ما الذي تريد استيراده؟',
+  'places.kmlImportPoints': 'نقاط (Placemarks)',
+  'places.kmlImportPaths': 'مسارات (LineStrings)',
+  'places.kmlImportNoneSelected': 'اختر نوعًا واحدًا على الأقل.',
+  'places.selectionCount': '{count} محدد',
+  'places.deleteSelected': 'حذف المحدد',
   'places.kmlKmzImported': 'تم استيراد {count} مكان من KMZ/KML',
   'places.urlResolved': 'تم استيراد المكان من الرابط',
   'places.importList': 'استيراد قائمة',
@@ -933,6 +1009,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'إلى أي يوم تريد الإضافة؟',
   'places.all': 'الكل',
   'places.unplanned': 'غير مخطط',
+  'places.filterTracks': 'المسارات',
   'places.search': 'ابحث عن أماكن...',
   'places.allCategories': 'كل الفئات',
   'places.categoriesSelected': 'فئات',
@@ -1017,6 +1094,15 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'رقم الرحلة',
   'reservations.meta.from': 'من',
   'reservations.meta.to': 'إلى',
+  'reservations.needsReview': 'مراجعة',
+  'reservations.needsReviewHint': 'تعذّر مطابقة المطار تلقائياً — يرجى تأكيد الموقع.',
+  'reservations.searchLocation': 'ابحث عن محطة، ميناء، عنوان...',
+  'airport.searchPlaceholder': 'رمز المطار أو المدينة (مثل FRA)',
+  'map.connections': 'الاتصالات',
+  'map.showConnections': 'عرض مسارات الحجوزات',
+  'map.hideConnections': 'إخفاء مسارات الحجوزات',
+  'settings.bookingLabels': 'تسميات مسارات الحجوزات',
+  'settings.bookingLabelsHint': 'عرض أسماء المحطات/المطارات على الخريطة. عند الإيقاف، يتم عرض الرمز فقط.',
   'reservations.meta.trainNumber': 'رقم القطار',
   'reservations.meta.platform': 'المنصة',
   'reservations.meta.seat': 'المقعد',
@@ -1035,7 +1121,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'إقامة',
   'reservations.type.restaurant': 'مطعم',
   'reservations.type.train': 'قطار',
-  'reservations.type.car': 'سيارة مستأجرة',
+  'reservations.type.car': 'سيارة',
   'reservations.type.cruise': 'رحلة بحرية',
   'reservations.type.event': 'فعالية',
   'reservations.type.tour': 'جولة',
@@ -1096,6 +1182,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'النهاية',
   'reservations.span.ongoing': 'جارٍ',
   'reservations.validation.endBeforeStart': 'يجب أن يكون تاريخ/وقت الانتهاء بعد تاريخ/وقت البدء',
+  'reservations.addBooking': 'إضافة حجز',
 
   // Budget
   'budget.title': 'الميزانية',
@@ -1137,6 +1224,8 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'files.title': 'الملفات',
   'files.pageTitle': 'الملفات والمستندات',
   'files.subtitle': '{count} ملف لـ {trip}',
+  'files.download': 'تنزيل',
+  'files.openError': 'تعذر فتح الملف',
   'files.downloadPdf': 'تنزيل PDF',
   'files.count': '{count} ملفات',
   'files.countSingular': 'ملف واحد',
@@ -1533,8 +1622,10 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'memories.providerPassword': 'كلمة المرور',
   'memories.providerOTP': 'رمز MFA (إذا كان مفعلاً)',
   'memories.skipSSLVerification': 'تخطي التحقق من شهادة SSL',
+  'memories.immichAutoUpload': 'نسخ صور الرحلة إلى Immich عند الرفع',
   'memories.providerUrlHintSynology': 'أدرج مسار تطبيق Photos في URL، مثل https://nas:5001/photo',
   'memories.testConnection': 'اختبار الاتصال',
+  'memories.testShort': 'اختبار',
   'memories.testFirst': 'اختبر الاتصال أولاً',
   'memories.connected': 'متصل',
   'memories.disconnected': 'غير متصل',
@@ -1570,6 +1661,14 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'memories.confirmShareTitle': 'مشاركة مع أعضاء الرحلة؟',
   'memories.confirmShareHint': '{count} صور ستكون مرئية لجميع أعضاء هذه الرحلة. يمكنك جعل الصور الفردية خاصة لاحقًا.',
   'memories.confirmShareButton': 'مشاركة الصور',
+  'journey.search.placeholder': 'البحث في الرحلات…',
+  'journey.search.noResults': 'لا توجد رحلات تطابق "{query}"',
+  'journey.status.archived': 'مؤرشف',
+  'journey.settings.endJourney': 'أرشفة الرحلة',
+  'journey.settings.reopenJourney': 'استعادة الرحلة',
+  'journey.settings.archived': 'تم أرشفة الرحلة',
+  'journey.settings.reopened': 'تمت إعادة فتح الرحلة',
+  'journey.settings.endDescription': 'يخفي شارة البث المباشر. يمكنك إعادة الفتح في أي وقت.',
   'journey.settings.failedToDelete': 'فشل في الحذف',
   'journey.entries.deleteTitle': 'حذف الإدخال',
   'journey.photosUploaded': 'تم رفع {count} صورة',
@@ -1603,6 +1702,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'journey.invite.inviting': 'جارٍ الدعوة...',
 
   // Journey Entry Editor
+  'journey.editor.discardChangesConfirm': 'لديك تغييرات غير محفوظة. هل تريد تجاهلها؟',
   'journey.editor.uploadPhotos': 'رفع صور',
   'journey.editor.uploading': '...جارٍ الرفع',
   'journey.editor.fromGallery': 'من المعرض',
@@ -1740,6 +1840,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'تمت إعادة ترتيب الأماكن',
   'undo.optimize': 'تم تحسين المسار',
   'undo.deletePlace': 'تم حذف المكان',
+  'undo.deletePlaces': 'تم حذف الأماكن',
   'undo.moveDay': 'تم نقل المكان إلى يوم آخر',
   'undo.lock': 'تم تبديل قفل المكان',
   'undo.importGpx': 'استيراد GPX',
@@ -1799,7 +1900,11 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'غير مُسنَد',
   'todo.noCategory': 'بدون فئة',
   'todo.hasDescription': 'له وصف',
-  'todo.addItem': 'إضافة مهمة جديدة...',
+  'todo.addItem': 'إضافة مهمة جديدة',
+  'todo.sidebar.sortBy': 'ترتيب حسب',
+  'todo.priority': 'الأولوية',
+  'todo.newCategoryLabel': 'جديد',
+  'budget.categoriesLabel': 'فئات',
   'todo.newCategory': 'اسم الفئة',
   'todo.addCategory': 'إضافة فئة',
   'todo.newItem': 'مهمة جديدة',
@@ -1876,6 +1981,10 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'admin.notifications.adminNtfyPanel.testFailed': 'فشل إرسال Ntfy التجريبي',
   'admin.notifications.adminNtfyPanel.alwaysOnHint': 'يُرسل Ntfy للمسؤول دائمًا عند تهيئة موضوع',
   'admin.notifications.adminNotificationsHint': 'حدد القنوات التي تُسلّم إشعارات المسؤول (مثل تنبيهات الإصدارات). يُرسل الـ Webhook تلقائيًا عند تعيين رابط URL لـ Webhook المسؤول.',
+  'admin.notifications.tripReminders.title': 'تذكيرات الرحلات',
+  'admin.notifications.tripReminders.hint': 'إرسال تذكير قبل بدء الرحلة (يتطلب تعيين أيام التذكير على الرحلة).',
+  'admin.notifications.tripReminders.enabled': 'تم تفعيل تذكيرات الرحلات',
+  'admin.notifications.tripReminders.disabled': 'تم تعطيل تذكيرات الرحلات',
   'admin.tabs.notifications': 'الإشعارات',
   'notifications.versionAvailable.title': 'تحديث متاح',
   'notifications.versionAvailable.text': 'TREK {version} متاح الآن.',
@@ -1892,6 +2001,8 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'notif.booking_change.text': '{actor} حدّث حجزاً في {trip}',
   'notif.trip_reminder.title': 'تذكير بالرحلة',
   'notif.trip_reminder.text': 'رحلتك {trip} تقترب!',
+  'notif.todo_due.title': 'مهمة مستحقة',
+  'notif.todo_due.text': '{todo} في {trip} مستحقة في {due}',
   'notif.vacay_invite.title': 'دعوة دمج الإجازة',
   'notif.vacay_invite.text': '{actor} يدعوك لدمج خطط الإجازة',
   'notif.photos_shared.title': 'تمت مشاركة الصور',
@@ -1929,6 +2040,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.group.vacay': 'الإجازة',
   'oauth.scope.group.geo': 'Geo',
   'oauth.scope.group.weather': 'الطقس',
+  'oauth.scope.group.journey': 'مذكرة السفر',
 
   // OAuth scope labels & descriptions
   'oauth.scope.trips:read.label': 'عرض الرحلات وخطط السفر',
@@ -1979,6 +2091,12 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.geo:read.description': 'البحث عن مواقع وحل عناوين الخرائط والترميز الجغرافي العكسي للإحداثيات',
   'oauth.scope.weather:read.label': 'توقعات الطقس',
   'oauth.scope.weather:read.description': 'جلب توقعات الطقس لمواقع الرحلة وتواريخها',
+  'oauth.scope.journey:read.label': 'عرض مذكرات السفر',
+  'oauth.scope.journey:read.description': 'قراءة مذكرات السفر والمدخلات وقائمة المساهمين',
+  'oauth.scope.journey:write.label': 'إدارة مذكرات السفر',
+  'oauth.scope.journey:write.description': 'إنشاء مذكرات السفر وتحديثها وحذفها وإدخالاتها',
+  'oauth.scope.journey:share.label': 'إدارة روابط مذكرات السفر',
+  'oauth.scope.journey:share.description': 'إنشاء روابط مشاركة عامة لمذكرات السفر وتحديثها وإلغاؤها',
 
   // System notices
   'system_notice.welcome_v1.title': 'مرحبًا بك في TREK',
@@ -2019,6 +2137,15 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
   'system_notice.v3_mcp.highlight_scopes':     '24 نطاق أذونات دقيق',
   'system_notice.v3_mcp.highlight_deprecated': 'الرموز الثابتة trek_ مهملة',
   'system_notice.v3_mcp.highlight_tools':      'مجموعة أدوات وإرشادات موسعة',
+
+  // System notices — personal thank you
+  'system_notice.v3_thankyou.title': 'كلمة شخصية مني',
+  'system_notice.v3_thankyou.body': 'قبل أن تمضي — أريد أن أتوقف لحظة.\n\nبدأ TREK كمشروع جانبي بنيته لرحلاتي الخاصة. لم أتخيل يومًا أنه سيكبر ليصبح شيئًا يعتمد عليه 4,000 منكم لتخطيط مغامراتهم. كل نجمة، كل مشكلة، كل طلب ميزة — أقرأها جميعًا، وهي ما يبقيني مستمرًا في الليالي المتأخرة بين عمل بدوام كامل والجامعة.\n\nأريدكم أن تعرفوا: TREK سيبقى دائمًا مفتوح المصدر، دائمًا مستضافًا ذاتيًا، دائمًا ملككم. لا تتبع، لا اشتراكات، لا شروط خفية. مجرد أداة بناها شخص يحب السفر بقدر ما تحبونه.\n\nشكر خاص لـ [jubnl](https://github.com/jubnl) — لقد أصبحت متعاونًا رائعًا. الكثير مما يجعل الإصدار 3.0 عظيمًا يحمل بصماتك. شكرًا لإيمانك بهذا المشروع عندما كان لا يزال في بداياته.\n\nولكل واحد منكم ممن أبلغ عن خطأ، أو ترجم نصًا، أو شارك TREK مع صديق، أو ببساطة استخدمه لتخطيط رحلة — **شكرًا لكم**. أنتم السبب في وجود هذا.\n\nإلى المزيد من المغامرات معًا.\n\n— Maurice\n\n---\n\n[انضم إلى المجتمع على Discord](https://discord.gg/7Q6M6jDwzf)\n\nإذا جعل TREK رحلاتك أفضل، [فنجان قهوة صغير](https://ko-fi.com/mauriceboe) يبقي الأضواء مشتعلة.',
+  'transport.addTransport': 'إضافة وسيلة نقل',
+  'transport.modalTitle.create': 'إضافة وسيلة نقل',
+  'transport.modalTitle.edit': 'تعديل وسيلة النقل',
+  'transport.title': 'المواصلات',
+  'transport.addManual': 'نقل يدوي',
 }
 
 export default ar

client/src/i18n/translations/br.ts

@@ -10,6 +10,9 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Adicionar',
   'common.loading': 'Carregando...',
   'common.import': 'Importar',
+  'common.select': 'Selecionar',
+  'common.selectAll': 'Selecionar tudo',
+  'common.deselectAll': 'Desmarcar tudo',
   'common.error': 'Erro',
   'common.unknownError': 'Erro desconhecido',
   'common.tooManyAttempts': 'Muitas tentativas. Tente novamente mais tarde.',
@@ -27,6 +30,8 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Nenhum',
   'common.date': 'Data',
   'common.rename': 'Renomear',
+  'common.discardChanges': 'Descartar alterações',
+  'common.discard': 'Descartar',
   'common.name': 'Nome',
   'common.email': 'E-mail',
   'common.password': 'Senha',
@@ -153,6 +158,24 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'settings.mapDefaultHint': 'Deixe vazio para OpenStreetMap (padrão)',
   'settings.mapTemplatePlaceholder': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   'settings.mapHint': 'URL do modelo de blocos do mapa',
+  'settings.mapProvider': 'Provedor de mapa',
+  'settings.mapProviderHint': 'Afeta os mapas do Planejador de Viagem e Diário. Atlas sempre usa Leaflet.',
+  'settings.mapLeafletSubtitle': 'Clássico 2D, quaisquer blocos raster',
+  'settings.mapMapboxSubtitle': 'Blocos vetoriais, prédios 3D & terreno',
+  'settings.mapExperimental': 'Experimental',
+  'settings.mapMapboxToken': 'Token de acesso Mapbox',
+  'settings.mapMapboxTokenHint': 'Token público (pk.*) de',
+  'settings.mapMapboxTokenLink': 'mapbox.com → Tokens de acesso',
+  'settings.mapStyle': 'Estilo do mapa',
+  'settings.mapStylePlaceholder': 'Selecionar um estilo Mapbox',
+  'settings.mapStyleHint': 'Preset ou sua própria URL mapbox://styles/USER/ID',
+  'settings.map3dBuildings': 'Prédios 3D & terreno',
+  'settings.map3dHint': 'Inclinação + extrusões 3D reais de prédios — funciona em todo estilo, incluindo satélite.',
+  'settings.mapHighQuality': 'Modo alta qualidade',
+  'settings.mapHighQualityHint': 'Antialiasing + projeção global para bordas mais nítidas e uma visão realista do mundo.',
+  'settings.mapHighQualityWarning': 'Pode afetar o desempenho em dispositivos menos potentes.',
+  'settings.mapTipLabel': 'Dica:',
+  'settings.mapTip': 'Clique direito e arraste para girar/inclinar o mapa. Clique do meio para adicionar um local (o clique direito é reservado para rotação).',
   'settings.latitude': 'Latitude',
   'settings.longitude': 'Longitude',
   'settings.saveMap': 'Salvar mapa',
@@ -178,6 +201,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'settings.notifyTripInvite': 'Convites de viagem',
   'settings.notifyBookingChange': 'Alterações de reserva',
   'settings.notifyTripReminder': 'Lembretes de viagem',
+  'settings.notifyTodoDue': 'Tarefa com vencimento',
   'settings.notifyVacayInvite': 'Convites de fusão Vacay',
   'settings.notifyPhotosShared': 'Fotos compartilhadas (Immich)',
   'settings.notifyCollabMessage': 'Mensagens de chat (Colab)',
@@ -240,6 +264,16 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Solicitar recurso',
   'settings.about.featureRequestHint': 'Sugira um novo recurso',
   'settings.about.wikiHint': 'Documentação e guias',
+  'settings.about.supporters.badge': 'Apoiadores Mensais',
+  'settings.about.supporters.title': 'Companheiros de viagem do TREK',
+  'settings.about.supporters.subtitle': 'Enquanto você planeja sua próxima rota, essas pessoas planejam junto o futuro do TREK. A contribuição mensal delas vai direto para o desenvolvimento e horas reais investidas — para o TREK continuar Open Source.',
+  'settings.about.supporters.since': 'apoiador desde {date}',
+  'settings.about.supporters.tierEmpty': 'Seja o primeiro',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK é um planejador de viagens auto-hospedado que ajuda você a organizar suas viagens da primeira ideia à última lembrança. Planejamento diário, orçamento, listas de bagagem, fotos e muito mais — tudo em um só lugar, no seu próprio servidor.',
   'settings.about.madeWith': 'Feito com',
   'settings.about.madeBy': 'por Maurice e uma crescente comunidade open-source.',
@@ -427,6 +461,28 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'login.oidcFailed': 'Falha no login OIDC',
   'login.usernameRequired': 'Nome de usuário é obrigatório',
   'login.passwordMinLength': 'A senha deve ter pelo menos 8 caracteres',
+  'login.forgotPassword': 'Esqueceu a senha?',
+  'login.forgotPasswordTitle': 'Redefinir sua senha',
+  'login.forgotPasswordBody': 'Digite o e-mail cadastrado. Se houver uma conta, enviaremos um link de redefinição.',
+  'login.forgotPasswordSubmit': 'Enviar link',
+  'login.forgotPasswordSentTitle': 'Verifique seu e-mail',
+  'login.forgotPasswordSentBody': 'Se houver uma conta para esse e-mail, o link está a caminho. Ele expira em 60 minutos.',
+  'login.forgotPasswordSmtpHintOff': 'Observação: seu administrador não configurou SMTP, então o link de redefinição será gravado no console do servidor em vez de ser enviado por e-mail.',
+  'login.backToLogin': 'Voltar ao login',
+  'login.newPassword': 'Nova senha',
+  'login.confirmPassword': 'Confirmar nova senha',
+  'login.passwordsDontMatch': 'As senhas não coincidem',
+  'login.mfaCode': 'Código 2FA',
+  'login.resetPasswordTitle': 'Definir uma nova senha',
+  'login.resetPasswordBody': 'Escolha uma senha forte que você ainda não tenha usado aqui. Mínimo de 8 caracteres.',
+  'login.resetPasswordMfaBody': 'Digite seu código 2FA ou um código de backup para concluir a redefinição.',
+  'login.resetPasswordSubmit': 'Redefinir senha',
+  'login.resetPasswordVerify': 'Verificar e redefinir',
+  'login.resetPasswordSuccessTitle': 'Senha atualizada',
+  'login.resetPasswordSuccessBody': 'Agora você pode entrar com sua nova senha.',
+  'login.resetPasswordInvalidLink': 'Link de redefinição inválido',
+  'login.resetPasswordInvalidLinkBody': 'Este link está ausente ou corrompido. Solicite um novo para continuar.',
+  'login.resetPasswordFailed': 'Falha na redefinição. O link pode ter expirado.',
 
   // Register
   'register.passwordMismatch': 'As senhas não coincidem',
@@ -546,6 +602,12 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'admin.fileTypesSaved': 'Configurações de tipos de arquivo salvas',
 
   // Packing Templates & Bag Tracking
+  'admin.placesPhotos.title': 'Fotos de Locais',
+  'admin.placesPhotos.subtitle': 'Busca fotos da Google Places API. Desative para economizar cota da API. Fotos do Wikimedia não são afetadas.',
+  'admin.placesAutocomplete.title': 'Autocompletar de Locais',
+  'admin.placesAutocomplete.subtitle': 'Usa a Google Places API para sugestões de pesquisa. Desative para economizar cota da API.',
+  'admin.placesDetails.title': 'Detalhes do Local',
+  'admin.placesDetails.subtitle': 'Busca informações detalhadas do local (horários, avaliação, site) da Google Places API. Desative para economizar cota da API.',
   'admin.bagTracking.title': 'Rastreamento de malas',
   'admin.bagTracking.subtitle': 'Ativar peso e atribuição de mala para itens da lista',
   'admin.collab.chat.title': 'Chat',
@@ -821,6 +883,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plano',
+  'trip.tabs.transports': 'Transportes',
   'trip.tabs.reservations': 'Reservas',
   'trip.tabs.reservationsShort': 'Reservas',
   'trip.tabs.packing': 'Lista de mala',
@@ -842,6 +905,8 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Reserva adicionada',
   'trip.toast.deleted': 'Excluído',
   'trip.confirm.deletePlace': 'Tem certeza de que deseja excluir este lugar?',
+  'trip.confirm.deletePlaces': 'Excluir {count} lugares?',
+  'trip.toast.placesDeleted': '{count} lugares excluídos',
   'trip.loadingPhotos': 'Carregando fotos dos lugares...',
 
   // Day Plan Sidebar
@@ -887,6 +952,17 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Importação falhou',
   'places.importAllSkipped': 'Todos os lugares já estavam na viagem.',
   'places.gpxImported': '{count} lugares importados do GPX',
+  'places.gpxImportTypes': 'O que deseja importar?',
+  'places.gpxImportWaypoints': 'Pontos de caminho',
+  'places.gpxImportRoutes': 'Rotas',
+  'places.gpxImportTracks': 'Trilhas (com geometria de percurso)',
+  'places.gpxImportNoneSelected': 'Selecione pelo menos um tipo para importar.',
+  'places.kmlImportTypes': 'O que deseja importar?',
+  'places.kmlImportPoints': 'Pontos (Placemarks)',
+  'places.kmlImportPaths': 'Caminhos (LineStrings)',
+  'places.kmlImportNoneSelected': 'Selecione pelo menos um tipo.',
+  'places.selectionCount': '{count} selecionado(s)',
+  'places.deleteSelected': 'Excluir seleção',
   'places.kmlKmzImported': '{count} lugares importados de KMZ/KML',
   'places.urlResolved': 'Lugar importado da URL',
   'places.importList': 'Importar lista',
@@ -903,6 +979,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Adicionar a qual dia?',
   'places.all': 'Todos',
   'places.unplanned': 'Não planejados',
+  'places.filterTracks': 'Trilhas',
   'places.search': 'Buscar lugares...',
   'places.allCategories': 'Todas as categorias',
   'places.categoriesSelected': 'categorias',
@@ -986,6 +1063,15 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Nº do voo',
   'reservations.meta.from': 'De',
   'reservations.meta.to': 'Para',
+  'reservations.needsReview': 'Verificar',
+  'reservations.needsReviewHint': 'Aeroporto não pôde ser identificado automaticamente — confirme o local.',
+  'reservations.searchLocation': 'Buscar estação, porto, endereço...',
+  'airport.searchPlaceholder': 'Código ou cidade do aeroporto (ex. FRA)',
+  'map.connections': 'Conexões',
+  'map.showConnections': 'Mostrar rotas de reservas',
+  'map.hideConnections': 'Ocultar rotas de reservas',
+  'settings.bookingLabels': 'Rótulos das rotas de reservas',
+  'settings.bookingLabelsHint': 'Mostra nomes de estações / aeroportos no mapa. Desativado, apenas o ícone aparece.',
   'reservations.meta.trainNumber': 'Nº do trem',
   'reservations.meta.platform': 'Plataforma',
   'reservations.meta.seat': 'Assento',
@@ -1004,7 +1090,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Hospedagem',
   'reservations.type.restaurant': 'Restaurante',
   'reservations.type.train': 'Trem',
-  'reservations.type.car': 'Carro alugado',
+  'reservations.type.car': 'Carro',
   'reservations.type.cruise': 'Cruzeiro',
   'reservations.type.event': 'Evento',
   'reservations.type.tour': 'Passeio',
@@ -1065,6 +1151,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Fim',
   'reservations.span.ongoing': 'Em andamento',
   'reservations.validation.endBeforeStart': 'A data/hora final deve ser posterior à data/hora inicial',
+  'reservations.addBooking': 'Adicionar reserva',
 
   // Budget
   'budget.title': 'Orçamento',
@@ -1106,6 +1193,8 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'files.title': 'Arquivos',
   'files.pageTitle': 'Arquivos e documentos',
   'files.subtitle': '{count} arquivos para {trip}',
+  'files.download': 'Baixar',
+  'files.openError': 'Não foi possível abrir o arquivo',
   'files.downloadPdf': 'Baixar PDF',
   'files.count': '{count} arquivos',
   'files.countSingular': '1 arquivo',
@@ -1572,8 +1661,10 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'memories.providerPassword': 'Senha',
   'memories.providerOTP': 'Código MFA (se habilitado)',
   'memories.skipSSLVerification': 'Pular verificação de certificado SSL',
+  'memories.immichAutoUpload': 'Espelhar fotos da jornada no Immich ao enviar',
   'memories.providerUrlHintSynology': 'Inclua o caminho do aplicativo Photos na URL, ex. https://nas:5001/photo',
   'memories.testConnection': 'Testar conexão',
+  'memories.testShort': 'Testar',
   'memories.testFirst': 'Teste a conexão primeiro',
   'memories.connected': 'Conectado',
   'memories.disconnected': 'Não conectado',
@@ -1689,6 +1780,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Locais reordenados',
   'undo.optimize': 'Rota otimizada',
   'undo.deletePlace': 'Local excluído',
+  'undo.deletePlaces': 'Lugares excluídos',
   'undo.moveDay': 'Local movido para outro dia',
   'undo.lock': 'Bloqueio do local alternado',
   'undo.importGpx': 'Importação de GPX',
@@ -1748,7 +1840,11 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Não atribuído',
   'todo.noCategory': 'Sem categoria',
   'todo.hasDescription': 'Com descrição',
-  'todo.addItem': 'Adicionar nova tarefa...',
+  'todo.addItem': 'Nova tarefa',
+  'todo.sidebar.sortBy': 'Ordenar por',
+  'todo.priority': 'Prioridade',
+  'todo.newCategoryLabel': 'nova',
+  'budget.categoriesLabel': 'categorias',
   'todo.newCategory': 'Nome da categoria',
   'todo.addCategory': 'Adicionar categoria',
   'todo.newItem': 'Nova tarefa',
@@ -1825,6 +1921,10 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'admin.notifications.adminNtfyPanel.testFailed': 'Falha ao enviar Ntfy de teste',
   'admin.notifications.adminNtfyPanel.alwaysOnHint': 'O Ntfy de admin sempre dispara quando um tópico está configurado',
   'admin.notifications.adminNotificationsHint': 'Configure quais canais entregam notificações de admin (ex. alertas de versão). O webhook dispara automaticamente se uma URL de webhook de admin estiver definida.',
+  'admin.notifications.tripReminders.title': 'Lembretes de viagem',
+  'admin.notifications.tripReminders.hint': 'Envia uma notificação de lembrete antes do início de uma viagem (requer dias de lembrete definidos na viagem).',
+  'admin.notifications.tripReminders.enabled': 'Lembretes de viagem ativados',
+  'admin.notifications.tripReminders.disabled': 'Lembretes de viagem desativados',
   'admin.tabs.notifications': 'Notificações',
   'notifications.versionAvailable.title': 'Atualização disponível',
   'notifications.versionAvailable.text': 'TREK {version} já está disponível.',
@@ -1841,6 +1941,8 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'notif.booking_change.text': '{actor} atualizou uma reserva em {trip}',
   'notif.trip_reminder.title': 'Lembrete de viagem',
   'notif.trip_reminder.text': 'Sua viagem {trip} está chegando!',
+  'notif.todo_due.title': 'Tarefa com vencimento',
+  'notif.todo_due.text': '{todo} em {trip} vence em {due}',
   'notif.vacay_invite.title': 'Convite Vacay Fusion',
   'notif.vacay_invite.text': '{actor} convidou você para fundir planos de férias',
   'notif.photos_shared.title': 'Fotos compartilhadas',
@@ -1872,6 +1974,8 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'memories.saveRouteNotConfigured': 'A rota de salvamento não está configurada para este provedor',
   'memories.testRouteNotConfigured': 'A rota de teste não está configurada para este provedor',
   'memories.fillRequiredFields': 'Por favor preencha todos os campos obrigatórios',
+  'journey.search.placeholder': 'Buscar jornadas…',
+  'journey.search.noResults': 'Nenhuma jornada corresponde a "{query}"',
   'journey.title': 'Jornada',
   'journey.subtitle': 'Registre suas viagens em tempo real',
   'journey.new': 'Nova jornada',
@@ -1893,6 +1997,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'journey.status.active': 'Ativa',
   'journey.status.completed': 'Concluída',
   'journey.status.upcoming': 'Próxima',
+  'journey.status.archived': 'Arquivado',
   'journey.checkin.add': 'Fazer check-in',
   'journey.checkin.namePlaceholder': 'Nome do local',
   'journey.checkin.notesPlaceholder': 'Notas (opcional)',
@@ -1969,6 +2074,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'journey.verdict.couldBeBetter': 'Poderia ser melhor',
   'journey.synced.places': 'lugares',
   'journey.synced.synced': 'sincronizado',
+  'journey.editor.discardChangesConfirm': 'Você tem alterações não salvas. Descartá-las?',
   'journey.editor.uploadPhotos': 'Enviar fotos',
   'journey.editor.uploading': 'Enviando...',
   'journey.editor.fromGallery': 'Da galeria',
@@ -2046,6 +2152,11 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'journey.settings.name': 'Nome',
   'journey.settings.subtitle': 'Subtítulo',
   'journey.settings.subtitlePlaceholder': 'ex. Tailândia, Vietnã e Camboja',
+  'journey.settings.endJourney': 'Arquivar Jornada',
+  'journey.settings.reopenJourney': 'Restaurar Jornada',
+  'journey.settings.archived': 'Jornada arquivada',
+  'journey.settings.reopened': 'Jornada reaberta',
+  'journey.settings.endDescription': 'Oculta o selo Ao Vivo. Você pode reabrir a qualquer momento.',
   'journey.settings.delete': 'Excluir',
   'journey.settings.deleteJourney': 'Excluir jornada',
   'journey.settings.deleteMessage': 'Excluir "{title}"? Todas as entradas e fotos serão perdidas.',
@@ -2132,6 +2243,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.group.vacay': 'Férias',
   'oauth.scope.group.geo': 'Geo',
   'oauth.scope.group.weather': 'Clima',
+  'oauth.scope.group.journey': 'Jornada',
 
   // OAuth scope labels & descriptions
   'oauth.scope.trips:read.label': 'Ver viagens e itinerários',
@@ -2182,6 +2294,12 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.geo:read.description': 'Pesquisar locais, resolver URLs de mapa e geocodificar coordenadas',
   'oauth.scope.weather:read.label': 'Previsão do tempo',
   'oauth.scope.weather:read.description': 'Obter previsão do tempo para locais e datas da viagem',
+  'oauth.scope.journey:read.label': 'Ver jornadas',
+  'oauth.scope.journey:read.description': 'Ler jornadas, entradas e lista de colaboradores',
+  'oauth.scope.journey:write.label': 'Gerenciar jornadas',
+  'oauth.scope.journey:write.description': 'Criar, atualizar e excluir jornadas e suas entradas',
+  'oauth.scope.journey:share.label': 'Gerenciar links de jornadas',
+  'oauth.scope.journey:share.description': 'Criar, atualizar e revogar links de compartilhamento públicos para jornadas',
 
   // System notices
   'system_notice.welcome_v1.title': 'Bem-vindo ao TREK',
@@ -2222,6 +2340,15 @@ const br: Record<string, string | { name: string; category: string }[]> = {
   'system_notice.v3_mcp.highlight_scopes':     '24 escopos de permissão granulares',
   'system_notice.v3_mcp.highlight_deprecated': 'Tokens estáticos trek_ descontinuados',
   'system_notice.v3_mcp.highlight_tools':      'Conjunto de ferramentas e prompts expandido',
+
+  // System notices — personal thank you
+  'system_notice.v3_thankyou.title': 'Uma nota pessoal minha',
+  'system_notice.v3_thankyou.body': 'Antes de seguir em frente — quero fazer uma pausa.\n\nO TREK começou como um projeto paralelo que criei para minhas próprias viagens. Nunca imaginei que cresceria a ponto de 4.000 de vocês confiarem nele para planejar suas aventuras. Cada estrela, cada issue, cada pedido de recurso — eu leio todos, e eles me mantêm firme nas noites longas entre um trabalho em tempo integral e a universidade.\n\nQuero que saibam: o TREK sempre será open source, sempre self-hosted, sempre de vocês. Sem rastreamento, sem assinaturas, sem pegadinhas. Apenas uma ferramenta feita por alguém que ama viajar tanto quanto vocês.\n\nAgradecimento especial ao [jubnl](https://github.com/jubnl) — você se tornou um colaborador incrível. Muito do que torna a versão 3.0 especial tem a sua marca. Obrigado por acreditar neste projeto quando ele ainda era bem cru.\n\nE a cada um de vocês que reportou um bug, traduziu uma string, compartilhou o TREK com um amigo ou simplesmente o usou para planejar uma viagem — **obrigado**. Vocês são a razão de tudo isso existir.\n\nQue venham muitas mais aventuras juntos.\n\n— Maurice\n\n---\n\n[Junte-se à comunidade no Discord](https://discord.gg/7Q6M6jDwzf)\n\nSe o TREK torna suas viagens melhores, um [cafezinho](https://ko-fi.com/mauriceboe) sempre mantém as luzes acesas.',
+  'transport.addTransport': 'Adicionar transporte',
+  'transport.modalTitle.create': 'Adicionar transporte',
+  'transport.modalTitle.edit': 'Editar transporte',
+  'transport.title': 'Transportes',
+  'transport.addManual': 'Transporte Manual',
 }
 
 export default br

client/src/i18n/translations/cs.ts

@@ -10,6 +10,9 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Přidat',
   'common.loading': 'Načítání...',
   'common.import': 'Importovat',
+  'common.select': 'Vybrat',
+  'common.selectAll': 'Vybrat vše',
+  'common.deselectAll': 'Zrušit výběr všeho',
   'common.error': 'Chyba',
   'common.unknownError': 'Neznámá chyba',
   'common.tooManyAttempts': 'Příliš mnoho pokusů. Zkuste to prosím znovu.',
@@ -27,6 +30,8 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Žádné',
   'common.date': 'Datum',
   'common.rename': 'Přejmenovat',
+  'common.discardChanges': 'Zahodit změny',
+  'common.discard': 'Zahodit',
   'common.name': 'Jméno',
   'common.email': 'E-mail',
   'common.password': 'Heslo',
@@ -154,6 +159,24 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'settings.mapDefaultHint': 'Ponechte prázdné pro OpenStreetMap (výchozí)',
   'settings.mapTemplatePlaceholder': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   'settings.mapHint': 'URL šablony pro mapové dlaždice',
+  'settings.mapProvider': 'Poskytovatel mapy',
+  'settings.mapProviderHint': 'Ovlivňuje mapy v Trip Planneru a Journey. Atlas vždy používá Leaflet.',
+  'settings.mapLeafletSubtitle': 'Klasické 2D, libovolné rastrové dlaždice',
+  'settings.mapMapboxSubtitle': 'Vektorové dlaždice, 3D budovy a terén',
+  'settings.mapExperimental': 'Experimentální',
+  'settings.mapMapboxToken': 'Mapbox přístupový token',
+  'settings.mapMapboxTokenHint': 'Veřejný token (pk.*) z',
+  'settings.mapMapboxTokenLink': 'mapbox.com → Přístupové tokeny',
+  'settings.mapStyle': 'Styl mapy',
+  'settings.mapStylePlaceholder': 'Vyberte styl Mapbox',
+  'settings.mapStyleHint': 'Preset nebo vaše vlastní URL mapbox://styles/USER/ID',
+  'settings.map3dBuildings': '3D budovy a terén',
+  'settings.map3dHint': 'Náklon + skutečné 3D vyvýšení budov — funguje s každým stylem, včetně satelitu.',
+  'settings.mapHighQuality': 'Režim vysoké kvality',
+  'settings.mapHighQualityHint': 'Antialiasing + zobrazení glóbu pro ostřejší hrany a realistický pohled na svět.',
+  'settings.mapHighQualityWarning': 'Může ovlivnit výkon na slabších zařízeních.',
+  'settings.mapTipLabel': 'Tip:',
+  'settings.mapTip': 'Pravé tlačítko myši a táhněte pro rotaci/náklon mapy. Prostřední tlačítko pro přidání místa (pravé tlačítko je vyhrazeno pro rotaci).',
   'settings.latitude': 'Zeměpisná šířka',
   'settings.longitude': 'Zeměpisná délka',
   'settings.saveMap': 'Uložit nastavení mapy',
@@ -179,6 +202,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'settings.notifyTripInvite': 'Pozvánky na cesty',
   'settings.notifyBookingChange': 'Změny rezervací',
   'settings.notifyTripReminder': 'Připomínky cest',
+  'settings.notifyTodoDue': 'Úkol se blíží',
   'settings.notifyVacayInvite': 'Pozvánky k propojení Vacay',
   'settings.notifyPhotosShared': 'Sdílené fotky (Immich)',
   'settings.notifyCollabMessage': 'Zprávy v chatu (Collab)',
@@ -264,6 +288,16 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Navrhnout funkci',
   'settings.about.featureRequestHint': 'Navrhněte novou funkci',
   'settings.about.wikiHint': 'Dokumentace a návody',
+  'settings.about.supporters.badge': 'Měsíční podporovatelé',
+  'settings.about.supporters.title': 'Společníci na cestě s TREK',
+  'settings.about.supporters.subtitle': 'Zatímco plánuješ další trasu, tihle lidé plánují společně se mnou budoucnost TREK. Jejich měsíční příspěvek jde přímo na vývoj a reálně strávené hodiny — aby TREK zůstal Open Source.',
+  'settings.about.supporters.since': 'podporovatel od {date}',
+  'settings.about.supporters.tierEmpty': 'Buď první',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK je samohostovaný plánovač cest, který vám pomůže organizovat výlety od prvního nápadu po poslední vzpomínku. Denní plánování, rozpočet, balicí seznamy, fotky a mnoho dalšího — vše na jednom místě, na vašem vlastním serveru.',
   'settings.about.madeWith': 'Vytvořeno s',
   'settings.about.madeBy': 'Mauricem a rostoucí open-source komunitou.',
@@ -427,6 +461,28 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'login.oidcFailed': 'Přihlášení přes OIDC se nezdařilo',
   'login.usernameRequired': 'Uživatelské jméno je povinné',
   'login.passwordMinLength': 'Heslo musí mít alespoň 8 znaků',
+  'login.forgotPassword': 'Zapomenuté heslo?',
+  'login.forgotPasswordTitle': 'Obnovení hesla',
+  'login.forgotPasswordBody': 'Zadej e-mail použitý při registraci. Pokud účet existuje, pošleme odkaz pro obnovení.',
+  'login.forgotPasswordSubmit': 'Odeslat odkaz',
+  'login.forgotPasswordSentTitle': 'Zkontroluj e-mail',
+  'login.forgotPasswordSentBody': 'Pokud k tomuto e-mailu existuje účet, odkaz je na cestě. Platnost vyprší za 60 minut.',
+  'login.forgotPasswordSmtpHintOff': 'Upozornění: správce nemá nakonfigurovaný SMTP, takže se odkaz pro obnovení zapíše do konzole serveru místo odeslání e-mailem.',
+  'login.backToLogin': 'Zpět na přihlášení',
+  'login.newPassword': 'Nové heslo',
+  'login.confirmPassword': 'Potvrď nové heslo',
+  'login.passwordsDontMatch': 'Hesla se neshodují',
+  'login.mfaCode': 'Kód 2FA',
+  'login.resetPasswordTitle': 'Nastavit nové heslo',
+  'login.resetPasswordBody': 'Vyber silné heslo, které jsi tu ještě nepoužil. Minimálně 8 znaků.',
+  'login.resetPasswordMfaBody': 'Zadej 2FA kód nebo záložní kód pro dokončení obnovení.',
+  'login.resetPasswordSubmit': 'Obnovit heslo',
+  'login.resetPasswordVerify': 'Ověřit a obnovit',
+  'login.resetPasswordSuccessTitle': 'Heslo aktualizováno',
+  'login.resetPasswordSuccessBody': 'Nyní se můžeš přihlásit novým heslem.',
+  'login.resetPasswordInvalidLink': 'Neplatný odkaz',
+  'login.resetPasswordInvalidLinkBody': 'Odkaz chybí nebo je poškozený. Pro pokračování si vyžádej nový.',
+  'login.resetPasswordFailed': 'Obnovení se nezdařilo. Odkaz mohl vypršet.',
 
   // Registrace (Register)
   'register.passwordMismatch': 'Hesla se neshodují',
@@ -546,6 +602,12 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'admin.fileTypesSaved': 'Nastavení souborů uloženo',
 
   // Šablony balení (Packing Templates)
+  'admin.placesPhotos.title': 'Fotografie míst',
+  'admin.placesPhotos.subtitle': 'Načítání fotografií z Google Places API. Zakázáním ušetříte kvótu API. Fotografie z Wikimedia nejsou ovlivněny.',
+  'admin.placesAutocomplete.title': 'Automatické doplňování míst',
+  'admin.placesAutocomplete.subtitle': 'Použití Google Places API pro návrhy vyhledávání. Zakázáním ušetříte kvótu API.',
+  'admin.placesDetails.title': 'Podrobnosti o místě',
+  'admin.placesDetails.subtitle': 'Načítání podrobných informací o místě (hodiny, hodnocení, web) z Google Places API. Zakázáním ušetříte kvótu API.',
   'admin.bagTracking.title': 'Sledování zavazadel',
   'admin.bagTracking.subtitle': 'Povolit váhu a přiřazení k zavazadlům u položek balení',
   'admin.collab.chat.title': 'Chat',
@@ -849,6 +911,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
 
   // Plánovač cesty (Trip Planner)
   'trip.tabs.plan': 'Plán',
+  'trip.tabs.transports': 'Doprava',
   'trip.tabs.reservations': 'Rezervace',
   'trip.tabs.reservationsShort': 'Rez.',
   'trip.tabs.packing': 'Seznam věcí',
@@ -871,6 +934,8 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Rezervace přidána',
   'trip.toast.deleted': 'Smazáno',
   'trip.confirm.deletePlace': 'Opravdu chcete toto místo smazat?',
+  'trip.confirm.deletePlaces': 'Smazat {count} míst?',
+  'trip.toast.placesDeleted': '{count} míst smazáno',
 
   // Denní plán (Day Plan)
   'dayplan.emptyDay': 'Na tento den nejsou naplánována žádná místa',
@@ -915,6 +980,17 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Import se nezdařil',
   'places.importAllSkipped': 'Všechna místa již byla v cestě.',
   'places.gpxImported': '{count} míst importováno z GPX',
+  'places.gpxImportTypes': 'Co chcete importovat?',
+  'places.gpxImportWaypoints': 'Trasové body',
+  'places.gpxImportRoutes': 'Trasy',
+  'places.gpxImportTracks': 'Trasy GPS (s geometrií)',
+  'places.gpxImportNoneSelected': 'Vyberte alespoň jeden typ k importu.',
+  'places.kmlImportTypes': 'Co chcete importovat?',
+  'places.kmlImportPoints': 'Body (Placemarks)',
+  'places.kmlImportPaths': 'Trasy (LineStrings)',
+  'places.kmlImportNoneSelected': 'Vyberte alespoň jeden typ.',
+  'places.selectionCount': '{count} vybráno',
+  'places.deleteSelected': 'Smazat vybrané',
   'places.kmlKmzImported': 'Importováno {count} míst z KMZ/KML',
   'places.urlResolved': 'Místo importováno z URL',
   'places.importList': 'Import seznamu',
@@ -931,6 +1007,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Přidat do kterého dne?',
   'places.all': 'Vše',
   'places.unplanned': 'Nezařazené',
+  'places.filterTracks': 'Trasy',
   'places.search': 'Hledat místa...',
   'places.allCategories': 'Všechny kategorie',
   'places.categoriesSelected': 'kategorií',
@@ -1015,6 +1092,15 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Číslo letu',
   'reservations.meta.from': 'Z',
   'reservations.meta.to': 'Do',
+  'reservations.needsReview': 'Zkontrolovat',
+  'reservations.needsReviewHint': 'Letiště nebylo možné automaticky rozpoznat — potvrďte prosím místo.',
+  'reservations.searchLocation': 'Hledat stanici, přístav, adresu...',
+  'airport.searchPlaceholder': 'Kód letiště nebo město (např. FRA)',
+  'map.connections': 'Spojení',
+  'map.showConnections': 'Zobrazit trasy rezervací',
+  'map.hideConnections': 'Skrýt trasy rezervací',
+  'settings.bookingLabels': 'Popisky tras rezervací',
+  'settings.bookingLabelsHint': 'Zobrazuje názvy stanic / letišť na mapě. Pokud je vypnuto, zobrazí se pouze ikona.',
   'reservations.meta.trainNumber': 'Číslo vlaku',
   'reservations.meta.platform': 'Nástupiště',
   'reservations.meta.seat': 'Sedadlo',
@@ -1033,7 +1119,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Ubytování',
   'reservations.type.restaurant': 'Restaurace',
   'reservations.type.train': 'Vlak',
-  'reservations.type.car': 'Pronájem auta',
+  'reservations.type.car': 'Auto',
   'reservations.type.cruise': 'Plavba',
   'reservations.type.event': 'Událost',
   'reservations.type.tour': 'Prohlídka',
@@ -1094,6 +1180,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Konec',
   'reservations.span.ongoing': 'Probíhá',
   'reservations.validation.endBeforeStart': 'Datum/čas konce musí být po datu/čase začátku',
+  'reservations.addBooking': 'Přidat rezervaci',
 
   // Rozpočet (Budget)
   'budget.title': 'Rozpočet',
@@ -1135,6 +1222,8 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'files.title': 'Soubory',
   'files.pageTitle': 'Soubory a dokumenty',
   'files.subtitle': '{count} souborů pro {trip}',
+  'files.download': 'Stáhnout',
+  'files.openError': 'Soubor nelze otevřít',
   'files.downloadPdf': 'Stáhnout PDF',
   'files.count': '{count} souborů',
   'files.countSingular': '1 soubor',
@@ -1531,8 +1620,10 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'memories.providerPassword': 'Heslo',
   'memories.providerOTP': 'MFA kód (pokud je povoleno)',
   'memories.skipSSLVerification': 'Přeskočit ověření SSL certifikátu',
+  'memories.immichAutoUpload': 'Zrcadlit fotky journey při nahrávání také do Immich',
   'memories.providerUrlHintSynology': 'Zahrňte cestu aplikace Photos do URL, např. https://nas:5001/photo',
   'memories.testConnection': 'Otestovat připojení',
+  'memories.testShort': 'Otestovat',
   'memories.testFirst': 'Nejprve otestujte připojení',
   'memories.connected': 'Připojeno',
   'memories.disconnected': 'Nepřipojeno',
@@ -1692,6 +1783,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Místa přeseřazena',
   'undo.optimize': 'Trasa optimalizována',
   'undo.deletePlace': 'Místo smazáno',
+  'undo.deletePlaces': 'Místa smazána',
   'undo.moveDay': 'Místo přesunuto na jiný den',
   'undo.lock': 'Zámek místa přepnut',
   'undo.importGpx': 'Import GPX',
@@ -1753,7 +1845,11 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Nepřiřazeno',
   'todo.noCategory': 'Bez kategorie',
   'todo.hasDescription': 'Má popis',
-  'todo.addItem': 'Přidat nový úkol...',
+  'todo.addItem': 'Přidat nový úkol',
+  'todo.sidebar.sortBy': 'Řadit podle',
+  'todo.priority': 'Priorita',
+  'todo.newCategoryLabel': 'nová',
+  'budget.categoriesLabel': 'kategorie',
   'todo.newCategory': 'Název kategorie',
   'todo.addCategory': 'Přidat kategorii',
   'todo.newItem': 'Nový úkol',
@@ -1830,6 +1926,10 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'admin.notifications.adminNtfyPanel.testFailed': 'Testovací Ntfy selhalo',
   'admin.notifications.adminNtfyPanel.alwaysOnHint': 'Admin Ntfy odesílá vždy, když je nakonfigurováno téma',
   'admin.notifications.adminNotificationsHint': 'Nastavte, které kanály doručují admin oznámení (např. upozornění na verze). Webhook odesílá automaticky, pokud je nastavena URL admin webhooku.',
+  'admin.notifications.tripReminders.title': 'Připomínky výletů',
+  'admin.notifications.tripReminders.hint': 'Odešle upozornění před začátkem výletu (vyžaduje nastavené dny připomínky na výletu).',
+  'admin.notifications.tripReminders.enabled': 'Připomínky výletů aktivovány',
+  'admin.notifications.tripReminders.disabled': 'Připomínky výletů deaktivovány',
   'admin.tabs.notifications': 'Oznámení',
   'notifications.versionAvailable.title': 'Dostupná aktualizace',
   'notifications.versionAvailable.text': 'TREK {version} je nyní k dispozici.',
@@ -1846,6 +1946,8 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'notif.booking_change.text': '{actor} aktualizoval rezervaci v {trip}',
   'notif.trip_reminder.title': 'Připomínka výletu',
   'notif.trip_reminder.text': 'Váš výlet {trip} se blíží!',
+  'notif.todo_due.title': 'Úkol se blíží',
+  'notif.todo_due.text': '{todo} ve výletě {trip} má termín {due}',
   'notif.vacay_invite.title': 'Pozvánka Vacay Fusion',
   'notif.vacay_invite.text': '{actor} vás pozval ke spojení dovolenkových plánů',
   'notif.photos_shared.title': 'Fotky sdíleny',
@@ -1877,6 +1979,8 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'memories.saveRouteNotConfigured': 'Trasa uložení není nakonfigurována pro tohoto poskytovatele',
   'memories.testRouteNotConfigured': 'Testovací trasa není nakonfigurována pro tohoto poskytovatele',
   'memories.fillRequiredFields': 'Prosím vyplňte všechna povinná pole',
+  'journey.search.placeholder': 'Hledat cesty…',
+  'journey.search.noResults': 'Žádné cesty neodpovídají „{query}"',
   'journey.title': 'Cestovní deník',
   'journey.subtitle': 'Zaznamenávejte své cesty průběžně',
   'journey.new': 'Nový cestovní deník',
@@ -1898,6 +2002,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'journey.status.active': 'Aktivní',
   'journey.status.completed': 'Dokončeno',
   'journey.status.upcoming': 'Nadcházející',
+  'journey.status.archived': 'Archivováno',
   'journey.checkin.add': 'Odbavit se',
   'journey.checkin.namePlaceholder': 'Název místa',
   'journey.checkin.notesPlaceholder': 'Poznámky (volitelné)',
@@ -1974,6 +2079,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'journey.verdict.couldBeBetter': 'Mohlo by být lepší',
   'journey.synced.places': 'místa',
   'journey.synced.synced': 'synchronizováno',
+  'journey.editor.discardChangesConfirm': 'Máte neuložené změny. Zahodit?',
   'journey.editor.uploadPhotos': 'Nahrát fotky',
   'journey.editor.uploading': 'Nahrávání...',
   'journey.editor.fromGallery': 'Z galerie',
@@ -2051,6 +2157,11 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'journey.settings.name': 'Název',
   'journey.settings.subtitle': 'Podtitul',
   'journey.settings.subtitlePlaceholder': 'např. Thajsko, Vietnam a Kambodža',
+  'journey.settings.endJourney': 'Archivovat cestu',
+  'journey.settings.reopenJourney': 'Obnovit cestu',
+  'journey.settings.archived': 'Cesta archivována',
+  'journey.settings.reopened': 'Cesta znovu otevřena',
+  'journey.settings.endDescription': 'Skryje odznak Živě. Kdykoli jej lze znovu otevřít.',
   'journey.settings.delete': 'Smazat',
   'journey.settings.deleteJourney': 'Smazat cestovní deník',
   'journey.settings.deleteMessage': 'Smazat „{title}"? Všechny záznamy a fotky budou ztraceny.',
@@ -2136,6 +2247,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.group.vacay': 'Dovolená',
   'oauth.scope.group.geo': 'Geo',
   'oauth.scope.group.weather': 'Počasí',
+  'oauth.scope.group.journey': 'Cestovní deník',
 
   // OAuth scope labels & descriptions
   'oauth.scope.trips:read.label': 'Zobrazit výlety a itineráře',
@@ -2186,6 +2298,12 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.geo:read.description': 'Vyhledávat místa, řešit URL map a zpětně geokódovat souřadnice',
   'oauth.scope.weather:read.label': 'Předpovědi počasí',
   'oauth.scope.weather:read.description': 'Získávat předpovědi počasí pro místa a data výletu',
+  'oauth.scope.journey:read.label': 'Zobrazit cestovní deníky',
+  'oauth.scope.journey:read.description': 'Číst cestovní deníky, záznamy a seznam přispěvatelů',
+  'oauth.scope.journey:write.label': 'Spravovat cestovní deníky',
+  'oauth.scope.journey:write.description': 'Vytvářet, aktualizovat a mazat cestovní deníky a jejich záznamy',
+  'oauth.scope.journey:share.label': 'Spravovat odkazy na cestovní deníky',
+  'oauth.scope.journey:share.description': 'Vytvářet, aktualizovat a rušit veřejné sdílené odkazy na cestovní deníky',
 
   // System notices
   'system_notice.welcome_v1.title': 'Vítejte v TREK',
@@ -2226,6 +2344,15 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
   'system_notice.v3_mcp.highlight_scopes':     '24 jemnozrnných oprávnění',
   'system_notice.v3_mcp.highlight_deprecated': 'Statické tokeny trek_ zastaralé',
   'system_notice.v3_mcp.highlight_tools':      'Rozšířená sada nástrojů a promptů',
+
+  // System notices — personal thank you
+  'system_notice.v3_thankyou.title': 'Osobní slovo ode mě',
+  'system_notice.v3_thankyou.body': 'Než budete pokračovat — chci se na chvíli zastavit.\n\nTREK začal jako vedlejší projekt, který jsem vytvořil pro své vlastní cesty. Nikdy jsem si nepředstavoval, že vyroste v něco, čemu 4 000 z vás důvěřuje při plánování svých dobrodružství. Každou hvězdičku, každý issue, každý požadavek na funkci — všechny čtu a právě ony mě drží při životě během pozdních nocí mezi prací na plný úvazek a univerzitou.\n\nChci, abyste věděli: TREK bude vždy open source, vždy self-hosted, vždy váš. Žádné sledování, žádná předplatná, žádné háčky. Jen nástroj vytvořený někým, kdo miluje cestování stejně jako vy.\n\nZvláštní poděkování patří [jubnl](https://github.com/jubnl) — stal ses neuvěřitelným spolupracovníkem. Tolik z toho, co dělá verzi 3.0 skvělou, nese tvůj rukopis. Děkuji, že jsi věřil tomuto projektu, když byl ještě v plenkách.\n\nA každému z vás, kdo nahlásil chybu, přeložil řetězec, sdílel TREK s přítelem nebo ho jednoduše použil k plánování cesty — **děkuji**. Vy jste důvod, proč tohle existuje.\n\nNa mnoho dalších dobrodružství společně.\n\n— Maurice\n\n---\n\n[Přidej se ke komunitě na Discordu](https://discord.gg/7Q6M6jDwzf)\n\nPokud ti TREK zlepšuje cestování, [malá káva](https://ko-fi.com/mauriceboe) vždy pomůže udržet světla rozsvícená.',
+  'transport.addTransport': 'Přidat dopravu',
+  'transport.modalTitle.create': 'Přidat dopravu',
+  'transport.modalTitle.edit': 'Upravit dopravu',
+  'transport.title': 'Doprava',
+  'transport.addManual': 'Ruční doprava',
 }
 
 export default cs

client/src/i18n/translations/de.ts

@@ -10,6 +10,9 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Hinzufügen',
   'common.loading': 'Laden...',
   'common.import': 'Importieren',
+  'common.select': 'Auswählen',
+  'common.selectAll': 'Alle auswählen',
+  'common.deselectAll': 'Alle abwählen',
   'common.error': 'Fehler',
   'common.unknownError': 'Unbekannter Fehler',
   'common.tooManyAttempts': 'Zu viele Versuche. Bitte versuchen Sie es später erneut.',
@@ -27,6 +30,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'Keine',
   'common.date': 'Datum',
   'common.rename': 'Umbenennen',
+  'common.discardChanges': 'Änderungen verwerfen',
+  'common.discard': 'Verwerfen',
   'common.name': 'Name',
   'common.email': 'E-Mail',
   'common.password': 'Passwort',
@@ -145,7 +150,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'settings.subtitle': 'Konfigurieren Sie Ihre persönlichen Einstellungen',
   'settings.tabs.display': 'Anzeige',
   'settings.tabs.map': 'Karte',
-  'settings.tabs.notifications': 'Benachrichtigungen',
+  'settings.tabs.notifications': 'Mitteilungen',
   'settings.tabs.integrations': 'Integrationen',
   'settings.tabs.account': 'Konto',
   'settings.tabs.offline': 'Offline',
@@ -156,6 +161,24 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'settings.mapDefaultHint': 'Leer lassen für OpenStreetMap (Standard)',
   'settings.mapTemplatePlaceholder': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   'settings.mapHint': 'URL-Template für die Kartenkacheln',
+  'settings.mapProvider': 'Kartenanbieter',
+  'settings.mapProviderHint': 'Gilt für Trip Planner und Journey. Atlas nutzt immer Leaflet.',
+  'settings.mapLeafletSubtitle': 'Klassisch 2D, beliebige Raster-Kacheln',
+  'settings.mapMapboxSubtitle': 'Vektor-Kacheln, 3D-Gebäude & Terrain',
+  'settings.mapExperimental': 'Experimentell',
+  'settings.mapMapboxToken': 'Mapbox Access Token',
+  'settings.mapMapboxTokenHint': 'Öffentliches Token (pk.*) von',
+  'settings.mapMapboxTokenLink': 'mapbox.com → Access Tokens',
+  'settings.mapStyle': 'Kartenstil',
+  'settings.mapStylePlaceholder': 'Mapbox-Stil wählen',
+  'settings.mapStyleHint': 'Preset oder eigene mapbox://styles/USER/ID URL',
+  'settings.map3dBuildings': '3D-Gebäude & Terrain',
+  'settings.map3dHint': 'Neigung + echte 3D-Gebäude-Extrusionen — funktioniert mit jedem Stil, auch Satellit.',
+  'settings.mapHighQuality': 'Hochqualitäts-Modus',
+  'settings.mapHighQualityHint': 'Antialiasing + Globus-Projektion für schärfere Kanten und eine realistische Weltsicht.',
+  'settings.mapHighQualityWarning': 'Kann die Performance auf schwächeren Geräten beeinträchtigen.',
+  'settings.mapTipLabel': 'Tipp:',
+  'settings.mapTip': 'Rechtsklick und ziehen, um die Karte zu drehen/neigen. Mittelklick, um einen Ort hinzuzufügen (Rechtsklick ist für die Rotation reserviert).',
   'settings.latitude': 'Breitengrad',
   'settings.longitude': 'Längengrad',
   'settings.saveMap': 'Karte speichern',
@@ -176,11 +199,14 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'settings.temperature': 'Temperatureinheit',
   'settings.timeFormat': 'Zeitformat',
   'settings.routeCalculation': 'Routenberechnung',
+  'settings.bookingLabels': 'Orts-Labels auf Buchungsrouten',
+  'settings.bookingLabelsHint': 'Zeigt Bahnhofs-/Flughafennamen auf der Karte. Wenn aus, wird nur das Icon angezeigt.',
   'settings.blurBookingCodes': 'Buchungscodes verbergen',
-  'settings.notifications': 'Benachrichtigungen',
+  'settings.notifications': 'Mitteilungen',
   'settings.notifyTripInvite': 'Trip-Einladungen',
   'settings.notifyBookingChange': 'Buchungsänderungen',
   'settings.notifyTripReminder': 'Trip-Erinnerungen',
+  'settings.notifyTodoDue': 'Aufgabe bald fällig',
   'settings.notifyVacayInvite': 'Vacay Fusion-Einladungen',
   'settings.notifyPhotosShared': 'Geteilte Fotos (Immich)',
   'settings.notifyCollabMessage': 'Chat-Nachrichten (Collab)',
@@ -311,6 +337,16 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Feature vorschlagen',
   'settings.about.featureRequestHint': 'Schlage ein neues Feature vor',
   'settings.about.wikiHint': 'Dokumentation & Anleitungen',
+  'settings.about.supporters.badge': 'Monatliche Unterstützer',
+  'settings.about.supporters.title': 'Reisebegleitung für TREK',
+  'settings.about.supporters.subtitle': 'Während du deine nächste Route planst, planen diese Leute mit, wie TREK weitergeht. Ihr monatlicher Beitrag fließt direkt in Entwicklung und echten Zeitaufwand — damit TREK Open Source bleibt.',
+  'settings.about.supporters.since': 'Unterstützer seit {date}',
+  'settings.about.supporters.tierEmpty': 'Sei die/der Erste',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK ist ein selbst gehosteter Reiseplaner, der dir hilft, deine Trips von der ersten Idee bis zur letzten Erinnerung zu organisieren. Tagesplanung, Budget, Packlisten, Fotos und vieles mehr — alles an einem Ort, auf deinem eigenen Server.',
   'settings.about.madeWith': 'Entwickelt mit',
   'settings.about.madeBy': 'von Maurice und einer wachsenden Open-Source-Community.',
@@ -430,6 +466,28 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'login.oidcFailed': 'OIDC-Anmeldung fehlgeschlagen',
   'login.usernameRequired': 'Benutzername ist erforderlich',
   'login.passwordMinLength': 'Das Passwort muss mindestens 8 Zeichen lang sein',
+  'login.forgotPassword': 'Passwort vergessen?',
+  'login.forgotPasswordTitle': 'Passwort zurücksetzen',
+  'login.forgotPasswordBody': 'Gib die E-Mail-Adresse deines Kontos ein. Falls ein Konto existiert, schicken wir dir einen Reset-Link.',
+  'login.forgotPasswordSubmit': 'Reset-Link senden',
+  'login.forgotPasswordSentTitle': 'Prüfe deine E-Mails',
+  'login.forgotPasswordSentBody': 'Falls ein Konto mit dieser Adresse existiert, ist ein Reset-Link unterwegs. Er läuft in 60 Minuten ab.',
+  'login.forgotPasswordSmtpHintOff': 'Hinweis: Der Administrator hat SMTP nicht konfiguriert. Der Reset-Link wird statt per E-Mail in die Server-Konsole geschrieben.',
+  'login.backToLogin': 'Zurück zur Anmeldung',
+  'login.newPassword': 'Neues Passwort',
+  'login.confirmPassword': 'Neues Passwort bestätigen',
+  'login.passwordsDontMatch': 'Passwörter stimmen nicht überein',
+  'login.mfaCode': '2FA-Code',
+  'login.resetPasswordTitle': 'Neues Passwort festlegen',
+  'login.resetPasswordBody': 'Wähle ein starkes Passwort, das du hier noch nicht verwendet hast. Mindestens 8 Zeichen.',
+  'login.resetPasswordMfaBody': 'Gib deinen 2FA-Code oder einen Backup-Code ein, um den Reset abzuschließen.',
+  'login.resetPasswordSubmit': 'Passwort zurücksetzen',
+  'login.resetPasswordVerify': 'Prüfen & zurücksetzen',
+  'login.resetPasswordSuccessTitle': 'Passwort aktualisiert',
+  'login.resetPasswordSuccessBody': 'Du kannst dich jetzt mit deinem neuen Passwort anmelden.',
+  'login.resetPasswordInvalidLink': 'Ungültiger Reset-Link',
+  'login.resetPasswordInvalidLinkBody': 'Dieser Link fehlt oder ist beschädigt. Fordere einen neuen an, um fortzufahren.',
+  'login.resetPasswordFailed': 'Zurücksetzen fehlgeschlagen. Der Link ist möglicherweise abgelaufen.',
 
   // Register
   'register.passwordMismatch': 'Passwörter stimmen nicht überein',
@@ -549,6 +607,12 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'admin.fileTypesFormat': 'Kommagetrennte Endungen (z.B. jpg,png,pdf,doc). Verwende * um alle Typen zu erlauben.',
   'admin.fileTypesSaved': 'Dateityp-Einstellungen gespeichert',
 
+  'admin.placesPhotos.title': 'Ortsfotos',
+  'admin.placesPhotos.subtitle': 'Fotos von der Google Places API laden. Deaktivieren, um API-Kontingent zu sparen. Wikimedia-Fotos sind davon nicht betroffen.',
+  'admin.placesAutocomplete.title': 'Orts-Autovervollständigung',
+  'admin.placesAutocomplete.subtitle': 'Google Places API für Suchvorschläge nutzen. Deaktivieren, um API-Kontingent zu sparen.',
+  'admin.placesDetails.title': 'Ortsdetails',
+  'admin.placesDetails.subtitle': 'Detaillierte Ortsinformationen (Öffnungszeiten, Bewertung, Website) von der Google Places API laden. Deaktivieren, um API-Kontingent zu sparen.',
   // Packing Templates & Bag Tracking
   'admin.bagTracking.title': 'Gepäck-Tracking',
   'admin.bagTracking.subtitle': 'Gewicht und Gepäckstück-Zuordnung für Packlisteneinträge aktivieren',
@@ -852,6 +916,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Karte',
+  'trip.tabs.transports': 'Transport',
   'trip.tabs.reservations': 'Buchungen',
   'trip.tabs.reservationsShort': 'Buchung',
   'trip.tabs.packing': 'Liste',
@@ -874,6 +939,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Reservierung hinzugefügt',
   'trip.toast.deleted': 'Gelöscht',
   'trip.confirm.deletePlace': 'Möchtest du diesen Ort wirklich löschen?',
+  'trip.confirm.deletePlaces': '{count} Orte löschen?',
+  'trip.toast.placesDeleted': '{count} Orte gelöscht',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'Keine Orte für diesen Tag geplant',
@@ -884,6 +951,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'dayplan.cannotDropOnTimed': 'Orte können nicht zwischen zeitgebundene Einträge geschoben werden',
   'dayplan.cannotBreakChronology': 'Die zeitliche Reihenfolge von Uhrzeiten und Buchungen darf nicht verletzt werden',
   'dayplan.addNote': 'Notiz hinzufügen',
+  'dayplan.expandAll': 'Alle Tage ausklappen',
+  'dayplan.collapseAll': 'Alle Tage einklappen',
   'dayplan.editNote': 'Notiz bearbeiten',
   'dayplan.noteAdd': 'Notiz hinzufügen',
   'dayplan.noteEdit': 'Notiz bearbeiten',
@@ -908,7 +977,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
 
   // Places Sidebar
   'places.addPlace': 'Ort/Aktivität hinzufügen',
-  'places.importFile': 'Datei importieren',
+  'places.importFile': 'Dateimport',
   'places.sidebarDrop': 'Ablegen zum Importieren',
   'places.importFileHint': '.gpx-, .kml- oder .kmz-Dateien aus Tools wie Google My Maps, Google Earth oder einem GPS-Tracker importieren.',
   'places.importFileDropHere': 'Datei auswählen oder hierher ziehen und ablegen',
@@ -918,6 +987,17 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Import fehlgeschlagen',
   'places.importAllSkipped': 'Alle Orte waren bereits in der Reise.',
   'places.gpxImported': '{count} Orte aus GPX importiert',
+  'places.gpxImportTypes': 'Was soll importiert werden?',
+  'places.gpxImportWaypoints': 'Wegpunkte',
+  'places.gpxImportRoutes': 'Routen',
+  'places.gpxImportTracks': 'Tracks (mit Streckenverlauf)',
+  'places.gpxImportNoneSelected': 'Wähle mindestens einen Typ zum Importieren.',
+  'places.kmlImportTypes': 'Was möchtest du importieren?',
+  'places.kmlImportPoints': 'Punkte (Placemarks)',
+  'places.kmlImportPaths': 'Pfade (LineStrings)',
+  'places.kmlImportNoneSelected': 'Wähle mindestens einen Typ aus.',
+  'places.selectionCount': '{count} ausgewählt',
+  'places.deleteSelected': 'Auswahl löschen',
   'places.kmlKmzImported': '{count} Orte aus KMZ/KML importiert',
   'places.urlResolved': 'Ort aus URL importiert',
   'places.importList': 'Listenimport',
@@ -934,6 +1014,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Zu welchem Tag hinzufügen?',
   'places.all': 'Alle',
   'places.unplanned': 'Ungeplant',
+  'places.filterTracks': 'Tracks',
   'places.search': 'Orte suchen...',
   'places.allCategories': 'Alle Kategorien',
   'places.categoriesSelected': 'Kategorien',
@@ -1017,6 +1098,13 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Flugnr.',
   'reservations.meta.from': 'Von',
   'reservations.meta.to': 'Nach',
+  'reservations.needsReview': 'Prüfen',
+  'reservations.needsReviewHint': 'Flughafen konnte nicht automatisch erkannt werden — bitte Ort bestätigen.',
+  'reservations.searchLocation': 'Bahnhof, Hafen, Adresse suchen…',
+  'airport.searchPlaceholder': 'Flughafencode oder Stadt (z. B. FRA)',
+  'map.connections': 'Verbindungen',
+  'map.showConnections': 'Buchungsrouten anzeigen',
+  'map.hideConnections': 'Buchungsrouten ausblenden',
   'reservations.meta.trainNumber': 'Zugnr.',
   'reservations.meta.platform': 'Gleis',
   'reservations.meta.seat': 'Sitzplatz',
@@ -1035,7 +1123,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Unterkunft',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Zug',
-  'reservations.type.car': 'Mietwagen',
+  'reservations.type.car': 'Auto',
   'reservations.type.cruise': 'Kreuzfahrt',
   'reservations.type.event': 'Veranstaltung',
   'reservations.type.tour': 'Tour',
@@ -1096,6 +1184,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'Ende',
   'reservations.span.ongoing': 'Laufend',
   'reservations.validation.endBeforeStart': 'Enddatum/-zeit muss nach dem Startdatum/-zeit liegen',
+  'reservations.addBooking': 'Buchung hinzufügen',
 
   // Budget
   'budget.title': 'Budget',
@@ -1137,6 +1226,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'files.title': 'Dateien',
   'files.pageTitle': 'Dateien & Dokumente',
   'files.subtitle': '{count} Dateien für {trip}',
+  'files.download': 'Herunterladen',
+  'files.openError': 'Datei konnte nicht geöffnet werden',
   'files.downloadPdf': 'PDF herunterladen',
   'files.count': '{count} Dateien',
   'files.countSingular': '1 Datei',
@@ -1533,8 +1624,10 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'memories.providerPassword': 'Passwort',
   'memories.providerOTP': 'MFA-Code (falls aktiviert)',
   'memories.skipSSLVerification': 'SSL-Zertifikatsprüfung überspringen',
+  'memories.immichAutoUpload': 'Journey-Fotos beim Upload auch zu Immich spiegeln',
   'memories.providerUrlHintSynology': 'Füge den Fotos-App-Pfad in die URL ein, z.B. https://nas:5001/photo',
   'memories.testConnection': 'Verbindung testen',
+  'memories.testShort': 'Testen',
   'memories.testFirst': 'Verbindung zuerst testen',
   'memories.connected': 'Verbunden',
   'memories.disconnected': 'Nicht verbunden',
@@ -1697,6 +1790,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Orte neu sortiert',
   'undo.optimize': 'Route optimiert',
   'undo.deletePlace': 'Ort gelöscht',
+  'undo.deletePlaces': 'Orte gelöscht',
   'undo.moveDay': 'Ort zu anderem Tag verschoben',
   'undo.lock': 'Ortssperre umgeschaltet',
   'undo.importGpx': 'GPX-Import',
@@ -1756,7 +1850,11 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Nicht zugewiesen',
   'todo.noCategory': 'Keine Kategorie',
   'todo.hasDescription': 'Hat Beschreibung',
-  'todo.addItem': 'Neue Aufgabe hinzufügen...',
+  'todo.addItem': 'Neue Aufgabe hinzufügen',
+  'todo.sidebar.sortBy': 'Sortieren nach',
+  'todo.priority': 'Priorität',
+  'todo.newCategoryLabel': 'neu',
+  'budget.categoriesLabel': 'Kategorien',
   'todo.newCategory': 'Kategoriename',
   'todo.addCategory': 'Kategorie hinzufügen',
   'todo.newItem': 'Neue Aufgabe',
@@ -1833,6 +1931,10 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'admin.notifications.adminNtfyPanel.testFailed': 'Test-Ntfy fehlgeschlagen',
   'admin.notifications.adminNtfyPanel.alwaysOnHint': 'Admin-Ntfy sendet immer, wenn ein Thema konfiguriert ist',
   'admin.notifications.adminNotificationsHint': 'Konfiguriere, welche Kanäle Admin-Benachrichtigungen liefern (z. B. Versions-Updates). Der Webhook sendet automatisch, wenn eine Admin-Webhook-URL gesetzt ist.',
+  'admin.notifications.tripReminders.title': 'Reiseerinnerungen',
+  'admin.notifications.tripReminders.hint': 'Sendet eine Erinnerungsbenachrichtigung vor Reisebeginn (erfordert gesetzte Erinnerungstage bei der Reise).',
+  'admin.notifications.tripReminders.enabled': 'Reiseerinnerungen aktiviert',
+  'admin.notifications.tripReminders.disabled': 'Reiseerinnerungen deaktiviert',
   'admin.tabs.notifications': 'Benachrichtigungen',
   'notifications.versionAvailable.title': 'Update verfügbar',
   'notifications.versionAvailable.text': 'TREK {version} ist jetzt verfügbar.',
@@ -1849,6 +1951,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'notif.booking_change.text': '{actor} hat eine Buchung in {trip} aktualisiert',
   'notif.trip_reminder.title': 'Reiseerinnerung',
   'notif.trip_reminder.text': 'Deine Reise {trip} steht bald an!',
+  'notif.todo_due.title': 'Aufgabe fällig',
+  'notif.todo_due.text': '{todo} in {trip} ist am {due} fällig',
   'notif.vacay_invite.title': 'Vacay Fusion-Einladung',
   'notif.vacay_invite.text': '{actor} hat dich zum Fusionieren von Urlaubsplänen eingeladen',
   'notif.photos_shared.title': 'Fotos geteilt',
@@ -1874,6 +1978,8 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'notif.dev.unknown_event.text': 'Ereignistyp "{event}" ist nicht in EVENT_NOTIFICATION_CONFIG registriert',
 
   // Journey Addon
+  'journey.search.placeholder': 'Reisen suchen…',
+  'journey.search.noResults': 'Keine Reisen passen zu „{query}"',
   'journey.title': 'Journey',
   'journey.subtitle': 'Dokumentiere deine Reisen unterwegs',
   'journey.new': 'Neue Journey',
@@ -1895,6 +2001,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'journey.status.active': 'Aktiv',
   'journey.status.completed': 'Abgeschlossen',
   'journey.status.upcoming': 'Anstehend',
+  'journey.status.archived': 'Archiviert',
   'journey.checkin.add': 'Einchecken',
   'journey.checkin.namePlaceholder': 'Ortsname',
   'journey.checkin.notesPlaceholder': 'Notizen (optional)',
@@ -1975,6 +2082,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'journey.verdict.couldBeBetter': 'Verbesserungswürdig',
   'journey.synced.places': 'Orte',
   'journey.synced.synced': 'synchronisiert',
+  'journey.editor.discardChangesConfirm': 'Du hast ungespeicherte Änderungen. Verwerfen?',
   'journey.editor.uploadPhotos': 'Fotos hochladen',
   'journey.editor.uploading': 'Hochladen...',
   'journey.editor.fromGallery': 'Aus Galerie',
@@ -2025,6 +2133,10 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'journey.contributors.role': 'Rolle',
   'journey.contributors.added': 'Mitwirkender hinzugefügt',
   'journey.contributors.addFailed': 'Hinzufügen fehlgeschlagen',
+  'journey.contributors.remove': 'Mitwirkenden entfernen',
+  'journey.contributors.removeConfirm': '{username} aus dieser Journey entfernen?',
+  'journey.contributors.removed': 'Mitwirkender entfernt',
+  'journey.contributors.removeFailed': 'Entfernen fehlgeschlagen',
   'journey.share.publicShare': 'Öffentlicher Link',
   'journey.share.createLink': 'Link erstellen',
   'journey.share.linkCreated': 'Link erstellt',
@@ -2052,6 +2164,11 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'journey.settings.name': 'Name',
   'journey.settings.subtitle': 'Untertitel',
   'journey.settings.subtitlePlaceholder': 'z.B. Thailand, Vietnam & Kambodscha',
+  'journey.settings.endJourney': 'Reise archivieren',
+  'journey.settings.reopenJourney': 'Reise wiederherstellen',
+  'journey.settings.archived': 'Reise archiviert',
+  'journey.settings.reopened': 'Reise erneut geöffnet',
+  'journey.settings.endDescription': 'Blendet das Live-Abzeichen aus. Sie können jederzeit wieder öffnen.',
   'journey.settings.delete': 'Löschen',
   'journey.settings.deleteJourney': 'Journey löschen',
   'journey.settings.deleteMessage': '"{title}" löschen? Alle Einträge und Fotos gehen verloren.',
@@ -2136,6 +2253,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.group.vacay': 'Urlaub',
   'oauth.scope.group.geo': 'Geo',
   'oauth.scope.group.weather': 'Wetter',
+  'oauth.scope.group.journey': 'Journey',
 
   // OAuth scope labels & descriptions
   'oauth.scope.trips:read.label': 'Reisen und Reisepläne anzeigen',
@@ -2186,6 +2304,12 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.geo:read.description': 'Orte suchen, Karten-URLs auflösen und Koordinaten rückwärts geokodieren',
   'oauth.scope.weather:read.label': 'Wettervorhersagen',
   'oauth.scope.weather:read.description': 'Wettervorhersagen für Reiseorte und -daten abrufen',
+  'oauth.scope.journey:read.label': 'Journeys ansehen',
+  'oauth.scope.journey:read.description': 'Journeys, Einträge und Mitarbeiterliste lesen',
+  'oauth.scope.journey:write.label': 'Journeys verwalten',
+  'oauth.scope.journey:write.description': 'Journeys und deren Einträge erstellen, bearbeiten und löschen',
+  'oauth.scope.journey:share.label': 'Journey-Links verwalten',
+  'oauth.scope.journey:share.description': 'Öffentliche Freigabelinks für Journeys erstellen, aktualisieren und widerrufen',
 
   // System notices
   'system_notice.welcome_v1.title': 'Willkommen bei TREK',
@@ -2226,6 +2350,15 @@ const de: Record<string, string | { name: string; category: string }[]> = {
   'system_notice.v3_mcp.highlight_scopes':     '24 feingranulare Berechtigungs-Scopes',
   'system_notice.v3_mcp.highlight_deprecated': 'Statische trek_-Tokens veraltet',
   'system_notice.v3_mcp.highlight_tools':      'Erweitertes Toolset & Prompts',
+
+  // System notices — persönlicher Dank
+  'system_notice.v3_thankyou.title': 'Ein persönliches Wort von mir',
+  'system_notice.v3_thankyou.body': 'Bevor du weiterklickst — einen Moment noch.\n\nTREK hat als Nebenprojekt für meine eigenen Reisen angefangen. Ich hätte nie gedacht, dass es jemals so weit kommt, dass 4.000 von euch damit ihre Abenteuer planen. Jeder Stern, jedes Issue, jeder Feature-Wunsch — ich lese sie alle, und sie halten mich am Laufen durch die späten Nächte zwischen Vollzeitjob und Studium.\n\nEins will ich euch sagen: TREK wird immer Open Source bleiben, immer self-hosted, immer eures. Kein Tracking, keine Abos, keine versteckten Haken. Einfach ein Tool, gebaut von jemandem, der das Reisen genauso liebt wie ihr.\n\nBesonderer Dank an [jubnl](https://github.com/jubnl) — du bist ein unglaublicher Mitstreiter geworden. So vieles, was 3.0 großartig macht, trägt deine Handschrift. Danke, dass du an dieses Projekt geglaubt hast, als es noch holprig war.\n\nUnd an jeden einzelnen von euch, der einen Bug gemeldet, einen String übersetzt, TREK mit Freunden geteilt oder einfach damit eine Reise geplant hat — **danke**. Ihr seid der Grund, warum es das hier gibt.\n\nAuf viele weitere Abenteuer zusammen.\n\n— Maurice\n\n---\n\n[Tritt der Community auf Discord bei](https://discord.gg/7Q6M6jDwzf)\n\nWenn TREK deine Reisen besser macht, hält ein [kleiner Kaffee](https://ko-fi.com/mauriceboe) die Lichter an.',
+  'transport.addTransport': 'Transport hinzufügen',
+  'transport.modalTitle.create': 'Transport hinzufügen',
+  'transport.modalTitle.edit': 'Transport bearbeiten',
+  'transport.title': 'Transporte',
+  'transport.addManual': 'Manuelles Transportmittel',
 }
 
 export default de

client/src/i18n/translations/en.ts

@@ -10,6 +10,9 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'common.add': 'Add',
   'common.loading': 'Loading...',
   'common.import': 'Import',
+  'common.select': 'Select',
+  'common.selectAll': 'Select all',
+  'common.deselectAll': 'Deselect all',
   'common.error': 'Error',
   'common.unknownError': 'Unknown error',
   'common.tooManyAttempts': 'Too many attempts. Please try again later.',
@@ -27,6 +30,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'common.none': 'None',
   'common.date': 'Date',
   'common.rename': 'Rename',
+  'common.discardChanges': 'Discard Changes',
+  'common.discard': 'Discard',
   'common.name': 'Name',
   'common.email': 'Email',
   'common.password': 'Password',
@@ -119,6 +124,20 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'dashboard.toast.copied': 'Trip copied!',
   'dashboard.toast.copyError': 'Failed to copy trip',
   'dashboard.confirm.delete': 'Delete trip "{title}"? All places and plans will be permanently deleted.',
+  'dashboard.confirm.copy.title': 'Copy this trip?',
+  'dashboard.confirm.copy.willCopy': 'Will be copied',
+  'dashboard.confirm.copy.will1': 'Days, places & day assignments',
+  'dashboard.confirm.copy.will2': 'Accommodations & reservations',
+  'dashboard.confirm.copy.will3': 'Budget items & category order',
+  'dashboard.confirm.copy.will4': 'Packing lists (unchecked)',
+  'dashboard.confirm.copy.will5': 'TODOs (unassigned & unchecked)',
+  'dashboard.confirm.copy.will6': 'Day notes',
+  'dashboard.confirm.copy.wontCopy': "Won't be copied",
+  'dashboard.confirm.copy.wont1': 'Collaborators & member assignments',
+  'dashboard.confirm.copy.wont2': 'Collab notes, polls & messages',
+  'dashboard.confirm.copy.wont3': 'Files & photos',
+  'dashboard.confirm.copy.wont4': 'Share tokens',
+  'dashboard.confirm.copy.confirm': 'Copy trip',
   'dashboard.editTrip': 'Edit Trip',
   'dashboard.createTrip': 'Create New Trip',
   'dashboard.tripTitle': 'Title',
@@ -156,6 +175,24 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.mapDefaultHint': 'Leave empty for OpenStreetMap (default)',
   'settings.mapTemplatePlaceholder': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   'settings.mapHint': 'URL template for map tiles',
+  'settings.mapProvider': 'Map Provider',
+  'settings.mapProviderHint': 'Affects Trip Planner and Journey maps. Atlas always uses Leaflet.',
+  'settings.mapLeafletSubtitle': 'Classic 2D, any raster tiles',
+  'settings.mapMapboxSubtitle': 'Vector tiles, 3D buildings & terrain',
+  'settings.mapExperimental': 'Experimental',
+  'settings.mapMapboxToken': 'Mapbox Access Token',
+  'settings.mapMapboxTokenHint': 'Public token (pk.*) from',
+  'settings.mapMapboxTokenLink': 'mapbox.com → Access tokens',
+  'settings.mapStyle': 'Map Style',
+  'settings.mapStylePlaceholder': 'Select a Mapbox style',
+  'settings.mapStyleHint': 'Preset or your own mapbox://styles/USER/ID URL',
+  'settings.map3dBuildings': '3D Buildings & Terrain',
+  'settings.map3dHint': 'Pitch + real 3D building extrusions — works on every style, including satellite.',
+  'settings.mapHighQuality': 'High Quality Mode',
+  'settings.mapHighQualityHint': 'Antialiasing + globe projection for sharper edges and a realistic world view.',
+  'settings.mapHighQualityWarning': 'May impact performance on lower-end devices.',
+  'settings.mapTipLabel': 'Tip:',
+  'settings.mapTip': 'right-click and drag to rotate/pitch the map. Middle-click to add a place (right-click is reserved for rotation).',
   'settings.latitude': 'Latitude',
   'settings.longitude': 'Longitude',
   'settings.saveMap': 'Save Map',
@@ -176,11 +213,14 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.temperature': 'Temperature Unit',
   'settings.timeFormat': 'Time Format',
   'settings.routeCalculation': 'Route Calculation',
+  'settings.bookingLabels': 'Booking route labels',
+  'settings.bookingLabelsHint': 'Show station / airport names on the map. When off, only the icon is shown.',
   'settings.blurBookingCodes': 'Blur Booking Codes',
   'settings.notifications': 'Notifications',
   'settings.notifyTripInvite': 'Trip invitations',
   'settings.notifyBookingChange': 'Booking changes',
   'settings.notifyTripReminder': 'Trip reminders',
+  'settings.notifyTodoDue': 'Todo due soon',
   'settings.notifyVacayInvite': 'Vacay fusion invitations',
   'settings.notifyPhotosShared': 'Shared photos (Immich)',
   'settings.notifyCollabMessage': 'Chat messages (Collab)',
@@ -251,6 +291,10 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'admin.notifications.adminNtfyPanel.testFailed': 'Test ntfy failed',
   'admin.notifications.adminNtfyPanel.alwaysOnHint': 'Admin ntfy always fires when a topic is configured',
   'admin.notifications.adminNotificationsHint': 'Configure which channels deliver admin-only notifications (e.g. version alerts).',
+  'admin.notifications.tripReminders.title': 'Trip Reminders',
+  'admin.notifications.tripReminders.hint': 'Send a reminder notification before a trip starts (requires reminder days to be set on the trip).',
+  'admin.notifications.tripReminders.enabled': 'Trip reminders enabled',
+  'admin.notifications.tripReminders.disabled': 'Trip reminders disabled',
   'admin.smtp.title': 'Email & Notifications',
   'admin.smtp.hint': 'SMTP configuration for sending email notifications.',
   'admin.smtp.testButton': 'Send test email',
@@ -366,6 +410,16 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'settings.about.featureRequest': 'Feature Request',
   'settings.about.featureRequestHint': 'Suggest a new feature',
   'settings.about.wikiHint': 'Documentation & guides',
+  'settings.about.supporters.badge': 'Monthly Supporters',
+  'settings.about.supporters.title': 'Travel companions for TREK',
+  'settings.about.supporters.subtitle': "While you're planning your next route, these folks are helping plan TREK's future. Their monthly contribution goes straight into development and real hours spent — so TREK stays Open Source.",
+  'settings.about.supporters.since': 'supporter since {date}',
+  'settings.about.supporters.tierEmpty': 'Be the first',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK is a self-hosted travel planner that helps you organize your trips from the first idea to the last memory. Day planning, budget, packing lists, photos and much more — all in one place, on your own server.',
   'settings.about.madeWith': 'Made with',
   'settings.about.madeBy': 'by Maurice and a growing open-source community.',
@@ -485,6 +539,28 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'login.oidcFailed': 'OIDC login failed',
   'login.usernameRequired': 'Username is required',
   'login.passwordMinLength': 'Password must be at least 8 characters',
+  'login.forgotPassword': 'Forgot password?',
+  'login.forgotPasswordTitle': 'Reset your password',
+  'login.forgotPasswordBody': 'Enter the email address you signed up with. If an account exists, we\'ll send a reset link.',
+  'login.forgotPasswordSubmit': 'Send reset link',
+  'login.forgotPasswordSentTitle': 'Check your email',
+  'login.forgotPasswordSentBody': 'If an account exists for that email, a reset link is on its way. It expires in 60 minutes.',
+  'login.forgotPasswordSmtpHintOff': 'Heads up: your administrator hasn\'t configured SMTP, so the reset link will be written to the server console instead of being emailed.',
+  'login.backToLogin': 'Back to sign in',
+  'login.newPassword': 'New password',
+  'login.confirmPassword': 'Confirm new password',
+  'login.passwordsDontMatch': 'Passwords don\'t match',
+  'login.mfaCode': '2FA code',
+  'login.resetPasswordTitle': 'Set a new password',
+  'login.resetPasswordBody': 'Pick a strong password you haven’t used here before. Minimum 8 characters.',
+  'login.resetPasswordMfaBody': 'Enter your 2FA code or a backup code to complete the reset.',
+  'login.resetPasswordSubmit': 'Reset password',
+  'login.resetPasswordVerify': 'Verify & reset',
+  'login.resetPasswordSuccessTitle': 'Password updated',
+  'login.resetPasswordSuccessBody': 'You can now sign in with your new password.',
+  'login.resetPasswordInvalidLink': 'Invalid reset link',
+  'login.resetPasswordInvalidLinkBody': 'This link is missing or broken. Request a new one to continue.',
+  'login.resetPasswordFailed': 'Reset failed. The link may have expired.',
 
   // Register
   'register.passwordMismatch': 'Passwords do not match',
@@ -605,6 +681,12 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'admin.fileTypesFormat': 'Comma-separated extensions (e.g. jpg,png,pdf,doc). Use * to allow all types.',
   'admin.fileTypesSaved': 'File type settings saved',
 
+  'admin.placesPhotos.title': 'Place Photos',
+  'admin.placesPhotos.subtitle': 'Fetch photos from the Google Places API. Disable to save API quota. Wikimedia photos are unaffected.',
+  'admin.placesAutocomplete.title': 'Place Autocomplete',
+  'admin.placesAutocomplete.subtitle': 'Use the Google Places API for search suggestions. Disable to save API quota.',
+  'admin.placesDetails.title': 'Place Details',
+  'admin.placesDetails.subtitle': 'Fetch detailed place information (hours, rating, website) from the Google Places API. Disable to save API quota.',
   // Packing Templates & Bag Tracking
   'admin.bagTracking.title': 'Bag Tracking',
   'admin.bagTracking.subtitle': 'Enable weight and bag assignment for packing items',
@@ -905,6 +987,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plan',
+  'trip.tabs.transports': 'Transports',
   'trip.tabs.reservations': 'Bookings',
   'trip.tabs.reservationsShort': 'Book',
   'trip.tabs.packing': 'Packing List',
@@ -927,6 +1010,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'trip.toast.reservationAdded': 'Reservation added',
   'trip.toast.deleted': 'Deleted',
   'trip.confirm.deletePlace': 'Are you sure you want to delete this place?',
+  'trip.confirm.deletePlaces': 'Delete {count} places?',
+  'trip.toast.placesDeleted': '{count} places deleted',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'No places planned for this day',
@@ -937,6 +1022,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'dayplan.cannotDropOnTimed': 'Items cannot be placed between time-bound entries',
   'dayplan.cannotBreakChronology': 'This would break the chronological order of timed items and bookings',
   'dayplan.addNote': 'Add Note',
+  'dayplan.expandAll': 'Expand all days',
+  'dayplan.collapseAll': 'Collapse all days',
   'dayplan.editNote': 'Edit Note',
   'dayplan.noteAdd': 'Add Note',
   'dayplan.noteEdit': 'Edit Note',
@@ -971,6 +1058,17 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'places.importFileError': 'Import failed',
   'places.importAllSkipped': 'All places were already in the trip.',
   'places.gpxImported': '{count} places imported from GPX',
+  'places.gpxImportTypes': 'What do you want to import?',
+  'places.gpxImportWaypoints': 'Waypoints',
+  'places.gpxImportRoutes': 'Routes',
+  'places.gpxImportTracks': 'Tracks (with path geometry)',
+  'places.gpxImportNoneSelected': 'Select at least one type to import.',
+  'places.kmlImportTypes': 'What do you want to import?',
+  'places.kmlImportPoints': 'Points (Placemarks)',
+  'places.kmlImportPaths': 'Paths (LineStrings)',
+  'places.kmlImportNoneSelected': 'Select at least one type to import.',
+  'places.selectionCount': '{count} selected',
+  'places.deleteSelected': 'Delete selected',
   'places.kmlKmzImported': '{count} places imported from KMZ/KML',
   'places.urlResolved': 'Place imported from URL',
   'places.importList': 'List Import',
@@ -987,6 +1085,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'places.assignToDay': 'Add to which day?',
   'places.all': 'All',
   'places.unplanned': 'Unplanned',
+  'places.filterTracks': 'Tracks',
   'places.search': 'Search places...',
   'places.allCategories': 'All Categories',
   'places.categoriesSelected': 'categories',
@@ -1070,6 +1169,13 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'reservations.meta.flightNumber': 'Flight No.',
   'reservations.meta.from': 'From',
   'reservations.meta.to': 'To',
+  'reservations.needsReview': 'Review',
+  'reservations.needsReviewHint': 'Airport could not be matched automatically — please confirm the location.',
+  'reservations.searchLocation': 'Search station, port, address…',
+  'airport.searchPlaceholder': 'Airport code or city (e.g. FRA)',
+  'map.connections': 'Connections',
+  'map.showConnections': 'Show booking routes',
+  'map.hideConnections': 'Hide booking routes',
   'reservations.meta.trainNumber': 'Train No.',
   'reservations.meta.platform': 'Platform',
   'reservations.meta.seat': 'Seat',
@@ -1088,7 +1194,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'reservations.type.hotel': 'Accommodation',
   'reservations.type.restaurant': 'Restaurant',
   'reservations.type.train': 'Train',
-  'reservations.type.car': 'Rental Car',
+  'reservations.type.car': 'Car',
   'reservations.type.cruise': 'Cruise',
   'reservations.type.event': 'Event',
   'reservations.type.tour': 'Tour',
@@ -1149,6 +1255,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'reservations.span.end': 'End',
   'reservations.span.ongoing': 'Ongoing',
   'reservations.validation.endBeforeStart': 'End date/time must be after start date/time',
+  'reservations.addBooking': 'Add booking',
 
   // Budget
   'budget.title': 'Budget',
@@ -1190,6 +1297,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'files.title': 'Files',
   'files.pageTitle': 'Files & Documents',
   'files.subtitle': '{count} files for {trip}',
+  'files.download': 'Download',
+  'files.openError': 'Could not open file',
   'files.downloadPdf': 'Download PDF',
   'files.count': '{count} files',
   'files.countSingular': '1 file',
@@ -1588,8 +1697,10 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'memories.providerPassword': 'Password',
   'memories.providerOTP': 'MFA code (if enabled)',
   'memories.skipSSLVerification': 'Skip SSL certificate verification',
+  'memories.immichAutoUpload': 'Mirror journey photos to Immich on upload',
   'memories.providerUrlHintSynology': 'Include the Photos app path in the URL, e.g. https://nas:5001/photo',
   'memories.testConnection': 'Test connection',
+  'memories.testShort': 'Test',
   'memories.testFirst': 'Test connection first',
   'memories.connected': 'Connected',
   'memories.disconnected': 'Not connected',
@@ -1762,6 +1873,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'undo.reorder': 'Places reordered',
   'undo.optimize': 'Route optimized',
   'undo.deletePlace': 'Place deleted',
+  'undo.deletePlaces': 'Places deleted',
   'undo.moveDay': 'Place moved to another day',
   'undo.lock': 'Place lock toggled',
   'undo.importGpx': 'GPX import',
@@ -1818,7 +1930,11 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'todo.unassigned': 'Unassigned',
   'todo.noCategory': 'No category',
   'todo.hasDescription': 'Has description',
-  'todo.addItem': 'Add new task...',
+  'todo.addItem': 'Add new task',
+  'todo.sidebar.sortBy': 'Sort by',
+  'todo.priority': 'Priority',
+  'todo.newCategoryLabel': 'new',
+  'budget.categoriesLabel': 'categories',
   'todo.newCategory': 'Category name',
   'todo.addCategory': 'Add category',
   'todo.newItem': 'New task',
@@ -1852,6 +1968,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'notif.booking_change.text': '{actor} updated a booking in {trip}',
   'notif.trip_reminder.title': 'Trip Reminder',
   'notif.trip_reminder.text': 'Your trip {trip} is coming up soon!',
+  'notif.todo_due.title': 'To-do due',
+  'notif.todo_due.text': '{todo} in {trip} is due on {due}',
   'notif.vacay_invite.title': 'Vacay Fusion Invite',
   'notif.vacay_invite.text': '{actor} invited you to fuse vacation plans',
   'notif.photos_shared.title': 'Photos Shared',
@@ -1877,6 +1995,8 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'notif.dev.unknown_event.text': 'Event type "{event}" is not registered in EVENT_NOTIFICATION_CONFIG',
 
   // Journey addon
+  'journey.search.placeholder': 'Search journeys…',
+  'journey.search.noResults': 'No journeys match "{query}"',
   'journey.title': 'Journey',
   'journey.subtitle': 'Track your travels as they happen',
   'journey.new': 'New Journey',
@@ -1898,6 +2018,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'journey.status.active': 'Active',
   'journey.status.completed': 'Completed',
   'journey.status.upcoming': 'Upcoming',
+  'journey.status.archived': 'Archived',
   'journey.checkin.add': 'Check in',
   'journey.checkin.namePlaceholder': 'Location name',
   'journey.checkin.notesPlaceholder': 'Notes (optional)',
@@ -1958,6 +2079,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'journey.detail.noEntriesHint': 'Add a trip to get started with skeleton entries',
   'journey.detail.noPhotos': 'No photos yet',
   'journey.detail.noPhotosHint': 'Upload photos to entries or browse your Immich/Synology library',
+  'journey.detail.journeyTab': 'Journey',
   'journey.detail.journeyStats': 'Journey Stats',
   'journey.detail.syncedTrips': 'Synced Trips',
   'journey.detail.noTripsLinked': 'No trips linked yet',
@@ -1986,6 +2108,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'journey.synced.synced': 'synced',
 
   // Journey Entry Editor
+  'journey.editor.discardChangesConfirm': 'You have unsaved changes. Discard them?',
   'journey.editor.uploadPhotos': 'Upload photos',
   'journey.editor.uploading': 'Uploading...',
   'journey.editor.fromGallery': 'From Gallery',
@@ -2044,6 +2167,10 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'journey.contributors.role': 'Role',
   'journey.contributors.added': 'Contributor added',
   'journey.contributors.addFailed': 'Failed to add contributor',
+  'journey.contributors.remove': 'Remove contributor',
+  'journey.contributors.removeConfirm': 'Remove {username} from this journey?',
+  'journey.contributors.removed': 'Contributor removed',
+  'journey.contributors.removeFailed': 'Failed to remove contributor',
 
   // Journey — Share
   'journey.share.publicShare': 'Public Share',
@@ -2075,6 +2202,11 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'journey.settings.name': 'Name',
   'journey.settings.subtitle': 'Subtitle',
   'journey.settings.subtitlePlaceholder': 'e.g. Thailand, Vietnam & Cambodia',
+  'journey.settings.endJourney': 'Archive Journey',
+  'journey.settings.reopenJourney': 'Restore Journey',
+  'journey.settings.archived': 'Journey archived',
+  'journey.settings.reopened': 'Journey reopened',
+  'journey.settings.endDescription': 'Hides the Live badge. You can reopen anytime.',
   'journey.settings.delete': 'Delete',
   'journey.settings.deleteJourney': 'Delete Journey',
   'journey.settings.deleteMessage': 'Delete "{title}"? All entries and photos will be lost.',
@@ -2172,6 +2304,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.group.vacay': 'Vacation',
   'oauth.scope.group.geo': 'Geo',
   'oauth.scope.group.weather': 'Weather',
+  'oauth.scope.group.journey': 'Journey',
 
   // OAuth scope labels & descriptions
   'oauth.scope.trips:read.label': 'View trips & itineraries',
@@ -2222,6 +2355,12 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'oauth.scope.geo:read.description': 'Search locations, resolve map URLs, and reverse geocode coordinates',
   'oauth.scope.weather:read.label': 'Weather forecasts',
   'oauth.scope.weather:read.description': 'Fetch weather forecasts for trip locations and dates',
+  'oauth.scope.journey:read.label': 'View journeys',
+  'oauth.scope.journey:read.description': 'Read journeys, entries, and contributor list',
+  'oauth.scope.journey:write.label': 'Manage journeys',
+  'oauth.scope.journey:write.description': 'Create, update, and delete journeys and their entries',
+  'oauth.scope.journey:share.label': 'Manage journey links',
+  'oauth.scope.journey:share.description': 'Create, update, and revoke public share links for journeys',
 
   // System notices — 3.0.0 upgrade
   'system_notice.v3_photos.title': 'Photos have moved in 3.0',
@@ -2248,6 +2387,10 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'system_notice.v3_mcp.highlight_deprecated': 'Static trek_ tokens deprecated',
   'system_notice.v3_mcp.highlight_tools':      'Expanded toolset & prompts',
 
+  // System notices — personal thank you
+  'system_notice.v3_thankyou.title': 'A personal note from me',
+  'system_notice.v3_thankyou.body': 'Before you go — I want to take a moment.\n\nTREK started as a side project I built for my own trips. I never imagined it would grow into something that 4,000 of you now trust to plan your adventures. Every star, every issue, every feature request — I read them all, and they keep me going through late nights between a full-time job and university.\n\nI want you to know: TREK will always be open source, always self-hosted, always yours. No tracking, no subscriptions, no strings attached. Just a tool built by someone who loves traveling as much as you do.\n\nSpecial thanks to [jubnl](https://github.com/jubnl) — you have become an incredible collaborator. So much of what makes 3.0 great carries your fingerprints. Thank you for believing in this project when it was still rough around the edges.\n\nAnd to every single one of you who filed a bug, translated a string, shared TREK with a friend, or simply used it to plan a trip — **thank you**. You are the reason this exists.\n\nHere\'s to many more adventures together.\n\n— Maurice\n\n---\n\n[Join the community on Discord](https://discord.gg/7Q6M6jDwzf)\n\nIf TREK makes your travels better, a [small coffee](https://ko-fi.com/mauriceboe) always keeps the lights on.',
+
   // System notices — onboarding
   'system_notice.welcome_v1.title': 'Welcome to TREK',
   'system_notice.welcome_v1.body': 'Your all-in-one travel planner. Build itineraries, share trips with friends, and stay organized — online or offline.',
@@ -2263,6 +2406,11 @@ const en: Record<string, string | { name: string; category: string }[]> = {
   'system_notice.pager.counter': '{current} / {total}',
   'system_notice.pager.goto': 'Go to notice {n}',
   'system_notice.pager.position': 'Notice {current} of {total}',
+  'transport.addTransport': 'Add transport',
+  'transport.modalTitle.create': 'Add transport',
+  'transport.modalTitle.edit': 'Edit transport',
+  'transport.title': 'Transports',
+  'transport.addManual': 'Manual Transport',
 }
 
 export default en

client/src/i18n/translations/es.ts

@@ -10,6 +10,9 @@ const es: Record<string, string> = {
   'common.add': 'Añadir',
   'common.loading': 'Cargando...',
   'common.import': 'Importar',
+  'common.select': 'Seleccionar',
+  'common.selectAll': 'Seleccionar todo',
+  'common.deselectAll': 'Deseleccionar todo',
   'common.error': 'Error',
   'common.unknownError': 'Error desconocido',
   'common.tooManyAttempts': 'Demasiados intentos. Inténtelo de nuevo más tarde.',
@@ -27,6 +30,8 @@ const es: Record<string, string> = {
   'common.none': 'Ninguno',
   'common.date': 'Fecha',
   'common.rename': 'Renombrar',
+  'common.discardChanges': 'Descartar cambios',
+  'common.discard': 'Descartar',
   'common.name': 'Nombre',
   'common.email': 'Correo',
   'common.password': 'Contraseña',
@@ -154,6 +159,24 @@ const es: Record<string, string> = {
   'settings.mapDefaultHint': 'Déjalo vacío para OpenStreetMap (por defecto)',
   'settings.mapTemplatePlaceholder': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   'settings.mapHint': 'Plantilla de URL para los mosaicos del mapa',
+  'settings.mapProvider': 'Proveedor de mapa',
+  'settings.mapProviderHint': 'Afecta a los mapas de Trip Planner y Journey. Atlas siempre usa Leaflet.',
+  'settings.mapLeafletSubtitle': 'Clásico 2D, cualquier mosaico raster',
+  'settings.mapMapboxSubtitle': 'Mosaicos vectoriales, edificios 3D y terreno',
+  'settings.mapExperimental': 'Experimental',
+  'settings.mapMapboxToken': 'Token de acceso de Mapbox',
+  'settings.mapMapboxTokenHint': 'Token público (pk.*) de',
+  'settings.mapMapboxTokenLink': 'mapbox.com → Tokens de acceso',
+  'settings.mapStyle': 'Estilo de mapa',
+  'settings.mapStylePlaceholder': 'Seleccionar un estilo de Mapbox',
+  'settings.mapStyleHint': 'Preset o tu propia URL mapbox://styles/USER/ID',
+  'settings.map3dBuildings': 'Edificios 3D y terreno',
+  'settings.map3dHint': 'Inclinación + extrusiones 3D reales de edificios — funciona con todos los estilos, incluyendo satélite.',
+  'settings.mapHighQuality': 'Modo de alta calidad',
+  'settings.mapHighQualityHint': 'Antialiasing + proyección global para bordes más nítidos y una vista realista del mundo.',
+  'settings.mapHighQualityWarning': 'Puede afectar el rendimiento en dispositivos menos potentes.',
+  'settings.mapTipLabel': 'Consejo:',
+  'settings.mapTip': 'Clic derecho y arrastrar para rotar/inclinar el mapa. Clic central para añadir un lugar (el clic derecho está reservado para la rotación).',
   'settings.latitude': 'Latitud',
   'settings.longitude': 'Longitud',
   'settings.saveMap': 'Guardar mapa',
@@ -179,6 +202,7 @@ const es: Record<string, string> = {
   'settings.notifyTripInvite': 'Invitaciones de viaje',
   'settings.notifyBookingChange': 'Cambios en reservas',
   'settings.notifyTripReminder': 'Recordatorios de viaje',
+  'settings.notifyTodoDue': 'Tarea próxima',
   'settings.notifyVacayInvite': 'Invitaciones de fusión Vacay',
   'settings.notifyPhotosShared': 'Fotos compartidas (Immich)',
   'settings.notifyCollabMessage': 'Mensajes de chat (Collab)',
@@ -309,6 +333,16 @@ const es: Record<string, string> = {
   'settings.about.featureRequest': 'Solicitar función',
   'settings.about.featureRequestHint': 'Sugiere una nueva función',
   'settings.about.wikiHint': 'Documentación y guías',
+  'settings.about.supporters.badge': 'Patrocinadores Mensuales',
+  'settings.about.supporters.title': 'Compañía de viaje para TREK',
+  'settings.about.supporters.subtitle': 'Mientras planeas tu próxima ruta, estas personas ayudan a planear el futuro de TREK. Su aporte mensual va directo al desarrollo y a las horas reales invertidas — para que TREK siga siendo Open Source.',
+  'settings.about.supporters.since': 'patrocinador desde {date}',
+  'settings.about.supporters.tierEmpty': 'Sé el primero',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
   'settings.about.description': 'TREK es un planificador de viajes autoalojado que te ayuda a organizar tus viajes desde la primera idea hasta el último recuerdo. Planificación diaria, presupuesto, listas de equipaje, fotos y mucho más — todo en un solo lugar, en tu propio servidor.',
   'settings.about.madeWith': 'Hecho con',
   'settings.about.madeBy': 'por Maurice y una creciente comunidad de código abierto.',
@@ -419,6 +453,28 @@ const es: Record<string, string> = {
   'login.oidcFailed': 'Error de inicio de sesión OIDC',
   'login.usernameRequired': 'El nombre de usuario es obligatorio',
   'login.passwordMinLength': 'La contraseña debe tener al menos 8 caracteres',
+  'login.forgotPassword': '¿Olvidaste tu contraseña?',
+  'login.forgotPasswordTitle': 'Restablecer tu contraseña',
+  'login.forgotPasswordBody': 'Introduce la dirección de correo con la que te registraste. Si existe una cuenta, enviaremos un enlace.',
+  'login.forgotPasswordSubmit': 'Enviar enlace',
+  'login.forgotPasswordSentTitle': 'Revisa tu correo',
+  'login.forgotPasswordSentBody': 'Si existe una cuenta con ese correo, el enlace de restablecimiento está en camino. Caduca en 60 minutos.',
+  'login.forgotPasswordSmtpHintOff': 'Nota: tu administrador no ha configurado SMTP, así que el enlace de restablecimiento se escribirá en la consola del servidor en lugar de enviarse por correo.',
+  'login.backToLogin': 'Volver al inicio de sesión',
+  'login.newPassword': 'Nueva contraseña',
+  'login.confirmPassword': 'Confirmar nueva contraseña',
+  'login.passwordsDontMatch': 'Las contraseñas no coinciden',
+  'login.mfaCode': 'Código 2FA',
+  'login.resetPasswordTitle': 'Establecer una nueva contraseña',
+  'login.resetPasswordBody': 'Elige una contraseña segura que no hayas usado aquí antes. Mínimo 8 caracteres.',
+  'login.resetPasswordMfaBody': 'Introduce tu código 2FA o un código de respaldo para completar el restablecimiento.',
+  'login.resetPasswordSubmit': 'Restablecer contraseña',
+  'login.resetPasswordVerify': 'Verificar y restablecer',
+  'login.resetPasswordSuccessTitle': 'Contraseña actualizada',
+  'login.resetPasswordSuccessBody': 'Ya puedes iniciar sesión con tu nueva contraseña.',
+  'login.resetPasswordInvalidLink': 'Enlace de restablecimiento no válido',
+  'login.resetPasswordInvalidLinkBody': 'Este enlace falta o está roto. Solicita uno nuevo para continuar.',
+  'login.resetPasswordFailed': 'Restablecimiento fallido. El enlace puede haber caducado.',
   'login.oidc.tokenFailed': 'La autenticación falló.',
   'login.oidc.invalidState': 'Sesión no válida. Inténtalo de nuevo.',
   'login.demoFailed': 'Falló el acceso a la demo',
@@ -541,6 +597,12 @@ const es: Record<string, string> = {
   'admin.fileTypesFormat': 'Extensiones separadas por comas (p. ej. jpg,png,pdf,doc). Usa * para permitir todos los tipos.',
   'admin.fileTypesSaved': 'Ajustes de tipos de archivo guardados',
 
+  'admin.placesPhotos.title': 'Fotos de Lugares',
+  'admin.placesPhotos.subtitle': 'Obtiene fotos de la Google Places API. Desactiva para ahorrar cuota de API. Las fotos de Wikimedia no se ven afectadas.',
+  'admin.placesAutocomplete.title': 'Autocompletado de Lugares',
+  'admin.placesAutocomplete.subtitle': 'Usa la Google Places API para sugerencias de búsqueda. Desactiva para ahorrar cuota de API.',
+  'admin.placesDetails.title': 'Detalles del Lugar',
+  'admin.placesDetails.subtitle': 'Obtiene información detallada del lugar (horarios, valoración, web) de la Google Places API. Desactiva para ahorrar cuota de API.',
   'admin.bagTracking.title': 'Seguimiento de equipaje',
   'admin.bagTracking.subtitle': 'Activar peso y asignación de equipaje para artículos de la lista',
   'admin.collab.chat.title': 'Chat',
@@ -824,6 +886,7 @@ const es: Record<string, string> = {
 
   // Trip Planner
   'trip.tabs.plan': 'Plan',
+  'trip.tabs.transports': 'Transportes',
   'trip.tabs.reservations': 'Reservas',
   'trip.tabs.reservationsShort': 'Reservas',
   'trip.tabs.packing': 'Lista de equipaje',
@@ -846,6 +909,8 @@ const es: Record<string, string> = {
   'trip.toast.reservationAdded': 'Reserva añadida',
   'trip.toast.deleted': 'Eliminado',
   'trip.confirm.deletePlace': '¿Seguro que quieres eliminar este lugar?',
+  'trip.confirm.deletePlaces': '¿Eliminar {count} lugares?',
+  'trip.toast.placesDeleted': '{count} lugares eliminados',
 
   // Day Plan Sidebar
   'dayplan.emptyDay': 'No hay lugares planificados para este día',
@@ -890,6 +955,17 @@ const es: Record<string, string> = {
   'places.importFileError': 'Importación fallida',
   'places.importAllSkipped': 'Todos los lugares ya estaban en el viaje.',
   'places.gpxImported': '{count} lugares importados desde GPX',
+  'places.gpxImportTypes': '¿Qué deseas importar?',
+  'places.gpxImportWaypoints': 'Puntos de ruta',
+  'places.gpxImportRoutes': 'Rutas',
+  'places.gpxImportTracks': 'Tracks (con geometría de ruta)',
+  'places.gpxImportNoneSelected': 'Selecciona al menos un tipo para importar.',
+  'places.kmlImportTypes': '¿Qué deseas importar?',
+  'places.kmlImportPoints': 'Puntos (Placemarks)',
+  'places.kmlImportPaths': 'Rutas (LineStrings)',
+  'places.kmlImportNoneSelected': 'Selecciona al menos un tipo.',
+  'places.selectionCount': '{count} seleccionado(s)',
+  'places.deleteSelected': 'Eliminar selección',
   'places.kmlKmzImported': '{count} lugares importados desde KMZ/KML',
   'places.urlResolved': 'Lugar importado desde URL',
   'places.importList': 'Importar lista',
@@ -906,6 +982,7 @@ const es: Record<string, string> = {
   'places.assignToDay': '¿A qué día añadirlo?',
   'places.all': 'Todo',
   'places.unplanned': 'Sin planificar',
+  'places.filterTracks': 'Rutas',
   'places.search': 'Buscar lugares...',
   'places.allCategories': 'Todas las categorías',
   'places.categoriesSelected': 'categorías',
@@ -990,7 +1067,7 @@ const es: Record<string, string> = {
   'reservations.type.hotel': 'Alojamiento',
   'reservations.type.restaurant': 'Restaurante',
   'reservations.type.train': 'Tren',
-  'reservations.type.car': 'Coche de alquiler',
+  'reservations.type.car': 'Coche',
   'reservations.type.cruise': 'Crucero',
   'reservations.type.event': 'Evento',
   'reservations.type.tour': 'Excursión',
@@ -1051,6 +1128,7 @@ const es: Record<string, string> = {
   'reservations.span.end': 'Fin',
   'reservations.span.ongoing': 'En curso',
   'reservations.validation.endBeforeStart': 'La fecha/hora de fin debe ser posterior a la de inicio',
+  'reservations.addBooking': 'Añadir reserva',
 
   // Budget
   'budget.title': 'Presupuesto',
@@ -1092,6 +1170,8 @@ const es: Record<string, string> = {
   'files.title': 'Archivos',
   'files.pageTitle': 'Archivos y documentos',
   'files.subtitle': '{count} archivos para {trip}',
+  'files.download': 'Descargar',
+  'files.openError': 'No se pudo abrir el archivo',
   'files.downloadPdf': 'Descargar PDF',
   'files.count': '{count} archivos',
   'files.countSingular': '1 archivo',
@@ -1481,8 +1561,10 @@ const es: Record<string, string> = {
   'memories.providerPassword': 'Contraseña',
   'memories.providerOTP': 'Código MFA (si está habilitado)',
   'memories.skipSSLVerification': 'Omitir verificación del certificado SSL',
+  'memories.immichAutoUpload': 'Duplicar las fotos del journey en Immich al subirlas',
   'memories.providerUrlHintSynology': 'Incluye la ruta de la aplicación Photos en la URL, p.ej. https://nas:5001/photo',
   'memories.testConnection': 'Probar conexión',
+  'memories.testShort': 'Probar',
   'memories.testFirst': 'Probar conexión primero',
   'memories.connected': 'Conectado',
   'memories.disconnected': 'No conectado',
@@ -1618,6 +1700,15 @@ const es: Record<string, string> = {
   'reservations.meta.flightNumber': 'N° de vuelo',
   'reservations.meta.from': 'Desde',
   'reservations.meta.to': 'Hasta',
+  'reservations.needsReview': 'Revisar',
+  'reservations.needsReviewHint': 'No se pudo identificar el aeropuerto automáticamente — por favor confirma la ubicación.',
+  'reservations.searchLocation': 'Buscar estación, puerto, dirección...',
+  'airport.searchPlaceholder': 'Código o ciudad del aeropuerto (ej. FRA)',
+  'map.connections': 'Conexiones',
+  'map.showConnections': 'Mostrar rutas de reservas',
+  'map.hideConnections': 'Ocultar rutas de reservas',
+  'settings.bookingLabels': 'Etiquetas de rutas de reservas',
+  'settings.bookingLabelsHint': 'Muestra nombres de estaciones / aeropuertos en el mapa. Desactivado, solo se muestra el icono.',
   'reservations.meta.trainNumber': 'N° de tren',
   'reservations.meta.platform': 'Andén',
   'reservations.meta.seat': 'Asiento',
@@ -1699,6 +1790,7 @@ const es: Record<string, string> = {
   'undo.reorder': 'Lugares reordenados',
   'undo.optimize': 'Ruta optimizada',
   'undo.deletePlace': 'Lugar eliminado',
+  'undo.deletePlaces': 'Lugares eliminados',
   'undo.moveDay': 'Lugar movido a otro día',
   'undo.lock': 'Bloqueo de lugar activado/desactivado',
   'undo.importGpx': 'Importación GPX',
@@ -1758,7 +1850,11 @@ const es: Record<string, string> = {
   'todo.unassigned': 'Sin asignar',
   'todo.noCategory': 'Sin categoría',
   'todo.hasDescription': 'Con descripción',
-  'todo.addItem': 'Añadir nueva tarea...',
+  'todo.addItem': 'Nueva tarea',
+  'todo.sidebar.sortBy': 'Ordenar por',
+  'todo.priority': 'Prioridad',
+  'todo.newCategoryLabel': 'nueva',
+  'budget.categoriesLabel': 'categorías',
   'todo.newCategory': 'Nombre de la categoría',
   'todo.addCategory': 'Añadir categoría',
   'todo.newItem': 'Nueva tarea',
@@ -1835,6 +1931,10 @@ const es: Record<string, string> = {
   'admin.notifications.adminNtfyPanel.testFailed': 'Error al enviar el Ntfy de prueba',
   'admin.notifications.adminNtfyPanel.alwaysOnHint': 'El Ntfy de admin siempre se activa cuando hay un tema configurado',
   'admin.notifications.adminNotificationsHint': 'Configura qué canales entregan notificaciones de admin (ej. alertas de versión). El webhook se activa automáticamente si hay una URL de webhook de admin configurada.',
+  'admin.notifications.tripReminders.title': 'Recordatorios de viaje',
+  'admin.notifications.tripReminders.hint': 'Envía una notificación de recordatorio antes de que comience un viaje (requiere días de recordatorio configurados en el viaje).',
+  'admin.notifications.tripReminders.enabled': 'Recordatorios de viaje activados',
+  'admin.notifications.tripReminders.disabled': 'Recordatorios de viaje desactivados',
   'admin.tabs.notifications': 'Notificaciones',
   'notifications.versionAvailable.title': 'Actualización disponible',
   'notifications.versionAvailable.text': 'TREK {version} ya está disponible.',
@@ -1851,6 +1951,8 @@ const es: Record<string, string> = {
   'notif.booking_change.text': '{actor} actualizó una reserva en {trip}',
   'notif.trip_reminder.title': 'Recordatorio de viaje',
   'notif.trip_reminder.text': '¡Tu viaje {trip} se acerca!',
+  'notif.todo_due.title': 'Tarea pendiente',
+  'notif.todo_due.text': '{todo} en {trip} vence el {due}',
   'notif.vacay_invite.title': 'Invitación Vacay Fusion',
   'notif.vacay_invite.text': '{actor} te invitó a fusionar planes de vacaciones',
   'notif.photos_shared.title': 'Fotos compartidas',
@@ -1879,6 +1981,8 @@ const es: Record<string, string> = {
   'common.justNow': 'justo ahora',
   'common.hoursAgo': 'hace {count}h',
   'common.daysAgo': 'hace {count}d',
+  'journey.search.placeholder': 'Buscar viajes…',
+  'journey.search.noResults': 'Ningún viaje coincide con "{query}"',
   'journey.title': 'Travesía',
   'journey.subtitle': 'Registra tus viajes en tiempo real',
   'journey.new': 'Nueva travesía',
@@ -1900,6 +2004,7 @@ const es: Record<string, string> = {
   'journey.status.active': 'Activa',
   'journey.status.completed': 'Completada',
   'journey.status.upcoming': 'Próxima',
+  'journey.status.archived': 'Archivado',
   'journey.checkin.add': 'Registrar ubicación',
   'journey.checkin.namePlaceholder': 'Nombre del lugar',
   'journey.checkin.notesPlaceholder': 'Notas (opcional)',
@@ -1976,6 +2081,7 @@ const es: Record<string, string> = {
   'journey.verdict.couldBeBetter': 'Podría mejorar',
   'journey.synced.places': 'lugares',
   'journey.synced.synced': 'sincronizado',
+  'journey.editor.discardChangesConfirm': 'Tienes cambios sin guardar. ¿Descartarlos?',
   'journey.editor.uploadPhotos': 'Subir fotos',
   'journey.editor.uploading': 'Subiendo...',
   'journey.editor.fromGallery': 'Desde galería',
@@ -2053,6 +2159,11 @@ const es: Record<string, string> = {
   'journey.settings.name': 'Nombre',
   'journey.settings.subtitle': 'Subtítulo',
   'journey.settings.subtitlePlaceholder': 'p. ej. Tailandia, Vietnam y Camboya',
+  'journey.settings.endJourney': 'Archivar viaje',
+  'journey.settings.reopenJourney': 'Restaurar viaje',
+  'journey.settings.archived': 'Viaje archivado',
+  'journey.settings.reopened': 'Viaje reabierto',
+  'journey.settings.endDescription': 'Oculta la insignia En Vivo. Puedes reabrirlo en cualquier momento.',
   'journey.settings.delete': 'Eliminar',
   'journey.settings.deleteJourney': 'Eliminar travesía',
   'journey.settings.deleteMessage': '¿Eliminar "{title}"? Todas las entradas y fotos se perderán.',
@@ -2138,6 +2249,7 @@ const es: Record<string, string> = {
   'oauth.scope.group.vacay': 'Vacaciones',
   'oauth.scope.group.geo': 'Geo',
   'oauth.scope.group.weather': 'Clima',
+  'oauth.scope.group.journey': 'Travesía',
 
   // OAuth scope labels & descriptions
   'oauth.scope.trips:read.label': 'Ver viajes e itinerarios',
@@ -2188,6 +2300,12 @@ const es: Record<string, string> = {
   'oauth.scope.geo:read.description': 'Buscar lugares, resolver URLs de mapa y geocodificar coordenadas',
   'oauth.scope.weather:read.label': 'Previsiones meteorológicas',
   'oauth.scope.weather:read.description': 'Obtener previsiones meteorológicas para lugares y fechas del viaje',
+  'oauth.scope.journey:read.label': 'Ver travesías',
+  'oauth.scope.journey:read.description': 'Leer travesías, entradas y lista de colaboradores',
+  'oauth.scope.journey:write.label': 'Gestionar travesías',
+  'oauth.scope.journey:write.description': 'Crear, actualizar y eliminar travesías y sus entradas',
+  'oauth.scope.journey:share.label': 'Gestionar enlaces de travesías',
+  'oauth.scope.journey:share.description': 'Crear, actualizar y revocar enlaces públicos de compartir para travesías',
 
   // System notices
   'system_notice.welcome_v1.title': 'Bienvenido a TREK',
@@ -2228,6 +2346,15 @@ const es: Record<string, string> = {
   'system_notice.v3_mcp.highlight_scopes':     '24 ámbitos de permisos granulares',
   'system_notice.v3_mcp.highlight_deprecated': 'Tokens estáticos trek_ obsoletos',
   'system_notice.v3_mcp.highlight_tools':      'Herramientas y prompts ampliados',
+
+  // System notices — personal thank you
+  'system_notice.v3_thankyou.title': 'Una nota personal de mi parte',
+  'system_notice.v3_thankyou.body': 'Antes de seguir — quiero tomarme un momento.\n\nTREK empezó como un proyecto personal que construí para mis propios viajes. Nunca imaginé que crecería hasta convertirse en algo en lo que 4.000 de vosotros confían para planificar sus aventuras. Cada estrella, cada issue, cada solicitud de funcionalidad — los leo todos, y son lo que me mantiene en pie durante las noches largas entre un trabajo a jornada completa y la universidad.\n\nQuiero que sepáis: TREK siempre será open source, siempre self-hosted, siempre vuestro. Sin rastreo, sin suscripciones, sin letra pequeña. Solo una herramienta hecha por alguien que ama viajar tanto como vosotros.\n\nUn agradecimiento especial a [jubnl](https://github.com/jubnl) — te has convertido en un colaborador increíble. Mucho de lo que hace grande la versión 3.0 lleva tu huella. Gracias por creer en este proyecto cuando todavía era un borrador.\n\nY a cada uno de vosotros que reportó un bug, tradujo un texto, compartió TREK con un amigo o simplemente lo usó para planificar un viaje — **gracias**. Vosotros sois la razón de que esto exista.\n\nPor muchas más aventuras juntos.\n\n— Maurice\n\n---\n\n[Únete a la comunidad en Discord](https://discord.gg/7Q6M6jDwzf)\n\nSi TREK mejora tus viajes, un [pequeño café](https://ko-fi.com/mauriceboe) siempre mantiene las luces encendidas.',
+  'transport.addTransport': 'Añadir transporte',
+  'transport.modalTitle.create': 'Añadir transporte',
+  'transport.modalTitle.edit': 'Editar transporte',
+  'transport.title': 'Transportes',
+  'transport.addManual': 'Transporte manual',
 }
 
 export default es