Migrate TREK 3 to NestJS + React 19 (shared Zod contracts) (#1087)

* Migrate TREK 3 to NestJS + React 19 with a shared Zod contract layer

Brownfield strangler migration of the backend onto NestJS modules
(auth, trips, days, places, assignments, packing, todo, budget,
reservations, collab, files, photos, journey, share, settings, backup,
oidc, oauth, admin, atlas, vacay, weather, airports, maps, categories,
tags, notifications, system-notices) served through a per-prefix
dispatcher, keeping the existing SQLite/better-sqlite3 DB and JWT
httpOnly cookie auth, with behavioural parity for every route.

Client: React 19 upgrade, "page = wiring container + data hook"
pattern across all pages, per-domain Zustand stores bound to
@trek/shared contracts, and decomposition of the large components
(DayPlanSidebar, PackingListPanel, CollabNotes, FileManager,
MemoriesPanel, PlacesSidebar, CollabChat, SystemNoticeModal,
BudgetPanel, PlaceFormModal, ...) into focused render units backed by
in-file hooks.

Apply the shared global request pipeline (helmet/CSP, CORS, HSTS,
forced HTTPS, the global MFA policy and request logging) to the NestJS
instance as well, so a migrated route is protected identically to the
legacy fallback rather than bypassing it.

* Finish the NestJS migration — drop the legacy Express app

NestJS now serves the whole surface: every /api domain plus the platform
routes (uploads, /mcp, the OAuth/MCP SDK + /.well-known metadata and the
production SPA fallback). Removed server/src/app.ts, all of
server/src/routes/* and the strangler dispatcher; index.ts and the
integration suite share a single buildApp() bootstrap so prod and tests
can't drift.

- Platform/transport routes extracted to nest/platform/platform.routes.ts
  and mounted before app.init() — Nest's router answers an unmatched
  request with a 404, so a route registered after init is never reached.
  The SPA fallback is a NotFoundException filter and the catch-all uses a
  RegExp (Express 5's path-to-regexp rejects a bare '*').
- New modules: memories (/api/integrations/memories — the Journey
  gallery's Immich/Synology proxy), addons (GET /api/addons) and the
  cross-trip GET /api/reservations/upcoming.
- TrekExceptionFilter reproduces the old multer / err.statusCode handling
  so upload rejections keep their 400/413 { error } body and non-ASCII
  filenames survive (defParamCharset).
- addTripToJourney and the MCP get_journey_share_link tool gained the
  trip-access check they were missing.
- Re-pointed the 34 integration tests + the websocket test onto the Nest
  app; removed the now-meaningless Express-vs-Nest parity tests and a few
  orphaned client components.

* Restore the reset-password rate limit and fix copyTrip reservation links

Two correctness/security gaps the NestJS migration introduced:

- POST /api/auth/reset-password lost its per-IP rate limiter. Restore it
  (5 attempts / 15 min on a dedicated bucket, same as the old resetLimiter)
  so reset tokens can't be brute-forced unthrottled. Covered by AUTH-019.
- copyTripById did not copy reservations.end_day_id (a day reference — now
  remapped through dayMap like day_id) or needs_review, so a duplicated trip
  lost multi-day transport end-day links and reset the review flag.

* Clean up dead code, dedupe helpers, fix the reset-password contract

- Remove server exports orphaned by the Express removal: the immich
  album-link helpers, seven route-only service exports, getFileByIdFull;
  de-export internal-only helpers (utcSuffix).
- De-duplicate verifyTripAccess (9 identical copies -> services/tripAccess.ts)
  and avatarUrl (3 -> services/avatarUrl.ts); name the bcrypt cost
  (BCRYPT_COST) and the email regex (EMAIL_REGEX). Public API unchanged.
- resetPasswordRequestSchema declared `password`, but the client sends and
  the service reads `new_password` — rename it so the contract matches and
  the client types resolve.
- Make ATLAS-013 deterministic: stub the admin-1 GeoJSON download instead of
  fetching ~4600 features from GitHub during the test (it hung the suite).

* Make the client typecheck runnable (vitest/vite ambient types)

The client had no `typecheck` script and tsc couldn't even start (the
baseUrl deprecation errored out, same as server/shared already silence).
Add `ignoreDeprecations: "6.0"` to match the other workspaces, a `typecheck`
npm script, and a src/vite-env.d.ts referencing vite/client + vitest/globals
so tsc knows the test globals (describe/it/expect/vi). This turns ~3600
phantom "Cannot find name" errors into a real, measurable count (~590 actual
type errors remain, to be worked down). Type-only; no runtime change.

* Derive client domain types from the shared schema contracts

Add entity/response Zod schemas to @trek/shared (place, trip, assignment, day, budget, packing, reservation), each matched against the producing server service, and re-export them from client types.ts instead of the hand-written duplicates that had drifted (name/title, amount/total_price, owner_id/user_id, cover_url/cover_image, ...). Updates the call sites and test fixtures the corrected types surfaced; type-only, no runtime behaviour change.

* chore(db): log swallowed errors in addon-disable migration + guard against destructive migrations

The migration that disables the legacy "memories" addon swallowed any
error in an empty catch, as did ~30 other catch blocks in the migration
runner (column adds, the journey rebuild, index probes). Replace each
silent catch with the existing console.warn('[migrations] ...') log so
failures are visible. Control flow is unchanged: every step stays
non-fatal, nothing new is thrown.

Add a static guardrail test that scans the migration source and fails
when a new destructive statement (DROP TABLE / DROP COLUMN / TRUNCATE /
DELETE FROM / ALTER ... DROP) appears outside a reviewed allowlist, and
when an empty/silent catch block is reintroduced. The existing
destructive statements are all legitimate table rebuilds or
bounded cleanups and are recorded in the allowlist with a reason.

* Re-check SSRF on every redirect hop when resolving short links

Replace the one-shot checkSsrf + fetch(redirect:'follow') in the maps and place short-link resolvers with safeFetchFollow, which follows redirects manually and re-runs checkSsrf against the DNS-pinned IP of each hop (max 5). A redirect to an internal/loopback address is now blocked even when the initial URL is public, while legitimate cross-host redirects (goo.gl -> maps.google.com) still resolve.

* Reject WebSocket tokens minted before a password change

Stamp the user's password_version onto the ephemeral ws token and verify it on connect, closing the socket (4001) when it no longer matches, so a token issued before a password reset can't be replayed. Tokens minted without a version are treated as version 0, matching the JWT pv-claim semantics.

* fix(i18n): guard locale key parity and finish the OAuth consent page strings

Every non-en locale now exposes the exact same flat key set as en. Keys that
had drifted out of sync are backfilled with the English source value (tagged
en-fallback) so t() resolves a real string instead of relying on the silent
runtime fallback; no existing translation was touched and no key was removed.

Add a parity test that imports each aggregated locale bundle and asserts its
key set matches en, with a diagnostic listing of any missing/extra keys. This
complements the file-level check in shared/scripts by guarding the merged
export the app actually serves.

Finish internationalising OAuthAuthorizePage: the ~15 remaining hardcoded
English chrome strings now go through oauth.authorize.* keys (English source
in en, en-fallback placeholders elsewhere). Markup and behaviour are unchanged.

* Add semantic theme color tokens to Tailwind

Map the CSS theme variables from src/index.css (:root light / .dark dark) to named Tailwind utilities — bg-surface, text-content, border-edge, bg-accent and their variants. This gives components a Tailwind-native target for the theme colors so we can replace inline `style={{ ... 'var(--...)' }}` with utility classes without changing the rendered values.

* Surface silent store failures to the user and validate API responses in dev

Reservation toggle, todo/packing toggle and budget reorder were swallowing API errors after rolling back, so the user saw the change silently snap back with no explanation. Route those failures through the existing toast channel (new store/notify.ts bridges to window.__addToast, the same channel SystemNoticeBanner uses); the reservation toggle re-throws so ReservationsPanel's own translated toast finally fires. Also wire the existing parseInDev/checkInDev response validation into the maps and notification-test endpoints to catch contract drift in dev.

* Migrate static theme inline styles to Tailwind utilities and extract page sub-components

Replace the static, color-only inline `style={{ ... 'var(--bg-primary)' ... }}` props with the new semantic Tailwind utilities (bg-surface, text-content, border-edge, ...) wherever the result is byte-identical; dynamic/conditional theme styles and hardcoded status colors are left inline. Extract the Atlas country-search autocomplete, the Admin update banner, and two Journey dialogs into their own presentational components to shrink the oversized page files, keeping behaviour and markup identical.

* Remove the unrouted photos page and its dead photo components

PhotosPage was never wired into the router and its usePhotos hook read a tripStore photos slice that was never implemented; the Photos gallery, lightbox and upload components were only reachable through it. Per-trip photos now live in the Journey gallery (Immich/Synology). Removed the dead page, hook and components — the live Journey PhotoLightbox is a separate component and stays.

* Resolve the remaining client type errors and the trip.title navbar bug

Drive the client typecheck to zero without any/ts-ignore: convert the tripId route param to a number once at the page boundary so it matches the numeric props and store actions it feeds, fix trip.name -> trip.title (the wire field is title, so the old read rendered blank in the files/offline views), and tighten the scattered handler-arity, DOM-cast and untyped-payload sites. No runtime behaviour change.

* Convert the remaining dynamic and hardcoded inline styles to Tailwind utilities

Second styling pass over the components and pages: move conditional theme colors into className ternaries (bg-accent / bg-surface-hover etc.), turn reused CSSProperties constants into className constants, and express static hardcoded hex/rgba colors as Tailwind arbitrary values so the exact rendered colour is preserved. Truly dynamic styling (computed geometry, gradients, multi-part shadows, data-driven colours, the undefined --sidebar/--nav layout vars) stays inline as it cannot be expressed as a static class. Updated three component tests that asserted the old inline active-state styles to assert the equivalent utility class instead.

Verified: client typecheck 0, full client suite green, and a live light/dark render check in the dev server confirms the semantic theme tokens resolve correctly (the earlier 'transparent popups' were a stale dev server that pre-dated the tailwind.config token addition, not a code issue).

* Add eslint flat-config for client and server and gate typecheck, lint and pages in CI

client and server had lint scripts but no eslint config (only shared was linted in CI). Add flat configs mirroring shared's stack (js + typescript-eslint recommended + eslint-config-prettier) plus the client's react-hooks/react-refresh plugins. Pre-existing patterns in this never-linted code (explicit any, require() in the CommonJS server, empty catches, exhaustive-deps) are set to 'warn' rather than 'error' so the gate passes at 0 errors without a repo-wide reformat — these can be ratcheted to errors over time. Wire blocking typecheck + lint + lint:pages steps into the client and server CI jobs (now that both typechecks are clean) and promote the server typecheck from informational to blocking.

* Decompose the remaining God Components into hooks, helpers and sub-components

FE6: split the oversized page and panel components into thin layout shells plus colocated use<Component> hooks, .constants.ts, .helpers.ts (with tests) and presentational sub-components, following the established 'logic in a hook, render in slices' pattern. Behaviour, markup, classes and effect order are unchanged. Largest reductions: PackingListPanel 1598->42, FileManager 1055->36, AdminPage 1525->167, BudgetPanel 1266->146, JourneyDetailPage 2822->547, PlacesSidebar 945->66, CollabChat 861->106, CollabNotes 1417->532. DayPlanSidebar's drag-and-drop render body was left intact (ref-identity sensitive) and only its toolbar/modals/constants were extracted.

* Fix duplicate React keys in the file-assign place list

When a place is assigned to the same day more than once it appeared twice in a day's list, so the place-button key={p.id} collided and React warned about duplicate keys. Key by place id + render index so siblings stay unique. Pre-existing in the old FileManager; behaviour unchanged.

* Format the shared package and drop an unused import to satisfy the lint gate

The i18n and schema changes added code that wasn't prettier-formatted, and place.schema.ts imported categorySchema without using it. Run prettier over shared and remove the import so 'npm run lint' + 'format:check' pass.

* Install all workspaces in the server CI job so SWC's native binary is present

The server vitest config transforms via unplugin-swc, which needs @swc/core's platform-specific native binary. A workspace-scoped 'npm ci --workspace server' skips that optional dependency, so vitest failed to load the config on the Linux runner. Use a full 'npm ci'.

* Re-resolve dependencies with npm install in the server CI job for SWC

Full 'npm ci' still skipped @swc/core's Linux native binary because the committed lockfile was generated on Windows and lacks the Linux optional-dep install metadata. 'npm install' re-resolves and fetches the platform-matching binary, which the server's unplugin-swc transform needs to load vitest.config.ts.

* Install @swc/core's Linux binary explicitly in the server CI job

Neither npm ci nor npm install fetched @swc/core-linux-x64-gnu on the Linux runner because the lockfile was generated on Windows and lacks the Linux optional-dep metadata. Add a step that installs the matching @swc/core-linux-x64-gnu version (no-save, no-lockfile) so unplugin-swc can load the server's vitest config.

* Use legacy-peer-deps when installing the SWC Linux binary in CI

The explicit @swc/core-linux-x64-gnu install re-resolved the tree and hit the pre-existing lucide-react/react-19 peer conflict that the lockfile was generated around. Add --legacy-peer-deps so the step matches the project's resolution and installs the binary.

* Keep the lockfile when installing the SWC binary so other deps stay pinned

Dropping --no-package-lock made npm re-resolve the whole tree and upgrade eslint, whose newer recommended config flagged no-useless-assignment as an error in the server lint step. Keep the lockfile so only @swc/core-linux-x64-gnu is added and every other dependency (incl. eslint) stays at its locked version.

client/src/components/Planner/AirportSelect.tsx

@@ -105,8 +105,8 @@ export default function AirportSelect({ value, onChange, placeholder, style }: P
 
   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 }} />
+      <div className="bg-surface-tertiary" style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
+        <Plane size={14} className="text-content-faint" style={{ flexShrink: 0 }} />
         <input
           type="text"
           value={query}
@@ -114,19 +114,20 @@ export default function AirportSelect({ value, onChange, placeholder, style }: P
           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 }}
+          className="bg-transparent text-content"
+          style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', 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">
+          <button type="button" onClick={clear} className="bg-transparent text-content-faint" style={{ border: 'none', padding: 2, cursor: 'pointer', 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 }}>
+        <div className="bg-surface-card" style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, 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>
+            <div className="text-content-faint" style={{ padding: 10, fontSize: 12 }}>{t('common.loading')}</div>
           )}
           {results.map((a, i) => (
             <button
@@ -134,17 +135,17 @@ export default function AirportSelect({ value, onChange, placeholder, style }: P
               type="button"
               onClick={() => pick(a)}
               onMouseEnter={() => setHighlight(i)}
+              className={`text-content ${i === highlight ? 'bg-surface-hover' : 'bg-transparent'}`}
               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',
+                fontFamily: 'inherit',
               }}
             >
-              <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, monospace', fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', minWidth: 32 }}>{a.iata}</span>
+              <span className="text-content-muted" style={{ fontFamily: 'ui-monospace, SFMono-Regular, monospace', fontSize: 11, fontWeight: 700, 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>
+                <div className="text-content-faint" style={{ fontSize: 11, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.name}{a.country ? ` · ${displayCountry(a.country)}` : ''}</div>
               </span>
             </button>
           ))}

client/src/components/Planner/DayDetailPanel.tsx

@@ -14,6 +14,7 @@ import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import type { Day, Place, Category, Reservation, AssignmentsMap } from '../../types'
 import { isDayInAccommodationRange } from '../../utils/dayOrder'
 import { splitReservationDateTime } from '../../utils/formatters'
+import { useDayDetail } from './useDayDetail'
 
 const WEATHER_ICON_MAP = {
   Clear: Sun, Clouds: Cloud, Rain: CloudRain, Drizzle: CloudDrizzle,
@@ -77,92 +78,13 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
   const unit = isFahrenheit ? '°F' : '°C'
   const collapsed = collapsedProp
   const toggleCollapse = () => onToggleCollapse?.()
-  const [weather, setWeather] = useState(null)
-  const [loading, setLoading] = useState(false)
-  const [accommodation, setAccommodation] = useState(null)
-  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
-  const [accommodations, setAccommodations] = useState([])
-  const [showHotelPicker, setShowHotelPicker] = useState(false)
-  const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
-  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
-  const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-
-  useEffect(() => {
-    if (!day?.date || !lat || !lng) { setWeather(null); return }
-    setLoading(true)
-    weatherApi.getDetailed(lat, lng, day.date, language)
-      .then(data => setWeather(data.error ? null : data))
-      .catch(() => setWeather(null))
-      .finally(() => setLoading(false))
-  }, [day?.date, lat, lng, language])
-
-  useEffect(() => {
-    if (!tripId) return
-    accommodationsApi.list(tripId)
-      .then(data => {
-        setAccommodations(data.accommodations || [])
-        const allForDay = (data.accommodations || []).filter(a =>
-          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-        )
-        setDayAccommodations(allForDay)
-        setAccommodation(allForDay[0] || null)
-      })
-      .catch(() => {})
-  }, [tripId, day?.id])
-
-  useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
-
-  const handleSelectPlace = (placeId) => {
-    setHotelForm(f => ({ ...f, place_id: placeId }))
-  }
-
-  const handleSaveAccommodation = async () => {
-    if (!hotelForm.place_id) return
-    try {
-      const data = await accommodationsApi.create(tripId, {
-        place_id: hotelForm.place_id,
-        start_day_id: hotelDayRange.start,
-        end_day_id: hotelDayRange.end,
-        check_in: hotelForm.check_in || null,
-        check_in_end: hotelForm.check_in_end || null,
-        check_out: hotelForm.check_out || null,
-        confirmation: hotelForm.confirmation || null,
-      })
-      const newAcc = data.accommodation
-      const updated = [...accommodations, newAcc]
-      setAccommodations(updated)
-      setAccommodation(newAcc)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setShowHotelPicker(false)
-      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const updateAccommodationField = async (field, value) => {
-    if (!accommodation) return
-    try {
-      const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
-      setAccommodation(data.accommodation)
-      onAccommodationChange?.()
-    } catch {}
-  }
-
-  const handleRemoveAccommodation = async () => {
-    if (!accommodation) return
-    try {
-      await accommodationsApi.delete(tripId, accommodation.id)
-      const updated = accommodations.filter(a => a.id !== accommodation.id)
-      setAccommodations(updated)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setAccommodation(null)
-      onAccommodationChange?.()
-    } catch {}
-  }
+  const {
+    weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
+    accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
+    hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
+    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
+    updateAccommodationField, handleRemoveAccommodation,
+  } = useDayDetail(day, days, tripId, lat, lng, language, onAccommodationChange)
 
   if (!day) return null
 
@@ -176,8 +98,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
 
   return (
     <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), ...font }}>
-      <div style={{
-        background: 'var(--bg-elevated)',
+      <div className="bg-surface-elevated" style={{
         backdropFilter: 'blur(40px) saturate(180%)',
         WebkitBackdropFilter: 'blur(40px) saturate(180%)',
         borderRadius: 20,
@@ -187,26 +108,27 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: collapsed ? '12px 16px 12px 20px' : '18px 16px 14px 20px', borderBottom: collapsed ? 'none' : '1px solid var(--border-faint)', cursor: 'pointer' }}
           onClick={() => toggleCollapse()}>
-          <div style={{ width: collapsed ? 36 : 44, height: collapsed ? 36 : 44, borderRadius: 12, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.15s ease' }}>
-            <Calendar size={collapsed ? 16 : 20} style={{ color: 'var(--text-primary)' }} />
+          <div className="bg-surface-secondary" style={{ width: collapsed ? 36 : 44, height: collapsed ? 36 : 44, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.15s ease' }}>
+            <Calendar size={collapsed ? 16 : 20} className="text-content" />
           </div>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: collapsed ? 13 : 15, fontWeight: 700, color: 'var(--text-primary)', transition: 'font-size 0.15s ease' }}>
+            <div className="text-content" style={{ fontSize: collapsed ? 13 : 15, fontWeight: 700, transition: 'font-size 0.15s ease' }}>
               {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
-              {collapsed && formattedDate && <span style={{ fontWeight: 500, color: 'var(--text-muted)', marginLeft: 8 }}>{formattedDate}</span>}
+              {collapsed && formattedDate && <span className="text-content-muted" style={{ fontWeight: 500, marginLeft: 8 }}>{formattedDate}</span>}
             </div>
-            {!collapsed && formattedDate && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 1 }}>{formattedDate}</div>}
+            {!collapsed && formattedDate && <div className="text-content-muted" style={{ fontSize: 12, marginTop: 1 }}>{formattedDate}</div>}
           </div>
           <button onClick={(e) => { e.stopPropagation(); toggleCollapse() }} title={collapsed ? t('common.expand') : t('common.collapse')}
-            style={{ background: 'var(--bg-secondary)', border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, transition: 'all 0.15s ease' }}
+            className="bg-surface-secondary"
+            style={{ border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, transition: 'all 0.15s ease' }}
             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
             onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}>
-            {collapsed ? <ChevronsUp size={14} style={{ color: 'var(--text-muted)' }} /> : <ChevronsDown size={14} style={{ color: 'var(--text-muted)' }} />}
+            {collapsed ? <ChevronsUp size={14} className="text-content-muted" /> : <ChevronsDown size={14} className="text-content-muted" />}
           </button>
-          <button onClick={(e) => { e.stopPropagation(); onClose() }} style={{ background: 'var(--bg-secondary)', border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}
+          <button onClick={(e) => { e.stopPropagation(); onClose() }} className="bg-surface-secondary" style={{ border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}
             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
             onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}>
-            <X size={14} style={{ color: 'var(--text-muted)' }} />
+            <X size={14} className="text-content-muted" />
           </button>
         </div>
 
@@ -299,7 +221,7 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
             return (
               <div style={{ marginBottom: 0 }}>
                 {day.date && lat && lng && <div style={{ height: 1, background: 'var(--border-faint)', margin: '12px 0' }} />}
-                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>{t('day.reservations')}</div>
+                <div className="text-content-faint" style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>{t('day.reservations')}</div>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                   {dayReservations.map(r => {
                     const linkedAssignment = dayAssignments.find(a => a.id === r.assignment_id)
@@ -335,8 +257,106 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
 
           {/* ── Accommodation ── */}
           <div>
-            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>{t('day.accommodation')}</div>
+            <div className="text-content-faint" style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>{t('day.accommodation')}</div>
 
+            <AccommodationList dayAccommodations={dayAccommodations} day={day} reservations={reservations}
+              canEditDays={canEditDays} fmtTime={fmtTime} blurCodes={blurCodes} t={t}
+              setAccommodation={setAccommodation} setHotelForm={setHotelForm} setHotelDayRange={setHotelDayRange}
+              setShowHotelPicker={setShowHotelPicker} handleRemoveAccommodation={handleRemoveAccommodation} />
+
+            <HotelPickerModal showHotelPicker={showHotelPicker} setShowHotelPicker={setShowHotelPicker}
+              font={font} t={t} hotelDayRange={hotelDayRange} setHotelDayRange={setHotelDayRange} days={days} locale={locale}
+              hotelForm={hotelForm} setHotelForm={setHotelForm} categories={categories} hotelCategoryFilter={hotelCategoryFilter}
+              setHotelCategoryFilter={setHotelCategoryFilter} places={places} handleSelectPlace={handleSelectPlace}
+              accommodation={accommodation} tripId={tripId} day={day} setAccommodations={setAccommodations}
+              setDayAccommodations={setDayAccommodations} setAccommodation={setAccommodation}
+              handleSaveAccommodation={handleSaveAccommodation} onAccommodationChange={onAccommodationChange} />
+          </div>
+        </div>
+      </div>
+      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+    </div>
+  )
+}
+
+interface ChipProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  value: string
+}
+
+function Chip({ icon: Icon, value }: ChipProps) {
+  return (
+    <div className="bg-surface-secondary text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, fontSize: 11 }}>
+      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
+      <span style={{ fontWeight: 500 }}>{value}</span>
+    </div>
+  )
+}
+
+interface InfoChipProps {
+  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
+  label: string
+  value: string
+  placeholder: string
+  onEdit: (value: string) => void
+  type: 'text' | 'time'
+}
+
+function InfoChip({ icon: Icon, label, value, placeholder, onEdit, type }: InfoChipProps) {
+  const [editing, setEditing] = React.useState(false)
+  const [val, setVal] = React.useState(value || '')
+  const inputRef = React.useRef(null)
+
+  React.useEffect(() => { setVal(value || '') }, [value])
+  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus() }, [editing])
+
+  const save = () => {
+    setEditing(false)
+    if (val !== (value || '')) onEdit(val)
+  }
+
+  return (
+    <div
+      onClick={() => setEditing(true)}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8,
+        background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
+        cursor: 'pointer', minWidth: 0, flex: type === 'text' ? 1 : undefined,
+      }}
+    >
+      <Icon size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: 8, color: 'var(--text-faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1 }}>{label}</div>
+        {editing ? (
+          <input
+            ref={inputRef}
+            type={type}
+            value={val}
+            onChange={e => setVal(e.target.value)}
+            onBlur={save}
+            onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setVal(value || ''); setEditing(false) } }}
+            onClick={e => e.stopPropagation()}
+            style={{
+              border: 'none', outline: 'none', background: 'none', padding: 0, margin: 0,
+              fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'inherit',
+              width: type === 'time' ? 50 : '100%', lineHeight: 1.3,
+            }}
+          />
+        ) : (
+          <div style={{ fontSize: 11, fontWeight: 600, color: value ? 'var(--text-primary)' : 'var(--text-faint)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {value || placeholder}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+
+function AccommodationList({ dayAccommodations, day, reservations, canEditDays, fmtTime, blurCodes, t,
+  setAccommodation, setHotelForm, setHotelDayRange, setShowHotelPicker, handleRemoveAccommodation }: any) {
+  return (
+    <>
             {dayAccommodations.length > 0 ? (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                 {dayAccommodations.map(acc => {
@@ -449,7 +469,16 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                 <Hotel size={12} /> {t('day.addAccommodation')}
               </button> : null
             )}
+    </>
+  )
+}
 
+function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelDayRange, setHotelDayRange,
+  days, locale, hotelForm, setHotelForm, categories, hotelCategoryFilter, setHotelCategoryFilter, places,
+  handleSelectPlace, accommodation, tripId, day, setAccommodations, setDayAccommodations, setAccommodation,
+  handleSaveAccommodation, onAccommodationChange }: any) {
+  return (
+    <>
             {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
             {showHotelPicker && ReactDOM.createPortal(
               <div style={{ position: 'fixed', inset: 0, zIndex: 99999, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
@@ -632,83 +661,6 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
               </div>,
               document.body
             )}
-          </div>
-        </div>
-      </div>
-      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-    </div>
-  )
-}
-
-interface ChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  value: string
-}
-
-function Chip({ icon: Icon, value }: ChipProps) {
-  return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
-      <span style={{ fontWeight: 500 }}>{value}</span>
-    </div>
-  )
-}
-
-interface InfoChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  label: string
-  value: string
-  placeholder: string
-  onEdit: (value: string) => void
-  type: 'text' | 'time'
-}
-
-function InfoChip({ icon: Icon, label, value, placeholder, onEdit, type }: InfoChipProps) {
-  const [editing, setEditing] = React.useState(false)
-  const [val, setVal] = React.useState(value || '')
-  const inputRef = React.useRef(null)
-
-  React.useEffect(() => { setVal(value || '') }, [value])
-  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.focus() }, [editing])
-
-  const save = () => {
-    setEditing(false)
-    if (val !== (value || '')) onEdit(val)
-  }
-
-  return (
-    <div
-      onClick={() => setEditing(true)}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8,
-        background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
-        cursor: 'pointer', minWidth: 0, flex: type === 'text' ? 1 : undefined,
-      }}
-    >
-      <Icon size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
-      <div style={{ minWidth: 0 }}>
-        <div style={{ fontSize: 8, color: 'var(--text-faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1 }}>{label}</div>
-        {editing ? (
-          <input
-            ref={inputRef}
-            type={type}
-            value={val}
-            onChange={e => setVal(e.target.value)}
-            onBlur={save}
-            onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setVal(value || ''); setEditing(false) } }}
-            onClick={e => e.stopPropagation()}
-            style={{
-              border: 'none', outline: 'none', background: 'none', padding: 0, margin: 0,
-              fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', fontFamily: 'inherit',
-              width: type === 'time' ? 50 : '100%', lineHeight: 1.3,
-            }}
-          />
-        ) : (
-          <div style={{ fontSize: 11, fontWeight: 600, color: value ? 'var(--text-primary)' : 'var(--text-faint)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-            {value || placeholder}
-          </div>
-        )}
-      </div>
-    </div>
+    </>
   )
 }

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

@@ -0,0 +1,39 @@
+import {
+  FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship,
+  Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle,
+  ShoppingBag, Bookmark, Hotel, Utensils, Users,
+} from 'lucide-react'
+
+export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, event: Ticket, tour: Users, other: FileText }
+
+export const NOTE_ICONS = [
+  { id: 'FileText', Icon: FileText },
+  { id: 'Info', Icon: Info },
+  { id: 'Clock', Icon: Clock },
+  { id: 'MapPin', Icon: MapPin },
+  { id: 'Navigation', Icon: Navigation },
+  { id: 'Train', Icon: Train },
+  { id: 'Plane', Icon: Plane },
+  { id: 'Bus', Icon: Bus },
+  { id: 'Car', Icon: Car },
+  { id: 'Ship', Icon: Ship },
+  { id: 'Coffee', Icon: Coffee },
+  { id: 'Ticket', Icon: Ticket },
+  { id: 'Star', Icon: Star },
+  { id: 'Heart', Icon: Heart },
+  { id: 'Camera', Icon: Camera },
+  { id: 'Flag', Icon: Flag },
+  { id: 'Lightbulb', Icon: Lightbulb },
+  { id: 'AlertTriangle', Icon: AlertTriangle },
+  { id: 'ShoppingBag', Icon: ShoppingBag },
+  { id: 'Bookmark', Icon: Bookmark },
+]
+const NOTE_ICON_MAP = Object.fromEntries(NOTE_ICONS.map(({ id, Icon }) => [id, Icon]))
+export function getNoteIcon(iconId) { return NOTE_ICON_MAP[iconId] || FileText }
+
+export const TYPE_ICONS = {
+  flight: '✈️', hotel: '🏨', restaurant: '🍽️', train: '🚆',
+  car: '🚗', cruise: '🚢', event: '🎫', other: '📋',
+}
+
+export const TRANSPORT_DETAIL_COLORS = { flight: '#3b82f6', train: '#06b6d4', bus: '#f59e0b', car: '#6b7280', cruise: '#0ea5e9' }

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

@@ -343,7 +343,7 @@ describe('DayPlanSidebar', () => {
     render(<DayPlanSidebar {...makeDefaultProps({ canUndo: true, lastActionLabel: 'Removed place', onUndo })} />)
     // The undo button should be present (Undo2 icon)
     const undoButtons = screen.getAllByRole('button')
-    const undoBtn = undoButtons.find(btn => !btn.disabled && btn.querySelector('svg'))
+    const undoBtn = undoButtons.find(btn => !(btn as HTMLButtonElement).disabled && btn.querySelector('svg'))
     expect(undoBtn).toBeDefined()
   })
 
@@ -502,7 +502,7 @@ describe('DayPlanSidebar', () => {
   // ── Budget footer ───────────────────────────────────────────────────────
 
   it('FE-PLANNER-DAYPLAN-037: budget footer shows total cost when places have prices', () => {
-    const place = buildPlace({ name: 'Eiffel Tower', price: '25.00' })
+    const place = buildPlace({ name: 'Eiffel Tower', price: 25 })
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
     render(<DayPlanSidebar {...makeDefaultProps({
@@ -1393,7 +1393,7 @@ describe('DayPlanSidebar', () => {
     const assignment = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
     const flight = buildReservation({
       id: 77, trip_id: 1, type: 'flight', status: 'confirmed',
-      date: '2025-06-01', reservation_time: '2025-06-01T10:00:00Z',
+      reservation_time: '2025-06-01T10:00:00Z',
     })
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day], places: [place],
@@ -1553,7 +1553,7 @@ describe('DayPlanSidebar', () => {
     const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 1, place: placeB })
     const flight = buildReservation({
       id: 77, trip_id: 1, type: 'flight', status: 'confirmed',
-      date: '2025-06-01', reservation_time: '2025-06-01T12:00:00Z',
+      reservation_time: '2025-06-01T12:00:00Z',
     })
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day], places: [placeA, placeB],

client/src/components/Planner/DayPlanSidebarFooter.tsx

@@ -0,0 +1,17 @@
+import { currencyDecimals } from '../../utils/formatters'
+
+interface DayPlanSidebarFooterProps {
+  totalCost: number
+  currency: string
+  t: (key: string, params?: Record<string, any>) => string
+}
+
+export function DayPlanSidebarFooter({ totalCost, currency, t }: DayPlanSidebarFooterProps) {
+  if (!(totalCost > 0)) return null
+  return (
+    <div className="border-t border-edge-faint" style={{ flexShrink: 0, padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <span className="text-content-faint" style={{ fontSize: 11 }}>{t('dayplan.totalCost')}</span>
+      <span className="text-content" style={{ fontSize: 13, fontWeight: 600 }}>{totalCost.toFixed(currencyDecimals(currency))} {currency}</span>
+    </div>
+  )
+}

client/src/components/Planner/DayPlanSidebarMobileAddPlaceButton.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { Plus, X, MapPin } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import type { Place, AssignmentsMap } from '../../types'
+
+export function MobileAddPlaceButton({ dayId, places, assignments, onAssign, onAddNew }: {
+  dayId: number
+  places: Place[]
+  assignments: AssignmentsMap
+  onAssign?: (placeId: number, dayId: number) => void
+  onAddNew?: () => void
+}) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+
+  // Find places not assigned to this day
+  const assignedToDay = new Set((assignments[String(dayId)] || []).map(a => a.place_id))
+  const available = places.filter(p => !assignedToDay.has(p.id))
+  const filtered = search.trim()
+    ? available.filter(p => p.name.toLowerCase().includes(search.toLowerCase()))
+    : available
+
+  return (
+    <div className="md:hidden" style={{ padding: '8px 12px 12px' }}>
+      {!open ? (
+        <button
+          onClick={e => { e.stopPropagation(); setOpen(true) }}
+          style={{
+            width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+            padding: '10px 0', borderRadius: 12,
+            border: '1.5px dashed var(--border-primary)',
+            background: 'transparent', color: 'var(--text-muted)',
+            fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
+          }}
+        >
+          <Plus size={14} />
+          Add Place
+        </button>
+      ) : (
+        <div style={{ borderRadius: 14, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', overflow: 'hidden' }}>
+          <div style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-faint)', display: 'flex', gap: 6 }}>
+            <input
+              autoFocus
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder={t('dayplan.mobile.searchPlaces')}
+              style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 13, fontFamily: 'inherit', color: 'var(--text-primary)' }}
+            />
+            <button onClick={() => { setOpen(false); setSearch('') }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)' }}>
+              <X size={14} />
+            </button>
+          </div>
+          <div style={{ maxHeight: 200, overflowY: 'auto' }}>
+            {filtered.length === 0 && (
+              <div style={{ padding: '16px 12px', textAlign: 'center', fontSize: 12, color: 'var(--text-faint)' }}>
+                {available.length === 0 ? t('dayplan.mobile.allAssigned') : t('dayplan.mobile.noMatch')}
+              </div>
+            )}
+            {filtered.slice(0, 20).map(p => (
+              <button
+                key={p.id}
+                onClick={() => {
+                  onAssign?.(p.id, dayId)
+                  setOpen(false)
+                  setSearch('')
+                }}
+                style={{
+                  width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+                  padding: '10px 12px', border: 'none', background: 'transparent',
+                  cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
+                }}
+              >
+                <MapPin size={13} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>
+              </button>
+            ))}
+          </div>
+          {onAddNew && (
+            <button
+              onClick={() => { onAddNew(); setOpen(false); setSearch('') }}
+              style={{
+                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+                padding: '10px 0', borderTop: '1px solid var(--border-faint)',
+                background: 'transparent', border: 'none', color: 'var(--text-muted)',
+                fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
+              }}
+            >
+              <Plus size={13} />
+              Create new place
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/DayPlanSidebarNoteModal.tsx

@@ -0,0 +1,82 @@
+import ReactDOM from 'react-dom'
+import { NOTE_ICONS } from './DayPlanSidebar.constants'
+
+interface NoteModalUi {
+  mode: 'add' | 'edit'
+  icon: string
+  text: string
+  time: string
+}
+
+interface DayPlanSidebarNoteModalProps {
+  noteUi: Record<string, NoteModalUi | undefined>
+  setNoteUi: (updater: (prev: any) => any) => void
+  noteInputRef: React.RefObject<HTMLInputElement>
+  cancelNote: (dayId: number) => void
+  saveNote: (dayId: number) => void
+  t: (key: string, params?: Record<string, any>) => string
+}
+
+export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cancelNote, saveNote, t }: DayPlanSidebarNoteModalProps) {
+  return (
+    <>
+      {Object.entries(noteUi).map(([dayId, ui]) => ui && ReactDOM.createPortal(
+        <div key={dayId} className="bg-[rgba(0,0,0,0.3)]" style={{
+          position: 'fixed', inset: 0, zIndex: 10000,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          backdropFilter: 'blur(3px)',
+        }} onClick={() => cancelNote(Number(dayId))}>
+          <div className="bg-surface-card" style={{
+            width: 340, borderRadius: 16,
+            boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
+            display: 'flex', flexDirection: 'column', gap: 12,
+          }} onClick={e => e.stopPropagation()}>
+            <div className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>
+              {ui.mode === 'add' ? t('dayplan.noteAdd') : t('dayplan.noteEdit')}
+            </div>
+            {/* Icon-Auswahl */}
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+              {NOTE_ICONS.map(({ id, Icon }) => (
+                <button key={id} onClick={() => setNoteUi(prev => ({ ...prev, [dayId]: { ...prev[dayId], icon: id } }))}
+                  title={id}
+                  className={ui.icon === id ? 'bg-surface-hover' : 'bg-transparent'}
+                  style={{ width: 45, height: 45, borderRadius: 8, border: ui.icon === id ? '2px solid var(--text-primary)' : '2px solid var(--border-faint)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}>
+                  <Icon size={18} strokeWidth={1.8} color={ui.icon === id ? 'var(--text-primary)' : 'var(--text-muted)'} />
+                </button>
+              ))}
+            </div>
+            <input
+              ref={noteInputRef}
+              type="text"
+              value={ui.text}
+              onChange={e => setNoteUi(prev => ({ ...prev, [dayId]: { ...prev[dayId], text: e.target.value } }))}
+              onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); saveNote(Number(dayId)) } if (e.key === 'Escape') cancelNote(Number(dayId)) }}
+              placeholder={t('dayplan.noteTitle') + ' *'}
+              required
+              className="text-content"
+              style={{ fontSize: 13, fontWeight: 500, border: `1px solid ${!ui.text?.trim() ? 'var(--border-primary)' : 'var(--border-primary)'}`, borderRadius: 8, padding: '8px 10px', fontFamily: 'inherit', outline: 'none', width: '100%', boxSizing: 'border-box' }}
+            />
+            <textarea
+              value={ui.time}
+              maxLength={150}
+              rows={3}
+              onChange={e => setNoteUi(prev => ({ ...prev, [dayId]: { ...prev[dayId], time: e.target.value } }))}
+              onKeyDown={e => { if (e.key === 'Escape') cancelNote(Number(dayId)) }}
+              placeholder={t('dayplan.noteSubtitle')}
+              className="text-content"
+              style={{ fontSize: 12, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '7px 10px', fontFamily: 'inherit', outline: 'none', width: '100%', boxSizing: 'border-box', resize: 'none', lineHeight: 1.4 }}
+            />
+            <div className={(ui.time?.length || 0) >= 140 ? 'text-[#d97706]' : 'text-content-faint'} style={{ textAlign: 'right', fontSize: 11, marginTop: -2 }}>{ui.time?.length || 0}/150</div>
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+              <button onClick={() => cancelNote(Number(dayId))} className="text-content-muted" style={{ fontSize: 12, background: 'none', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
+              <button onClick={() => saveNote(Number(dayId))} disabled={!ui.text?.trim()} className={!ui.text?.trim() ? 'bg-[var(--border-primary)] text-content-faint' : 'bg-accent text-accent-text'} style={{ fontSize: 12, border: 'none', borderRadius: 8, padding: '6px 16px', cursor: !ui.text?.trim() ? 'not-allowed' : 'pointer', fontWeight: 600, fontFamily: 'inherit', transition: 'background 0.15s, color 0.15s' }}>
+                {ui.mode === 'add' ? t('common.add') : t('common.save')}
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      ))}
+    </>
+  )
+}

client/src/components/Planner/DayPlanSidebarRouteConnector.tsx

@@ -0,0 +1,21 @@
+import { Car, Footprints } from 'lucide-react'
+import type { RouteSegment } from '../../types'
+
+/** Slim travel-time connector shown between two consecutive located stops in a day. */
+export function RouteConnector({ seg, profile }: { seg: RouteSegment; profile: 'driving' | 'walking' }) {
+  const driving = profile === 'driving'
+  const Icon = driving ? Car : Footprints
+  const line = { flex: 1, height: 1, minHeight: 1, alignSelf: 'center', background: 'var(--border-primary)' }
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 14px', fontSize: 10.5, color: 'var(--text-faint)', lineHeight: 1.2 }}>
+      <div style={line} />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
+        <Icon size={11} strokeWidth={2} />
+        <span>{seg.durationText ?? (driving ? seg.drivingText : seg.walkingText)}</span>
+        <span style={{ opacity: 0.4 }}>·</span>
+        <span>{seg.distanceText}</span>
+      </div>
+      <div style={line} />
+    </div>
+  )
+}

client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx

@@ -0,0 +1,63 @@
+import ReactDOM from 'react-dom'
+import { Clock } from 'lucide-react'
+
+interface TimeConfirmState {
+  dayId: number
+  fromId: number
+  time: string
+  fromType?: string
+  toType?: string
+  toId?: number
+  insertAfter?: boolean
+  reorderIds?: number[]
+}
+
+interface DayPlanSidebarTimeConfirmModalProps {
+  timeConfirm: TimeConfirmState | null
+  setTimeConfirm: (v: TimeConfirmState | null) => void
+  confirmTimeRemoval: () => void
+  t: (key: string, params?: Record<string, any>) => string
+}
+
+export function DayPlanSidebarTimeConfirmModal({ timeConfirm, setTimeConfirm, confirmTimeRemoval, t }: DayPlanSidebarTimeConfirmModalProps) {
+  if (!timeConfirm) return null
+  return ReactDOM.createPortal(
+    <div className="bg-[rgba(0,0,0,0.3)]" style={{
+      position: 'fixed', inset: 0, zIndex: 1000,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      backdropFilter: 'blur(3px)',
+    }} onClick={() => setTimeConfirm(null)}>
+      <div className="bg-surface-card" style={{
+        width: 340, borderRadius: 16,
+        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
+        display: 'flex', flexDirection: 'column', gap: 12,
+      }} onClick={e => e.stopPropagation()}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <div className="bg-[rgba(239,68,68,0.12)]" style={{
+            width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            borderRadius: '50%',
+          }}>
+            <Clock size={18} strokeWidth={1.8} color="#ef4444" />
+          </div>
+          <div className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>
+            {t('dayplan.confirmRemoveTimeTitle')}
+          </div>
+        </div>
+        <div className="text-content-secondary" style={{ fontSize: 12.5, lineHeight: 1.5 }}>
+          {t('dayplan.confirmRemoveTimeBody', { time: timeConfirm.time })}
+        </div>
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
+          <button onClick={() => setTimeConfirm(null)} className="text-content-muted" style={{
+            fontSize: 12, background: 'none', border: '1px solid var(--border-primary)',
+            borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit',
+          }}>{t('common.cancel')}</button>
+          <button onClick={confirmTimeRemoval} className="bg-[#ef4444] text-white" style={{
+            fontSize: 12,
+            border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
+          }}>{t('common.confirm')}</button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

client/src/components/Planner/DayPlanSidebarToolbar.tsx

@@ -0,0 +1,203 @@
+import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2 } from 'lucide-react'
+import { downloadTripPDF } from '../PDF/TripPDF'
+import Tooltip from '../shared/Tooltip'
+import { useToast } from '../shared/Toast'
+import type { Trip, Day, Place, Category, AssignmentsMap, Reservation, DayNote } from '../../types'
+
+interface DayPlanSidebarToolbarProps {
+  tripId: number
+  trip: Trip
+  days: Day[]
+  places: Place[]
+  categories: Category[]
+  assignments: AssignmentsMap
+  reservations: Reservation[]
+  dayNotes: Record<string, DayNote[]>
+  t: (key: string, params?: Record<string, any>) => string
+  locale: string
+  toast: ReturnType<typeof useToast>
+  pdfHover: boolean
+  setPdfHover: (v: boolean) => void
+  icsHover: boolean
+  setIcsHover: (v: boolean) => void
+  expandedDays: Set<number>
+  setExpandedDays: (next: Set<number>) => void
+  onUndo?: () => void
+  canUndo: boolean
+  undoHover: boolean
+  setUndoHover: (v: boolean) => void
+  lastActionLabel: string | null
+}
+
+export function DayPlanSidebarToolbar({
+  tripId, trip, days, places, categories, assignments, reservations, dayNotes,
+  t, locale, toast, pdfHover, setPdfHover, icsHover, setIcsHover,
+  expandedDays, setExpandedDays, onUndo, canUndo, undoHover, setUndoHover, lastActionLabel,
+}: DayPlanSidebarToolbarProps) {
+  return (
+    <div className="border-b border-edge-faint" style={{ padding: '12px 16px', flexShrink: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
+        <div style={{ position: 'relative', flexShrink: 0 }}>
+          <button
+            onClick={async () => {
+              const flatNotes = Object.entries(dayNotes).flatMap(([dayId, notes]) =>
+                notes.map(n => ({ ...n, day_id: Number(dayId) }))
+              )
+              try {
+                await downloadTripPDF({ trip, days, places, assignments, categories, dayNotes: flatNotes, reservations, t, locale })
+              } catch (e) {
+                console.error('PDF error:', e)
+                toast.error(t('dayplan.pdfError') + ': ' + (e?.message || String(e)))
+              }
+            }}
+            onMouseEnter={() => setPdfHover(true)}
+            onMouseLeave={() => setPdfHover(false)}
+            className="bg-accent text-accent-text"
+            style={{
+              display: 'flex', alignItems: 'center', gap: 5,
+              padding: '5px 10px', borderRadius: 8, border: 'none',
+              fontSize: 11, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <FileDown size={13} strokeWidth={2} />
+            {t('dayplan.pdf')}
+          </button>
+          {pdfHover && (
+            <div style={{
+              position: 'absolute', top: 'calc(100% + 6px)', right: 0,
+              whiteSpace: 'nowrap', pointerEvents: 'none', zIndex: 200,
+              background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
+              fontSize: 11, fontWeight: 500, padding: '5px 10px',
+              borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+              border: '1px solid var(--border-faint, #e5e7eb)',
+            }}>
+              {t('dayplan.pdfTooltip')}
+            </div>
+          )}
+        </div>
+        <div style={{ position: 'relative', flexShrink: 0 }}>
+          <button
+            onClick={async () => {
+              try {
+                const res = await fetch(`/api/trips/${tripId}/export.ics`, {
+                  credentials: 'include',
+                })
+                if (!res.ok) throw new Error()
+                const blob = await res.blob()
+                const url = URL.createObjectURL(blob)
+                const a = document.createElement('a')
+                a.href = url
+                a.download = `${trip?.title || 'trip'}.ics`
+                a.click()
+                URL.revokeObjectURL(url)
+              } catch { toast.error(t('planner.icsExportFailed')) }
+            }}
+            onMouseEnter={() => setIcsHover(true)}
+            onMouseLeave={() => setIcsHover(false)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 5,
+              padding: '5px 10px', borderRadius: 8,
+              border: '1px solid var(--border-primary)', background: 'none',
+              color: 'var(--text-muted)', fontSize: 11, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <FileDown size={13} strokeWidth={2} />
+            ICS
+          </button>
+          {icsHover && (
+            <div style={{
+              position: 'absolute', top: 'calc(100% + 6px)', right: 0,
+              whiteSpace: 'nowrap', pointerEvents: 'none', zIndex: 200,
+              background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
+              fontSize: 11, fontWeight: 500, padding: '5px 10px',
+              borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+              border: '1px solid var(--border-faint, #e5e7eb)',
+            }}>
+              {t('dayplan.icsTooltip')}
+            </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<number>() : 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={{
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                width: 30, height: 30, borderRadius: 8,
+                border: '1px solid var(--border-primary)', background: 'none',
+                color: canUndo ? 'var(--text-primary)' : 'var(--border-primary)',
+                cursor: canUndo ? 'pointer' : 'default', fontFamily: 'inherit',
+                transition: 'color 0.15s, border-color 0.15s',
+              }}
+            >
+              <Undo2 size={14} strokeWidth={2} />
+            </button>
+            {undoHover && (
+              <div style={{
+                position: 'absolute', top: 'calc(100% + 6px)', right: 0,
+                whiteSpace: 'nowrap', pointerEvents: 'none', zIndex: 200,
+                background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
+                fontSize: 11, fontWeight: 500, padding: '5px 10px',
+                borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                border: '1px solid var(--border-faint, #e5e7eb)',
+              }}>
+                {canUndo && lastActionLabel ? t('undo.tooltip', { action: lastActionLabel }) : t('undo.button')}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx

@@ -0,0 +1,181 @@
+import ReactDOM from 'react-dom'
+import { Ticket, FileText, ExternalLink } from 'lucide-react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTripStore } from '../../store/tripStore'
+import { formatTime, splitReservationDateTime } from '../../utils/formatters'
+import { RES_ICONS, TRANSPORT_DETAIL_COLORS } from './DayPlanSidebar.constants'
+import type { Reservation } from '../../types'
+
+interface DayPlanSidebarTransportDetailModalProps {
+  transportDetail: Reservation | null
+  setTransportDetail: (v: Reservation | null) => void
+  onNavigateToFiles?: () => void
+  t: (key: string, params?: Record<string, any>) => string
+  locale: string
+  timeFormat: string
+}
+
+export function DayPlanSidebarTransportDetailModal({
+  transportDetail, setTransportDetail, onNavigateToFiles, t, locale, timeFormat,
+}: DayPlanSidebarTransportDetailModalProps) {
+  if (!transportDetail) return null
+  return ReactDOM.createPortal(
+    <div className="bg-[rgba(0,0,0,0.3)]" style={{
+      position: 'fixed', inset: 0, zIndex: 1000,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      backdropFilter: 'blur(3px)',
+    }} onClick={() => setTransportDetail(null)}>
+      <div className="bg-surface-card" style={{
+        width: 380, maxHeight: '80vh', overflowY: 'auto',
+        borderRadius: 16,
+        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
+        display: 'flex', flexDirection: 'column', gap: 14,
+      }} onClick={e => e.stopPropagation()}>
+        {(() => {
+          const res = transportDetail
+          const TransportIcon = RES_ICONS[res.type] || Ticket
+          const TRANSPORT_COLORS = TRANSPORT_DETAIL_COLORS
+          const color = TRANSPORT_COLORS[res.type] || 'var(--text-muted)'
+          const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
+
+          const detailFields = []
+          if (res.type === 'flight') {
+            if (meta.airline) detailFields.push({ label: t('reservations.meta.airline'), value: meta.airline })
+            if (meta.flight_number) detailFields.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
+            if (meta.departure_airport) detailFields.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
+            if (meta.arrival_airport) detailFields.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
+            if (meta.seat) detailFields.push({ label: t('reservations.meta.seat'), value: meta.seat })
+          } else if (res.type === 'train') {
+            if (meta.train_number) detailFields.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
+            if (meta.platform) detailFields.push({ label: t('reservations.meta.platform'), value: meta.platform })
+            if (meta.seat) detailFields.push({ label: t('reservations.meta.seat'), value: meta.seat })
+          }
+          if (res.confirmation_number) detailFields.push({ label: t('reservations.confirmationCode'), value: res.confirmation_number, sensitive: true })
+          if (res.location) detailFields.push({ label: t('reservations.locationAddress'), value: res.location })
+
+          return (
+            <>
+              {/* Header */}
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                <div style={{
+                  width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  borderRadius: '50%', background: `${color}18`,
+                }}>
+                  <TransportIcon size={18} strokeWidth={1.8} color={color} />
+                </div>
+                <div style={{ flex: 1 }}>
+                  <div className="text-content" style={{ fontSize: 15, fontWeight: 600 }}>{res.title}</div>
+                  <div className="text-content-faint" style={{ fontSize: 11, marginTop: 2 }}>
+                    {(() => {
+                      const { date, time } = splitReservationDateTime(res.reservation_time)
+                      const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
+                      const dateStr = date
+                        ? new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
+                        : ''
+                      const timeStr = time ? formatTime(time, locale, timeFormat) : ''
+                      const endStr = endTime ? formatTime(endTime, locale, timeFormat) : ''
+                      const parts: string[] = []
+                      if (dateStr) parts.push(dateStr)
+                      if (timeStr) parts.push(timeStr + (endStr ? ` – ${endStr}` : ''))
+                      return parts.join(', ')
+                    })()}
+                  </div>
+                </div>
+                <div className={res.status === 'confirmed' ? 'bg-[rgba(22,163,74,0.1)] text-[#16a34a]' : 'bg-[rgba(217,119,6,0.1)] text-[#d97706]'} style={{
+                  padding: '3px 8px', borderRadius: 6, fontSize: 10, fontWeight: 600,
+                }}>
+                  {(res.status === 'confirmed' ? t('planner.resConfirmed') : t('planner.resPending')).replace(/\s*·\s*$/, '')}
+                </div>
+              </div>
+
+              {/* Detail-Felder */}
+              {detailFields.length > 0 && (
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+                  {detailFields.map((f, i) => {
+                    const shouldBlur = f.sensitive && useSettingsStore.getState().settings.blur_booking_codes
+                    return (
+                      <div key={i} className="bg-surface-tertiary" style={{ padding: '8px 10px', borderRadius: 8 }}>
+                        <div className="text-content-faint" style={{ fontSize: 9, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{f.label}</div>
+                        <div
+                          onMouseEnter={e => { if (shouldBlur) e.currentTarget.style.filter = 'none' }}
+                          onMouseLeave={e => { if (shouldBlur) e.currentTarget.style.filter = 'blur(5px)' }}
+                          onClick={e => { if (shouldBlur) { const el = e.currentTarget; el.style.filter = el.style.filter === 'none' ? 'blur(5px)' : 'none' } }}
+                          className="text-content"
+                          style={{
+                            fontSize: 12, fontWeight: 500, wordBreak: 'break-word',
+                            filter: shouldBlur ? 'blur(5px)' : 'none', transition: 'filter 0.2s',
+                            cursor: shouldBlur ? 'pointer' : 'default',
+                            userSelect: shouldBlur ? 'none' : 'auto',
+                          }}
+                        >{f.value}</div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+
+              {/* Notizen */}
+              {res.notes && (
+                <div className="bg-surface-tertiary" style={{ padding: '8px 10px', borderRadius: 8 }}>
+                  <div className="text-content-faint" style={{ fontSize: 9, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.notes')}</div>
+                  <div className="collab-note-md text-content" style={{ fontSize: 12, wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{res.notes}</Markdown></div>
+                </div>
+              )}
+
+              {/* Dateien */}
+              {(() => {
+                const resFiles = (useTripStore.getState().files || []).filter(f =>
+                  !f.deleted_at && (
+                    f.reservation_id === res.id ||
+                    (f.linked_reservation_ids && f.linked_reservation_ids.includes(res.id))
+                  )
+                )
+                if (resFiles.length === 0) return null
+                return (
+                  <div>
+                    <div className="text-content-faint" style={{ fontSize: 9, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 6 }}>{t('files.title')}</div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                      {resFiles.map(f => (
+                        <div key={f.id}
+                          onClick={() => { setTransportDetail(null); onNavigateToFiles?.() }}
+                          className="bg-surface-tertiary"
+                          style={{
+                            display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px',
+                            borderRadius: 8, cursor: 'pointer',
+                            transition: 'background 0.1s',
+                          }}
+                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                          onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+                        >
+                          <FileText size={14} className="text-content-muted" style={{ flexShrink: 0 }} />
+                          <span className="text-content" style={{ flex: 1, fontSize: 12, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {f.original_name}
+                          </span>
+                          <ExternalLink size={11} className="text-content-faint" style={{ flexShrink: 0 }} />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )
+              })()}
+
+              {/* Schließen */}
+              <div style={{ textAlign: 'right' }}>
+                <button onClick={() => setTransportDetail(null)} className="bg-accent text-accent-text" style={{
+                  fontSize: 12,
+                  border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
+                }}>
+                  {t('common.close')}
+                </button>
+              </div>
+            </>
+          )
+        })()}
+      </div>
+    </div>,
+    document.body
+  )
+}

client/src/components/Planner/FileImportModal.tsx

@@ -187,11 +187,13 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
   return ReactDOM.createPortal(
     <div
       onClick={handleClose}
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+      className="bg-[rgba(0,0,0,0.4)]"
+      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
     >
       <div
         onClick={e => e.stopPropagation()}
-        style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}
+        className="bg-surface-card"
+        style={{ borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}
       >
         <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 6 }}>
           {t('places.importFile')}
@@ -214,12 +216,12 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
           onDragEnter={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
+          className={isDragOver ? 'bg-surface-tertiary' : 'bg-transparent'}
           style={{
             width: '100%',
             minHeight: 88,
             borderRadius: 12,
             border: `2px dashed ${isDragOver ? 'var(--accent)' : 'var(--border-primary)'}`,
-            background: isDragOver ? 'var(--bg-tertiary)' : 'transparent',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
@@ -237,7 +239,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
         >
           <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
           {isDragOver ? (
-            <span style={{ color: 'var(--accent)', pointerEvents: 'none' }}>{t('places.importFileDropActive')}</span>
+            <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('places.importFileDropActive')}</span>
           ) : file ? (
             <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{file.name}</span>
           ) : (
@@ -252,10 +254,9 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
             </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={{
+                <div className={gpxOpts[key] ? 'bg-accent' : 'bg-transparent'} 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>}
@@ -266,7 +267,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
               </label>
             ))}
             {gpxNoneSelected && (
-              <div style={{ fontSize: 11, color: '#b45309', marginTop: 4 }}>{t('places.gpxImportNoneSelected')}</div>
+              <div className="text-[#b45309]" style={{ fontSize: 11, marginTop: 4 }}>{t('places.gpxImportNoneSelected')}</div>
             )}
           </div>
         )}
@@ -278,10 +279,9 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
             </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={{
+                <div className={kmlOpts[key] ? 'bg-accent' : 'bg-transparent'} 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>}
@@ -292,7 +292,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
               </label>
             ))}
             {kmlNoneSelected && (
-              <div style={{ fontSize: 11, color: '#b45309', marginTop: 4 }}>{t('places.kmlImportNoneSelected')}</div>
+              <div className="text-[#b45309]" style={{ fontSize: 11, marginTop: 4 }}>{t('places.kmlImportNoneSelected')}</div>
             )}
           </div>
         )}
@@ -310,7 +310,7 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
               })}
             </div>
             {summary.warnings?.length > 0 && (
-              <div style={{ marginTop: 8, fontSize: 12, color: '#b45309', whiteSpace: 'pre-wrap' }}>
+              <div className="text-[#b45309]" style={{ marginTop: 8, fontSize: 12, whiteSpace: 'pre-wrap' }}>
                 {summary.warnings.join('\n')}
               </div>
             )}
@@ -318,10 +318,10 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
         )}
 
         {error && (
-          <div style={{
+          <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{
             border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10,
-            background: 'rgba(239,68,68,0.08)', padding: '8px 10px',
-            fontSize: 12, color: '#b91c1c', whiteSpace: 'pre-wrap', marginBottom: 10,
+            padding: '8px 10px',
+            fontSize: 12, whiteSpace: 'pre-wrap', marginBottom: 10,
           }}>
             {error}
           </div>
@@ -341,10 +341,9 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
           <button
             onClick={handleImport}
             disabled={!canImport}
+            className={canImport ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
             style={{
               padding: '8px 16px', borderRadius: 10, border: 'none',
-              background: canImport ? 'var(--accent)' : 'var(--bg-tertiary)',
-              color: canImport ? 'var(--accent-text)' : 'var(--text-faint)',
               fontSize: 13, fontWeight: 500, cursor: canImport ? 'pointer' : 'default',
               fontFamily: 'inherit',
             }}

client/src/components/Planner/LocationSelect.tsx

@@ -88,8 +88,8 @@ export default function LocationSelect({ value, onChange, placeholder, style }:
 
   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 }} />
+      <div className="bg-surface-tertiary" style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)' }}>
+        <MapPin size={14} className="text-content-faint" style={{ flexShrink: 0 }} />
         <input
           type="text"
           value={query}
@@ -97,19 +97,20 @@ export default function LocationSelect({ value, onChange, placeholder, style }:
           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 }}
+          className="bg-transparent text-content"
+          style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', 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">
+          <button type="button" onClick={clear} className="bg-transparent text-content-faint" style={{ border: 'none', padding: 2, cursor: 'pointer', 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 }}>
+        <div className="bg-surface-card" style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, 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>
+            <div className="text-content-faint" style={{ padding: 10, fontSize: 12 }}>{t('common.loading')}</div>
           )}
           {results.map((r, i) => (
             <button
@@ -117,18 +118,18 @@ export default function LocationSelect({ value, onChange, placeholder, style }:
               type="button"
               onClick={() => pick(r)}
               onMouseEnter={() => setHighlight(i)}
+              className={`text-content ${i === highlight ? 'bg-surface-hover' : 'bg-transparent'}`}
               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',
+                fontFamily: 'inherit',
               }}
             >
-              <MapPin size={12} style={{ color: 'var(--text-faint)', marginTop: 2, flexShrink: 0 }} />
+              <MapPin size={12} className="text-content-faint" style={{ 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>
+                  <div className="text-content-faint" style={{ fontSize: 11, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.address}</div>
                 )}
               </span>
             </button>

client/src/components/Planner/PlaceFormModal.helpers.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { isGoogleMapsUrl } from './PlaceFormModal.helpers'
+
+describe('isGoogleMapsUrl', () => {
+  it('accepts the short share hosts', () => {
+    expect(isGoogleMapsUrl('https://maps.app.goo.gl/abc123')).toBe(true)
+    expect(isGoogleMapsUrl('https://goo.gl/maps/xyz')).toBe(true)
+  })
+
+  it('rejects goo.gl links that are not /maps', () => {
+    expect(isGoogleMapsUrl('https://goo.gl/something')).toBe(false)
+  })
+
+  it('accepts maps.google.<tld> and maps.google.<sld>.<tld>', () => {
+    expect(isGoogleMapsUrl('https://maps.google.com/?q=eiffel')).toBe(true)
+    expect(isGoogleMapsUrl('https://maps.google.co.uk/?q=eiffel')).toBe(true)
+  })
+
+  it('accepts google.<tld>/maps with optional www', () => {
+    expect(isGoogleMapsUrl('https://google.com/maps/place/Eiffel')).toBe(true)
+    expect(isGoogleMapsUrl('https://www.google.co.uk/maps')).toBe(true)
+  })
+
+  it('rejects google.<tld> without a /maps path', () => {
+    expect(isGoogleMapsUrl('https://google.com/search?q=eiffel')).toBe(false)
+  })
+
+  it('rejects spoofed hosts like maps.google.evil.com', () => {
+    expect(isGoogleMapsUrl('https://maps.google.evil.com/maps')).toBe(false)
+  })
+
+  it('returns false for non-URL input', () => {
+    expect(isGoogleMapsUrl('not a url')).toBe(false)
+    expect(isGoogleMapsUrl('')).toBe(false)
+    expect(isGoogleMapsUrl('Eiffel Tower')).toBe(false)
+  })
+
+  it('trims surrounding whitespace before parsing', () => {
+    expect(isGoogleMapsUrl('  https://maps.app.goo.gl/abc123  ')).toBe(true)
+  })
+})

client/src/components/Planner/PlaceFormModal.helpers.ts

@@ -0,0 +1,50 @@
+export interface PlaceFormData {
+  name: string
+  description: string
+  address: string
+  lat: string
+  lng: string
+  category_id: string
+  place_time: string
+  end_time: string
+  notes: string
+  transport_mode: string
+  website: string
+  // Populated from a maps-search pick (not part of the initial blank form).
+  phone?: string
+  google_place_id?: string
+  osm_id?: string
+}
+
+export function isGoogleMapsUrl(input: string): boolean {
+  try {
+    const { hostname, pathname } = new URL(input.trim())
+    const h = hostname.toLowerCase()
+    // maps.app.goo.gl, goo.gl/maps
+    if (h === 'maps.app.goo.gl') return true
+    if (h === 'goo.gl' && pathname.startsWith('/maps')) return true
+    // maps.google.* (e.g. maps.google.com, maps.google.co.uk)
+    // Must be maps.google.<tld> or maps.google.<sld>.<tld> — reject maps.google.evil.com
+    if (/^maps\.google\.[a-z]{2,3}(\.[a-z]{2})?$/.test(h)) return true
+    // google.*/maps (e.g. google.com/maps, www.google.co.uk/maps)
+    const bare = h.startsWith('www.') ? h.slice(4) : h
+    if (/^google\.[a-z]{2,3}(\.[a-z]{2})?$/.test(bare) && pathname.startsWith('/maps')) return true
+    return false
+  } catch {
+    return false
+  }
+}
+
+export const DEFAULT_FORM: PlaceFormData = {
+  name: '',
+  description: '',
+  address: '',
+  lat: '',
+  lng: '',
+  category_id: '',
+  place_time: '',
+  end_time: '',
+  notes: '',
+  transport_mode: 'walking',
+  website: '',
+}

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

@@ -178,7 +178,7 @@ describe('PlaceFormModal', () => {
     await user.type(searchInput, 'Eiffel Tower');
 
     // The search button is the sibling button of the search input
-    const searchRow = searchInput.closest('.flex')!;
+    const searchRow = searchInput.closest('.flex') as HTMLElement;
     const searchBtn = within(searchRow).getByRole('button');
     await user.click(searchBtn);
 
@@ -363,7 +363,7 @@ describe('PlaceFormModal', () => {
     await screen.findByText('remove-me.jpg');
 
     // The X button is inside the file item's container div
-    const fileItem = screen.getByText('remove-me.jpg').closest('div.flex')!;
+    const fileItem = screen.getByText('remove-me.jpg').closest('div.flex') as HTMLElement;
     const removeBtn = within(fileItem).getByRole('button');
     await user.click(removeBtn);
 

client/src/components/Planner/PlaceFormModal.tsx

@@ -9,72 +9,40 @@ import { useToast } from '../shared/Toast'
 import { Search, Paperclip, X, AlertTriangle, Loader2 } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import CustomTimePicker from '../shared/CustomTimePicker'
+import { DEFAULT_FORM, isGoogleMapsUrl, type PlaceFormData } from './PlaceFormModal.helpers'
 import type { Place, Category, Assignment } from '../../types'
 
-interface PlaceFormData {
-  name: string
-  description: string
-  address: string
-  lat: string
-  lng: string
-  category_id: string
-  place_time: string
-  end_time: string
-  notes: string
-  transport_mode: string
-  website: string
-}
-
-function isGoogleMapsUrl(input: string): boolean {
-  try {
-    const { hostname, pathname } = new URL(input.trim())
-    const h = hostname.toLowerCase()
-    // maps.app.goo.gl, goo.gl/maps
-    if (h === 'maps.app.goo.gl') return true
-    if (h === 'goo.gl' && pathname.startsWith('/maps')) return true
-    // maps.google.* (e.g. maps.google.com, maps.google.co.uk)
-    // Must be maps.google.<tld> or maps.google.<sld>.<tld> — reject maps.google.evil.com
-    if (/^maps\.google\.[a-z]{2,3}(\.[a-z]{2})?$/.test(h)) return true
-    // google.*/maps (e.g. google.com/maps, www.google.co.uk/maps)
-    const bare = h.startsWith('www.') ? h.slice(4) : h
-    if (/^google\.[a-z]{2,3}(\.[a-z]{2})?$/.test(bare) && pathname.startsWith('/maps')) return true
-    return false
-  } catch {
-    return false
-  }
-}
-
-const DEFAULT_FORM: PlaceFormData = {
-  name: '',
-  description: '',
-  address: '',
-  lat: '',
-  lng: '',
-  category_id: '',
-  place_time: '',
-  end_time: '',
-  notes: '',
-  transport_mode: 'walking',
-  website: '',
+// The submit payload mirrors the form, but lat/lng are parsed to numbers and
+// category_id is normalised, plus any files chosen before the place existed.
+export interface PlaceSubmitData extends Omit<PlaceFormData, 'lat' | 'lng' | 'category_id'> {
+  lat: number | null
+  lng: number | null
+  category_id: string | null
+  _pendingFiles?: File[]
 }
 
 interface PlaceFormModalProps {
   isOpen: boolean
   onClose: () => void
-  onSave: (data: PlaceFormData, files?: File[]) => Promise<void> | void
+  onSave: (data: PlaceSubmitData, files?: File[]) => Promise<void> | void
   place: Place | null
   prefillCoords?: { lat: number; lng: number; name?: string; address?: string } | null
   tripId: number
   categories: Category[]
-  onCategoryCreated: (category: Category) => void
+  onCategoryCreated: (category: { name: string; color?: string; icon?: string }) => Promise<Category> | undefined
   assignmentId: number | null
   dayAssignments?: Assignment[]
 }
 
-export default function PlaceFormModal({
+
+/** Place create/edit form state: maps search + Google-URL resolve + autocomplete,
+ * category creation, file attachments and submit. Keeps PlaceFormModal a thin
+ * render over the form fields. */
+function usePlaceFormModal(props: PlaceFormModalProps) {
+  const {
   isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
   onCategoryCreated, assignmentId, dayAssignments = [],
-}: PlaceFormModalProps) {
+  } = props
   const [form, setForm] = useState(DEFAULT_FORM)
   const [mapsSearch, setMapsSearch] = useState('')
   const [mapsResults, setMapsResults] = useState([])
@@ -101,9 +69,9 @@ export default function PlaceFormModal({
         name: place.name || '',
         description: place.description || '',
         address: place.address || '',
-        lat: place.lat || '',
-        lng: place.lng || '',
-        category_id: place.category_id || '',
+        lat: place.lat != null ? String(place.lat) : '',
+        lng: place.lng != null ? String(place.lng) : '',
+        category_id: place.category_id != null ? String(place.category_id) : '',
         place_time: place.place_time || '',
         end_time: place.end_time || '',
         notes: place.notes || '',
@@ -191,7 +159,7 @@ export default function PlaceFormModal({
     }
   }, [mapsSearch, fetchSuggestions])
 
-  const handleChange = (field, value) => {
+  const handleChange = (field: string, value: string) => {
     setForm(prev => ({ ...prev, [field]: value }))
   }
 
@@ -296,7 +264,7 @@ export default function PlaceFormModal({
     if (!newCategoryName.trim()) return
     try {
       const cat = await onCategoryCreated?.({ name: newCategoryName, color: '#6366f1', icon: 'MapPin' })
-      if (cat) setForm(prev => ({ ...prev, category_id: cat.id }))
+      if (cat) setForm(prev => ({ ...prev, category_id: String(cat.id) }))
       setNewCategoryName('')
       setShowNewCategory(false)
     } catch (err: unknown) {
@@ -304,18 +272,18 @@ export default function PlaceFormModal({
     }
   }
 
-  const handleFileAdd = (e) => {
-    const files = Array.from((e.target as HTMLInputElement).files || [])
+  const handleFileAdd = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
     setPendingFiles(prev => [...prev, ...files])
     e.target.value = ''
   }
 
-  const handleRemoveFile = (idx) => {
+  const handleRemoveFile = (idx: number) => {
     setPendingFiles(prev => prev.filter((_, i) => i !== idx))
   }
 
   // Paste support for files/images
-  const handlePaste = (e) => {
+  const handlePaste = (e: React.ClipboardEvent) => {
     if (!canUploadFiles) return
     const items = e.clipboardData?.items
     if (!items) return
@@ -354,6 +322,122 @@ export default function PlaceFormModal({
     }
   }
 
+  return {
+    isOpen,
+    onClose,
+    onSave,
+    place,
+    prefillCoords,
+    tripId,
+    categories,
+    onCategoryCreated,
+    assignmentId,
+    dayAssignments,
+    form,
+    setForm,
+    mapsSearch,
+    setMapsSearch,
+    mapsResults,
+    setMapsResults,
+    isSearchingMaps,
+    setIsSearchingMaps,
+    newCategoryName,
+    setNewCategoryName,
+    showNewCategory,
+    setShowNewCategory,
+    isSaving,
+    setIsSaving,
+    pendingFiles,
+    setPendingFiles,
+    fileRef,
+    acSuggestions,
+    setAcSuggestions,
+    acHighlight,
+    setAcHighlight,
+    acDebounceRef,
+    acAbortRef,
+    toast,
+    t,
+    language,
+    hasMapsKey,
+    can,
+    tripObj,
+    canUploadFiles,
+    places,
+    locationBias,
+    fetchSuggestions,
+    handleChange,
+    handleMapsSearch,
+    handleSelectMapsResult,
+    handleSelectSuggestion,
+    handleSearchKeyDown,
+    handleCreateCategory,
+    handleFileAdd,
+    handleRemoveFile,
+    handlePaste,
+    hasTimeError,
+    handleSubmit,
+  }
+}
+
+export default function PlaceFormModal(props: PlaceFormModalProps) {
+  const S = usePlaceFormModal(props)
+  const {
+    isOpen,
+    onClose,
+    onSave,
+    place,
+    prefillCoords,
+    tripId,
+    categories,
+    onCategoryCreated,
+    assignmentId,
+    dayAssignments,
+    form,
+    setForm,
+    mapsSearch,
+    setMapsSearch,
+    mapsResults,
+    setMapsResults,
+    isSearchingMaps,
+    setIsSearchingMaps,
+    newCategoryName,
+    setNewCategoryName,
+    showNewCategory,
+    setShowNewCategory,
+    isSaving,
+    setIsSaving,
+    pendingFiles,
+    setPendingFiles,
+    fileRef,
+    acSuggestions,
+    setAcSuggestions,
+    acHighlight,
+    setAcHighlight,
+    acDebounceRef,
+    acAbortRef,
+    toast,
+    t,
+    language,
+    hasMapsKey,
+    can,
+    tripObj,
+    canUploadFiles,
+    places,
+    locationBias,
+    fetchSuggestions,
+    handleChange,
+    handleMapsSearch,
+    handleSelectMapsResult,
+    handleSelectSuggestion,
+    handleSearchKeyDown,
+    handleCreateCategory,
+    handleFileAdd,
+    handleRemoveFile,
+    handlePaste,
+    hasTimeError,
+    handleSubmit,
+  } = S
   return (
     <Modal
       isOpen={isOpen}
@@ -384,7 +468,7 @@ export default function PlaceFormModal({
         {/* Place Search */}
         <div className="bg-slate-50 rounded-xl p-3 border border-slate-200">
           {!hasMapsKey && (
-            <p className="mb-2 text-xs" style={{ color: 'var(--text-faint)' }}>
+            <p className="mb-2 text-xs text-content-faint">
               {t('places.osmActive')}
             </p>
           )}
@@ -546,7 +630,7 @@ export default function PlaceFormModal({
             <div className="flex gap-2">
               <CustomSelect
                 value={form.category_id}
-                onChange={value => handleChange('category_id', value)}
+                onChange={value => handleChange('category_id', String(value))}
                 placeholder={t('places.noCategory')}
                 options={[
                   { value: '', label: t('places.noCategory') },
@@ -639,7 +723,7 @@ export default function PlaceFormModal({
 
 interface TimeSectionProps {
   form: PlaceFormData
-  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void
+  handleChange: (field: string, value: string) => void
   assignmentId: number | null
   dayAssignments: Assignment[]
   hasTimeError: boolean

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

@@ -235,7 +235,7 @@ describe('PlaceInspector', () => {
   });
 
   it('FE-PLANNER-INSPECTOR-017: "Remove from day" button appears when place IS assigned to selectedDay', () => {
-    const assignmentInDay = [{ id: 99, place: { id: place.id }, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
+    const assignmentInDay = [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
     render(
       <PlaceInspector
         {...defaultProps}
@@ -250,7 +250,7 @@ describe('PlaceInspector', () => {
   it('FE-PLANNER-INSPECTOR-018: clicking remove calls onRemoveAssignment with dayId and assignmentId', async () => {
     const user = userEvent.setup();
     const onRemoveAssignment = vi.fn();
-    const assignmentInDay = [{ id: 99, place: { id: place.id }, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
+    const assignmentInDay = [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
     render(
       <PlaceInspector
         {...defaultProps}
@@ -406,7 +406,7 @@ describe('PlaceInspector', () => {
 
   it('FE-PLANNER-INSPECTOR-030: linked reservation shown when selectedAssignmentId has a reservation', () => {
     const reservation = buildReservation({ title: 'Museum Ticket', status: 'confirmed', assignment_id: 99 } as any);
-    const assignmentInDay = [{ id: 99, place: { id: place.id }, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
+    const assignmentInDay = [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
     render(
       <PlaceInspector
         {...defaultProps}
@@ -423,7 +423,7 @@ describe('PlaceInspector', () => {
 
   it('FE-PLANNER-INSPECTOR-031: participants section shown when tripMembers > 1 and selectedAssignmentId is set', () => {
     const members = [buildUser({ id: 1 }), buildUser({ id: 2 })];
-    const assignmentInDay = [{ id: 99, place: { id: place.id }, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
+    const assignmentInDay = [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
     render(
       <PlaceInspector
         {...defaultProps}
@@ -534,8 +534,8 @@ describe('PlaceInspector', () => {
     const member2 = buildUser({ id: 11, username: 'bob' });
     const members = [member1, member2];
     const assignmentInDay = [{
-      id: 99, place: { id: place.id }, day_id: 1, place_id: place.id, order_index: 0, notes: null,
-      participants: [{ user_id: 10 }],
+      id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null,
+      participants: [{ user_id: 10, username: 'alice' }],
     }];
     render(
       <PlaceInspector
@@ -637,7 +637,7 @@ describe('PlaceInspector', () => {
         tripMembers={[member]}
         selectedDayId={1}
         selectedAssignmentId={99}
-        assignments={{ '1': [{ id: 99, place: { id: place.id }, day_id: 1, place_id: place.id, order_index: 0, notes: null }] }}
+        assignments={{ '1': [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }] }}
       />
     );
     // "solo" username might be visible from other parts but participants box should not render

client/src/components/Planner/PlaceInspector.tsx

@@ -8,9 +8,10 @@ import PlaceAvatar from '../shared/PlaceAvatar'
 import { mapsApi } from '../../api/client'
 import { useSettingsStore } from '../../store/settingsStore'
 import { getCategoryIcon } from '../shared/categoryIcons'
+import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
-import { splitReservationDateTime } from '../../utils/formatters'
+import { splitReservationDateTime, formatTime } from '../../utils/formatters'
 
 const detailsCache = new Map()
 
@@ -76,24 +77,6 @@ function convertHoursLine(line, timeFormat) {
   return line
 }
 
-function formatTime(timeStr, locale, timeFormat) {
-  if (!timeStr) return ''
-  try {
-    const parts = timeStr.split(':')
-    const h = Number(parts[0]) || 0
-    const m = Number(parts[1]) || 0
-    if (isNaN(h)) return timeStr
-    if (timeFormat === '12h') {
-      const period = h >= 12 ? 'PM' : 'AM'
-      const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
-      return `${h12}:${String(m).padStart(2, '0')} ${period}`
-    }
-    const str = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
-    return locale?.startsWith('de') ? `${str} Uhr` : str
-  } catch { return timeStr }
-}
-
-
 function formatFileSize(bytes) {
   if (!bytes) return ''
   if (bytes < 1024) return `${bytes} B`
@@ -104,6 +87,7 @@ function formatFileSize(bytes) {
 interface TripMember {
   id: number
   username: string
+  avatar?: string | null
   avatar_url?: string | null
 }
 
@@ -118,10 +102,10 @@ interface PlaceInspectorProps {
   onClose: () => void
   onEdit: () => void
   onDelete: () => void
-  onAssignToDay: (placeId: number, dayId: number) => void
-  onRemoveAssignment: (assignmentId: number, dayId: number) => void
+  onAssignToDay: (placeId: number, dayId?: number) => void
+  onRemoveAssignment: (dayId: number, assignmentId: number) => void
   files: TripFile[]
-  onFileUpload?: (fd: FormData) => Promise<void>
+  onFileUpload?: (fd: FormData) => Promise<unknown>
   tripMembers?: TripMember[]
   onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void
   onUpdatePlace: (placeId: number, data: Partial<Place>) => void
@@ -136,6 +120,7 @@ export default function PlaceInspector({
   leftWidth = 0, rightWidth = 0,
 }: PlaceInspectorProps) {
   const { t, locale, language } = useTranslation()
+  const toast = useToast()
   const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
   const [hoursExpanded, setHoursExpanded] = useState(false)
   const [filesExpanded, setFilesExpanded] = useState(false)
@@ -190,17 +175,18 @@ export default function PlaceInspector({
       for (const file of selectedFiles) {
         const fd = new FormData()
         fd.append('file', file)
-        fd.append('place_id', place.id)
+        fd.append('place_id', String(place.id))
         await onFileUpload(fd)
       }
       setFilesExpanded(true)
     } catch (err: unknown) {
       console.error('Upload failed', err)
+      toast.error(t('files.uploadError'))
     } finally {
       setIsUploading(false)
       if (fileInputRef.current) fileInputRef.current.value = ''
     }
-  }, [onFileUpload, place.id])
+  }, [onFileUpload, place.id, toast, t])
 
   return (
     <div
@@ -214,8 +200,7 @@ export default function PlaceInspector({
         fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
       }}
     >
-      <div style={{
-        background: 'var(--bg-elevated)',
+      <div className="bg-surface-elevated" style={{
         backdropFilter: 'blur(40px) saturate(180%)',
         WebkitBackdropFilter: 'blur(40px) saturate(180%)',
         borderRadius: 20,
@@ -226,90 +211,10 @@ export default function PlaceInspector({
         flexDirection: 'column',
       }}>
         {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
-          {/* Avatar with open/closed ring + tag */}
-          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
-            <div style={{
-              borderRadius: '50%', padding: 2.5,
-              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
-            }}>
-              <PlaceAvatar place={place} category={category} size={52} />
-            </div>
-            {openNow !== null && (
-              <span style={{
-                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
-                fontSize: 9, fontWeight: 500, letterSpacing: '0.02em',
-                color: 'white',
-                background: openNow ? '#16a34a' : '#dc2626',
-                padding: '1.5px 7px', borderRadius: 99,
-                whiteSpace: 'nowrap',
-                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
-              }}>
-                {openNow ? t('inspector.opened') : t('inspector.closed')}
-              </span>
-            )}
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {editingName ? (
-                <input
-                  ref={nameInputRef}
-                  value={nameValue}
-                  onChange={e => setNameValue(e.target.value)}
-                  onBlur={commitNameEdit}
-                  onKeyDown={handleNameKeyDown}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
-                />
-              ) : (
-                <span
-                  onDoubleClick={startNameEdit}
-                  style={{ fontWeight: 600, fontSize: 15, color: 'var(--text-primary)', lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
-                >{place.name}</span>
-              )}
-              {category && (() => {
-                const CatIcon = getCategoryIcon(category.icon)
-                return (
-                  <span style={{
-                    display: 'inline-flex', alignItems: 'center', gap: 4,
-                    fontSize: 11, fontWeight: 500,
-                    color: category.color || '#6b7280',
-                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
-                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
-                    padding: '2px 8px', borderRadius: 99,
-                  }}>
-                    <CatIcon size={10} />
-                    <span className="hidden sm:inline">{category.name}</span>
-                  </span>
-                )
-              })()}
-            </div>
-            {place.address && (
-              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
-                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
-              </div>
-            )}
-            {place.place_time && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
-                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
-              </div>
-            )}
-            {place.lat && place.lng && (
-              <div className="hidden sm:block" style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
-                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
-              </div>
-            )}
-          </div>
-          <button
-            onClick={onClose}
-            style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-hover)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-          >
-            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
-          </button>
-        </div>
+        <PlaceInspectorHeader openNow={openNow} place={place} category={category} t={t} editingName={editingName}
+          nameInputRef={nameInputRef} nameValue={nameValue} setNameValue={setNameValue} commitNameEdit={commitNameEdit}
+          handleNameKeyDown={handleNameKeyDown} startNameEdit={startNameEdit} onUpdatePlace={onUpdatePlace}
+          locale={locale} timeFormat={timeFormat} onClose={onClose} />
 
         {/* Content — scrollable */}
         <div style={{ overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
@@ -339,7 +244,8 @@ export default function PlaceInspector({
           {(place.phone || googleDetails?.phone) && (
             <div style={{ display: 'flex', gap: 12 }}>
               <a href={`tel:${place.phone || googleDetails.phone}`}
-                style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', textDecoration: 'none' }}>
+                className="text-content"
+                style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, textDecoration: 'none' }}>
                 <Phone size={12} /> {place.phone || googleDetails.phone}
               </a>
             </div>
@@ -347,277 +253,33 @@ export default function PlaceInspector({
 
           {/* Description / Summary */}
           {(place.description || googleDetails?.summary) && (
-            <div className="collab-note-md" style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden', fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.5', padding: '8px 12px' }}>
+            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', fontSize: 12, lineHeight: '1.5', padding: '8px 12px' }}>
               <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{place.description || googleDetails?.summary || ''}</Markdown>
             </div>
           )}
 
           {/* Notes */}
           {place.notes && (
-            <div className="collab-note-md" style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden', fontSize: 12, color: 'var(--text-muted)', lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', fontSize: 12, lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
               <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{place.notes}</Markdown>
             </div>
           )}
 
           {/* Reservation + Participants — side by side */}
-          {(() => {
-            const res = selectedAssignmentId ? reservations.find(r => r.assignment_id === selectedAssignmentId) : null
-            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
-            const currentParticipants = assignment?.participants || []
-            const participantIds = currentParticipants.map(p => p.user_id)
-            const allJoined = currentParticipants.length === 0
-            const showParticipants = selectedAssignmentId && tripMembers.length > 1
-            if (!res && !showParticipants) return null
-            return (
-              <div className={`grid ${res && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
-                {/* Reservation */}
-                {res && (() => {
-                  const confirmed = res.status === 'confirmed'
-                  return (
-                    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: confirmed ? 'rgba(22,163,74,0.08)' : 'rgba(217,119,6,0.08)' }}>
-                        <div style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
-                        <span style={{ fontSize: 10, fontWeight: 700, color: confirmed ? '#16a34a' : '#d97706' }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                        <span style={{ flex: 1 }} />
-                        <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
-                      </div>
-                      <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                        {(() => {
-                          const { date, time: startTime } = splitReservationDateTime(res.reservation_time)
-                          const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                          return (
-                            <>
-                              {date && (
-                                <div>
-                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.date')}</div>
-                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
-                                </div>
-                              )}
-                              {(startTime || endTime) && (
-                                <div>
-                                  <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.time')}</div>
-                                  <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>
-                                    {startTime ? formatTime(startTime, locale, timeFormat) : ''}
-                                    {endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
-                                  </div>
-                                </div>
-                              )}
-                            </>
-                          )
-                        })()}
-                        {res.confirmation_number && (
-                          <div>
-                            <div style={{ fontSize: 8, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
-                            <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-primary)', marginTop: 1 }}>{res.confirmation_number}</div>
-                          </div>
-                        )}
-                      </div>
-                      {res.notes && <div className="collab-note-md" style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.4, wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{res.notes}</Markdown></div>}
-                      {(() => {
-                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                        if (!meta || Object.keys(meta).length === 0) return null
-                        const parts: string[] = []
-                        if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
-                        else if (meta.flight_number) parts.push(meta.flight_number)
-                        if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
-                        if (meta.train_number) parts.push(meta.train_number)
-                        if (meta.platform) parts.push(`Gl. ${meta.platform}`)
-                        if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
-                        if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
-                        if (parts.length === 0) return null
-                        return <div style={{ padding: '0 10px 6px', fontSize: 10, color: 'var(--text-muted)', fontWeight: 500 }}>{parts.join(' · ')}</div>
-                      })()}
-                    </div>
-                  )
-                })()}
-
-                {/* Participants */}
-                {showParticipants && (
-                  <ParticipantsBox
-                    tripMembers={tripMembers}
-                    participantIds={participantIds}
-                    allJoined={allJoined}
-                    onSetParticipants={onSetParticipants}
-                    selectedAssignmentId={selectedAssignmentId}
-                    selectedDayId={selectedDayId}
-                    t={t}
-                  />
-                )}
-              </div>
-            )
-          })()}
+          <PlaceReservationParticipants selectedAssignmentId={selectedAssignmentId} reservations={reservations}
+            assignments={assignments} selectedDayId={selectedDayId} tripMembers={tripMembers} locale={locale}
+            timeFormat={timeFormat} t={t} onSetParticipants={onSetParticipants} />
 
           {/* Opening hours + Files — side by side on desktop only if both exist */}
-          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
-          {openingHours && openingHours.length > 0 && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <button
-                onClick={() => setHoursExpanded(h => !h)}
-                style={{
-                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
-                  fontFamily: 'inherit',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <Clock size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
-                  </span>
-                </div>
-                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
-              </button>
-              {hoursExpanded && (
-                <div style={{ padding: '0 12px 10px' }}>
-                  {openingHours.map((line, i) => (
-                    <div key={i} style={{
-                      fontSize: 12, color: i === weekdayIndex ? 'var(--text-primary)' : 'var(--text-muted)',
-                      fontWeight: i === weekdayIndex ? 600 : 400,
-                      padding: '2px 0',
-                    }}>{convertHoursLine(line, timeFormat)}</div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-
-          {/* GPX Track stats */}
-          {place.route_geometry && (() => {
-            try {
-              const pts: number[][] = JSON.parse(place.route_geometry)
-              if (!pts || pts.length < 2) return null
-              const hasEle = pts[0].length >= 3
-
-              // Haversine distance
-              const toRad = (d: number) => d * Math.PI / 180
-              let totalDist = 0
-              for (let i = 1; i < pts.length; i++) {
-                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
-                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
-                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
-                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-              }
-              const distKm = totalDist / 1000
-
-              // Elevation stats
-              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
-              if (hasEle) {
-                for (let i = 0; i < pts.length; i++) {
-                  const e = pts[i][2]
-                  if (e < minEle) minEle = e
-                  if (e > maxEle) maxEle = e
-                  if (i > 0) {
-                    const diff = e - pts[i - 1][2]
-                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
-                  }
-                }
-              }
-
-              // Elevation profile SVG
-              const chartW = 280, chartH = 60
-              const elevations = hasEle ? pts.map(p => p[2]) : []
-              let pathD = ''
-              if (elevations.length > 1) {
-                const step = Math.max(1, Math.floor(elevations.length / chartW))
-                const sampled = elevations.filter((_, i) => i % step === 0)
-                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
-                const range = eMax - eMin || 1
-                pathD = sampled.map((e, i) => {
-                  const x = (i / (sampled.length - 1)) * chartW
-                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
-                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
-                }).join(' ')
-              }
-
-              return (
-                <div style={{ background: 'var(--bg-hover)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <TrendingUp size={13} color="#9ca3af" />
-                    <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
-                  </div>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                      <MapPin size={12} color="#3b82f6" />
-                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
-                    </div>
-                    {hasEle && (
-                      <>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#22c55e" />
-                          {Math.round(maxEle)} m
-                        </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>
-                          <Mountain size={12} color="#ef4444" />
-                          {Math.round(minEle)} m
-                        </div>
-                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {pathD && (
-                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" style={{ display: 'block', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                      <defs>
-                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
-                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
-                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
-                        </linearGradient>
-                      </defs>
-                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
-                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
-                    </svg>
-                  )}
-                </div>
-              )
-            } catch { return null }
-          })()}
-
-          {/* Files section */}
-          {(placeFiles.length > 0 || onFileUpload) && (
-            <div style={{ background: 'var(--bg-hover)', borderRadius: 10, overflow: 'hidden' }}>
-              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
-                <button
-                  onClick={() => setFilesExpanded(f => !f)}
-                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
-                >
-                  <FileText size={13} color="#9ca3af" />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>
-                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
-                  </span>
-                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
-                </button>
-                {onFileUpload && (
-                  <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)', padding: '2px 6px', borderRadius: 6, background: 'var(--bg-tertiary)' }}>
-                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
-                    {isUploading ? (
-                      <span style={{ fontSize: 11 }}>…</span>
-                    ) : (
-                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
-                    )}
-                  </label>
-                )}
-              </div>
-              {filesExpanded && placeFiles.length > 0 && (
-                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
-                  {placeFiles.map(f => (
-                    <button key={f.id} onClick={() => openFile(f.url).catch(() => {})} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
-                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
-                      <span style={{ fontSize: 12, color: 'var(--text-secondary)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                      {f.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-          </div>
+          <PlaceExtras openingHours={openingHours} weekdayIndex={weekdayIndex} hoursExpanded={hoursExpanded}
+            setHoursExpanded={setHoursExpanded} timeFormat={timeFormat} t={t} place={place} placeFiles={placeFiles}
+            onFileUpload={onFileUpload} filesExpanded={filesExpanded} setFilesExpanded={setFilesExpanded}
+            fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading} />
 
         </div>
 
         {/* Footer actions */}
-        <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border-faint)', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
+        <div className="border-t border-edge-faint" style={{ padding: '10px 16px', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
           {selectedDayId && (
             assignmentInDay ? (
               <ActionButton onClick={() => onRemoveAssignment(selectedDayId, assignmentInDay.id)} variant="ghost" icon={<Minus size={13} />}
@@ -752,7 +414,7 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
 
   return (
     <div style={{ borderRadius: 12, border: '1px solid var(--border-faint)', padding: '8px 10px' }}>
-      <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
+      <div className="text-content-faint" style={{ fontSize: 9, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
         <Users size={10} /> {t('inspector.participants')}
       </div>
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center' }}>
@@ -764,19 +426,18 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
               onMouseEnter={() => setHoveredId(member.id)}
               onMouseLeave={() => setHoveredId(null)}
               onClick={() => { if (canRemove) handleRemove(member.id) }}
+              className={isHovered && canRemove ? 'bg-[rgba(239,68,68,0.06)] text-[#ef4444]' : 'bg-surface-hover text-content'}
               style={{
                 display: 'flex', alignItems: 'center', gap: 4, padding: '2px 7px 2px 3px', borderRadius: 99,
                 border: `1.5px solid ${isHovered && canRemove ? 'rgba(239,68,68,0.4)' : 'var(--accent)'}`,
-                background: isHovered && canRemove ? 'rgba(239,68,68,0.06)' : 'var(--bg-hover)',
                 fontSize: 10, fontWeight: 500,
-                color: isHovered && canRemove ? '#ef4444' : 'var(--text-primary)',
                 cursor: canRemove ? 'pointer' : 'default',
                 transition: 'all 0.15s',
               }}>
-              <div style={{
-                width: 16, height: 16, borderRadius: '50%', background: 'var(--bg-tertiary)',
+              <div className="bg-surface-tertiary text-content-muted" style={{
+                width: 16, height: 16, borderRadius: '50%',
                 display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, fontWeight: 700,
-                color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
+                overflow: 'hidden', flexShrink: 0,
               }}>
                 {(member.avatar_url || member.avatar) ? <img src={member.avatar_url || `/uploads/avatars/${member.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : member.username?.[0]?.toUpperCase()}
               </div>
@@ -788,35 +449,35 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
         {/* Add button */}
         {availableToAdd.length > 0 && (
           <div style={{ position: 'relative' }}>
-            <button onClick={() => setShowAdd(!showAdd)} style={{
+            <button onClick={() => setShowAdd(!showAdd)} className="text-content-faint" style={{
               width: 22, height: 22, borderRadius: '50%', border: '1.5px dashed var(--border-primary)',
               background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              color: 'var(--text-faint)', fontSize: 12, transition: 'all 0.12s',
+              fontSize: 12, transition: 'all 0.12s',
             }}
               onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-muted)'; e.currentTarget.style.color = 'var(--text-primary)' }}
               onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-faint)' }}
             >+</button>
 
             {showAdd && (
-              <div style={{
+              <div className="bg-surface-card" style={{
                 position: 'absolute', top: 26, left: 0, zIndex: 100,
-                background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                border: '1px solid var(--border-primary)', borderRadius: 10,
                 boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 140,
               }}>
                 {availableToAdd.map(member => (
-                  <button key={member.id} onClick={() => handleAdd(member.id)} style={{
+                  <button key={member.id} onClick={() => handleAdd(member.id)} className="text-content" style={{
                     display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '5px 8px',
                     borderRadius: 6, border: 'none', background: 'none', cursor: 'pointer',
-                    fontFamily: 'inherit', fontSize: 11, color: 'var(--text-primary)', textAlign: 'left',
+                    fontFamily: 'inherit', fontSize: 11, textAlign: 'left',
                     transition: 'background 0.1s',
                   }}
                     onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
                     onMouseLeave={e => e.currentTarget.style.background = 'none'}
                   >
-                    <div style={{
-                      width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
+                    <div className="bg-surface-tertiary text-content-muted" style={{
+                      width: 18, height: 18, borderRadius: '50%',
                       display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700,
-                      color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
+                      overflow: 'hidden', flexShrink: 0,
                     }}>
                       {(member.avatar_url || member.avatar) ? <img src={member.avatar_url || `/uploads/avatars/${member.avatar}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : member.username?.[0]?.toUpperCase()}
                     </div>
@@ -831,3 +492,362 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
     </div>
   )
 }
+
+
+function PlaceInspectorHeader({ openNow, place, category, t, editingName, nameInputRef, nameValue, setNameValue,
+  commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, locale, timeFormat, onClose }: any) {
+  return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)' }}>
+          {/* Avatar with open/closed ring + tag */}
+          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
+            <div style={{
+              borderRadius: '50%', padding: 2.5,
+              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
+            }}>
+              <PlaceAvatar place={place} category={category} size={52} />
+            </div>
+            {openNow !== null && (
+              <span style={{
+                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
+                fontSize: 9, fontWeight: 500, letterSpacing: '0.02em',
+                color: 'white',
+                background: openNow ? '#16a34a' : '#dc2626',
+                padding: '1.5px 7px', borderRadius: 99,
+                whiteSpace: 'nowrap',
+                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
+              }}>
+                {openNow ? t('inspector.opened') : t('inspector.closed')}
+              </span>
+            )}
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+              {editingName ? (
+                <input
+                  ref={nameInputRef}
+                  value={nameValue}
+                  onChange={e => setNameValue(e.target.value)}
+                  onBlur={commitNameEdit}
+                  onKeyDown={handleNameKeyDown}
+                  className="text-content bg-surface-secondary"
+                  style={{ fontWeight: 600, fontSize: 15, lineHeight: '1.3', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
+                />
+              ) : (
+                <span
+                  onDoubleClick={startNameEdit}
+                  className="text-content"
+                  style={{ fontWeight: 600, fontSize: 15, lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
+                >{place.name}</span>
+              )}
+              {category && (() => {
+                const CatIcon = getCategoryIcon(category.icon)
+                return (
+                  <span style={{
+                    display: 'inline-flex', alignItems: 'center', gap: 4,
+                    fontSize: 11, fontWeight: 500,
+                    color: category.color || '#6b7280',
+                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
+                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
+                    padding: '2px 8px', borderRadius: 99,
+                  }}>
+                    <CatIcon size={10} />
+                    <span className="hidden sm:inline">{category.name}</span>
+                  </span>
+                )
+              })()}
+            </div>
+            {place.address && (
+              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
+                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
+                <span className="text-content-muted" style={{ fontSize: 12, lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
+              </div>
+            )}
+            {place.place_time && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
+                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
+                <span className="text-content-muted" style={{ fontSize: 12 }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
+              </div>
+            )}
+            {place.lat && place.lng && (
+              <div className="hidden sm:block text-content-faint" style={{ fontSize: 11, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
+                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
+              </div>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            className="bg-surface-hover"
+            style={{ width: 28, height: 28, borderRadius: '50%', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
+            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+          >
+            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
+          </button>
+        </div>
+  )
+}
+
+function PlaceReservationParticipants({ selectedAssignmentId, reservations, assignments, selectedDayId,
+  tripMembers, locale, timeFormat, t, onSetParticipants }: any) {
+  return (
+    <>
+          {(() => {
+            const res = selectedAssignmentId ? reservations.find(r => r.assignment_id === selectedAssignmentId) : null
+            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
+            const currentParticipants = assignment?.participants || []
+            const participantIds = currentParticipants.map(p => p.user_id)
+            const allJoined = currentParticipants.length === 0
+            const showParticipants = selectedAssignmentId && tripMembers.length > 1
+            if (!res && !showParticipants) return null
+            return (
+              <div className={`grid ${res && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
+                {/* Reservation */}
+                {res && (() => {
+                  const confirmed = res.status === 'confirmed'
+                  return (
+                    <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}` }}>
+                      <div className={confirmed ? 'bg-[rgba(22,163,74,0.08)]' : 'bg-[rgba(217,119,6,0.08)]'} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px' }}>
+                        <div className={confirmed ? 'bg-[#16a34a]' : 'bg-[#d97706]'} style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0 }} />
+                        <span className={confirmed ? 'text-[#16a34a]' : 'text-[#d97706]'} style={{ fontSize: 10, fontWeight: 700 }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
+                        <span style={{ flex: 1 }} />
+                        <span className="text-content" style={{ fontSize: 11, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
+                      </div>
+                      <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                        {(() => {
+                          const { date, time: startTime } = splitReservationDateTime(res.reservation_time)
+                          const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
+                          return (
+                            <>
+                              {date && (
+                                <div>
+                                  <div className="text-content-faint" style={{ fontSize: 8, fontWeight: 600, textTransform: 'uppercase' }}>{t('reservations.date')}</div>
+                                  <div className="text-content" style={{ fontSize: 10, fontWeight: 500, marginTop: 1 }}>{new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
+                                </div>
+                              )}
+                              {(startTime || endTime) && (
+                                <div>
+                                  <div className="text-content-faint" style={{ fontSize: 8, fontWeight: 600, textTransform: 'uppercase' }}>{t('reservations.time')}</div>
+                                  <div className="text-content" style={{ fontSize: 10, fontWeight: 500, marginTop: 1 }}>
+                                    {startTime ? formatTime(startTime, locale, timeFormat) : ''}
+                                    {endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
+                                  </div>
+                                </div>
+                              )}
+                            </>
+                          )
+                        })()}
+                        {res.confirmation_number && (
+                          <div>
+                            <div className="text-content-faint" style={{ fontSize: 8, fontWeight: 600, textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
+                            <div className="text-content" style={{ fontSize: 10, fontWeight: 500, marginTop: 1 }}>{res.confirmation_number}</div>
+                          </div>
+                        )}
+                      </div>
+                      {res.notes && <div className="collab-note-md text-content-faint" style={{ padding: '0 10px 6px', fontSize: 10, lineHeight: 1.4, wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{res.notes}</Markdown></div>}
+                      {(() => {
+                        const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
+                        if (!meta || Object.keys(meta).length === 0) return null
+                        const parts: string[] = []
+                        if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
+                        else if (meta.flight_number) parts.push(meta.flight_number)
+                        if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
+                        if (meta.train_number) parts.push(meta.train_number)
+                        if (meta.platform) parts.push(`Gl. ${meta.platform}`)
+                        if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
+                        if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
+                        if (parts.length === 0) return null
+                        return <div className="text-content-muted" style={{ padding: '0 10px 6px', fontSize: 10, fontWeight: 500 }}>{parts.join(' · ')}</div>
+                      })()}
+                    </div>
+                  )
+                })()}
+
+                {/* Participants */}
+                {showParticipants && (
+                  <ParticipantsBox
+                    tripMembers={tripMembers}
+                    participantIds={participantIds}
+                    allJoined={allJoined}
+                    onSetParticipants={onSetParticipants}
+                    selectedAssignmentId={selectedAssignmentId}
+                    selectedDayId={selectedDayId}
+                    t={t}
+                  />
+                )}
+              </div>
+            )
+          })()}
+    </>
+  )
+}
+
+function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpanded, timeFormat, t, place,
+  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading }: any) {
+  return (
+          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
+          {openingHours && openingHours.length > 0 && (
+            <div className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden' }}>
+              <button
+                onClick={() => setHoursExpanded(h => !h)}
+                style={{
+                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
+                  fontFamily: 'inherit',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <Clock size={13} color="#9ca3af" />
+                  <span className="text-content-secondary" style={{ fontSize: 12, fontWeight: 500 }}>
+                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
+                  </span>
+                </div>
+                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
+              </button>
+              {hoursExpanded && (
+                <div style={{ padding: '0 12px 10px' }}>
+                  {openingHours.map((line, i) => (
+                    <div key={i} className={i === weekdayIndex ? 'text-content' : 'text-content-muted'} style={{
+                      fontSize: 12,
+                      fontWeight: i === weekdayIndex ? 600 : 400,
+                      padding: '2px 0',
+                    }}>{convertHoursLine(line, timeFormat)}</div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+
+          {/* GPX Track stats */}
+          {place.route_geometry && (() => {
+            try {
+              const pts: number[][] = JSON.parse(place.route_geometry)
+              if (!pts || pts.length < 2) return null
+              const hasEle = pts[0].length >= 3
+
+              // Haversine distance
+              const toRad = (d: number) => d * Math.PI / 180
+              let totalDist = 0
+              for (let i = 1; i < pts.length; i++) {
+                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
+                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
+                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
+                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+              }
+              const distKm = totalDist / 1000
+
+              // Elevation stats
+              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
+              if (hasEle) {
+                for (let i = 0; i < pts.length; i++) {
+                  const e = pts[i][2]
+                  if (e < minEle) minEle = e
+                  if (e > maxEle) maxEle = e
+                  if (i > 0) {
+                    const diff = e - pts[i - 1][2]
+                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
+                  }
+                }
+              }
+
+              // Elevation profile SVG
+              const chartW = 280, chartH = 60
+              const elevations = hasEle ? pts.map(p => p[2]) : []
+              let pathD = ''
+              if (elevations.length > 1) {
+                const step = Math.max(1, Math.floor(elevations.length / chartW))
+                const sampled = elevations.filter((_, i) => i % step === 0)
+                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
+                const range = eMax - eMin || 1
+                pathD = sampled.map((e, i) => {
+                  const x = (i / (sampled.length - 1)) * chartW
+                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
+                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+                }).join(' ')
+              }
+
+              return (
+                <div className="bg-surface-hover" style={{ borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <TrendingUp size={13} color="#9ca3af" />
+                    <span className="text-content-secondary" style={{ fontSize: 12, fontWeight: 500 }}>{t('inspector.trackStats')}</span>
+                  </div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                    <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
+                      <MapPin size={12} color="#3b82f6" />
+                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
+                    </div>
+                    {hasEle && (
+                      <>
+                        <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
+                          <Mountain size={12} color="#22c55e" />
+                          {Math.round(maxEle)} m
+                        </div>
+                        <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
+                          <Mountain size={12} color="#ef4444" />
+                          {Math.round(minEle)} m
+                        </div>
+                        <div className="text-content-muted" style={{ fontSize: 12 }}>
+                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  {pathD && (
+                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" className="bg-surface-tertiary" style={{ display: 'block', borderRadius: 6 }}>
+                      <defs>
+                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.25" />
+                          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.02" />
+                        </linearGradient>
+                      </defs>
+                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
+                      <path d={pathD} fill="none" stroke="#3b82f6" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
+                    </svg>
+                  )}
+                </div>
+              )
+            } catch { return null }
+          })()}
+
+          {/* Files section */}
+          {(placeFiles.length > 0 || onFileUpload) && (
+            <div className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden' }}>
+              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
+                <button
+                  onClick={() => setFilesExpanded(f => !f)}
+                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
+                >
+                  <FileText size={13} color="#9ca3af" />
+                  <span className="text-content-secondary" style={{ fontSize: 12, fontWeight: 500 }}>
+                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
+                  </span>
+                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
+                </button>
+                {onFileUpload && (
+                  <label className="text-content-muted bg-surface-tertiary" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, padding: '2px 6px', borderRadius: 6 }}>
+                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
+                    {isUploading ? (
+                      <span style={{ fontSize: 11 }}>…</span>
+                    ) : (
+                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
+                    )}
+                  </label>
+                )}
+              </div>
+              {filesExpanded && placeFiles.length > 0 && (
+                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
+                  {placeFiles.map(f => (
+                    <button key={f.id} onClick={() => openFile(f.url).catch(() => {})} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
+                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
+                      <span className="text-content-secondary" style={{ fontSize: 12, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                      {f.file_size && <span className="text-content-faint" style={{ fontSize: 11, flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+          </div>
+  )
+}

client/src/components/Planner/PlacesSidebar.tsx

@@ -1,327 +1,22 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import { useState, useMemo, useEffect, useLayoutEffect, 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'
-import { useToast } from '../shared/Toast'
-import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
-import { placesApi } from '../../api/client'
-import { useTripStore } from '../../store/tripStore'
-import { useCanDo } from '../../store/permissionsStore'
-import type { Place, Category, Day, AssignmentsMap } from '../../types'
+import { ContextMenu } from '../shared/ContextMenu'
 import FileImportModal from './FileImportModal'
 import ConfirmDialog from '../shared/ConfirmDialog'
-import Tooltip from '../shared/Tooltip'
-
-interface PlacesSidebarProps {
-  tripId: number
-  places: Place[]
-  categories: Category[]
-  assignments: AssignmentsMap
-  selectedDayId: number | null
-  selectedPlaceId: number | null
-  onPlaceClick: (placeId: number | null) => void
-  onAddPlace: () => void
-  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
-  onPlacesFilterChange?: (filter: string) => void
-  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
-  initialScrollTop?: number
-  onScrollTopChange?: (top: number) => 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, onBulkDeletePlaces, onBulkDeleteConfirm, days, isMobile, onCategoryFilterChange, onPlacesFilterChange, pushUndo,
-  initialScrollTop, onScrollTopChange,
-}: PlacesSidebarProps) {
-  const { t } = useTranslation()
-  const toast = useToast()
-  const ctxMenu = useContextMenu()
-  const trip = useTripStore((s) => s.trip)
-  const loadTrip = useTripStore((s) => s.loadTrip)
-  const can = useCanDo()
-  const canEditPlaces = can('place_edit', trip)
-  const isNaverListImportEnabled = true
-
-  const [fileImportOpen, setFileImportOpen] = useState(false)
-  const [sidebarDropFile, setSidebarDropFile] = useState<File | null>(null)
-  const [sidebarDragOver, setSidebarDragOver] = useState(false)
-  const sidebarDragCounter = useRef(0)
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
-  useLayoutEffect(() => {
-    if (scrollContainerRef.current && initialScrollTop) {
-      scrollContainerRef.current.scrollTop = initialScrollTop
-    }
-  }, [])
-
-  const handleSidebarDragEnter = (e: React.DragEvent) => {
-    if (!canEditPlaces) return
-    e.preventDefault()
-    sidebarDragCounter.current++
-    setSidebarDragOver(true)
-  }
-
-  const handleSidebarDragOver = (e: React.DragEvent) => {
-    if (!canEditPlaces) return
-    e.preventDefault()
-  }
-
-  const handleSidebarDragLeave = () => {
-    sidebarDragCounter.current--
-    if (sidebarDragCounter.current === 0) setSidebarDragOver(false)
-  }
-
-  const handleSidebarDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    sidebarDragCounter.current = 0
-    setSidebarDragOver(false)
-    if (!canEditPlaces) return
-    const f = e.dataTransfer.files[0]
-    if (!f) return
-    setSidebarDropFile(f)
-    setFileImportOpen(true)
-  }
-
-  const [listImportOpen, setListImportOpen] = useState(false)
-  const [listImportUrl, setListImportUrl] = useState('')
-  const [listImportLoading, setListImportLoading] = useState(false)
-  const [listImportProvider, setListImportProvider] = useState<'google' | 'naver'>('google')
-  const availableListImportProviders: Array<'google' | 'naver'> = isNaverListImportEnabled ? ['google', 'naver'] : ['google']
-  const hasMultipleListImportProviders = availableListImportProviders.length > 1
-
-  useEffect(() => {
-    if (!isNaverListImportEnabled && listImportProvider === 'naver') {
-      setListImportProvider('google')
-    }
-  }, [isNaverListImportEnabled, listImportProvider])
-
-  const handleListImport = async () => {
-    if (!listImportUrl.trim()) return
-    setListImportLoading(true)
-    const provider = listImportProvider === 'naver' && isNaverListImportEnabled ? 'naver' : 'google'
-    try {
-      const result = provider === 'google'
-        ? await placesApi.importGoogleList(tripId, listImportUrl.trim())
-        : await placesApi.importNaverList(tripId, listImportUrl.trim())
-      await loadTrip(tripId)
-      if (result.count === 0 && result.skipped > 0) {
-        toast.warning(t('places.importAllSkipped'))
-      } else {
-        toast.success(t(provider === 'google' ? 'places.googleListImported' : 'places.naverListImported', { count: result.count, list: result.listName }))
-      }
-      setListImportOpen(false)
-      setListImportUrl('')
-      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 () => {
-          try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
-          await loadTrip(tripId)
-        })
-      }
-    } catch (err: any) {
-      toast.error(err?.response?.data?.error || t(provider === 'google' ? 'places.googleListError' : 'places.naverListError'))
-    } finally {
-      setListImportLoading(false)
-    }
-  }
-
-  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 => {
-      const next = new Set(prev)
-      if (next.has(catId)) next.delete(catId); else next.add(catId)
-      onCategoryFilterChange?.(next)
-      return next
-    })
-  }
-  const [dayPickerPlace, setDayPickerPlace] = useState(null)
-  const [catDropOpen, setCatDropOpen] = useState(false)
-  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
-      } 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
-  }), [places, filter, categoryFilters, search, plannedIds])
-
-  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])
+import { usePlacesSidebar, type PlacesSidebarProps } from './usePlacesSidebar'
+import { PlacesDropOverlay, PlacesHeader } from './PlacesSidebarHeader'
+import { PlacesSelectionBar } from './PlacesSidebarSelectionBar'
+import { PlacesList } from './PlacesSidebarList'
+import { MobileDayPickerSheet } from './PlacesSidebarMobileDayPicker'
+import { ListImportModal } from './PlacesSidebarListImportModal'
 
+const PlacesSidebar = React.memo(function PlacesSidebar(props: PlacesSidebarProps) {
+  const S = usePlacesSidebar(props)
+  const {
+    sidebarDragOver, handleSidebarDragEnter, handleSidebarDragOver, handleSidebarDragLeave, handleSidebarDrop,
+    selectMode, filtered, t, dayPickerPlace, listImportOpen,
+    fileImportOpen, setFileImportOpen, sidebarDropFile, setSidebarDropFile, tripId, pushUndo,
+    ctxMenu, isMobile, pendingDeleteIds, setPendingDeleteIds, onBulkDeleteConfirm,
+  } = S
   return (
     <div
       onDragEnter={handleSidebarDragEnter}
@@ -330,513 +25,24 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
       onDrop={handleSidebarDrop}
       style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif", position: 'relative' }}
     >
-      {sidebarDragOver && (
-        <div style={{
-          position: 'absolute', inset: 0, zIndex: 10,
-          background: 'color-mix(in srgb, var(--accent) 12%, transparent)',
-          border: '2px dashed var(--accent)',
-          borderRadius: 4,
-          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-          gap: 10, pointerEvents: 'none',
-        }}>
-          <Upload size={28} strokeWidth={1.5} color="var(--accent)" />
-          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)' }}>{t('places.sidebarDrop')}</span>
-        </div>
-      )}
+      {sidebarDragOver && <PlacesDropOverlay {...S} />}
       {/* Kopfbereich */}
-      <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
-        {canEditPlaces && <button
-          onClick={onAddPlace}
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-            width: '100%', padding: '8px 12px', borderRadius: 12, border: 'none',
-            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 13, fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'inherit', marginBottom: 10,
-          }}
-        >
-          <Plus size={14} strokeWidth={2} /> {t('places.addPlace')}
-        </button>}
-        {canEditPlaces && <>
-        <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
-          <button
-            onClick={() => setFileImportOpen(true)}
-            style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-              flex: 1, padding: '5px 12px', borderRadius: 8,
-              border: '1px dashed var(--border-primary)', background: 'none',
-              color: 'var(--text-faint)', fontSize: 11, fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            <Upload size={11} strokeWidth={2} /> {t('places.importFile')}
-          </button>
-          <button
-            onClick={() => setListImportOpen(true)}
-            style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-              flex: 1, padding: '5px 12px', borderRadius: 8,
-              border: '1px dashed var(--border-primary)', background: 'none',
-              color: 'var(--text-faint)', fontSize: 11, fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            <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 */}
-        {(() => {
-          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' }}>
-          <Search size={13} strokeWidth={1.8} color="var(--text-faint)" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
-          <input
-            type="text"
-            value={search}
-            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,
-              border: 'none', background: 'var(--bg-tertiary)', fontSize: 12, color: 'var(--text-primary)',
-              outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box',
-            }}
-          />
-          {search && (
-            <button onClick={() => setSearch('')} style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex' }}>
-              <X size={12} strokeWidth={2} color="var(--text-faint)" />
-            </button>
-          )}
-        </div>
-
-        {/* Category multi-select dropdown */}
-        {categories.length > 0 && (() => {
-          const label = categoryFilters.size === 0
-            ? t('places.allCategories')
-            : categoryFilters.size === 1
-              ? (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', display: 'flex', gap: 6, alignItems: 'stretch' }}>
-              <button onClick={() => setCatDropOpen(v => !v)} style={{
-                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',
-              }}>
-                <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,
-                  background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
-                  boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, maxHeight: 200, overflowY: 'auto',
-                }}>
-                  {categories.map(c => {
-                    const active = categoryFilters.has(String(c.id))
-                    const CatIcon = getCategoryIcon(c.icon)
-                    return (
-                      <button key={c.id} onClick={() => toggleCategoryFilter(String(c.id))} style={{
-                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-                        padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                        background: active ? 'var(--bg-hover)' : 'transparent',
-                        fontFamily: 'inherit', fontSize: 12, color: 'var(--text-primary)',
-                        textAlign: 'left',
-                      }}>
-                        <div style={{
-                          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-                          border: active ? 'none' : '1.5px solid var(--border-primary)',
-                          background: active ? (c.color || 'var(--accent)') : 'transparent',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        }}>
-                          {active && <Check size={10} strokeWidth={3} color="white" />}
-                        </div>
-                        <CatIcon size={12} strokeWidth={2} color={c.color || 'var(--text-muted)'} />
-                        <span style={{ flex: 1 }}>{c.name}</span>
-                      </button>
-                    )
-                  })}
-                  {places.some(p => p.category_id == null) && (() => {
-                    const active = categoryFilters.has('uncategorized')
-                    return (
-                      <button onClick={() => toggleCategoryFilter('uncategorized')} style={{
-                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-                        padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                        background: active ? 'var(--bg-hover)' : 'transparent',
-                        fontFamily: 'inherit', fontSize: 12, color: 'var(--text-muted)',
-                        textAlign: 'left', borderTop: '1px solid var(--border-faint)', marginTop: 2,
-                      }}>
-                        <div style={{
-                          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-                          border: active ? 'none' : '1.5px solid var(--border-primary)',
-                          background: active ? 'var(--text-faint)' : 'transparent',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                        }}>
-                          {active && <Check size={10} strokeWidth={3} color="white" />}
-                        </div>
-                        <MapPin size={12} strokeWidth={2} color="var(--text-faint)" />
-                        <span style={{ flex: 1 }}>{t('places.noCategory')}</span>
-                      </button>
-                    )
-                  })()}
-                  {categoryFilters.size > 0 && (
-                    <button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.(new Set()) }} style={{
-                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
-                      width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                      background: 'transparent', fontFamily: 'inherit', fontSize: 11, color: 'var(--text-faint)',
-                      marginTop: 2, borderTop: '1px solid var(--border-faint)',
-                    }}>
-                      <X size={10} /> {t('places.clearFilter')}
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          )
-        })()}
-      </div>
+      <PlacesHeader {...S} />
 
       {/* 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>
+        <PlacesSelectionBar {...S} />
       ) : (
         <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>
+          <span className="text-content-faint" style={{ fontSize: 11 }}>{filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}</span>
         </div>
       )}
 
       {/* Liste */}
-      <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
-        {filtered.length === 0 ? (
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
-            <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
-              {filter === 'unplanned' ? t('places.allPlanned') : t('places.noneFound')}
-            </span>
-            {canEditPlaces && <button onClick={onAddPlace} style={{ fontSize: 12, color: 'var(--text-primary)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline', fontFamily: 'inherit' }}>
-              {t('places.addPlace')}
-            </button>}
-          </div>
-        ) : (
-          filtered.map(place => {
-            const cat = categories.find(c => c.id === place.category_id)
-            const isSelected = place.id === selectedPlaceId
-            const isPlanned = plannedIds.has(place.id)
-            const inDay = inDaySet.has(place.id)
-            const isChecked = selectedIds.has(place.id)
-            return (
-              <MemoPlaceRow
-                key={place.id}
-                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}
-              />
-            )
-          })
-        )}
-      </div>
+      <PlacesList {...S} />
 
-      {dayPickerPlace && ReactDOM.createPortal(
-        <div
-          onClick={() => { setDayPickerPlace(null); setMobileShowDays(false) }}
-          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}
-        >
-          <div
-            onClick={e => e.stopPropagation()}
-            style={{ background: 'var(--bg-card)', borderRadius: '20px 20px 0 0', width: '100%', maxWidth: 500, maxHeight: '70vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', paddingBottom: 'var(--bottom-nav-h)' }}
-          >
-            <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-secondary)' }}>
-              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>{dayPickerPlace.name}</div>
-              {dayPickerPlace.address && <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2 }}>{dayPickerPlace.address}</div>}
-            </div>
-            <div style={{ overflowY: 'auto', padding: '8px 12px' }}>
-              {/* View details */}
-              <button
-                onClick={() => { onPlaceClick(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
-                style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
-              >
-                <Eye size={18} color="var(--text-muted)" /> {t('places.viewDetails')}
-              </button>
-              {/* Edit */}
-              {canEditPlaces && (
-                <button
-                  onClick={() => { onEditPlace(dayPickerPlace); setDayPickerPlace(null); setMobileShowDays(false) }}
-                  style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
-                >
-                  <Pencil size={18} color="var(--text-muted)" /> {t('common.edit')}
-                </button>
-              )}
-              {/* Assign to day */}
-              {days?.length > 0 && (
-                <>
-                  <button
-                    onClick={() => setMobileShowDays(v => !v)}
-                    style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: 'var(--text-primary)' }}
-                  >
-                    <CalendarDays size={18} color="var(--text-muted)" /> {t('places.assignToDay')}
-                    <ChevronDown size={14} style={{ marginLeft: 'auto', color: 'var(--text-faint)', transform: mobileShowDays ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
-                  </button>
-                  {mobileShowDays && (
-                    <div style={{ paddingLeft: 20 }}>
-                      {days.map((day, i) => (
-                        <button
-                          key={day.id}
-                          onClick={() => { onAssignToDay(dayPickerPlace.id, day.id); setDayPickerPlace(null); setMobileShowDays(false) }}
-                          style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '10px 14px', borderRadius: 10, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left' }}
-                        >
-                          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', flexShrink: 0 }}>{i + 1}</div>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>{day.title || t('dayplan.dayN', { n: i + 1 })}</div>
-                            {day.date && <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{new Date(day.date + 'T00:00:00Z').toLocaleDateString(undefined, { timeZone: 'UTC' })}</div>}
-                          </div>
-                          {(assignments[String(day.id)] || []).some(a => a.place?.id === dayPickerPlace.id) && <Check size={14} color="var(--text-faint)" />}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </>
-              )}
-              {/* Delete */}
-              {canEditPlaces && (
-                <button
-                  onClick={() => { onDeletePlace(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
-                  style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: '#ef4444' }}
-                >
-                  <Trash2 size={18} /> {t('common.delete')}
-                </button>
-              )}
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-      {listImportOpen && ReactDOM.createPortal(
-        <div
-          onClick={() => { setListImportOpen(false); setListImportUrl('') }}
-          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-        >
-          <div
-            onClick={e => e.stopPropagation()}
-            style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 440, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}
-          >
-            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 4 }}>
-              {t('places.importList')}
-            </div>
-            {hasMultipleListImportProviders && (
-              <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
-                {availableListImportProviders.map(provider => (
-                  <button
-                    key={provider}
-                    onClick={() => setListImportProvider(provider)}
-                    style={{
-                      padding: '6px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
-                      fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
-                      background: listImportProvider === provider ? 'var(--accent)' : 'var(--bg-tertiary)',
-                      color: listImportProvider === provider ? 'var(--accent-text)' : 'var(--text-muted)',
-                    }}
-                  >
-                    {provider === 'google' ? t('places.importGoogleList') : t('places.importNaverList')}
-                  </button>
-                ))}
-              </div>
-            )}
-            <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 16 }}>
-              {t(listImportProvider === 'google' ? 'places.googleListHint' : 'places.naverListHint')}
-            </div>
-            <input
-              type="text"
-              value={listImportUrl}
-              onChange={e => setListImportUrl(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter' && !listImportLoading) handleListImport() }}
-              placeholder={listImportProvider === 'google' ? 'https://maps.app.goo.gl/...' : 'https://naver.me/...'}
-              autoFocus
-              style={{
-                width: '100%', padding: '10px 14px', borderRadius: 10,
-                border: '1px solid var(--border-primary)', background: 'var(--bg-tertiary)',
-                fontSize: 13, color: 'var(--text-primary)', outline: 'none',
-                fontFamily: 'inherit', boxSizing: 'border-box',
-              }}
-            />
-            <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
-              <button
-                onClick={() => { setListImportOpen(false); setListImportUrl('') }}
-                style={{
-                  padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
-                  background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500,
-                  cursor: 'pointer', fontFamily: 'inherit',
-                }}
-              >
-                {t('common.cancel')}
-              </button>
-              <button
-                onClick={handleListImport}
-                disabled={!listImportUrl.trim() || listImportLoading}
-                style={{
-                  padding: '8px 16px', borderRadius: 10, border: 'none',
-                  background: !listImportUrl.trim() || listImportLoading ? 'var(--bg-tertiary)' : 'var(--accent)',
-                  color: !listImportUrl.trim() || listImportLoading ? 'var(--text-faint)' : 'var(--accent-text)',
-                  fontSize: 13, fontWeight: 500, cursor: !listImportUrl.trim() || listImportLoading ? 'default' : 'pointer',
-                  fontFamily: 'inherit',
-                }}
-              >
-                {listImportLoading ? t('common.loading') : t('common.import')}
-              </button>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      {dayPickerPlace && <MobileDayPickerSheet {...S} />}
+      {listImportOpen && <ListImportModal {...S} />}
       <FileImportModal
         isOpen={fileImportOpen}
         onClose={() => { setFileImportOpen(false); setSidebarDropFile(null) }}

client/src/components/Planner/PlacesSidebarHeader.tsx

@@ -0,0 +1,270 @@
+import { Search, Plus, X, Upload, ChevronDown, Check, MapPin } from 'lucide-react'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import Tooltip from '../shared/Tooltip'
+import type { SidebarState } from './usePlacesSidebar'
+
+export function PlacesDropOverlay({ t }: SidebarState) {
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, zIndex: 10,
+      background: 'color-mix(in srgb, var(--accent) 12%, transparent)',
+      border: '2px dashed var(--accent)',
+      borderRadius: 4,
+      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+      gap: 10, pointerEvents: 'none',
+    }}>
+      <Upload size={28} strokeWidth={1.5} color="var(--accent)" />
+      <span className="text-accent" style={{ fontSize: 13, fontWeight: 600 }}>{t('places.sidebarDrop')}</span>
+    </div>
+  )
+}
+
+export function PlacesHeader(S: SidebarState) {
+  const {
+    canEditPlaces, onAddPlace, t, setFileImportOpen, setListImportOpen, hasMultipleListImportProviders,
+    places, categories, categoryFilters, search, setSearch, plannedIds, hasTracks,
+    filter, setFilter, onPlacesFilterChange, setSelectedIds, selectMode, setSelectMode,
+    catDropOpen, setCatDropOpen, toggleCategoryFilter, setCategoryFiltersLocal, onCategoryFilterChange,
+  } = S
+  return (
+    <div className="border-b border-edge-faint" style={{ padding: '14px 16px 10px', flexShrink: 0 }}>
+      {canEditPlaces && <button
+        onClick={onAddPlace}
+        className="bg-accent text-accent-text"
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+          width: '100%', padding: '8px 12px', borderRadius: 12, border: 'none',
+          fontSize: 13, fontWeight: 500,
+          cursor: 'pointer', fontFamily: 'inherit', marginBottom: 10,
+        }}
+      >
+        <Plus size={14} strokeWidth={2} /> {t('places.addPlace')}
+      </button>}
+      {canEditPlaces && <>
+      <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
+        <button
+          onClick={() => setFileImportOpen(true)}
+          className="border border-dashed border-edge text-content-faint"
+          style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+            flex: 1, padding: '5px 12px', borderRadius: 8,
+            background: 'none', fontSize: 11, fontWeight: 500,
+            cursor: 'pointer', fontFamily: 'inherit',
+          }}
+        >
+          <Upload size={11} strokeWidth={2} /> {t('places.importFile')}
+        </button>
+        <button
+          onClick={() => setListImportOpen(true)}
+          className="border border-dashed border-edge text-content-faint"
+          style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
+            flex: 1, padding: '5px 12px', borderRadius: 8,
+            background: 'none', fontSize: 11, fontWeight: 500,
+            cursor: 'pointer', fontFamily: 'inherit',
+          }}
+        >
+          <MapPin size={11} strokeWidth={2} /> {t(hasMultipleListImportProviders ? 'places.importList' : 'places.importGoogleList')}
+        </button>
+      </div>
+      <div className="bg-edge" style={{ height: 1, margin: '2px 0 10px' }} />
+      </>}
+
+      {/* Filter-Tabs */}
+      {(() => {
+        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()) }}
+                  className={active ? 'bg-accent text-accent-text' : 'bg-surface-card text-content'}
+                  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',
+                    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 className={active ? 'text-accent-text' : 'text-content-faint'} style={{
+                    fontSize: 9, fontWeight: 600, lineHeight: 1,
+                    background: active ? 'color-mix(in srgb, var(--accent-text) 22%, transparent)' : 'var(--bg-tertiary)',
+                    padding: '1px 5px', borderRadius: 99, minWidth: 14, textAlign: 'center',
+                  }}>
+                    {counts[f.id]}
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        )
+      })()}
+
+      {/* Suchfeld */}
+      <div style={{ position: 'relative' }}>
+        <Search size={13} strokeWidth={1.8} color="var(--text-faint)" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
+        <input
+          type="text"
+          value={search}
+          onChange={e => { setSearch(e.target.value); if (selectMode) setSelectedIds(new Set()) }}
+          placeholder={t('places.search')}
+          className="bg-surface-tertiary text-content"
+          style={{
+            width: '100%', padding: '7px 30px 7px 30px', borderRadius: 10,
+            border: 'none', fontSize: 12,
+            outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box',
+          }}
+        />
+        {search && (
+          <button onClick={() => setSearch('')} style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex' }}>
+            <X size={12} strokeWidth={2} color="var(--text-faint)" />
+          </button>
+        )}
+      </div>
+
+      {/* Category multi-select dropdown */}
+      {categories.length > 0 && (() => {
+        const label = categoryFilters.size === 0
+          ? t('places.allCategories')
+          : categoryFilters.size === 1
+            ? (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', display: 'flex', gap: 6, alignItems: 'stretch' }}>
+            <button onClick={() => setCatDropOpen(v => !v)} className="bg-surface-card text-content" style={{
+              flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+              padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-primary)',
+              fontSize: 12,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}>
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+              <ChevronDown size={12} className="text-content-faint" style={{ flexShrink: 0, 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}
+                className={selectMode ? 'text-accent' : 'text-content-faint'}
+                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)',
+                  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 className="bg-surface-card" style={{
+                position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 50, marginTop: 4,
+                border: '1px solid var(--border-primary)', borderRadius: 10,
+                boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, maxHeight: 200, overflowY: 'auto',
+              }}>
+                {categories.map(c => {
+                  const active = categoryFilters.has(String(c.id))
+                  const CatIcon = getCategoryIcon(c.icon)
+                  return (
+                    <button key={c.id} onClick={() => toggleCategoryFilter(String(c.id))} className={`text-content ${active ? 'bg-surface-hover' : 'bg-transparent'}`} style={{
+                      display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                      padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 12,
+                      textAlign: 'left',
+                    }}>
+                      <div style={{
+                        width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                        border: active ? 'none' : '1.5px solid var(--border-primary)',
+                        background: active ? (c.color || 'var(--accent)') : 'transparent',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      }}>
+                        {active && <Check size={10} strokeWidth={3} color="white" />}
+                      </div>
+                      <CatIcon size={12} strokeWidth={2} color={c.color || 'var(--text-muted)'} />
+                      <span style={{ flex: 1 }}>{c.name}</span>
+                    </button>
+                  )
+                })}
+                {places.some(p => p.category_id == null) && (() => {
+                  const active = categoryFilters.has('uncategorized')
+                  return (
+                    <button onClick={() => toggleCategoryFilter('uncategorized')} className={`text-content-muted ${active ? 'bg-surface-hover' : 'bg-transparent'}`} style={{
+                      display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                      padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 12,
+                      textAlign: 'left', borderTop: '1px solid var(--border-faint)', marginTop: 2,
+                    }}>
+                      <div className={active ? 'bg-[var(--text-faint)]' : 'bg-transparent'} style={{
+                        width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                        border: active ? 'none' : '1.5px solid var(--border-primary)',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      }}>
+                        {active && <Check size={10} strokeWidth={3} color="white" />}
+                      </div>
+                      <MapPin size={12} strokeWidth={2} color="var(--text-faint)" />
+                      <span style={{ flex: 1 }}>{t('places.noCategory')}</span>
+                    </button>
+                  )
+                })()}
+                {categoryFilters.size > 0 && (
+                  <button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.(new Set()) }} className="bg-transparent text-content-faint" style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
+                    width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                    fontFamily: 'inherit', fontSize: 11,
+                    marginTop: 2, borderTop: '1px solid var(--border-faint)',
+                  }}>
+                    <X size={10} /> {t('places.clearFilter')}
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        )
+      })()}
+    </div>
+  )
+}

client/src/components/Planner/PlacesSidebarList.tsx

@@ -0,0 +1,53 @@
+import { MemoPlaceRow } from './PlacesSidebarRow'
+import type { SidebarState } from './usePlacesSidebar'
+
+export function PlacesList(S: SidebarState) {
+  const {
+    filtered, scrollContainerRef, onScrollTopChange, filter, t, canEditPlaces, onAddPlace,
+    categories, selectedPlaceId, plannedIds, inDaySet, selectedIds, selectMode, selectedDayId,
+    isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace,
+  } = S
+  return (
+    <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
+      {filtered.length === 0 ? (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
+          <span className="text-content-faint" style={{ fontSize: 13 }}>
+            {filter === 'unplanned' ? t('places.allPlanned') : t('places.noneFound')}
+          </span>
+          {canEditPlaces && <button onClick={onAddPlace} className="text-content" style={{ fontSize: 12, background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline', fontFamily: 'inherit' }}>
+            {t('places.addPlace')}
+          </button>}
+        </div>
+      ) : (
+        filtered.map(place => {
+          const cat = categories.find(c => c.id === place.category_id)
+          const isSelected = place.id === selectedPlaceId
+          const isPlanned = plannedIds.has(place.id)
+          const inDay = inDaySet.has(place.id)
+          const isChecked = selectedIds.has(place.id)
+          return (
+            <MemoPlaceRow
+              key={place.id}
+              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}
+            />
+          )
+        })
+      )}
+    </div>
+  )
+}

client/src/components/Planner/PlacesSidebarListImportModal.tsx

@@ -0,0 +1,87 @@
+import ReactDOM from 'react-dom'
+import type { SidebarState } from './usePlacesSidebar'
+
+export function ListImportModal(S: SidebarState) {
+  const {
+    setListImportOpen, setListImportUrl, t, hasMultipleListImportProviders, availableListImportProviders,
+    listImportProvider, setListImportProvider, listImportUrl, listImportLoading, handleListImport,
+  } = S
+  return ReactDOM.createPortal(
+    <div
+      onClick={() => { setListImportOpen(false); setListImportUrl('') }}
+      className="bg-[rgba(0,0,0,0.4)]"
+      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        className="bg-surface-card"
+        style={{ borderRadius: 16, width: '100%', maxWidth: 440, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}
+      >
+        <div className="text-content" style={{ fontSize: 15, fontWeight: 700, marginBottom: 4 }}>
+          {t('places.importList')}
+        </div>
+        {hasMultipleListImportProviders && (
+          <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
+            {availableListImportProviders.map(provider => (
+              <button
+                key={provider}
+                onClick={() => setListImportProvider(provider)}
+                className={listImportProvider === provider ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-muted'}
+                style={{
+                  padding: '6px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
+                  fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
+                }}
+              >
+                {provider === 'google' ? t('places.importGoogleList') : t('places.importNaverList')}
+              </button>
+            ))}
+          </div>
+        )}
+        <div className="text-content-faint" style={{ fontSize: 12, marginBottom: 16 }}>
+          {t(listImportProvider === 'google' ? 'places.googleListHint' : 'places.naverListHint')}
+        </div>
+        <input
+          type="text"
+          value={listImportUrl}
+          onChange={e => setListImportUrl(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter' && !listImportLoading) handleListImport() }}
+          placeholder={listImportProvider === 'google' ? 'https://maps.app.goo.gl/...' : 'https://naver.me/...'}
+          autoFocus
+          className="bg-surface-tertiary text-content"
+          style={{
+            width: '100%', padding: '10px 14px', borderRadius: 10,
+            border: '1px solid var(--border-primary)',
+            fontSize: 13, outline: 'none',
+            fontFamily: 'inherit', boxSizing: 'border-box',
+          }}
+        />
+        <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
+          <button
+            onClick={() => { setListImportOpen(false); setListImportUrl('') }}
+            className="text-content"
+            style={{
+              padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
+              background: 'none', fontSize: 13, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={handleListImport}
+            disabled={!listImportUrl.trim() || listImportLoading}
+            className={!listImportUrl.trim() || listImportLoading ? 'bg-surface-tertiary text-content-faint' : 'bg-accent text-accent-text'}
+            style={{
+              padding: '8px 16px', borderRadius: 10, border: 'none',
+              fontSize: 13, fontWeight: 500, cursor: !listImportUrl.trim() || listImportLoading ? 'default' : 'pointer',
+              fontFamily: 'inherit',
+            }}
+          >
+            {listImportLoading ? t('common.loading') : t('common.import')}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

client/src/components/Planner/PlacesSidebarMobileDayPicker.tsx

@@ -0,0 +1,88 @@
+import ReactDOM from 'react-dom'
+import { CalendarDays, Pencil, Trash2, ChevronDown, Check, Eye } from 'lucide-react'
+import type { SidebarState } from './usePlacesSidebar'
+
+export function MobileDayPickerSheet(S: SidebarState) {
+  const {
+    dayPickerPlace, setDayPickerPlace, setMobileShowDays, onPlaceClick, canEditPlaces, onEditPlace,
+    t, days, mobileShowDays, onAssignToDay, assignments, onDeletePlace,
+  } = S
+  return ReactDOM.createPortal(
+    <div
+      onClick={() => { setDayPickerPlace(null); setMobileShowDays(false) }}
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        className="bg-surface-card"
+        style={{ borderRadius: '20px 20px 0 0', width: '100%', maxWidth: 500, maxHeight: '70vh', display: 'flex', flexDirection: 'column', overflow: 'hidden', paddingBottom: 'var(--bottom-nav-h)' }}
+      >
+        <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-secondary)' }}>
+          <div className="text-content" style={{ fontSize: 15, fontWeight: 700 }}>{dayPickerPlace.name}</div>
+          {dayPickerPlace.address && <div className="text-content-faint" style={{ fontSize: 12, marginTop: 2 }}>{dayPickerPlace.address}</div>}
+        </div>
+        <div style={{ overflowY: 'auto', padding: '8px 12px' }}>
+          {/* View details */}
+          <button
+            onClick={() => { onPlaceClick(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
+            className="bg-transparent text-content"
+            style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', fontSize: 14 }}
+          >
+            <Eye size={18} color="var(--text-muted)" /> {t('places.viewDetails')}
+          </button>
+          {/* Edit */}
+          {canEditPlaces && (
+            <button
+              onClick={() => { onEditPlace(dayPickerPlace); setDayPickerPlace(null); setMobileShowDays(false) }}
+              className="bg-transparent text-content"
+              style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', fontSize: 14 }}
+            >
+              <Pencil size={18} color="var(--text-muted)" /> {t('common.edit')}
+            </button>
+          )}
+          {/* Assign to day */}
+          {days?.length > 0 && (
+            <>
+              <button
+                onClick={() => setMobileShowDays(v => !v)}
+                className="bg-transparent text-content"
+              style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', fontSize: 14 }}
+              >
+                <CalendarDays size={18} color="var(--text-muted)" /> {t('places.assignToDay')}
+                <ChevronDown size={14} style={{ marginLeft: 'auto', color: 'var(--text-faint)', transform: mobileShowDays ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
+              </button>
+              {mobileShowDays && (
+                <div style={{ paddingLeft: 20 }}>
+                  {days.map((day, i) => (
+                    <button
+                      key={day.id}
+                      onClick={() => { onAssignToDay(dayPickerPlace.id, day.id); setDayPickerPlace(null); setMobileShowDays(false) }}
+                      style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '10px 14px', borderRadius: 10, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left' }}
+                    >
+                      <div className="bg-surface-tertiary text-content" style={{ width: 28, height: 28, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, flexShrink: 0 }}>{i + 1}</div>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div className="text-content" style={{ fontSize: 13, fontWeight: 500 }}>{day.title || t('dayplan.dayN', { n: i + 1 })}</div>
+                        {day.date && <div className="text-content-faint" style={{ fontSize: 11 }}>{new Date(day.date + 'T00:00:00Z').toLocaleDateString(undefined, { timeZone: 'UTC' })}</div>}
+                      </div>
+                      {(assignments[String(day.id)] || []).some(a => a.place?.id === dayPickerPlace.id) && <Check size={14} color="var(--text-faint)" />}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+          {/* Delete */}
+          {canEditPlaces && (
+            <button
+              onClick={() => { onDeletePlace(dayPickerPlace.id); setDayPickerPlace(null); setMobileShowDays(false) }}
+              style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', cursor: 'pointer', background: 'transparent', fontFamily: 'inherit', textAlign: 'left', fontSize: 14, color: '#ef4444' }}
+            >
+              <Trash2 size={18} /> {t('common.delete')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

client/src/components/Planner/PlacesSidebarRow.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { Plus, Check, Route } from 'lucide-react'
+import PlaceAvatar from '../shared/PlaceAvatar'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import type { Place, Category } from '../../types'
+
+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
+}
+
+export 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 className={isChecked ? 'bg-accent' : 'bg-transparent'} style={{
+          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+          border: isChecked ? 'none' : '1.5px solid var(--border-primary)',
+          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 && <span title="Track / Route" style={{ display: 'inline-flex', flexShrink: 0 }}><Route size={11} strokeWidth={2} color="var(--text-faint)" /></span>}
+          {cat && (() => {
+            const CatIcon = getCategoryIcon(cat.icon)
+            return <span title={cat.name} style={{ display: 'inline-flex', flexShrink: 0 }}><CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} /></span>
+          })()}
+          <span className="text-content" style={{ fontSize: 13, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+            {place.name}
+          </span>
+        </div>
+        {(place.description || place.address || cat?.name) && (
+          <div style={{ marginTop: 2 }}>
+            <span className="text-content-faint" style={{ fontSize: 11, 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) }}
+            className="bg-surface-hover text-content-faint"
+            style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              width: 20, height: 20, borderRadius: 6,
+              border: 'none', cursor: 'pointer',
+              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>
+  )
+})

client/src/components/Planner/PlacesSidebarSelectionBar.tsx

@@ -0,0 +1,58 @@
+import { Check, Trash2 } from 'lucide-react'
+import Tooltip from '../shared/Tooltip'
+import type { SidebarState } from './usePlacesSidebar'
+
+export function PlacesSelectionBar(S: SidebarState) {
+  const { t, selectedIds, filtered, setSelectedIds, isMobile, setPendingDeleteIds, onBulkDeletePlaces } = S
+  return (
+    <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 className="text-accent" style={{ flex: 1, 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')}
+        className="bg-transparent text-content-muted"
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: 24, height: 24, borderRadius: 6, border: 'none',
+          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')}
+        className={selectedIds.size > 0 ? 'bg-transparent text-[#ef4444]' : 'bg-transparent text-content-faint'}
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: 24, height: 24, borderRadius: 6, border: 'none',
+          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>
+  )
+}

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

@@ -120,7 +120,7 @@ describe('ReservationModal', () => {
     render(<ReservationModal {...defaultProps} />);
     const eventBtn = screen.getByRole('button', { name: /Event/i });
     await userEvent.click(eventBtn);
-    expect(eventBtn).toHaveStyle({ background: 'var(--text-primary)' });
+    expect(eventBtn).toHaveClass('bg-[var(--text-primary)]');
   });
 
   it('FE-PLANNER-RESMODAL-008: hotel type shows check-in/check-out time fields', async () => {
@@ -607,7 +607,7 @@ describe('ReservationModal', () => {
     seedStore(useTripStore, {
       trip: buildTrip({ id: 1 }),
       budgetItems: [
-        { id: 1, trip_id: 1, name: 'Flight ticket', amount: 300, currency: 'EUR', category: 'Transport', paid_by: null, persons: 1, members: [], expense_date: null },
+        { id: 1, trip_id: 1, name: 'Flight ticket', total_price: 300, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
       ],
     });
     render(<ReservationModal {...defaultProps} />);
@@ -640,7 +640,7 @@ describe('ReservationModal', () => {
     seedStore(useTripStore, {
       trip: buildTrip({ id: 1 }),
       budgetItems: [
-        { id: 1, trip_id: 1, name: 'Ticket', amount: 100, currency: 'EUR', category: 'Transport', paid_by: null, persons: 1, members: [], expense_date: null },
+        { id: 1, trip_id: 1, name: 'Ticket', total_price: 100, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
       ],
     });
     render(<ReservationModal {...defaultProps} />);

client/src/components/Planner/ReservationModal.tsx

@@ -49,14 +49,14 @@ function buildAssignmentOptions(days, assignments, t, locale) {
 interface ReservationModalProps {
   isOpen: boolean
   onClose: () => void
-  onSave: (data: Record<string, string | number | null>) => Promise<void> | void
+  onSave: (data: Record<string, string | number | null> & { title: string }) => Promise<Reservation | undefined>
   reservation: Reservation | null
   days: Day[]
   places: Place[]
   assignments: AssignmentsMap
   selectedDayId: number | null
   files?: TripFile[]
-  onFileUpload?: (fd: FormData) => Promise<void>
+  onFileUpload?: (fd: FormData) => Promise<unknown>
   onFileDelete: (fileId: number) => Promise<void>
   accommodations?: Accommodation[]
   defaultAssignmentId?: number | null
@@ -190,7 +190,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         if (form.budget_category) metadata.budget_category = form.budget_category
       }
 
-      const saveData: Record<string, any> = {
+      const saveData: Record<string, any> & { title: string } = {
         title: form.title, type: form.type, status: form.status,
         reservation_time: form.type === 'hotel' ? null : (form.reservation_time || null),
         reservation_end_time: form.type === 'hotel' ? null : (combinedEndTime || null),
@@ -223,7 +223,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         for (const file of pendingFiles) {
           const fd = new FormData()
           fd.append('file', file)
-          fd.append('reservation_id', saved.id)
+          fd.append('reservation_id', String(saved.id))
           fd.append('description', form.title)
           await onFileUpload(fd)
         }
@@ -241,7 +241,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       try {
         const fd = new FormData()
         fd.append('file', file)
-        fd.append('reservation_id', reservation.id)
+        fd.append('reservation_id', String(reservation.id))
         fd.append('description', reservation.title)
         await onFileUpload(fd)
         toast.success(t('reservations.toast.fileUploaded'))
@@ -265,12 +265,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       )
     : []
 
-  const inputStyle = {
-    width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10,
-    padding: '8px 12px', fontSize: 13, fontFamily: 'inherit',
-    outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)', background: 'var(--bg-input)',
-  }
-  const labelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.03em' }
+  const inputClass = 'w-full border border-edge rounded-[10px] px-[12px] py-[8px] text-[13px] font-[inherit] outline-none box-border text-content bg-surface-input'
+  const labelClass = 'block text-[11px] font-semibold text-content-faint mb-[5px] uppercase tracking-[0.03em]'
 
   return (
     <Modal
@@ -280,10 +276,10 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       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)' }}>
+          <button type="button" onClick={onClose} className="text-content-muted" style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit' }}>
             {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 }}>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim() || isEndBeforeStart} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 'none', 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>
@@ -293,16 +289,14 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
 
         {/* Type selector */}
         <div>
-          <label style={labelStyle}>{t('reservations.bookingType')}</label>
+          <label className={labelClass}>{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={{
+              <button key={value} type="button" onClick={() => set('type', value)} className={form.type === value ? 'bg-[var(--text-primary)] text-[var(--bg-primary)]' : 'bg-surface-card text-content-muted'} 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>
@@ -312,16 +306,16 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
 
         {/* Title */}
         <div>
-          <label style={labelStyle}>{t('reservations.titleLabel')} *</label>
+          <label className={labelClass}>{t('reservations.titleLabel')} *</label>
           <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
-            placeholder={t('reservations.titlePlaceholder')} style={inputStyle} />
+            placeholder={t('reservations.titlePlaceholder')} className={inputClass} />
         </div>
 
         {/* Assignment Picker (hidden for hotels) */}
         {form.type !== 'hotel' && assignmentOptions.length > 0 && (
           <div>
             <div style={{ flex: 1, minWidth: 0 }}>
-              <label style={labelStyle}>
+              <label className={labelClass}>
                 <Link2 size={10} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
                 {t('reservations.linkAssignment')}
               </label>
@@ -354,7 +348,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           <>
             <div style={{ display: 'flex', gap: 8 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.date')}</label>
+                <label className={labelClass}>{t('reservations.date')}</label>
                 <CustomDatePicker
                   value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
                   onChange={d => {
@@ -364,7 +358,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 />
               </div>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.startTime')}</label>
+                <label className={labelClass}>{t('reservations.startTime')}</label>
                 <CustomTimePicker
                   value={(() => { const [, tm] = (form.reservation_time || '').split('T'); return tm || '' })()}
                   onChange={tm => {
@@ -378,19 +372,19 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
             </div>
             <div style={{ display: 'flex', gap: 8 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.endDate')}</label>
+                <label className={labelClass}>{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>
+                <label className={labelClass}>{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>
+              <div className="text-[#ef4444]" style={{ fontSize: 11, marginTop: -6 }}>{t('reservations.validation.endBeforeStart')}</div>
             )}
           </>
         )}
@@ -398,21 +392,21 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
         {/* Location */}
         {form.type !== 'hotel' && (
           <div>
-            <label style={labelStyle}>{t('reservations.locationAddress')}</label>
+            <label className={labelClass}>{t('reservations.locationAddress')}</label>
             <input type="text" value={form.location} onChange={e => set('location', e.target.value)}
-              placeholder={t('reservations.locationPlaceholder')} style={inputStyle} />
+              placeholder={t('reservations.locationPlaceholder')} className={inputClass} />
           </div>
         )}
 
         {/* Booking Code + Status */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
-            <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
+            <label className={labelClass}>{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} />
+              placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
           </div>
           <div>
-            <label style={labelStyle}>{t('reservations.status')}</label>
+            <label className={labelClass}>{t('reservations.status')}</label>
             <CustomSelect
               value={form.status}
               onChange={value => set('status', value)}
@@ -430,7 +424,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           <>
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
               <div>
-                <label style={labelStyle}>{t('reservations.meta.hotelPlace')}</label>
+                <label className={labelClass}>{t('reservations.meta.hotelPlace')}</label>
                 <CustomSelect
                   value={form.hotel_place_id}
                   onChange={value => {
@@ -456,7 +450,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 />
               </div>
               <div>
-                <label style={labelStyle}>{t('reservations.meta.fromDay')}</label>
+                <label className={labelClass}>{t('reservations.meta.fromDay')}</label>
                 <CustomSelect
                   value={form.hotel_start_day}
                   onChange={value => setForm(prev => ({
@@ -479,7 +473,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 />
               </div>
               <div>
-                <label style={labelStyle}>{t('reservations.meta.toDay')}</label>
+                <label className={labelClass}>{t('reservations.meta.toDay')}</label>
                 <CustomSelect
                   value={form.hotel_end_day}
                   onChange={value => setForm(prev => ({
@@ -504,15 +498,15 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
               <div>
-                <label style={labelStyle}>{t('reservations.meta.checkIn')}</label>
+                <label className={labelClass}>{t('reservations.meta.checkIn')}</label>
                 <CustomTimePicker value={form.meta_check_in_time} onChange={v => set('meta_check_in_time', v)} />
               </div>
               <div>
-                <label style={labelStyle}>{t('reservations.meta.checkInUntil')}</label>
+                <label className={labelClass}>{t('reservations.meta.checkInUntil')}</label>
                 <CustomTimePicker value={form.meta_check_in_end_time} onChange={v => set('meta_check_in_end_time', v)} />
               </div>
               <div>
-                <label style={labelStyle}>{t('reservations.meta.checkOut')}</label>
+                <label className={labelClass}>{t('reservations.meta.checkOut')}</label>
                 <CustomTimePicker value={form.meta_check_out_time} onChange={v => set('meta_check_out_time', v)} />
               </div>
             </div>
@@ -521,70 +515,70 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
 
         {/* Notes */}
         <div>
-          <label style={labelStyle}>{t('reservations.notes')}</label>
+          <label className={labelClass}>{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 }} />
+            className={inputClass} style={{ resize: 'none', lineHeight: 1.5 }} />
         </div>
 
         {/* Files */}
         <div>
-          <label style={labelStyle}>{t('files.title')}</label>
+          <label className={labelClass}>{t('files.title')}</label>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
             {attachedFiles.map(f => (
-              <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <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>
+              <div key={f.id} className="bg-surface-secondary" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 8 }}>
+                <FileText size={12} className="text-content-muted" style={{ flexShrink: 0 }} />
+                <span className="text-content-secondary" style={{ flex: 1, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                <a href="#" onClick={(e) => { e.preventDefault(); openFile(f.url).catch(() => {}) }} className="text-content-faint" style={{ display: 'flex', flexShrink: 0, cursor: 'pointer' }}><ExternalLink size={11} /></a>
                 <button type="button" onClick={async () => {
                   if (f.reservation_id === reservation?.id) {
-                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
+                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch { toast.error(t('reservations.toast.updateError')) }
                   }
                   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)
                     if (link) await apiClient.delete(`/trips/${tripId}/files/${f.id}/link/${link.id}`)
-                  } catch {}
+                  } catch { toast.error(t('reservations.toast.updateError')) }
                   setLinkedFileIds(prev => prev.filter(id => id !== f.id))
                   if (tripId) loadFiles(tripId)
-                }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
+                }} className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 0, flexShrink: 0 }}>
                   <X size={11} />
                 </button>
               </div>
             ))}
             {pendingFiles.map((f, i) => (
-              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
+              <div key={i} className="bg-surface-secondary" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 8 }}>
+                <FileText size={12} className="text-content-muted" style={{ flexShrink: 0 }} />
+                <span className="text-content-secondary" style={{ flex: 1, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
                 <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))}
-                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
+                  className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 0, flexShrink: 0 }}>
                   <X size={11} />
                 </button>
               </div>
             ))}
             <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx,.txt,image/*" style={{ display: 'none' }} onChange={handleFileChange} />
             <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} style={{
+              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} className="text-content-faint" style={{
                 display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
                 border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                fontSize: 11, color: 'var(--text-faint)', cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
+                fontSize: 11, cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
               }}>
                 <Paperclip size={11} />
                 {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
               </button>}
               {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={{
+                  <button type="button" onClick={() => setShowFilePicker(v => !v)} className="text-content-faint" style={{
                     display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
                     border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                    fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
+                    fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
                   }}>
                     <Link2 size={11} /> {t('reservations.linkExisting')}
                   </button>
                   {showFilePicker && (
-                    <div style={{
+                    <div className="bg-surface-card" style={{
                       position: 'absolute', bottom: '100%', left: 0, marginBottom: 4, zIndex: 50,
-                      background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                      border: '1px solid var(--border-primary)', borderRadius: 10,
                       boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 220, maxHeight: 200, overflowY: 'auto',
                     }}>
                       {files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).map(f => (
@@ -594,16 +588,17 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                             setLinkedFileIds(prev => [...prev, f.id])
                             setShowFilePicker(false)
                             if (tripId) loadFiles(tripId)
-                          } catch {}
+                          } catch { toast.error(t('reservations.toast.updateError')) }
                         }}
+                          className="text-content-secondary"
                           style={{
                             display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px',
                             background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, fontFamily: 'inherit',
-                            color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
+                            borderRadius: 7, textAlign: 'left',
                           }}
                           onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
                           onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-                          <FileText size={12} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                          <FileText size={12} className="text-content-faint" style={{ flexShrink: 0 }} />
                           <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
                         </button>
                       ))}
@@ -620,15 +615,15 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
           <>
             <div style={{ display: 'flex', gap: 8 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.price')}</label>
+                <label className={labelClass}>{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} />
+                  className={inputClass} />
               </div>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
+                <label className={labelClass}>{t('reservations.budgetCategory')}</label>
                 <CustomSelect
                   value={form.budget_category}
                   onChange={v => set('budget_category', v)}
@@ -642,7 +637,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
               </div>
             </div>
             {form.price && parseFloat(form.price) > 0 && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
+              <div className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
                 {t('reservations.budgetHint')}
               </div>
             )}

client/src/components/Planner/ReservationsPanel.tsx

@@ -54,15 +54,9 @@ function buildAssignmentLookup(days, assignments) {
   return map
 }
 
-/* ── Shared field label style ── */
-const fieldLabelStyle: React.CSSProperties = {
-  fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em',
-  color: 'var(--text-faint)', marginBottom: 5,
-}
-const fieldValueStyle: React.CSSProperties = {
-  fontSize: 13, fontWeight: 500, color: 'var(--text-primary)',
-  padding: '8px 10px', background: 'var(--bg-tertiary)', borderRadius: 10,
-}
+/* ── Shared field label/value styles ── */
+const fieldLabelClass = 'text-[10px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[5px]'
+const fieldValueClass = 'text-[13px] font-medium text-content px-[10px] py-[8px] bg-surface-tertiary rounded-[10px]'
 
 interface ReservationCardProps {
   r: Reservation
@@ -129,9 +123,9 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
       <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,
+          <span className="text-content-faint bg-surface-secondary" style={{
+            fontSize: 10, fontWeight: 600,
+            padding: '1px 6px', borderRadius: 999,
           }}>{badge}</span>
         )}
       </span>
@@ -139,10 +133,9 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
   }
 
   return (
-    <div style={{
+    <div className="bg-surface-card" style={{
       borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column',
       border: `1px solid ${confirmed ? 'rgba(22,163,74,0.25)' : 'rgba(217,119,6,0.25)'}`,
-      background: 'var(--bg-card)',
       transition: 'box-shadow 0.15s ease',
     }}
       onMouseEnter={e => e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'}
@@ -150,35 +143,32 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
     >
       {/* Header — wraps to a second row on narrow screens so the status/category chips
           never collide with the title. */}
-      <div style={{
+      <div className={confirmed ? 'bg-[rgba(22,163,74,0.06)]' : 'bg-[rgba(217,119,6,0.06)]'} 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, flexWrap: 'wrap' }}>
-          <span style={{
+          <span className={confirmed ? 'text-[#16a34a]' : 'text-[#d97706]'} style={{
             display: 'inline-flex', alignItems: 'center', gap: 6,
-            fontSize: 12, fontWeight: 600, color: confirmed ? '#16a34a' : '#d97706',
+            fontSize: 12, fontWeight: 600,
           }}>
-            <span style={{ width: 7, height: 7, borderRadius: '50%', flexShrink: 0, background: confirmed ? '#16a34a' : '#d97706' }} />
+            <span className={confirmed ? 'bg-[#16a34a]' : 'bg-[#d97706]'} style={{ width: 7, height: 7, borderRadius: '50%', flexShrink: 0 }} />
             {confirmed ? t('reservations.confirmed') : t('reservations.pending')}
           </span>
-          <span style={{
+          <span className="text-content-muted bg-surface-secondary" style={{
             display: 'inline-flex', alignItems: 'center', gap: 5,
-            fontSize: 12, color: 'var(--text-muted)',
+            fontSize: 12,
             padding: '3px 8px', borderRadius: 6,
-            background: 'var(--bg-secondary)',
           }}>
             <TypeIcon size={12} style={{ color: typeInfo.color }} />
             {t(typeInfo.labelKey)}
           </span>
           {r.needs_review ? (
-            <span style={{
+            <span className="text-[#b45309] bg-[rgba(245,158,11,0.12)]" style={{
               display: 'inline-flex', alignItems: 'center', gap: 4,
-              fontSize: 11, fontWeight: 600, color: '#b45309',
+              fontSize: 11, fontWeight: 600,
               padding: '3px 8px', borderRadius: 6,
-              background: 'rgba(245,158,11,0.12)',
             }} title={t('reservations.needsReviewHint')}>
               <AlertCircle size={11} />
               {t('reservations.needsReview')}
@@ -186,15 +176,15 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           ) : null}
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          <span style={{
-            fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginRight: 6,
+          <span className="text-content" style={{
+            fontSize: 13, fontWeight: 600, marginRight: 6,
             maxWidth: 140, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
           }}>{r.title}</span>
           {canEdit && (
-            <button onClick={() => onEdit(r)} title={t('common.edit')} style={{
-              appearance: 'none', border: 'none', background: 'transparent',
+            <button onClick={() => onEdit(r)} title={t('common.edit')} className="bg-transparent text-content-faint" style={{
+              appearance: 'none', border: 'none',
               width: 26, height: 26, borderRadius: 6, display: 'grid', placeItems: 'center',
-              cursor: 'pointer', color: 'var(--text-faint)', flexShrink: 0,
+              cursor: 'pointer', flexShrink: 0,
             }}
               onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0,0,0,0.05)'; e.currentTarget.style.color = 'var(--text-primary)' }}
               onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-faint)' }}>
@@ -202,10 +192,10 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
             </button>
           )}
           {canEdit && (
-            <button onClick={() => setShowDeleteConfirm(true)} title={t('common.delete')} style={{
-              appearance: 'none', border: 'none', background: 'transparent',
+            <button onClick={() => setShowDeleteConfirm(true)} title={t('common.delete')} className="bg-transparent text-content-faint" style={{
+              appearance: 'none', border: 'none',
               width: 26, height: 26, borderRadius: 6, display: 'grid', placeItems: 'center',
-              cursor: 'pointer', color: 'var(--text-faint)', flexShrink: 0,
+              cursor: 'pointer', flexShrink: 0,
             }}
               onMouseEnter={e => { e.currentTarget.style.background = 'rgba(239,68,68,0.08)'; e.currentTarget.style.color = '#ef4444' }}
               onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-faint)' }}>
@@ -220,11 +210,11 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         {/* 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' }}>
+            <div className={fieldLabelClass}>{t('reservations.date')}</div>
+            <div className={fieldValueClass} style={{ 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} /></>
+                <><span className="text-content-faint">–</span><DayLabel day={endDay} /></>
               )}
             </div>
           </div>
@@ -234,8 +224,8 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           <div style={{ display: 'grid', gap: 10, gridTemplateColumns: hasDate && hasTime ? '1fr 1fr' : '1fr' }}>
             {hasDate && (
               <div>
-                <div style={fieldLabelStyle}>{t('reservations.date')}</div>
-                <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
+                <div className={fieldLabelClass}>{t('reservations.date')}</div>
+                <div className={`${fieldValueClass} text-center`}>
                   {fmtDate(startDt.date!)}
                   {endDt.date && endDt.date !== startDt.date && (
                     <> – {fmtDate(endDt.date)}</>
@@ -245,8 +235,8 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
             )}
             {hasTime && (
               <div>
-                <div style={fieldLabelStyle}>{t('reservations.time')}</div>
-                <div style={{ ...fieldValueStyle, textAlign: 'center' }}>
+                <div className={fieldLabelClass}>{t('reservations.time')}</div>
+                <div className={`${fieldValueClass} text-center`}>
                   {formatTime(startDt.time, locale, timeFormat)}
                   {endDt.time ? ` – ${formatTime(endDt.time, locale, timeFormat)}` : ''}
                 </div>
@@ -257,13 +247,13 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         {/* Booking code */}
         {hasCode && (
           <div>
-            <div style={fieldLabelStyle}>{t('reservations.confirmationCode')}</div>
+            <div className={fieldLabelClass}>{t('reservations.confirmationCode')}</div>
             <div
               onMouseEnter={() => blurCodes && setCodeRevealed(true)}
               onMouseLeave={() => blurCodes && setCodeRevealed(false)}
               onClick={() => blurCodes && setCodeRevealed(v => !v)}
+              className={`${fieldValueClass} text-center`}
               style={{
-                ...fieldValueStyle, textAlign: 'center',
                 fontFamily: '"SF Mono", "JetBrains Mono", Menlo, monospace', fontSize: 12.5,
                 filter: blurCodes && !codeRevealed ? 'blur(5px)' : 'none',
                 cursor: blurCodes ? 'pointer' : 'default',
@@ -281,11 +271,10 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
           const to = eps.find(e => e.role === 'to')
           if (!from || !to) return null
           return (
-            <div style={{
+            <div className="bg-surface-tertiary text-content" 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)',
+              fontSize: 12.5,
             }}>
               <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{from.name}</span>
               <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />
@@ -314,8 +303,8 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
             <div style={{ display: 'grid', gap: 10, gridTemplateColumns: cells.length > 1 ? `repeat(${Math.min(cells.length, 3)}, 1fr)` : '1fr' }}>
               {cells.map((c, i) => (
                 <div key={i}>
-                  <div style={fieldLabelStyle}>{c.label}</div>
-                  <div style={{ ...fieldValueStyle, textAlign: 'center' }}>{c.value}</div>
+                  <div className={fieldLabelClass}>{c.label}</div>
+                  <div className={`${fieldValueClass} text-center`}>{c.value}</div>
                 </div>
               ))}
             </div>
@@ -325,27 +314,27 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         {/* Location / Accommodation / Assignment */}
         {r.location && (
           <div>
-            <div style={fieldLabelStyle}>{t('reservations.locationAddress')}</div>
-            <div style={{ ...fieldValueStyle, display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400 }}>
-              <MapPin size={13} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+            <div className={fieldLabelClass}>{t('reservations.locationAddress')}</div>
+            <div className={fieldValueClass} style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400 }}>
+              <MapPin size={13} className="text-content-faint" style={{ flexShrink: 0 }} />
               <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.location}</span>
             </div>
           </div>
         )}
         {r.accommodation_name && (
           <div>
-            <div style={fieldLabelStyle}>{t('reservations.meta.linkAccommodation')}</div>
-            <div style={{ ...fieldValueStyle, display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400 }}>
-              <Hotel size={13} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+            <div className={fieldLabelClass}>{t('reservations.meta.linkAccommodation')}</div>
+            <div className={fieldValueClass} style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400 }}>
+              <Hotel size={13} className="text-content-faint" style={{ flexShrink: 0 }} />
               <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.accommodation_name}</span>
             </div>
           </div>
         )}
         {linked && (
           <div>
-            <div style={fieldLabelStyle}>{t('reservations.linkAssignment')}</div>
-            <div style={{ ...fieldValueStyle, display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400 }}>
-              <Link2 size={13} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+            <div className={fieldLabelClass}>{t('reservations.linkAssignment')}</div>
+            <div className={fieldValueClass} style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400 }}>
+              <Link2 size={13} className="text-content-faint" style={{ flexShrink: 0 }} />
               <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {linked.dayTitle || t('dayplan.dayN', { n: linked.dayNumber })} — {linked.placeName}
                 {linked.startTime ? ` · ${linked.startTime}${linked.endTime ? ' – ' + linked.endTime : ''}` : ''}
@@ -357,8 +346,8 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         {/* Notes */}
         {r.notes && (
           <div>
-            <div style={fieldLabelStyle}>{t('reservations.notes')}</div>
-            <div className="collab-note-md" style={{ ...fieldValueStyle, fontWeight: 400, lineHeight: 1.5, wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+            <div className={fieldLabelClass}>{t('reservations.notes')}</div>
+            <div className={`collab-note-md ${fieldValueClass}`} style={{ fontWeight: 400, lineHeight: 1.5, wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
               <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{r.notes}</Markdown>
             </div>
           </div>
@@ -367,11 +356,11 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         {/* Files */}
         {attachedFiles.length > 0 && (
           <div>
-            <div style={fieldLabelStyle}>{t('files.title')}</div>
-            <div style={{ ...fieldValueStyle, display: 'flex', flexDirection: 'column', gap: 4, padding: '6px 10px' }}>
+            <div className={fieldLabelClass}>{t('files.title')}</div>
+            <div className={fieldValueClass} style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '6px 10px' }}>
               {attachedFiles.map(f => (
                 <a key={f.id} href="#" onClick={(e) => { e.preventDefault(); openFile(f.url).catch(() => {}) }} style={{ display: 'flex', alignItems: 'center', gap: 5, textDecoration: 'none', cursor: 'pointer' }}>
-                  <FileText size={11} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                  <FileText size={11} className="text-content-faint" style={{ flexShrink: 0 }} />
                   <span style={{ fontSize: 12, color: 'var(--text-muted)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
                 </a>
               ))}
@@ -382,37 +371,37 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
 
       {/* Delete confirmation */}
       {showDeleteConfirm && ReactDOM.createPortal(
-        <div style={{
+        <div className="bg-[rgba(0,0,0,0.3)]" style={{
           position: 'fixed', inset: 0, zIndex: 1000,
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(3px)',
+          backdropFilter: 'blur(3px)',
         }} onClick={() => setShowDeleteConfirm(false)}>
-          <div style={{
-            width: 340, background: 'var(--bg-card)', borderRadius: 16,
+          <div className="bg-surface-card" style={{
+            width: 340, borderRadius: 16,
             boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
             display: 'flex', flexDirection: 'column', gap: 12,
           }} onClick={e => e.stopPropagation()}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <div style={{
+              <div className="bg-[rgba(239,68,68,0.12)]" style={{
                 width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                borderRadius: '50%', background: 'rgba(239,68,68,0.12)',
+                borderRadius: '50%',
               }}>
                 <Trash2 size={18} strokeWidth={1.8} color="#ef4444" />
               </div>
-              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
+              <div className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>
                 {t('reservations.confirm.deleteTitle')}
               </div>
             </div>
-            <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
+            <div className="text-content-secondary" style={{ fontSize: 12.5, lineHeight: 1.5 }}>
               {t('reservations.confirm.deleteBody', { name: r.title })}
             </div>
             <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
-              <button onClick={() => setShowDeleteConfirm(false)} style={{
+              <button onClick={() => setShowDeleteConfirm(false)} className="text-content-muted" style={{
                 fontSize: 12, background: 'none', border: '1px solid var(--border-primary)',
-                borderRadius: 8, padding: '6px 14px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit',
+                borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit',
               }}>{t('common.cancel')}</button>
-              <button onClick={handleDelete} style={{
-                fontSize: 12, background: '#ef4444', color: 'white',
+              <button onClick={handleDelete} className="bg-[#ef4444] text-white" style={{
+                fontSize: 12,
                 border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
               }}>{t('common.confirm')}</button>
             </div>
@@ -452,10 +441,9 @@ function Section({ title, count, children, defaultOpen = true, accent, storageKe
         userSelect: 'none',
       }}>
         {open ? <ChevronDown size={14} style={{ color: 'var(--text-faint)' }} /> : <ChevronRight size={14} style={{ color: 'var(--text-faint)' }} />}
-        <span style={{ fontWeight: 600, fontSize: 12, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{title}</span>
-        <span style={{
+        <span className="text-content-muted" style={{ fontWeight: 600, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{title}</span>
+        <span className="bg-surface-tertiary text-content-faint" style={{
           fontSize: 11, fontWeight: 600, padding: '2px 7px', borderRadius: 99,
-          background: 'var(--bg-tertiary)', color: 'var(--text-faint)',
           minWidth: 20, textAlign: 'center',
         }}>{count}</span>
       </button>
@@ -527,12 +515,12 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
       {/* Unified toolbar */}
       <div style={{ padding: '24px 28px 0' }} className="max-md:!px-4 max-md:!pt-4">
-        <div style={{
-          background: 'var(--bg-tertiary)', borderRadius: 18,
+        <div className="bg-surface-tertiary" style={{
+          borderRadius: 18,
           padding: '14px 16px 14px 22px',
           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 }}>
+          <h2 className="text-content" style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', flexShrink: 0 }}>
             {t(titleKey)}
           </h2>
 
@@ -542,22 +530,19 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
               <div className="hidden md:inline-flex" style={{ gap: 4, flexWrap: 'wrap', flex: 1, minWidth: 0 }}>
                 <button
                   onClick={() => { setTypeFilters(new Set()); sessionStorage.removeItem(storageKey) }}
+                  className={typeFilters.size === 0 ? 'bg-surface-card text-content' : 'bg-transparent text-content-muted'}
                   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: typeFilters.size === 0 ? 'var(--bg-card)' : 'transparent',
-                    color: typeFilters.size === 0 ? 'var(--text-primary)' : 'var(--text-muted)',
                     fontWeight: typeFilters.size === 0 ? 500 : 400,
                     boxShadow: typeFilters.size === 0 ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
                     transition: 'all 0.15s ease',
                   }}
                 >
                   {t('common.all')}
-                  <span style={{
+                  <span className={`text-content-faint ${typeFilters.size === 0 ? 'bg-surface-tertiary' : 'bg-[rgba(0,0,0,0.06)]'}`} style={{
                     fontSize: 10, fontWeight: 600,
-                    background: typeFilters.size === 0 ? 'var(--bg-tertiary)' : 'rgba(0,0,0,0.06)',
-                    color: 'var(--text-faint)',
                     padding: '1px 6px', borderRadius: 99, minWidth: 16, textAlign: 'center',
                   }}>{reservations.length}</span>
                 </button>
@@ -568,12 +553,11 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
                     <button
                       key={opt.value}
                       onClick={() => toggleTypeFilter(opt.value)}
+                      className={active ? 'bg-surface-card text-content' : 'bg-transparent text-content-muted'}
                       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',
@@ -581,10 +565,8 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
                     >
                       <Icon size={13} style={{ color: active ? opt.color : 'var(--text-faint)' }} />
                       {t(opt.labelKey)}
-                      <span style={{
+                      <span className={`text-content-faint ${active ? 'bg-surface-tertiary' : 'bg-[rgba(0,0,0,0.06)]'}`} 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',
                       }}>{typeCounts[opt.value] || 0}</span>
                     </button>
@@ -595,11 +577,11 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
           )}
 
           {canEdit && (
-            <button onClick={onAdd} style={{
+            <button onClick={onAdd} className="bg-accent text-accent-text" style={{
               appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
               display: 'inline-flex', alignItems: 'center', gap: 6,
               padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
-              background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
+              flexShrink: 0,
               marginLeft: 'auto',
               transition: 'opacity 0.15s ease',
             }}
@@ -617,13 +599,13 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
       <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px 80px' }} className="max-md:!px-4 max-md:!pt-4">
         {total === 0 && reservations.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px' }}>
-            <BookMarked size={36} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
-            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('reservations.empty')}</p>
-            <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: 0 }}>{t('reservations.emptyHint')}</p>
+            <BookMarked size={36} className="text-content-faint" style={{ display: 'block', margin: '0 auto 12px' }} />
+            <p className="text-content-secondary" style={{ fontSize: 14, fontWeight: 600, margin: '0 0 4px' }}>{t('reservations.empty')}</p>
+            <p className="text-content-faint" style={{ fontSize: 12, margin: 0 }}>{t('reservations.emptyHint')}</p>
           </div>
         ) : total === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px' }}>
-            <p style={{ fontSize: 13, color: 'var(--text-faint)' }}>{t('places.noneFound')}</p>
+            <p className="text-content-faint" style={{ fontSize: 13 }}>{t('places.noneFound')}</p>
           </div>
         ) : (
           <>

client/src/components/Planner/TransportModal.tsx

@@ -92,12 +92,12 @@ const defaultForm = {
 interface TransportModalProps {
   isOpen: boolean
   onClose: () => void
-  onSave: (data: Record<string, any>) => Promise<Reservation | undefined>
+  onSave: (data: Record<string, any> & { title: string }) => Promise<Reservation | undefined>
   reservation: Reservation | null
   days: Day[]
   selectedDayId: number | null
   files?: TripFile[]
-  onFileUpload?: (fd: FormData) => Promise<void>
+  onFileUpload?: (fd: FormData) => Promise<unknown>
   onFileDelete?: (fileId: number) => Promise<void>
 }
 
@@ -138,7 +138,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       setForm({
         title: reservation.title || '',
         type,
-        status: reservation.status || 'pending',
+        status: reservation.status === 'confirmed' ? 'confirmed' : 'pending',
         start_day_id: reservation.day_id ?? '',
         end_day_id: reservation.end_day_id ?? '',
         departure_time: splitReservationDateTime(reservation.reservation_time).time ?? '',
@@ -284,15 +284,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       )
     : []
 
-  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 inputClass = 'w-full border border-edge rounded-[10px] px-[12px] py-[8px] text-[13px] font-[inherit] outline-none box-border text-content bg-surface-input'
+  const labelClass = 'block text-[11px] font-semibold text-content-faint mb-[5px] uppercase tracking-[0.03em]'
 
   const dayOptions = [
     { value: '', label: '—' },
@@ -315,10 +308,10 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       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)' }}>
+          <button type="button" onClick={onClose} className="text-content-muted" style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit' }}>
             {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 }}>
+          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim()} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 'none', 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>
@@ -328,16 +321,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
         {/* Type selector */}
         <div>
-          <label style={labelStyle}>{t('reservations.bookingType')}</label>
+          <label className={labelClass}>{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={{
+              <button key={value} type="button" onClick={() => set('type', value)} className={form.type === value ? 'bg-[var(--text-primary)] text-[var(--bg-primary)]' : 'bg-surface-card text-content-muted'} 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>
@@ -347,15 +338,15 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
         {/* Title */}
         <div>
-          <label style={labelStyle}>{t('reservations.titleLabel')} *</label>
+          <label className={labelClass}>{t('reservations.titleLabel')} *</label>
           <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
-            placeholder={t('reservations.titlePlaceholder')} style={inputStyle} />
+            placeholder={t('reservations.titlePlaceholder')} className={inputClass} />
         </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>
+            <label className={labelClass}>{t('reservations.meta.from')}</label>
             {form.type === 'flight' ? (
               <AirportSelect value={fromPick.airport || null} onChange={a => setFromPick({ airport: a || undefined })} />
             ) : (
@@ -363,7 +354,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             )}
           </div>
           <div>
-            <label style={labelStyle}>{t('reservations.meta.to')}</label>
+            <label className={labelClass}>{t('reservations.meta.to')}</label>
             {form.type === 'flight' ? (
               <AirportSelect value={toPick.airport || null} onChange={a => setToPick({ airport: a || undefined })} />
             ) : (
@@ -375,7 +366,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         {/* Departure row */}
         <div style={{ display: 'flex', gap: 8 }}>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <label style={labelStyle}>
+            <label className={labelClass}>
               {form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}
             </label>
             <CustomSelect
@@ -387,15 +378,15 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             />
           </div>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <label style={labelStyle}>
+            <label className={labelClass}>
               {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)' }}>
+              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
+              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
                 {fromPick.airport.tz}
               </div>
             </div>
@@ -405,7 +396,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         {/* Arrival row */}
         <div style={{ display: 'flex', gap: 8 }}>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <label style={labelStyle}>
+            <label className={labelClass}>
               {form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}
             </label>
             <CustomSelect
@@ -417,15 +408,15 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             />
           </div>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <label style={labelStyle}>
+            <label className={labelClass}>
               {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)' }}>
+              <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
+              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
                 {toPick.airport.tz}
               </div>
             </div>
@@ -436,14 +427,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         {form.type === 'flight' && (
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             <div>
-              <label style={labelStyle}>{t('reservations.meta.airline')}</label>
+              <label className={labelClass}>{t('reservations.meta.airline')}</label>
               <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
-                placeholder="Lufthansa" style={inputStyle} />
+                placeholder="Lufthansa" className={inputClass} />
             </div>
             <div>
-              <label style={labelStyle}>{t('reservations.meta.flightNumber')}</label>
+              <label className={labelClass}>{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} />
+                placeholder="LH 123" className={inputClass} />
             </div>
           </div>
         )}
@@ -452,19 +443,19 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         {form.type === 'train' && (
           <div className="grid grid-cols-3 gap-3">
             <div>
-              <label style={labelStyle}>{t('reservations.meta.trainNumber')}</label>
+              <label className={labelClass}>{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} />
+                placeholder="ICE 123" className={inputClass} />
             </div>
             <div>
-              <label style={labelStyle}>{t('reservations.meta.platform')}</label>
+              <label className={labelClass}>{t('reservations.meta.platform')}</label>
               <input type="text" value={form.meta_platform} onChange={e => set('meta_platform', e.target.value)}
-                placeholder="12" style={inputStyle} />
+                placeholder="12" className={inputClass} />
             </div>
             <div>
-              <label style={labelStyle}>{t('reservations.meta.seat')}</label>
+              <label className={labelClass}>{t('reservations.meta.seat')}</label>
               <input type="text" value={form.meta_seat} onChange={e => set('meta_seat', e.target.value)}
-                placeholder="42A" style={inputStyle} />
+                placeholder="42A" className={inputClass} />
             </div>
           </div>
         )}
@@ -472,12 +463,12 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         {/* Booking Code + Status */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
-            <label style={labelStyle}>{t('reservations.confirmationCode')}</label>
+            <label className={labelClass}>{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} />
+              placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
           </div>
           <div>
-            <label style={labelStyle}>{t('reservations.status')}</label>
+            <label className={labelClass}>{t('reservations.status')}</label>
             <CustomSelect
               value={form.status}
               onChange={value => set('status', value)}
@@ -492,70 +483,70 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
 
         {/* Notes */}
         <div>
-          <label style={labelStyle}>{t('reservations.notes')}</label>
+          <label className={labelClass}>{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 }} />
+            className={inputClass} style={{ resize: 'none', lineHeight: 1.5 }} />
         </div>
 
         {/* Files */}
         <div>
-          <label style={labelStyle}>{t('files.title')}</label>
+          <label className={labelClass}>{t('files.title')}</label>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
             {attachedFiles.map(f => (
-              <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <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>
+              <div key={f.id} className="bg-surface-secondary" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 8 }}>
+                <FileText size={12} className="text-content-muted" style={{ flexShrink: 0 }} />
+                <span className="text-content-secondary" style={{ flex: 1, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
+                <a href="#" onClick={(e) => { e.preventDefault(); openFile(f.url).catch(() => {}) }} className="text-content-faint" style={{ display: 'flex', flexShrink: 0, cursor: 'pointer' }}><ExternalLink size={11} /></a>
                 <button type="button" onClick={async () => {
                   if (f.reservation_id === reservation?.id) {
-                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch {}
+                    try { await apiClient.put(`/trips/${tripId}/files/${f.id}`, { reservation_id: null }) } catch { toast.error(t('reservations.toast.updateError')) }
                   }
                   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)
                     if (link) await apiClient.delete(`/trips/${tripId}/files/${f.id}/link/${link.id}`)
-                  } catch {}
+                  } catch { toast.error(t('reservations.toast.updateError')) }
                   setLinkedFileIds(prev => prev.filter(id => id !== f.id))
                   if (tripId) loadFiles(tripId)
-                }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
+                }} className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 0, flexShrink: 0 }}>
                   <X size={11} />
                 </button>
               </div>
             ))}
             {pendingFiles.map((f, i) => (
-              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'var(--bg-secondary)', borderRadius: 8 }}>
-                <FileText size={12} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-                <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
+              <div key={i} className="bg-surface-secondary" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 8 }}>
+                <FileText size={12} className="text-content-muted" style={{ flexShrink: 0 }} />
+                <span className="text-content-secondary" style={{ flex: 1, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
                 <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))}
-                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 0, flexShrink: 0 }}>
+                  className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 0, flexShrink: 0 }}>
                   <X size={11} />
                 </button>
               </div>
             ))}
             <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx,.txt,image/*" style={{ display: 'none' }} onChange={handleFileChange} />
             <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} style={{
+              {onFileUpload && <button type="button" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile} className="text-content-faint" style={{
                 display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
                 border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                fontSize: 11, color: 'var(--text-faint)', cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
+                fontSize: 11, cursor: uploadingFile ? 'default' : 'pointer', fontFamily: 'inherit',
               }}>
                 <Paperclip size={11} />
                 {uploadingFile ? t('reservations.uploading') : t('reservations.attachFile')}
               </button>}
               {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={{
+                  <button type="button" onClick={() => setShowFilePicker(v => !v)} className="text-content-faint" style={{
                     display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px',
                     border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-                    fontSize: 11, color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
+                    fontSize: 11, cursor: 'pointer', fontFamily: 'inherit',
                   }}>
                     <Link2 size={11} /> {t('reservations.linkExisting')}
                   </button>
                   {showFilePicker && (
-                    <div style={{
+                    <div className="bg-surface-card" style={{
                       position: 'absolute', bottom: '100%', left: 0, marginBottom: 4, zIndex: 50,
-                      background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 10,
+                      border: '1px solid var(--border-primary)', borderRadius: 10,
                       boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 220, maxHeight: 200, overflowY: 'auto',
                     }}>
                       {files.filter(f => !f.deleted_at && !attachedFiles.some(af => af.id === f.id)).map(f => (
@@ -565,16 +556,17 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
                             setLinkedFileIds(prev => [...prev, f.id])
                             setShowFilePicker(false)
                             if (tripId) loadFiles(tripId)
-                          } catch {}
+                          } catch { toast.error(t('reservations.toast.updateError')) }
                         }}
+                          className="text-content-secondary"
                           style={{
                             display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px',
                             background: 'none', border: 'none', cursor: 'pointer', fontSize: 12, fontFamily: 'inherit',
-                            color: 'var(--text-secondary)', borderRadius: 7, textAlign: 'left',
+                            borderRadius: 7, textAlign: 'left',
                           }}
                           onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
                           onMouseLeave={e => e.currentTarget.style.background = 'none'}>
-                          <FileText size={12} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
+                          <FileText size={12} className="text-content-faint" style={{ flexShrink: 0 }} />
                           <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
                         </button>
                       ))}
@@ -591,15 +583,15 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
           <>
             <div style={{ display: 'flex', gap: 8 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.price')}</label>
+                <label className={labelClass}>{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} />
+                  className={inputClass} />
               </div>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <label style={labelStyle}>{t('reservations.budgetCategory')}</label>
+                <label className={labelClass}>{t('reservations.budgetCategory')}</label>
                 <CustomSelect
                   value={form.budget_category}
                   onChange={v => set('budget_category', v)}
@@ -613,7 +605,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
               </div>
             </div>
             {form.price && parseFloat(form.price) > 0 && (
-              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: -4 }}>
+              <div className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
                 {t('reservations.budgetHint')}
               </div>
             )}

client/src/components/Planner/useDayDetail.ts

@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react'
+import { weatherApi, accommodationsApi } from '../../api/client'
+import { isDayInAccommodationRange } from '../../utils/dayOrder'
+
+/** Day-detail data + accommodation logic: weather load, accommodations list,
+ *  hotel picker form state and create/update/delete handlers. */
+export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: any, language: any, onAccommodationChange: any) {
+  const [weather, setWeather] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [accommodation, setAccommodation] = useState(null)
+  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
+  const [accommodations, setAccommodations] = useState([])
+  const [showHotelPicker, setShowHotelPicker] = useState(false)
+  const [hotelDayRange, setHotelDayRange] = useState({ start: day?.id, end: day?.id })
+  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
+  const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
+
+  useEffect(() => {
+    if (!day?.date || !lat || !lng) { setWeather(null); return }
+    setLoading(true)
+    weatherApi.getDetailed(lat, lng, day.date, language)
+      .then(data => setWeather(data.error ? null : data))
+      .catch(() => setWeather(null))
+      .finally(() => setLoading(false))
+  }, [day?.date, lat, lng, language])
+
+  useEffect(() => {
+    if (!tripId) return
+    accommodationsApi.list(tripId)
+      .then(data => {
+        setAccommodations(data.accommodations || [])
+        const allForDay = (data.accommodations || []).filter(a =>
+          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+        )
+        setDayAccommodations(allForDay)
+        setAccommodation(allForDay[0] || null)
+      })
+      .catch(() => {})
+  }, [tripId, day?.id])
+
+  useEffect(() => { if (day) setHotelDayRange({ start: day.id, end: day.id }) }, [day?.id])
+
+  const handleSelectPlace = (placeId) => {
+    setHotelForm(f => ({ ...f, place_id: placeId }))
+  }
+
+  const handleSaveAccommodation = async () => {
+    if (!hotelForm.place_id) return
+    try {
+      const data = await accommodationsApi.create(tripId, {
+        place_id: hotelForm.place_id,
+        start_day_id: hotelDayRange.start,
+        end_day_id: hotelDayRange.end,
+        check_in: hotelForm.check_in || null,
+        check_in_end: hotelForm.check_in_end || null,
+        check_out: hotelForm.check_out || null,
+        confirmation: hotelForm.confirmation || null,
+      })
+      const newAcc = data.accommodation
+      const updated = [...accommodations, newAcc]
+      setAccommodations(updated)
+      setAccommodation(newAcc)
+      setDayAccommodations(updated.filter(a =>
+        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+      ))
+      setShowHotelPicker(false)
+      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  const updateAccommodationField = async (field, value) => {
+    if (!accommodation) return
+    try {
+      const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
+      setAccommodation(data.accommodation)
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  const handleRemoveAccommodation = async () => {
+    if (!accommodation) return
+    try {
+      await accommodationsApi.delete(tripId, accommodation.id)
+      const updated = accommodations.filter(a => a.id !== accommodation.id)
+      setAccommodations(updated)
+      setDayAccommodations(updated.filter(a =>
+        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
+      ))
+      setAccommodation(null)
+      onAccommodationChange?.()
+    } catch {}
+  }
+
+  return {
+    weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
+    accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
+    hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
+    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
+    updateAccommodationField, handleRemoveAccommodation,
+  }
+}

client/src/components/Planner/usePlacesSidebar.ts

@@ -0,0 +1,235 @@
+import type React from 'react'
+import { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from 'react'
+import { Pencil, Trash2, ExternalLink, Navigation, CalendarDays } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { useContextMenu } from '../shared/ContextMenu'
+import { placesApi } from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
+import { useCanDo } from '../../store/permissionsStore'
+import type { Place, Category, Day, AssignmentsMap } from '../../types'
+
+export interface PlacesSidebarProps {
+  tripId: number
+  places: Place[]
+  categories: Category[]
+  assignments: AssignmentsMap
+  selectedDayId: number | null
+  selectedPlaceId: number | null
+  onPlaceClick: (placeId: number | null) => void
+  onAddPlace: () => void
+  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
+  onPlacesFilterChange?: (filter: string) => void
+  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
+  initialScrollTop?: number
+  onScrollTopChange?: (top: number) => void
+}
+
+/**
+ * Sidebar state: file/list import, search + filter + category multi-select,
+ * multi-select/bulk-delete and the mobile day-picker sheet. Kept in one hook so
+ * PlacesSidebar stays a thin layout shell over the sub-sections below.
+ */
+export function usePlacesSidebar(props: PlacesSidebarProps) {
+  const {
+    tripId, places, assignments, selectedDayId,
+    onCategoryFilterChange, onPlacesFilterChange, pushUndo, initialScrollTop, onScrollTopChange,
+  } = props
+  const { t } = useTranslation()
+  const toast = useToast()
+  const ctxMenu = useContextMenu()
+  const trip = useTripStore((s) => s.trip)
+  const loadTrip = useTripStore((s) => s.loadTrip)
+  const can = useCanDo()
+  const canEditPlaces = can('place_edit', trip)
+  const isNaverListImportEnabled = true
+
+  const [fileImportOpen, setFileImportOpen] = useState(false)
+  const [sidebarDropFile, setSidebarDropFile] = useState<File | null>(null)
+  const [sidebarDragOver, setSidebarDragOver] = useState(false)
+  const sidebarDragCounter = useRef(0)
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+  useLayoutEffect(() => {
+    if (scrollContainerRef.current && initialScrollTop) {
+      scrollContainerRef.current.scrollTop = initialScrollTop
+    }
+  }, [])
+
+  const handleSidebarDragEnter = (e: React.DragEvent) => {
+    if (!canEditPlaces) return
+    e.preventDefault()
+    sidebarDragCounter.current++
+    setSidebarDragOver(true)
+  }
+
+  const handleSidebarDragOver = (e: React.DragEvent) => {
+    if (!canEditPlaces) return
+    e.preventDefault()
+  }
+
+  const handleSidebarDragLeave = () => {
+    sidebarDragCounter.current--
+    if (sidebarDragCounter.current === 0) setSidebarDragOver(false)
+  }
+
+  const handleSidebarDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    sidebarDragCounter.current = 0
+    setSidebarDragOver(false)
+    if (!canEditPlaces) return
+    const f = e.dataTransfer.files[0]
+    if (!f) return
+    setSidebarDropFile(f)
+    setFileImportOpen(true)
+  }
+
+  const [listImportOpen, setListImportOpen] = useState(false)
+  const [listImportUrl, setListImportUrl] = useState('')
+  const [listImportLoading, setListImportLoading] = useState(false)
+  const [listImportProvider, setListImportProvider] = useState<'google' | 'naver'>('google')
+  const availableListImportProviders: Array<'google' | 'naver'> = isNaverListImportEnabled ? ['google', 'naver'] : ['google']
+  const hasMultipleListImportProviders = availableListImportProviders.length > 1
+
+  useEffect(() => {
+    if (!isNaverListImportEnabled && listImportProvider === 'naver') {
+      setListImportProvider('google')
+    }
+  }, [isNaverListImportEnabled, listImportProvider])
+
+  const handleListImport = async () => {
+    if (!listImportUrl.trim()) return
+    setListImportLoading(true)
+    const provider = listImportProvider === 'naver' && isNaverListImportEnabled ? 'naver' : 'google'
+    try {
+      const result = provider === 'google'
+        ? await placesApi.importGoogleList(tripId, listImportUrl.trim())
+        : await placesApi.importNaverList(tripId, listImportUrl.trim())
+      await loadTrip(tripId)
+      if (result.count === 0 && result.skipped > 0) {
+        toast.warning(t('places.importAllSkipped'))
+      } else {
+        toast.success(t(provider === 'google' ? 'places.googleListImported' : 'places.naverListImported', { count: result.count, list: result.listName }))
+      }
+      setListImportOpen(false)
+      setListImportUrl('')
+      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 () => {
+          try { await placesApi.bulkDelete(tripId, importedIds) } catch {}
+          await loadTrip(tripId)
+        })
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.error || t(provider === 'google' ? 'places.googleListError' : 'places.naverListError'))
+    } finally {
+      setListImportLoading(false)
+    }
+  }
+
+  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 => {
+      const next = new Set(prev)
+      if (next.has(catId)) next.delete(catId); else next.add(catId)
+      onCategoryFilterChange?.(next)
+      return next
+    })
+  }
+  const [dayPickerPlace, setDayPickerPlace] = useState(null)
+  const [catDropOpen, setCatDropOpen] = useState(false)
+  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
+      } 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
+  }), [places, filter, categoryFilters, search, plannedIds])
+
+  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: () => props.onEditPlace(place) },
+      selDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => props.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: () => props.onDeletePlace(place.id) },
+    ])
+  }, [ctxMenu.open, canEditPlaces, t, props.onEditPlace, props.onAssignToDay, props.onDeletePlace])
+
+  return {
+    ...props,
+    t, toast, ctxMenu, trip, canEditPlaces,
+    fileImportOpen, setFileImportOpen, sidebarDropFile, setSidebarDropFile,
+    sidebarDragOver, handleSidebarDragEnter, handleSidebarDragOver, handleSidebarDragLeave, handleSidebarDrop,
+    scrollContainerRef, onScrollTopChange,
+    listImportOpen, setListImportOpen, listImportUrl, setListImportUrl,
+    listImportLoading, listImportProvider, setListImportProvider,
+    availableListImportProviders, hasMultipleListImportProviders, handleListImport,
+    search, setSearch, filter, setFilter, categoryFilters, setCategoryFiltersLocal,
+    selectMode, setSelectMode, selectedIds, setSelectedIds, pendingDeleteIds, setPendingDeleteIds,
+    exitSelectMode, toggleSelected, toggleCategoryFilter, dayPickerPlace, setDayPickerPlace,
+    catDropOpen, setCatDropOpen, mobileShowDays, setMobileShowDays,
+    hasTracks, plannedIds, filtered, isAssignedToSelectedDay, inDaySet, openContextMenu,
+  }
+}
+
+export type SidebarState = ReturnType<typeof usePlacesSidebar>